@carbon/styles 1.69.0 → 1.70.0

package/scss/components/tag/_tag.scss

@@ -246,6 +246,14 @@
     );
   }
 
+  .#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--high-contrast:not(.#{$prefix}--tag--operational)
+    .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
   .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational):not(span):not(
       [disabled]
     ) {
@@ -380,12 +388,17 @@
     }
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--tag .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline {
     color: currentColor;
     margin-inline-start: convert.to-rem(1px);
   }
 
+  .#{$prefix}--tag
+    .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline
+    .#{$prefix}--ai-label__text::before,
   .#{$prefix}--tag
     .#{$prefix}--slug
     .#{$prefix}--slug__button--inline
@@ -393,14 +406,26 @@
     background-color: currentColor;
   }
 
+  .#{$prefix}--tag
+    .#{$prefix}--ai-label
+    .#{$prefix}--ai-label__button--inline:hover,
   .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--tag__decorator > *,
+  .#{$prefix}--tag--filter .#{$prefix}--ai-label,
   .#{$prefix}--tag--filter .#{$prefix}--slug {
     min-inline-size: convert.to-rem(32.14px);
   }
 
+  // Decorator styles
+  .#{$prefix}--tag
+    .#{$prefix}--tag__decorator:not(:has(.#{$prefix}--ai-label)) {
+    block-size: 1rem;
+    text-align: center;
+  }
+
   // Windows HCM fix
 
   .#{$prefix}--tag {

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,19 +387,32 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
-  // Slug styles
+  // AILabel styles
+  .#{$prefix}--tile > .#{$prefix}--tile--inner-decorator > *,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--tile--inner-decorator > *,
+  .#{$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 {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon {
     position: absolute;
     inset-block-start: $spacing-05;
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$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}--tile--inner-decorator
+    > *,
+  .#{$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,15 +426,28 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     }
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$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}--tile--inner-decorator
+    > *,
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--ai-label-icon
+    ).#{$prefix}--tile,
+  .#{$prefix}--tile--decorator:has(.#{$prefix}--ai-label).#{$prefix}--tile,
   .#{$prefix}--tile--slug.#{$prefix}--tile {
     @include ai-popover-gradient('default', 0, 'layer');
 
@@ -431,10 +457,16 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 8px 0 $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--expandable:hover,
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
     @include ai-popover-gradient('default', 0, 'layer');
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
@@ -449,6 +481,12 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     transition: opacity $duration-fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
@@ -458,17 +496,25 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 10px 2px $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable:hover::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
     opacity: 1;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:focus,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable:focus,
+  .#{$prefix}--tile-input:focus + .#{$prefix}--tile--decorator.#{$prefix}--tile,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus,
   .#{$prefix}--tile-input:focus + .#{$prefix}--tile--slug.#{$prefix}--tile {
     outline-offset: -1px;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
@@ -477,18 +523,27 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 8px 0 $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:hover::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {
     opacity: 0;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--is-selected::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
     opacity: 1;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--inner-decorator
+    ).#{$prefix}--tile--is-selected,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
     border-color: $border-inverse;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
@@ -497,42 +552,72 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     cursor: pointer;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--is-selected
+    .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--tile-content,
   .#{$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--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile--inner-decorator
+    > *:has(> .#{$prefix}--popover--open),
+  .#{$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--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
+  .#{$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}--tile--inner-decorator > * > .#{$prefix}--popover--open
+    ),
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--ai-label > .#{$prefix}--popover--open
+    ),
   .#{$prefix}--tile--expandable:has(
       .#{$prefix}--slug > .#{$prefix}--popover--open
     ) {
     overflow: visible;
   }
 
-  // To Do: Replace svg overrides with actual AI icon
-  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon rect {
     stroke: $icon-primary;
   }
 
-  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon path {
     fill: $icon-primary;
   }
 
   // Tile with slug and rounded corners
+  .#{$prefix}--tile--decorator-rounded,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug-rounded,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
@@ -540,6 +625,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     border-radius: $spacing-03;
   }
 
+  .#{$prefix}--tile--decorator-rounded .#{$prefix}--tile__chevron,
   .#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
     border-end-end-radius: $spacing-03;
   }