@carbon/styles 1.71.0 → 1.72.0

package/css/styles.css

@@ -1105,7 +1105,7 @@ em {
 }
 
 .cds--css-grid--narrow {
-  --cds-grid-gutter-start: 0;
+  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
 }
 
 .cds--css-grid--condensed {
@@ -1137,7 +1137,7 @@ em {
 }
 
 .cds--subgrid--narrow {
-  --cds-grid-gutter-start: 0;
+  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
   --cds-grid-gutter-end: 1rem;
   --cds-grid-column-hang: 1rem;
 }
@@ -8937,6 +8937,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #d1d1d1);
 }
+.cds--tag .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-gray, #161616);
+}
 .cds--tag.cds--tag--lg {
   padding-inline-start: 0.75rem;
 }
@@ -9029,6 +9032,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--red .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-red, #ffc2c5);
 }
+.cds--tag--red .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-red, #a2191f);
+}
 
 .cds--tag--magenta {
   background-color: var(--cds-tag-background-magenta, #ffd6e8);
@@ -9043,6 +9049,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--magenta .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-magenta, #ffbdda);
 }
+.cds--tag--magenta .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-magenta, #9f1853);
+}
 
 .cds--tag--purple {
   background-color: var(--cds-tag-background-purple, #e8daff);
@@ -9057,6 +9066,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--purple .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-purple, #dcc7ff);
 }
+.cds--tag--purple .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-purple, #6929c4);
+}
 
 .cds--tag--blue {
   background-color: var(--cds-tag-background-blue, #d0e2ff);
@@ -9071,6 +9083,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--blue .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-blue, #b8d3ff);
 }
+.cds--tag--blue .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-blue, #0043ce);
+}
 
 .cds--tag--cyan {
   background-color: var(--cds-tag-background-cyan, #bae6ff);
@@ -9085,6 +9100,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--cyan .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-cyan, #99daff);
 }
+.cds--tag--cyan .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-cyan, #00539a);
+}
 
 .cds--tag--teal {
   background-color: var(--cds-tag-background-teal, #9ef0f0);
@@ -9099,6 +9117,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--teal .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-teal, #57e5e5);
 }
+.cds--tag--teal .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-teal, #005d5d);
+}
 
 .cds--tag--green {
   background-color: var(--cds-tag-background-green, #a7f0ba);
@@ -9113,6 +9134,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--green .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-green, #74e792);
 }
+.cds--tag--green .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-green, #0e6027);
+}
 
 .cds--tag--gray {
   background-color: var(--cds-tag-background-gray, #e0e0e0);
@@ -9127,6 +9151,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #d1d1d1);
 }
+.cds--tag--gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-gray, #161616);
+}
 
 .cds--tag--cool-gray {
   background-color: var(--cds-tag-background-cool-gray, #dde1e6);
@@ -9141,6 +9168,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--cool-gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
 }
+.cds--tag--cool-gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-cool-gray, #121619);
+}
 
 .cds--tag--warm-gray {
   background-color: var(--cds-tag-background-warm-gray, #e5e0df);
@@ -9155,6 +9185,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--warm-gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
 }
+.cds--tag--warm-gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-warm-gray, #171414);
+}
 
 .cds--tag--high-contrast:not(.cds--tag--operational) {
   background-color: var(--cds-background-inverse, #393939);
@@ -9169,6 +9202,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
   background-color: var(--cds-background-inverse-hover, #474747);
 }
+.cds--tag--high-contrast:not(.cds--tag--operational) .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-inverse, #ffffff);
+}
 
 .cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
   background-color: transparent;
@@ -9189,6 +9225,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
   background-color: var(--cds-layer-hover);
 }
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-primary, #161616);
+}
 
 .cds--tag--disabled:not(.cds--tag--operational),
 .cds--tag--filter.cds--tag--disabled,
@@ -9213,6 +9252,11 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
   background-color: var(--cds-layer);
 }
