@carbon/styles 1.54.0 → 1.55.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.54.0",
+  "version": "1.55.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4bdd6802dd612af764ef76162141333d35bd84f4"
+  "gitHead": "600138750484cf814dc1b927ed4c277301b5290a"
 }

package/scss/components/combo-box/_combo-box.scss

@@ -8,6 +8,7 @@
 @use '../list-box';
 @use '../../config' as *;
 @use '../../theme' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 
 /// Combo box styles
@@ -36,6 +37,12 @@
     @include focus-outline('outline');
   }
 
+  .#{$prefix}--list-box--expanded
+    .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+    outline-offset: convert.to-rem(-1px);
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,

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

@@ -1003,7 +1003,7 @@
   .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover,
   tr.#{$prefix}--data-table--slug-row:hover
     + .#{$prefix}--expandable-row[data-child-row],
-  tr.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
     + .#{$prefix}--expandable-row[data-child-row]:hover,
   tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row {

package/scss/components/dropdown/_dropdown.scss

@@ -93,6 +93,10 @@
     border-block-end-color: $border-subtle;
   }
 
+  .#{$prefix}--dropdown--open .cds--list-box__field {
+    outline: none;
+  }
+
   .#{$prefix}--dropdown--invalid {
     @include focus-outline('invalid');
 

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

@@ -69,4 +69,11 @@
     + .#{$prefix}--list-box__invalid-icon {
     inset-inline-end: 1rem;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    :not(.#{$prefix}--list-box--up)
+    .#{$prefix}--combo-box
+    .#{$prefix}--list-box__menu {
+    inset-block-start: calc(100% + convert.to-rem(1px));
+  }
 }

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

@@ -114,15 +114,20 @@
     outline-offset: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
+      .#{$prefix}--list-box--expanded
+    ) {
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field:focus {
     outline: none;
     outline-offset: 0;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid
-    :not(.#{$prefix}--list-box--up)
+  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box--up)
     .#{$prefix}--list-box__menu {
-    inset-block-start: calc(100% + convert.to-rem(1px));
+    inset-block-start: calc(100%);
   }
 
   // Invalid / Warning styles
@@ -235,8 +240,7 @@
   }
 
   // direction - top
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--up
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box--up
     .#{$prefix}--list-box__menu {
     inset-block-end: $spacing-10;
   }

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

@@ -12,6 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../multiselect';
 @use '../fluid-list-box';
@@ -49,4 +50,11 @@
     .#{$prefix}--list-box__field {
     align-items: baseline;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--multi-select--filterable__wrapper:not(
+      .#{$prefix}--list-box--up
+    )
+    .#{$prefix}--list-box__menu {
+    inset-block-start: calc(100% + convert.to-rem(1px));
+  }
 }

package/scss/components/modal/_modal.scss

@@ -473,12 +473,6 @@
       0 24px 40px -24px $ai-drop-shadow;
   }
 
-  .#{$prefix}--modal--slug .#{$prefix}--slug {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-  }
-
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content {
     mask-image: linear-gradient(
@@ -500,6 +494,8 @@
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container-body
     > .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: convert.to-rem(10px);
     inset-inline-end: convert.to-rem(48px);
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -93,6 +93,17 @@
     @include focus-outline('outline');
   }
 
+  .#{$prefix}--multi-select.#{$prefix}--list-box--expanded
+    .#{$prefix}--list-box__field--wrapper:has(
+      button[aria-activedescendant]:not([aria-activedescendant=''])
+    ),
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--expanded:has(
+      input[aria-activedescendant]:not([aria-activedescendant=''])
+    ) {
+    outline-offset: convert.to-rem(-1px);
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
     .#{$prefix}--text-input,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--selected

package/scss/components/select/_select.scss

@@ -281,13 +281,36 @@
   }
 
   // Slug styles
+
+  $divider-width: 1px;
+
   .#{$prefix}--select--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 8px + $divider-width);
+    margin-block-start: convert.to-rem(0.5px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--slug::after,
+  .#{$prefix}--select--slug .#{$prefix}--slug::before {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--slug::before {
+    display: none;
+    inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--slug::after {
+    display: block;
+    inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   .#{$prefix}--select--slug
     .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
@@ -295,16 +318,25 @@
     padding-inline-end: $spacing-10;
   }
 
-  .#{$prefix}--select--slug.#{$prefix}--select--invalid
-    .#{$prefix}--select-input,
-  .#{$prefix}--select--slug.#{$prefix}--select--warning
-    .#{$prefix}--select-input {
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     padding-inline-end: $spacing-12;
   }
 
-  .#{$prefix}--select--slug.#{$prefix}--select--invalid .#{$prefix}--slug,
-  .#{$prefix}--select--slug.#{$prefix}--select--warning .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--slug::before {
+    display: block;
+  }
+
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    inset-inline-end: $spacing-11;
   }
 
   // Windows HCM fix

package/scss/components/slug/_slug.scss

@@ -264,7 +264,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -279,33 +279,49 @@ $sizes: (
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::before,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -326,33 +342,49 @@ $sizes: (
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::after,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start,
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-right,
       .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end,
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-top,
       .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end,
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-top,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -370,16 +402,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -404,7 +440,9 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--slug-content--with-actions
@@ -417,16 +455,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-bottom,
-      .#{$prefix}--popover--right-top
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-bottom,
-      .#{$prefix}--popover--right-top
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-start,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -449,16 +491,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-left,
-      .#{$prefix}--popover--bottom-right
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-left,
-      .#{$prefix}--popover--bottom-right
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-start,
+      .#{$prefix}--popover--bottom-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -483,16 +529,20 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--left-top
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--left-top
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-start,
+      .#{$prefix}--popover--left-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -514,15 +564,19 @@ $sizes: (
   .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret::after,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
-      .#{$prefix}--popover--right-bottom
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -535,20 +589,28 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
@@ -564,20 +626,28 @@ $sizes: (
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-end,
+      .#{$prefix}--popover--top-start
     )
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--left-end,
+      .#{$prefix}--popover--right-end,
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
-      .#{$prefix}--popover--top-left
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--top-start,
+      .#{$prefix}--popover--top-end
     )
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-content
@@ -596,7 +666,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
     // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
-    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    .#{$prefix}--slug
     > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--right