@carbon/styles 1.69.0 → 1.70.0-rc.0

package/scss/components/list-box/_list-box.scss

@@ -51,6 +51,10 @@ $list-box-menu-width: convert.to-rem(300px);
 @mixin list-box {
   // The overall container element for a `list-box`. Has two variants,
   // `disabled` and `inline`.
+  .#{$prefix}--list-box__wrapper {
+    display: block;
+  }
+
   .#{$prefix}--list-box__wrapper--inline {
     display: inline-grid;
     align-items: center;
@@ -885,7 +889,11 @@ $list-box-menu-width: convert.to-rem(300px);
     text-overflow: ellipsis;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -894,6 +902,14 @@ $list-box-menu-width: convert.to-rem(300px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *::after,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
     position: absolute;
@@ -903,42 +919,89 @@ $list-box-menu-width: convert.to-rem(300px);
     inline-size: convert.to-rem(1px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after {
     display: block;
+    inset-block-start: 0;
     inset-inline-end: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    .#{$prefix}--ai-label--revert::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--ai-label--revert::after,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug--revert::after {
     inset-block-start: convert.to-rem(8px);
     inset-inline-end: convert.to-rem(-1px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box:has(
+      .#{$prefix}--list-box__inner-wrapper--decorator .#{$prefix}--ai-label
+    ):not(
+      :has(
+          .#{$prefix}--list-box__inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
   .#{$prefix}--list-box__wrapper--slug
-    .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
+    .#{$prefix}--list-box:has(.#{$prefix}--slug):not(
+      :has(.#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box
+    input[role='combobox'],
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box
     input[role='combobox'] {
     border-block-end-color: transparent;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--decorator .#{$prefix}--text-input--empty,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input--empty {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
     padding-inline-end: $spacing-12;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--text-input--empty,
@@ -954,6 +1017,12 @@ $list-box-menu-width: convert.to-rem(300px);
     padding-inline-end: $spacing-12;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
@@ -963,6 +1032,16 @@ $list-box-menu-width: convert.to-rem(300px);
     padding-inline-end: convert.to-rem(141px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon.#{$prefix}--list-box__invalid-icon--warning,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--text-input--empty
@@ -976,6 +1055,24 @@ $list-box-menu-width: convert.to-rem(300px);
     inset-inline-end: convert.to-rem(83px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    > *::before,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    > *::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--slug::before,
@@ -985,6 +1082,27 @@ $list-box-menu-width: convert.to-rem(300px);
     display: block;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
     ~ .#{$prefix}--slug,
@@ -995,6 +1113,14 @@ $list-box-menu-width: convert.to-rem(300px);
     inset-inline-end: calc($spacing-10 + 18px);
   }
 
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
@@ -1049,11 +1175,15 @@ $list-box-menu-width: convert.to-rem(300px);
     }
   }
 
+  .#{$prefix}--list-box__wrapper--decorator:has(.#{$prefix}--multi-select)
+    .#{$prefix}--list-box__menu-icon,
   .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--multi-select)
     .#{$prefix}--list-box__menu-icon {
     inset-inline-end: $spacing-04;
   }
 
+  .#{$prefix}--list-box__wrapper--decorator:has(.#{$prefix}--dropdown)
+    .#{$prefix}--list-box__menu-icon,
   .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
     inset-inline-end: $spacing-04;

package/scss/components/modal/_modal.scss

@@ -403,6 +403,14 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  .#{$prefix}--modal-header
+    > .#{$prefix}--ai-label:has(+ .#{$prefix}--modal-close-button),
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal-close-button
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-container-body
+    > .#{$prefix}--ai-label,
   .#{$prefix}--modal-header
     > .#{$prefix}--slug:has(+ .#{$prefix}--modal-close-button),
   .#{$prefix}--modal-header

package/scss/components/number-input/_number-input.scss

@@ -426,7 +426,11 @@
     background-color: $border-subtle;
   }
 
-  // Styles for `Slug` rendered inside `NumberInput`
+  // Styles for `AILabel` rendered inside `NumberInput`
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -434,6 +438,22 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator:not(
+      :has(.#{$prefix}--ai-label)
+    )
+    > * {
+    block-size: 1rem;
+  }
+
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before,
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn::before,
@@ -445,7 +465,10 @@
     content: '';
     inline-size: convert.to-rem(1px);
   }
-
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-16px);
@@ -456,12 +479,16 @@
     inset-inline-end: 0;
   }
 
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__control-btn::before,
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn::before {
     display: block;
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__control-btn:focus::before,
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn:focus::before {
     display: none;
@@ -473,6 +500,8 @@
     inset-inline-end: 0;
   }
 
+  .#{$prefix}--number__input-wrapper:has(.#{$prefix}--number__control-btn:hover)
+    ~ .#{$prefix}--number__input-wrapper--decorator::after,
   .#{$prefix}--number__input-wrapper:has(.#{$prefix}--number__control-btn:hover)
     ~ .#{$prefix}--number__input-wrapper--slug::after {
     display: none;
@@ -483,15 +512,31 @@
     display: none;
   }
 
+  .#{$prefix}--number__input-wrapper--decorator .#{$prefix}--number__invalid,
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__invalid {
     inset-inline-end: $spacing-13 - $spacing-05;
   }
 
+  .#{$prefix}--number__input-wrapper--decorator:has(
+      .#{$prefix}--number__invalid
+    )
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
     .#{$prefix}--slug::before {
     display: block;
   }
 
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--decorator
+    input[data-invalid],
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--decorator.#{$prefix}--number__input-wrapper--warning
+    input,
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--slug
     input[data-invalid],