+.cds--tag--disabled:not(.cds--tag--operational) .cds--definition-term .cds--tag__label,
+.cds--tag--filter.cds--tag--disabled .cds--definition-term .cds--tag__label,
+.cds--tag--interactive.cds--tag--disabled .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
 .cds--tag--disabled:not(.cds--tag--operational):hover,
 .cds--tag--filter.cds--tag--disabled:hover,
 .cds--tag--interactive.cds--tag--disabled:hover {
@@ -9348,6 +9392,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
   background-color: var(--cds-skeleton-background, #e8e8e8);
 }
+.cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-primary, #161616);
+}
 @media not all and (min-resolution >= 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
     .cds--tag.cds--skeleton {
@@ -9948,6 +9995,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
   background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
+.cds--list-box--disabled .cds--list-box__selection--multi .cds--definition-term .cds--tag__label {
+  color: var(--cds-layer);
+}
 .cds--list-box--disabled .cds--list-box__selection--multi > svg {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
@@ -12272,95 +12322,115 @@ tr.cds--data-table--selected:last-of-type td {
   margin: -0.1875rem 0;
 }
 
-.cds--data-table .cds--table-column-slug {
+.cds--data-table .cds--table-column-slug,
+.cds--data-table .cds--table-column-decorator {
   inline-size: 1rem;
   padding-inline-end: 0;
 }
 
 tr.cds--data-table--slug-row,
-tr.cds--data-table--slug-row + .cds--expandable-row {
+tr.cds--data-table--slug-row + .cds--expandable-row,
+tr.cds--data-table--ai-label-row,
+tr.cds--data-table--ai-label-row + .cds--expandable-row {
   background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
   background-attachment: fixed;
 }
 
-.cds--data-table--slug-row {
+.cds--data-table--slug-row,
+.cds--data-table--ai-label-row {
   box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
 }
 
-.cds--data-table tbody tr.cds--data-table--slug-row:hover td,
-tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
-tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
-tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
-tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
+.cds--data-table tbody tr.cds--data-table--ai-label-row:hover td,
+tr.cds--data-table--ai-label-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
+tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
+tr.cds--data-table--ai-label-row.cds--expandable-row--hover > td,
+tr.cds--data-table--selected.cds--data-table--ai-label-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
   background-color: transparent;
 }
 
-.cds--data-table tbody tr.cds--data-table--slug-row:hover,
-tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
-tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
-tr.cds--expandable-row--hover.cds--data-table--slug-row,
-tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
+.cds--data-table tbody tr.cds--data-table--ai-label-row:hover,
+tr.cds--data-table--ai-label-row:hover + .cds--expandable-row[data-child-row],
+tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
+tr.cds--expandable-row--hover.cds--data-table--ai-label-row,
+tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--ai-label-row {
   background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
   background-attachment: fixed;
 }
 
 tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
 .cds--data-table--selected.cds--data-table--slug-row,
-tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
+tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row,
+tr.cds--parent-row.cds--data-table--selected.cds--data-table--ai-label-row,
+.cds--data-table--selected.cds--data-table--ai-label-row,
+tr.cds--data-table--selected.cds--data-table--ai-label-row + .cds--expandable-row {
   background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
   background-attachment: fixed;
 }
 
-tr.cds--data-table--slug-row.cds--data-table--selected td,
-tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
-tbody tr.cds--data-table--slug-row:hover td,
-tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
+tr.cds--data-table--ai-label-row.cds--data-table--selected td,
+tr.cds--data-table--ai-label-row.cds--data-table--selected:hover td,
+tbody tr.cds--data-table--ai-label-row:hover td,
+tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
   border-block-end-color: var(--cds-border-subtle);
 }
 
+tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug),
 tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
   border-block-end: 1px solid var(--cds-layer-selected);
 }
 
-tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
+tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type,
+tr.cds--parent-row.cds--data-table--ai-label-row.cds--expandable-row:hover td:first-of-type,
+tr.cds--parent-row.cds--data-table--decoratorß-row.cds--expandable-row:hover td:first-of-type {
   border-block-end: 1px solid transparent;
 }
 
 .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
-.cds--data-table thead th:has(> .cds--table-header-label--slug) {
+.cds--data-table thead th:has(> .cds--table-header-label--slug),
+.cds--data-table thead th.cds--table-sort__header--ai-label .cds--table-sort,
+.cds--data-table thead th:has(> .cds--table-header-label--ai-label) {
   background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
 }
 
 .cds--table-column-slug .cds--ai-label,
-.cds--table-column-slug .cds--slug {
+.cds--table-column-slug .cds--slug,
+.cds--table-column-decorator .cds--decorator {
   position: absolute;
   z-index: 2;
   transform: translateY(-50%);
 }
 
 .cds--data-table--xl .cds--table-column-slug .cds--ai-label,
-.cds--data-table--xl .cds--table-column-slug .cds--slug {
+.cds--data-table--xl .cds--table-column-slug .cds--slug,
+.cds--data-table--xl .cds--table-column-decorator .cds--decorator {
   transform: translateY(1px);
 }
 
-th .cds--table-header-label.cds--table-header-label--slug {
+th .cds--table-header-label.cds--table-header-label--slug,
+th .cds--table-header-label.cds--table-header-label--ai-label,
+th .cds--table-header-label.cds--table-header-label--decorator {
   display: flex;
   align-items: center;
 }
 
-th .cds--table-header-label.cds--table-header-label--slug .cds--ai-label,
-th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
+th .cds--table-header-label.cds--table-header-label--ai-label .cds--ai-label,
+th .cds--table-header-label.cds--table-header-label--ai-label .cds--slug,
+th .cds--table-header-label.cds--table-header-label--decorator .cds--table-header-label--decorator-inner,
+th .cds--table-header-label.cds--table-header-label--ai-label .cds--table-header-label--decorator-inner {
   margin-inline-start: auto;
 }
 
 th.cds--table-sort__header--slug,
-th:has(.cds--table-header-label--slug) {
+th:has(.cds--table-header-label--slug),
+th.cds--table-sort__header--ai-label,
+th:has(.cds--table-header-label--ai-label) {
   box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
 }
 
@@ -13466,11 +13536,12 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
 }
 
 tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
+tbody:has(> tr.cds--data-table--ai-label-row) > tr.cds--expandable-row[data-child-row] td,
 tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
   padding-inline-start: 5.5rem;
 }
 
-tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
+tbody:has(> tr.cds--data-table--ai-label-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
   padding-inline-start: 7.5rem;
 }
 
@@ -13763,17 +13834,23 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
 }
 
 .cds--parent-row .cds--table-column-slug,
-.cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
+.cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
+.cds--parent-row .cds--table-column-decorator,
+.cds--parent-row .cds--table-column-decorator + td.cds--table-expand[data-previous-value=collapsed] {
   box-shadow: none;
 }
 
 .cds--parent-row.cds--expandable-row .cds--table-column-slug,
-.cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
+.cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
+.cds--parent-row.cds--expandable-row .cds--table-column-decorator,
+.cds--parent-row.cds--expandable-row .cds--table-column-decorator + td.cds--table-expand[data-previous-value=collapsed] {
   border-block-end: 1px solid transparent;
 }
 
 .cds--data-table--slug-row td,
-.cds--data-table tr.cds--data-table--slug-row:hover td {
+.cds--data-table tr.cds--data-table--slug-row:hover td,
+.cds--data-table--ai-label-row td,
+.cds--data-table tr.cds--data-table--ai-label-row:hover td {
   border-block-start: 1px solid transparent;
 }
 
@@ -14120,12 +14197,18 @@ th .cds--table-sort__flex {
 }
 
 .cds--table-sort__header--slug .cds--table-sort__icon,
-.cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
+.cds--table-sort__header--slug .cds--table-sort__icon-unsorted,
+.cds--table-sort__header--ai-label .cds--table-sort__icon,
+.cds--table-sort__header--ai-label .cds--table-sort__icon-unsorted,
+.cds--table-sort__header--decorator .cds--table-sort__icon,
+.cds--table-sort__header--decorator .cds--table-sort__icon-unsorted {
   margin-inline: auto 0.5rem;
 }
 
-.cds--table-sort__header--slug .cds--ai-label,
-.cds--table-sort__header--slug .cds--slug {
+.cds--table-sort__header--ai-label .cds--ai-label,
+.cds--table-sort__header--ai-label .cds--slug,
+.cds--table-sort__header--decorator .cds--table-header-label--decorator-inner,
+.cds--table-sort__header--ai-label .cds--table-header-label--decorator-inner {
   margin-inline-end: 0.5rem;
 }
 
@@ -23750,8 +23833,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--clickable .cds--tile--icon,
 .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
   position: absolute;
-  inset-block-end: var(--cds-layout-density-padding-inline-local);
-  inset-inline-end: var(--cds-layout-density-padding-inline-local);
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
+  inset-block-end: 0.75rem;
+  inset-inline-end: 0.75rem;
 }
 
 .cds--tile--clickable .cds--tile--icon {