@carbon/styles 1.71.0 → 1.72.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
   "dependencies": {
     "@carbon/colors": "^11.28.0",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/grid": "^11.29.0",
+    "@carbon/grid": "^11.30.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/themes": "^11.43.0",
-    "@carbon/type": "^11.33.0",
+    "@carbon/themes": "^11.44.0",
+    "@carbon/type": "^11.34.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4e89908b4bbb6b1c34543cb56f551f242a27d609"
+  "gitHead": "97fc2e65d5d78f3bc191f036cb669b072db1d85f"
 }

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

@@ -941,59 +941,67 @@
   // -------------------
   // Slug styles
   // -------------------
-  .#{$prefix}--data-table .#{$prefix}--table-column-slug {
+  .#{$prefix}--data-table .#{$prefix}--table-column-slug,
+  .#{$prefix}--data-table .#{$prefix}--table-column-decorator {
     inline-size: $spacing-05;
     padding-inline-end: 0;
   }
 
   tr.#{$prefix}--data-table--slug-row,
-  tr.#{$prefix}--data-table--slug-row + .#{$prefix}--expandable-row {
+  tr.#{$prefix}--data-table--slug-row + .#{$prefix}--expandable-row,
+  tr.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--ai-label-row + .#{$prefix}--expandable-row {
     @include ai-table-gradient();
 
     background-attachment: fixed;
   }
 
-  .#{$prefix}--data-table--slug-row {
+  .#{$prefix}--data-table--slug-row,
+  .#{$prefix}--data-table--ai-label-row {
     box-shadow: inset 1px 0 $ai-border-strong;
   }
 
   // Remove table cell backgrounds that are overriding gradient background on row
-  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+  .#{$prefix}--data-table
+    tbody
+    tr.#{$prefix}--data-table--ai-label-row:hover
+    td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
     + .#{$prefix}--expandable-row[data-child-row]
     td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
     + .#{$prefix}--expandable-row[data-child-row]:hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover > td,
-  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
+    > td,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row
     + tr.#{$prefix}--expandable-row[data-child-row]
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td:first-of-type,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
       .#{$prefix}--expandable-row
     ):hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     + tr[data-child-row]
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     > td:first-of-type {
     background-color: transparent;
   }
 
-  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover,
-  tr.#{$prefix}--data-table--slug-row:hover
+  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--ai-label-row:hover,
+  tr.#{$prefix}--data-table--ai-label-row:hover
     + .#{$prefix}--expandable-row[data-child-row],
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-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 {
+  tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row {
     @include ai-table-gradient('hover');
 
     background-attachment: fixed;
@@ -1002,22 +1010,31 @@
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
+    + .#{$prefix}--expandable-row,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row,
+  .#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row
     + .#{$prefix}--expandable-row {
     @include ai-table-gradient('selected');
 
     background-attachment: fixed;
   }
 
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected:hover td,
-  tbody tr.#{$prefix}--data-table--slug-row:hover td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected:hover
+    td,
+  tbody tr.#{$prefix}--data-table--ai-label-row:hover td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
     ):not(.#{$prefix}--table-column-slug) {
     border-block-end-color: $border-subtle;
   }
 
