@carbon/styles 1.72.0-rc.0 → 1.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/css/styles.css +72 -39
  2. package/css/styles.min.css +1 -1
  3. package/package.json +5 -5
  4. package/scss/components/data-table/_data-table.scss +71 -31
  5. package/scss/components/data-table/expandable/_data-table-expandable.scss +16 -2
  6. package/scss/components/data-table/sort/_data-table-sort.scss +13 -3
package/css/styles.css CHANGED
@@ -12322,95 +12322,115 @@ tr.cds--data-table--selected:last-of-type td {
12322
12322
  margin: -0.1875rem 0;
12323
12323
  }
12324
12324
 
12325
- .cds--data-table .cds--table-column-slug {
12325
+ .cds--data-table .cds--table-column-slug,
12326
+ .cds--data-table .cds--table-column-decorator {
12326
12327
  inline-size: 1rem;
12327
12328
  padding-inline-end: 0;
12328
12329
  }
12329
12330
 
12330
12331
  tr.cds--data-table--slug-row,
12331
- tr.cds--data-table--slug-row + .cds--expandable-row {
12332
+ tr.cds--data-table--slug-row + .cds--expandable-row,
12333
+ tr.cds--data-table--ai-label-row,
12334
+ tr.cds--data-table--ai-label-row + .cds--expandable-row {
12332
12335
  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%);
12333
12336
  background-attachment: fixed;
12334
12337
  }
12335
12338
 
12336
- .cds--data-table--slug-row {
12339
+ .cds--data-table--slug-row,
12340
+ .cds--data-table--ai-label-row {
12337
12341
  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
12338
12342
  }
12339
12343
 
12340
- .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
12341
- tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
12342
- tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
12343
- tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
12344
- tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
12345
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
12346
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
12347
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
12348
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
12349
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
12350
- tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
12344
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover td,
12345
+ tr.cds--data-table--ai-label-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
12346
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
12347
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover > td,
12348
+ tr.cds--data-table--selected.cds--data-table--ai-label-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
12349
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
12350
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
12351
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
12352
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
12353
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
12354
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
12351
12355
  background-color: transparent;
12352
12356
  }
12353
12357
 
12354
- .cds--data-table tbody tr.cds--data-table--slug-row:hover,
12355
- tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
12356
- tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
12357
- tr.cds--expandable-row--hover.cds--data-table--slug-row,
12358
- tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
12358
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover,
12359
+ tr.cds--data-table--ai-label-row:hover + .cds--expandable-row[data-child-row],
12360
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
12361
+ tr.cds--expandable-row--hover.cds--data-table--ai-label-row,
12362
+ tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--ai-label-row {
12359
12363
  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);
12360
12364
  background-attachment: fixed;
12361
12365
  }
12362
12366
 
12363
12367
  tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
12364
12368
  .cds--data-table--selected.cds--data-table--slug-row,
12365
- tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
12369
+ tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row,
12370
+ tr.cds--parent-row.cds--data-table--selected.cds--data-table--ai-label-row,
12371
+ .cds--data-table--selected.cds--data-table--ai-label-row,
12372
+ tr.cds--data-table--selected.cds--data-table--ai-label-row + .cds--expandable-row {
12366
12373
  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);
12367
12374
  background-attachment: fixed;
12368
12375
  }
12369
12376
 
12370
- tr.cds--data-table--slug-row.cds--data-table--selected td,
12371
- tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
12372
- tbody tr.cds--data-table--slug-row:hover td,
12373
- 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) {
12377
+ tr.cds--data-table--ai-label-row.cds--data-table--selected td,
12378
+ tr.cds--data-table--ai-label-row.cds--data-table--selected:hover td,
12379
+ tbody tr.cds--data-table--ai-label-row:hover td,
12380
+ 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) {
12374
12381
  border-block-end-color: var(--cds-border-subtle);
12375
12382
  }
12376
12383
 
12384
+ 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),
12377
12385
  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) {
12378
12386
  border-block-end: 1px solid var(--cds-layer-selected);
12379
12387
  }
12380
12388
 
12381
- tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
12389
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type,
12390
+ tr.cds--parent-row.cds--data-table--ai-label-row.cds--expandable-row:hover td:first-of-type,
12391
+ tr.cds--parent-row.cds--data-table--decoratorß-row.cds--expandable-row:hover td:first-of-type {
12382
12392
  border-block-end: 1px solid transparent;
12383
12393
  }
12384
12394
 
12385
12395
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
12386
- .cds--data-table thead th:has(> .cds--table-header-label--slug) {
12396
+ .cds--data-table thead th:has(> .cds--table-header-label--slug),
12397
+ .cds--data-table thead th.cds--table-sort__header--ai-label .cds--table-sort,
12398
+ .cds--data-table thead th:has(> .cds--table-header-label--ai-label) {
12387
12399
  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%);
12388
12400
  }
12389
12401
 
12390
12402
  .cds--table-column-slug .cds--ai-label,
