@carbon/styles 1.69.0 → 1.70.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -48,6 +48,14 @@
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "@ibm/plex": "6.0.0-next.6",
+    "@ibm/plex-mono": "0.0.3-alpha.0",
+    "@ibm/plex-sans": "0.0.3-alpha.0",
+    "@ibm/plex-sans-arabic": "0.0.3-alpha.0",
+    "@ibm/plex-sans-devanagari": "0.0.3-alpha.0",
+    "@ibm/plex-sans-hebrew": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0",
+    "@ibm/plex-serif": "0.0.3-alpha.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
@@ -67,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "aa67ac9b298f921c558984fa6abbb90c33e9ef93"
+  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
 }

package/scss/__tests__/__snapshots__/config-test.js.snap

@@ -41,5 +41,6 @@ Object {
   "prefix": "cds",
   "use-akamai-cdn": false,
   "use-flexbox-grid": false,
+  "use-per-family-plex": false,
 }
 `;

package/scss/_config.scss

@@ -43,6 +43,12 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
+/// Specify if the new per-family plex packages (e.g. @ibm/plex-sans) should be used
+/// @access public
+/// @type Boolean
+/// @group config
+$use-per-family-plex: false !default;
+
 /// Specify if IBM Plex should be provided by the IBM Akamai CDN
 /// @access public
 /// @type String

package/scss/_reset.scss

@@ -99,6 +99,7 @@
     border: 0;
     margin: 0;
     font: inherit;
+    font-feature-settings: 'liga' 1;
     font-size: 100%;
     vertical-align: baseline;
   }

package/scss/components/checkbox/_checkbox.scss

@@ -229,6 +229,7 @@
   .#{$prefix}--checkbox__validation-msg {
     display: none;
     align-items: flex-start;
+    inline-size: 100%;
     margin-block-start: $spacing-02;
   }
 
@@ -366,12 +367,36 @@
     transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
   }
 
-  // Slug styles
+  //-----------------------------------------------
+  // Decorator
+  //-----------------------------------------------
+  .#{$prefix}--checkbox-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-wrapper--decorator .#{$prefix}--checkbox-label-text {
+    display: flex;
+  }
+  // Remove v12
   .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label,
   .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text {
     display: flex;
   }
 
+  .#{$prefix}--checkbox-group--decorator
+    legend.#{$prefix}--label
+    .#{$prefix}--checkbox-group-inner--decorator
+    > *,
+  .#{$prefix}--checkbox-wrapper--decorator
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--checkbox-wrapper-inner--decorator
+    > * {
+    margin-inline-start: $spacing-03;
+  }
+  // Remove v12
+  .#{$prefix}--checkbox-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label,
   .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label .#{$prefix}--slug,
   .#{$prefix}--checkbox-wrapper--slug
     .#{$prefix}--checkbox-label-text
@@ -379,6 +404,16 @@
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--checkbox-wrapper--decorator
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
+  // Remove v12
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--checkbox-wrapper--slug
     .#{$prefix}--checkbox-label-text
     .#{$prefix}--slug__button--inline {
@@ -386,7 +421,9 @@
     margin-block-start: convert.to-rem(-1px);
   }
 
-  // horizontal checkbox group
+  //-----------------------------------------------
+  // Horizontal group
+  //-----------------------------------------------
   .#{$prefix}--checkbox-group--horizontal {
     position: relative;
     display: flex;

package/scss/components/data-table/_data-table.scss

@@ -1040,22 +1040,29 @@
     @include ai-table-gradient();
   }
 
+  .#{$prefix}--table-column-slug .#{$prefix}--ai-label,
   .#{$prefix}--table-column-slug .#{$prefix}--slug {
     position: absolute;
     z-index: 2;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--data-table--xl
+    .#{$prefix}--table-column-slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug {
     transform: translateY(1px);
   }
 
-  // Slug inside header styles
+  // AILabel inside header styles
   th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug {
     display: flex;
     align-items: center;
   }
 
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
+    .#{$prefix}--ai-label,
   th
     .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
     .#{$prefix}--slug {

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -243,12 +243,12 @@
     margin-block-start: convert.to-rem(13px);
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
     margin-inline: auto convert.to-rem(8px);
   }
-
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--ai-label,
   .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {
     margin-inline-end: convert.to-rem(8px);
   }

package/scss/components/date-picker/_date-picker.scss

@@ -190,7 +190,11 @@
     inline-size: convert.to-rem(143.5px);
   }
 
-  // Styles for `Slug` rendered inside `DatePickerInput`
+  // Styles for `AILabel` rendered inside `DatePickerInput`
+  .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker-input-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--ai-label,
   .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
@@ -198,8 +202,32 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker-input-inner-wrapper--decorator:not(
+      :has(.#{$prefix}--ai-label)
+    )
+    > * {
+    block-size: 1rem;
+  }
+
+  .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input:has(
+      ~ .#{$prefix}--date-picker-input-inner-wrapper--decorator
+        .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--date-picker-input-inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
   .#{$prefix}--date-picker-input__wrapper--slug
-    .#{$prefix}--date-picker__input:not(:has(~ .#{$prefix}--slug--revert)) {
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;

package/scss/components/dropdown/_dropdown.scss

@@ -29,6 +29,10 @@
     grid-gap: 0 convert.to-rem(24px);
     grid-template: auto / auto min-content;
 
+    &:has(.#{$prefix}--label.#{$prefix}--visually-hidden) {
+      grid-template: auto / auto;
+    }
+
     .#{$prefix}--label {
       @include type-style('body-compact-01');
     }

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -400,6 +400,9 @@
   }
 
   // Slug styles
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--slug {
@@ -407,14 +410,27 @@
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug:not(
-      :has(.#{$prefix}--slug--revert)
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug:not(
+    .#{$prefix}--date-picker-input__wrapper--slug:has(
+      .#{$prefix}--ai-label
+    ):not(:has(.#{$prefix}--ai-label--revert))
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug:has(.#{$prefix}--slug):not(
       :has(.#{$prefix}--slug--revert)
     )
     .#{$prefix}--date-picker__input:not(

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -283,12 +283,37 @@
     inset-inline-start: $spacing-05;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__wrapper--decorator-inner
+    > *,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__wrapper--decorator-inner
+    > *,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--slug,
@@ -298,6 +323,12 @@
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    button.#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    button.#{$prefix}--list-box__field,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     button.#{$prefix}--list-box__field,
@@ -307,6 +338,12 @@
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
@@ -316,6 +353,44 @@
     padding-inline-end: convert.to-rem(88px);
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--list-box__wrapper--decorator-inner
+    > *,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--list-box__wrapper--decorator-inner
+    > *,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(
@@ -331,6 +406,8 @@
     inset-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
     padding-inline-end: $spacing-12;
@@ -364,7 +441,21 @@
     inset-inline-end: $spacing-04;
   }
 
-  // remove slug divider when element is invalid and fluid
+  // remove ai-label divider when element is invalid and fluid
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--list-box__wrapper--decorator-inner
+    > *::before,
+  .#{$prefix}--list-box__wrapper--decorator
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__wrapper--decorator-inner
+    > *::before,
+  .#{$prefix}--list-box__wrapper--fluid.#{$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--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--slug::before,

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -277,13 +277,34 @@
     background-color: transparent;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(43px);
   }
 
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--decorator.#{$prefix}--number__input-wrapper--warning
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    .#{$prefix}--ai-label,
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--slug,
@@ -293,6 +314,15 @@
     inset-inline-end: convert.to-rem(88px);
   }
 
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--decorator
+    input,
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--decorator
+    input[data-invalid],
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--decorator.#{$prefix}--number__input-wrapper--warning
+    input,
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--slug
     input,
@@ -306,7 +336,15 @@
   }
 
   .#{$prefix}--number-input--fluid
-    .#{$prefix}--number__input-wrapper--slug:not(
+    .#{$prefix}--number__input-wrapper--decorator:has(
+      .#{$prefix}--ai-label
+    ):not(:has(.#{$prefix}--ai-label--revert)),
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--slug):not(
       :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;

package/scss/components/fluid-select/_fluid-select.scss

@@ -200,7 +200,8 @@
     fill: $icon-disabled;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
     inset-inline-end: $spacing-08;
@@ -212,7 +213,10 @@
     padding-inline-end: $spacing-10;
   }
 
-  // remove slug divider when element is invalid and fluid
+  // remove ai-label divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--ai-label::before,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--slug::before {

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -218,14 +218,45 @@
     inline-size: 80%;
   }
 
-  // Slug styles
+  // AILabel styles
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area__wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+    .#{$prefix}--text-area__wrapper--decorator: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--fluid
+    .#{$prefix}--text-area__wrapper--slug:has(.#{$prefix}--ai-label):not(
+      :has(.#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug:has(.#{$prefix}--slug):not(
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper--slug
     .#{$prefix}--text-area--invalid
@@ -238,6 +269,9 @@
   }
 
   // Remove ai border when invalid
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--decorator
+    .#{$prefix}--text-area--invalid,
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper--slug
     .#{$prefix}--text-area--invalid {

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -205,13 +205,34 @@
     inset-inline-start: $spacing-05;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--ai-label,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input__field-wrapper--slug
     .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
   }
 
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--invalid
+    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--warning
+    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+    > *,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--invalid
+    ~ .#{$prefix}--ai-label,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--warning
+    ~ .#{$prefix}--ai-label,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input--invalid
     ~ .#{$prefix}--slug,
@@ -221,6 +242,15 @@
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input--invalid,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--decorator
+    .#{$prefix}--text-input--warning,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input__field-wrapper--slug
     .#{$prefix}--text-input,

package/scss/components/fluid-time-picker/_fluid-time-picker.scss

@@ -54,6 +54,12 @@
     transition: opacity $duration-fast-01 motion(standard, productive);
   }
 
+  .#{$prefix}--select--readonly .#{$prefix}--select-input__wrapper::before {
+    background-color: $border-subtle !important; /* stylelint-disable-line declaration-no-important */
+    opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+    transition: none;
+  }
+
   .#{$prefix}--time-picker--fluid__wrapper
     .#{$prefix}--select-input__wrapper::after {
     inset-inline-end: 0;