@@ -501,8 +546,24 @@
     padding-inline-end: convert.to-rem(144px);
   }
 
+  .#{$prefix}--number__input-wrapper--decorator
+    input[type='number']:has(
+      ~ .#{$prefix}--number__input-inner-wrapper--decorator
+        .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--number__input-inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='number']:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
   .#{$prefix}--number__input-wrapper--slug
-    input[type='number']:not(:has(~ .#{$prefix}--slug--revert)),
+    input[type='number']:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ),
   .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
@@ -553,10 +614,13 @@
   display: none;
 }
 
+.#{$prefix}--number__input-wrapper--decorator .#{$prefix}--number__rule-divider,
 .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__rule-divider {
   display: none;
 }
 
+.#{$prefix}--number__input-wrapper--decorator
+  .#{$prefix}--number__control-btn:hover,
 .#{$prefix}--number__input-wrapper--slug
   .#{$prefix}--number__control-btn:hover {
   box-shadow: 0 -1px 0 $ai-border-strong inset;

package/scss/components/radio-button/_radio-button.scss

@@ -288,13 +288,19 @@ $radio-border-width: 1px !default;
     margin-inline: $spacing-03 0;
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text {
     display: flex;
   }
 
+  .#{$prefix}--radio-button-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--ai-label,
   .#{$prefix}--radio-button-group--slug
     legend.#{$prefix}--label
     .#{$prefix}--slug,
@@ -304,6 +310,9 @@ $radio-border-width: 1px !default;
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text
     .#{$prefix}--slug__button--inline {

package/scss/components/select/_select.scss

@@ -279,10 +279,11 @@
     display: none;
   }
 
-  // Slug styles
+  // AILabel styles
 
   $divider-width: 1px;
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -291,6 +292,8 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::after,
   .#{$prefix}--select--slug .#{$prefix}--slug::before {
     position: absolute;
@@ -300,33 +303,50 @@
     inline-size: convert.to-rem(1px);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--select--slug .#{$prefix}--slug::after {
     display: block;
     inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--ai-label--revert::after,
   .#{$prefix}--select--slug .#{$prefix}--slug--revert::after {
     inset-block-start: convert.to-rem(8px);
     inset-inline-end: convert.to-rem(-1px);
   }
 
   .#{$prefix}--select--slug
-    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
   }
 
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
-    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     padding-inline-end: $spacing-12;
   }
 
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--slug::before {
     display: block;