12391
- .cds--table-column-slug .cds--slug {
12403
+ .cds--table-column-slug .cds--slug,
12404
+ .cds--table-column-decorator .cds--decorator {
12392
12405
  position: absolute;
12393
12406
  z-index: 2;
12394
12407
  transform: translateY(-50%);
12395
12408
  }
12396
12409
 
12397
12410
  .cds--data-table--xl .cds--table-column-slug .cds--ai-label,
12398
- .cds--data-table--xl .cds--table-column-slug .cds--slug {
12411
+ .cds--data-table--xl .cds--table-column-slug .cds--slug,
12412
+ .cds--data-table--xl .cds--table-column-decorator .cds--decorator {
12399
12413
  transform: translateY(1px);
12400
12414
  }
12401
12415
 
12402
- th .cds--table-header-label.cds--table-header-label--slug {
12416
+ th .cds--table-header-label.cds--table-header-label--slug,
12417
+ th .cds--table-header-label.cds--table-header-label--ai-label,
12418
+ th .cds--table-header-label.cds--table-header-label--decorator {
12403
12419
  display: flex;
12404
12420
  align-items: center;
12405
12421
  }
12406
12422
 
12407
- th .cds--table-header-label.cds--table-header-label--slug .cds--ai-label,
12408
- th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
12423
+ th .cds--table-header-label.cds--table-header-label--ai-label .cds--ai-label,
12424
+ th .cds--table-header-label.cds--table-header-label--ai-label .cds--slug,
12425
+ th .cds--table-header-label.cds--table-header-label--decorator .cds--table-header-label--decorator-inner,
12426
+ th .cds--table-header-label.cds--table-header-label--ai-label .cds--table-header-label--decorator-inner {
12409
12427
  margin-inline-start: auto;
12410
12428
  }
12411
12429
 
12412
12430
  th.cds--table-sort__header--slug,
12413
- th:has(.cds--table-header-label--slug) {
12431
+ th:has(.cds--table-header-label--slug),
12432
+ th.cds--table-sort__header--ai-label,
12433
+ th:has(.cds--table-header-label--ai-label) {
12414
12434
  box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
12415
12435
  }
12416
12436
 
@@ -13516,11 +13536,12 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
13516
13536
  }
13517
13537
 
13518
13538
  tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
13539
+ tbody:has(> tr.cds--data-table--ai-label-row) > tr.cds--expandable-row[data-child-row] td,
13519
13540
  tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
13520
13541
  padding-inline-start: 5.5rem;
13521
13542
  }
13522
13543
 
13523
- tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
13544
+ tbody:has(> tr.cds--data-table--ai-label-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
13524
13545
  padding-inline-start: 7.5rem;
13525
13546
  }
13526
13547
 
@@ -13813,17 +13834,23 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
13813
13834
  }
13814
13835
 
13815
13836
  .cds--parent-row .cds--table-column-slug,
13816
- .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
13837
+ .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
13838
+ .cds--parent-row .cds--table-column-decorator,
13839
+ .cds--parent-row .cds--table-column-decorator + td.cds--table-expand[data-previous-value=collapsed] {
13817
13840
  box-shadow: none;
13818
13841
  }
13819
13842
 
13820
13843
  .cds--parent-row.cds--expandable-row .cds--table-column-slug,
13821
- .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
13844
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
13845
+ .cds--parent-row.cds--expandable-row .cds--table-column-decorator,
13846
+ .cds--parent-row.cds--expandable-row .cds--table-column-decorator + td.cds--table-expand[data-previous-value=collapsed] {
13822
13847
  border-block-end: 1px solid transparent;
13823
13848
  }
13824
13849
 
13825
13850
  .cds--data-table--slug-row td,
13826
- .cds--data-table tr.cds--data-table--slug-row:hover td {
13851
+ .cds--data-table tr.cds--data-table--slug-row:hover td,
13852
+ .cds--data-table--ai-label-row td,
13853
+ .cds--data-table tr.cds--data-table--ai-label-row:hover td {
13827
13854
  border-block-start: 1px solid transparent;
13828
13855
  }
13829
13856
 
@@ -14170,12 +14197,18 @@ th .cds--table-sort__flex {
14170
14197
  }
14171
14198
 
14172
14199
  .cds--table-sort__header--slug .cds--table-sort__icon,
14173
- .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
14200
+ .cds--table-sort__header--slug .cds--table-sort__icon-unsorted,
14201
+ .cds--table-sort__header--ai-label .cds--table-sort__icon,
14202
+ .cds--table-sort__header--ai-label .cds--table-sort__icon-unsorted,
14203
+ .cds--table-sort__header--decorator .cds--table-sort__icon,
14204
+ .cds--table-sort__header--decorator .cds--table-sort__icon-unsorted {
14174
14205
  margin-inline: auto 0.5rem;
14175
14206
  }
14176
14207
 
14177
- .cds--table-sort__header--slug .cds--ai-label,
14178
- .cds--table-sort__header--slug .cds--slug {
14208
+ .cds--table-sort__header--ai-label .cds--ai-label,
14209
+ .cds--table-sort__header--ai-label .cds--slug,
14210
+ .cds--table-sort__header--decorator .cds--table-header-label--decorator-inner,
14211
+ .cds--table-sort__header--ai-label .cds--table-header-label--decorator-inner {
14179
14212
  margin-inline-end: 0.5rem;
14180
14213
  }
14181
14214