+  tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
+    > td:not(.#{$prefix}--table-expand):not(
+      .#{$prefix}--table-column-checkbox
+    ):not(.#{$prefix}--table-column-slug),
   tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
     > td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
@@ -1026,6 +1043,10 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--decoratorß-row.#{$prefix}--expandable-row:hover
     td:first-of-type {
     border-block-end: 1px solid transparent;
   }
@@ -1034,14 +1055,20 @@
     thead
     th.#{$prefix}--table-sort__header--slug
     .#{$prefix}--table-sort,
+  .#{$prefix}--data-table thead th:has(> .#{$prefix}--table-header-label--slug),
+  .#{$prefix}--data-table
+    thead
+    th.#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-sort,
   .#{$prefix}--data-table
     thead
-    th:has(> .#{$prefix}--table-header-label--slug) {
+    th:has(> .#{$prefix}--table-header-label--ai-label) {
     @include ai-table-gradient();
   }
 
   .#{$prefix}--table-column-slug .#{$prefix}--ai-label,
-  .#{$prefix}--table-column-slug .#{$prefix}--slug {
+  .#{$prefix}--table-column-slug .#{$prefix}--slug,
+  .#{$prefix}--table-column-decorator .#{$prefix}--decorator {
     position: absolute;
     z-index: 2;
     transform: translateY(-50%);
@@ -1050,27 +1077,40 @@
   .#{$prefix}--data-table--xl
     .#{$prefix}--table-column-slug
     .#{$prefix}--ai-label,
-  .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug {
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug,
+  .#{$prefix}--data-table--xl
+    .#{$prefix}--table-column-decorator
+    .#{$prefix}--decorator {
     transform: translateY(1px);
   }
 
   // AILabel inside header styles
-  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug {
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug,
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label,
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--decorator {
     display: flex;
     align-items: center;
   }
 
   th
-    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
     .#{$prefix}--ai-label,
   th
-    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
-    .#{$prefix}--slug {
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
+    .#{$prefix}--slug,
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--decorator
+    .#{$prefix}--table-header-label--decorator-inner,
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
+    .#{$prefix}--table-header-label--decorator-inner {
     margin-inline-start: auto;
   }
 
   th.#{$prefix}--table-sort__header--slug,
-  th:has(.#{$prefix}--table-header-label--slug) {
+  th:has(.#{$prefix}--table-header-label--slug),
+  th.#{$prefix}--table-sort__header--ai-label,
+  th:has(.#{$prefix}--table-header-label--ai-label) {
     box-shadow: inset 0 1px $ai-border-strong;
   }
 

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

@@ -82,6 +82,9 @@
   tbody:has(> tr.#{$prefix}--data-table--slug-row)
     > tr.#{$prefix}--expandable-row[data-child-row]
     td,
+  tbody:has(> tr.#{$prefix}--data-table--ai-label-row)
+    > tr.#{$prefix}--expandable-row[data-child-row]
+    td,
   tbody:has(td.#{$prefix}--table-column-checkbox)
     > tr.#{$prefix}--expandable-row[data-child-row]
     td {
@@ -89,7 +92,7 @@
   }
 
   // Increase padding inside expandable row when slug AND checkbox is present in row
-  tbody:has(> tr.#{$prefix}--data-table--slug-row):has(
+  tbody:has(> tr.#{$prefix}--data-table--ai-label-row):has(
       td.#{$prefix}--table-column-checkbox
     )
     > tr.#{$prefix}--expandable-row[data-child-row]
@@ -474,6 +477,10 @@
   .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row
     .#{$prefix}--table-column-slug
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
+  .#{$prefix}--parent-row .#{$prefix}--table-column-decorator,
+  .#{$prefix}--parent-row
+    .#{$prefix}--table-column-decorator
     + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     box-shadow: none;
   }
@@ -482,12 +489,19 @@
     .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row.#{$prefix}--expandable-row
     .#{$prefix}--table-column-slug
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-decorator,
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-decorator
     + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--data-table--slug-row td,
-  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td {
+  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td,
+  .#{$prefix}--data-table--ai-label-row td,
+  .#{$prefix}--data-table tr.#{$prefix}--data-table--ai-label-row:hover td {
     border-block-start: 1px solid transparent;
   }
 

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

@@ -245,11 +245,21 @@
 
   // AILabel styles
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
-  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted,
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-sort__icon-unsorted,
+  .#{$prefix}--table-sort__header--decorator .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__header--decorator
+    .#{$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 {
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--ai-label,
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--slug,
+  .#{$prefix}--table-sort__header--decorator
+    .#{$prefix}--table-header-label--decorator-inner,
+  .#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-header-label--decorator-inner {
     margin-inline-end: convert.to-rem(8px);
   }
 

package/scss/components/tag/_mixins.scss

@@ -30,4 +30,10 @@
       background-color: $filter-hover-color;
     }
   }
+
+  .#{$prefix}--definition-term {
+    .#{$prefix}--tag__label {
+      color: $text-color;
+    }
+  }
 }

package/scss/components/tile/_tile.scss

@@ -15,6 +15,7 @@
 @use '../../type' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -131,8 +132,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
     .#{$prefix}--tile--disabled-icon {
     position: absolute;
-    inset-block-end: layout.density('padding-inline');
-    inset-inline-end: layout.density('padding-inline');
+    block-size: convert.to-rem(20px);
+    inline-size: convert.to-rem(20px);
+    inset-block-end: convert.to-rem(12px);
+    inset-inline-end: convert.to-rem(12px);
   }
 
   .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {