@carbon/charts-angular 1.13.0 → 1.13.2

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 (46) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/esm2022/lib/charts/alluvial-chart.component.mjs +3 -3
  3. package/esm2022/lib/charts/area-chart-stacked.component.mjs +3 -3
  4. package/esm2022/lib/charts/area-chart.component.mjs +3 -3
  5. package/esm2022/lib/charts/bar-chart-grouped.component.mjs +3 -3
  6. package/esm2022/lib/charts/bar-chart-simple.component.mjs +3 -3
  7. package/esm2022/lib/charts/bar-chart-stacked.component.mjs +3 -3
  8. package/esm2022/lib/charts/base-chart.component.mjs +3 -3
  9. package/esm2022/lib/charts/boxplot-chart.component.mjs +3 -3
  10. package/esm2022/lib/charts/bubble-chart.component.mjs +3 -3
  11. package/esm2022/lib/charts/bullet-chart.component.mjs +3 -3
  12. package/esm2022/lib/charts/charts.module.mjs +4 -4
  13. package/esm2022/lib/charts/choropleth.component.mjs +3 -3
  14. package/esm2022/lib/charts/circle-pack-chart.component.mjs +3 -3
  15. package/esm2022/lib/charts/combo-chart.component.mjs +3 -3
  16. package/esm2022/lib/charts/donut-chart.component.mjs +3 -3
  17. package/esm2022/lib/charts/gauge-chart.component.mjs +3 -3
  18. package/esm2022/lib/charts/heatmap-chart.component.mjs +3 -3
  19. package/esm2022/lib/charts/histogram-chart.component.mjs +3 -3
  20. package/esm2022/lib/charts/line-chart.component.mjs +3 -3
  21. package/esm2022/lib/charts/lollipop-chart.component.mjs +3 -3
  22. package/esm2022/lib/charts/meter-chart.component.mjs +3 -3
  23. package/esm2022/lib/charts/pie-chart.component.mjs +3 -3
  24. package/esm2022/lib/charts/radar-chart.component.mjs +3 -3
  25. package/esm2022/lib/charts/scatter-chart.component.mjs +3 -3
  26. package/esm2022/lib/charts/tree-chart.component.mjs +3 -3
  27. package/esm2022/lib/charts/treemap-chart.component.mjs +3 -3
  28. package/esm2022/lib/charts/wordcloud-chart.component.mjs +3 -3
  29. package/esm2022/lib/diagrams/edges/edge.component.mjs +3 -3
  30. package/esm2022/lib/diagrams/edges/edge.module.mjs +4 -4
  31. package/esm2022/lib/diagrams/edges/marker/marker.component.mjs +21 -21
  32. package/esm2022/lib/diagrams/edges/marker/marker.module.mjs +4 -4
  33. package/esm2022/lib/diagrams/nodes/cards/card-node-column.component.mjs +3 -3
  34. package/esm2022/lib/diagrams/nodes/cards/card-node-label.component.mjs +3 -3
  35. package/esm2022/lib/diagrams/nodes/cards/card-node-subtitle.component.mjs +3 -3
  36. package/esm2022/lib/diagrams/nodes/cards/card-node-title.component.mjs +3 -3
  37. package/esm2022/lib/diagrams/nodes/cards/card-node.component.mjs +3 -3
  38. package/esm2022/lib/diagrams/nodes/cards/card-node.module.mjs +4 -4
  39. package/esm2022/lib/diagrams/nodes/shape/shape-node.component.mjs +3 -3
  40. package/esm2022/lib/diagrams/nodes/shape/shape-node.module.mjs +4 -4
  41. package/fesm2022/carbon-charts-angular.mjs +140 -140
  42. package/package.json +2 -2
  43. package/styles.css +538 -441
  44. package/styles.css.map +1 -1
  45. package/styles.min.css +1 -1
  46. package/styles.min.css.map +1 -1
package/styles.css CHANGED
@@ -4263,12 +4263,12 @@ svg.cds--cc--color-legend g.legend-title text {
4263
4263
  .cds--visually-hidden {
4264
4264
  position: absolute;
4265
4265
  overflow: hidden;
4266
- width: 1px;
4267
- height: 1px;
4268
4266
  padding: 0;
4269
4267
  border: 0;
4270
4268
  margin: -1px;
4269
+ block-size: 1px;
4271
4270
  clip: rect(0, 0, 0, 0);
4271
+ inline-size: 1px;
4272
4272
  visibility: inherit;
4273
4273
  white-space: nowrap;
4274
4274
  }
@@ -4310,11 +4310,11 @@ svg.cds--cc--color-legend g.legend-title text {
4310
4310
  position: absolute;
4311
4311
  z-index: 6000;
4312
4312
  display: none;
4313
- width: max-content;
4314
- max-width: 23rem;
4315
4313
  background-color: var(--cds-popover-background-color, var(--cds-layer));
4316
4314
  border-radius: var(--cds-popover-border-radius, 2px);
4317
4315
  color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
4316
+ inline-size: max-content;
4317
+ max-inline-size: 23rem;
4318
4318
  pointer-events: auto;
4319
4319
  }
4320
4320
  .cds--popover-content *,
@@ -4354,161 +4354,227 @@ svg.cds--cc--color-legend g.legend-title text {
4354
4354
  }
4355
4355
 
4356
4356
  .cds--popover--bottom > .cds--popover > .cds--popover-content {
4357
- bottom: 0;
4358
- left: 50%;
4357
+ inset-block-end: 0;
4358
+ inset-inline-start: 50%;
4359
4359
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
4360
4360
  }
4361
4361
 
4362
+ [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-content {
4363
+ transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
4364
+ }
4365
+
4362
4366
  .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4363
- bottom: 0;
4364
- left: 0;
4367
+ inset-block-end: 0;
4368
+ inset-inline-start: 0;
4365
4369
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
4366
4370
  }
4367
4371
 
4372
+ [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4373
+ inset-inline-end: 0;
4374
+ inset-inline-start: initial;
4375
+ }
4376
+
4368
4377
  .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4369
- right: 0;
4370
- bottom: 0;
4378
+ inset-block-end: 0;
4379
+ inset-inline-end: 0;
4371
4380
  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
4372
4381
  }
4373
4382
 
4383
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4384
+ inset-inline-start: 0;
4385
+ }
4386
+
4374
4387
  .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
4375
4388
  .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
4376
4389
  .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
4377
- top: 0;
4378
- right: 0;
4379
- left: 0;
4380
- height: var(--cds-popover-offset, 0rem);
4390
+ block-size: var(--cds-popover-offset, 0rem);
4391
+ inset-block-start: 0;
4392
+ inset-inline-end: 0;
4393
+ inset-inline-start: 0;
4381
4394
  transform: translateY(-100%);
4382
4395
  }
4383
4396
 
4384
4397
  .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4385
4398
  .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4386
4399
  .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4387
- bottom: 0;
4388
- left: 50%;
4389
- width: var(--cds-popover-caret-width, 0.75rem);
4390
- height: var(--cds-popover-caret-height, 0.375rem);
4400
+ block-size: var(--cds-popover-caret-height, 0.375rem);
4391
4401
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
4402
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
4403
+ inset-block-end: 0;
4404
+ inset-inline-start: 50%;
4392
4405
  transform: translate(-50%, var(--cds-popover-offset, 0rem));
4393
4406
  }
4394
4407
 
4408
+ [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4409
+ [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4410
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4411
+ transform: translate(50%, var(--cds-popover-offset, 0rem));
4412
+ }
4413
+
4395
4414
  .cds--popover--top > .cds--popover > .cds--popover-content {
4396
- top: 0;
4397
- left: 50%;
4415
+ inset-block-start: 0;
4416
+ inset-inline-start: 50%;
4398
4417
  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4399
4418
  }
4400
4419
 
4420
+ [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-content {
4421
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4422
+ }
4423
+
4401
4424
  .cds--popover--top-left > .cds--popover > .cds--popover-content {
4402
- top: 0;
4403
- left: 0;
4425
+ inset-block-start: 0;
4426
+ inset-inline-start: 0;
4404
4427
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
4405
4428
  }
4406
4429
 
4430
+ [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-content {
4431
+ inset-inline-end: 0;
4432
+ inset-inline-start: initial;
4433
+ }
4434
+
4407
4435
  .cds--popover--top-right > .cds--popover > .cds--popover-content {
4408
- top: 0;
4409
- right: 0;
4436
+ inset-block-start: 0;
4437
+ inset-inline-end: 0;
4410
4438
  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
4411
4439
  }
4412
4440
 
4441
+ [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-content {
4442
+ inset-inline-start: 0;
4443
+ }
4444
+
4413
4445
  .cds--popover--top > .cds--popover > .cds--popover-content::before,
4414
4446
  .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
4415
4447
  .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
4416
- right: 0;
4417
- bottom: 0;
4418
- left: 0;
4419
- height: var(--cds-popover-offset, 0rem);
4448
+ block-size: var(--cds-popover-offset, 0rem);
4449
+ inset-block-end: 0;
4450
+ inset-inline-end: 0;
4451
+ inset-inline-start: 0;
4420
4452
  transform: translateY(100%);
4421
4453
  }
4422
4454
 
4423
4455
  .cds--popover--top > .cds--popover > .cds--popover-caret,
4424
4456
  .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4425
4457
  .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4426
- top: 0;
4427
- left: 50%;
4428
- width: var(--cds-popover-caret-width, 0.75rem);
4429
- height: var(--cds-popover-caret-height, 0.375rem);
4458
+ block-size: var(--cds-popover-caret-height, 0.375rem);
4430
4459
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
4460
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
4461
+ inset-block-start: 0;
4462
+ inset-inline-start: 50%;
4431
4463
  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4432
4464
  }
4433
4465
 
4466
+ [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-caret,
4467
+ [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4468
+ [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4469
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4470
+ }
4471
+
4434
4472
  .cds--popover--right > .cds--popover > .cds--popover-content {
4435
- top: 50%;
4436
- left: 100%;
4473
+ inset-block-start: 50%;
4474
+ inset-inline-start: 100%;
4437
4475
  transform: translate(var(--cds-popover-offset, 0rem), -50%);
4438
4476
  }
4439
4477
 
4440
4478
  .cds--popover--right-top > .cds--popover > .cds--popover-content {
4441
- top: 50%;
4442
- left: 100%;
4479
+ inset-block-start: 50%;
4480
+ inset-inline-start: 100%;
4443
4481
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
4444
4482
  }
4445
4483
 
4446
4484
  .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
4447
- bottom: 50%;
4448
- left: 100%;
4485
+ inset-block-end: 50%;
4486
+ inset-inline-start: 100%;
4449
4487
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
4450
4488
  }
4451
4489
 
4490
+ [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-content,
4491
+ [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-content,
4492
+ [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-content {
4493
+ inset-inline-end: 100%;
4494
+ inset-inline-start: initial;
4495
+ }
4496
+
4452
4497
  .cds--popover--right > .cds--popover > .cds--popover-content::before,
4453
4498
  .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
4454
4499
  .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
4455
- top: 0;
4456
- bottom: 0;
4457
- left: 0;
4458
- width: var(--cds-popover-offset, 0rem);
4500
+ inline-size: var(--cds-popover-offset, 0rem);
4501
+ inset-block-end: 0;
4502
+ inset-block-start: 0;
4503
+ inset-inline-start: 0;
4459
4504
  transform: translateX(-100%);
4460
4505
  }
4461
4506
 
4462
4507
  .cds--popover--right > .cds--popover > .cds--popover-caret,
4463
4508
  .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4464
4509
  .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4465
- top: 50%;
4466
- left: 100%;
4467
- width: var(--cds-popover-caret-height, 0.375rem);
4468
- height: var(--cds-popover-caret-width, 0.75rem);
4510
+ block-size: var(--cds-popover-caret-width, 0.75rem);
4469
4511
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
4512
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
4513
+ inset-block-start: 50%;
4514
+ inset-inline-start: 100%;
4470
4515
  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
4471
4516
  }
4472
4517
 
4518
+ [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-caret,
4519
+ [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4520
+ [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4521
+ inset-inline-end: 100%;
4522
+ inset-inline-start: initial;
4523
+ }
4524
+
4473
4525
  .cds--popover--left > .cds--popover > .cds--popover-content {
4474
- top: 50%;
4475
- right: 100%;
4526
+ inset-block-start: 50%;
4527
+ inset-inline-end: 100%;
4476
4528
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
4477
4529
  }
4478
4530
 
4479
4531
  .cds--popover--left-top > .cds--popover > .cds--popover-content {
4480
- top: -50%;
4481
- right: 100%;
4532
+ inset-block-start: -50%;
4533
+ inset-inline-end: 100%;
4482
4534
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
4483
4535
  }
4484
4536
 
4485
4537
  .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
4486
- right: 100%;
4487
- bottom: -50%;
4538
+ inset-block-end: -50%;
4539
+ inset-inline-end: 100%;
4488
4540
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
4489
4541
  }
4490
4542
 
4543
+ [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
4544
+ [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-content,
4545
+ [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-content {
4546
+ inset-inline-end: initial;
4547
+ inset-inline-start: 100%;
4548
+ }
4549
+
4491
4550
  .cds--popover--left > .cds--popover > .cds--popover-content::before,
4492
4551
  .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
4493
4552
  .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
4494
- top: 0;
4495
- right: 0;
4496
- bottom: 0;
4497
- width: var(--cds-popover-offset, 0rem);
4553
+ inline-size: var(--cds-popover-offset, 0rem);
4554
+ inset-block-end: 0;
4555
+ inset-block-start: 0;
4556
+ inset-inline-end: 0;
4498
4557
  transform: translateX(100%);
4499
4558
  }
4500
4559
 
4501
4560
  .cds--popover--left > .cds--popover > .cds--popover-caret,
4502
4561
  .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4503
4562
  .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4504
- top: 50%;
4505
- right: 100%;
4506
- width: var(--cds-popover-caret-height, 0.375rem);
4507
- height: var(--cds-popover-caret-width, 0.75rem);
4563
+ block-size: var(--cds-popover-caret-width, 0.75rem);
4508
4564
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
4565
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
4566
+ inset-block-start: 50%;
4567
+ inset-inline-end: 100%;
4509
4568
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
4510
4569
  }
4511
4570
 
4571
+ [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-caret,
4572
+ [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4573
+ [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4574
+ inset-inline-end: initial;
4575
+ inset-inline-start: 100%;
4576
+ }
4577
+
4512
4578
  .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
4513
4579
  border-radius: 0;
4514
4580
  }
@@ -4532,13 +4598,13 @@ svg.cds--cc--color-legend g.legend-title text {
4532
4598
  background: none;
4533
4599
  cursor: pointer;
4534
4600
  text-align: start;
4535
- width: 100%;
4601
+ inline-size: 100%;
4536
4602
  position: relative;
4537
4603
  display: inline-flex;
4538
- width: 2rem;
4539
- height: 2rem;
4540
4604
  align-items: center;
4541
4605
  justify-content: center;
4606
+ block-size: 2rem;
4607
+ inline-size: 2rem;
4542
4608
  }
4543
4609
  .cds--popover--tab-tip__button *,
4544
4610
  .cds--popover--tab-tip__button *::before,
@@ -4569,11 +4635,11 @@ svg.cds--cc--color-legend g.legend-title text {
4569
4635
  .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
4570
4636
  position: absolute;
4571
4637
  z-index: 6001;
4572
- bottom: 0;
4573
- width: 100%;
4574
- height: 2px;
4575
4638
  background: var(--cds-layer);
4639
+ block-size: 2px;
4576
4640
  content: "";
4641
+ inline-size: 100%;
4642
+ inset-block-end: 0;
4577
4643
  }
4578
4644
 
4579
4645
  .cds--popover--tab-tip__button svg {
@@ -4589,9 +4655,9 @@ svg.cds--cc--color-legend g.legend-title text {
4589
4655
  font-weight: var(--cds-body-01-font-weight, 400);
4590
4656
  line-height: var(--cds-body-01-line-height, 1.42857);
4591
4657
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
4592
- max-width: 18rem;
4593
4658
  padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
4594
4659
  color: var(--cds-text-inverse, #ffffff);
4660
+ max-inline-size: 18rem;
4595
4661
  }
4596
4662
 
4597
4663
  .cds--icon-tooltip {
@@ -4623,8 +4689,8 @@ svg.cds--cc--color-legend g.legend-title text {
4623
4689
  background: none;
4624
4690
  cursor: pointer;
4625
4691
  text-align: start;
4626
- width: 100%;
4627
- border-bottom: 1px dotted var(--cds-border-strong);
4692
+ inline-size: 100%;
4693
+ border-block-end: 1px dotted var(--cds-border-strong);
4628
4694
  border-radius: 0;
4629
4695
  color: var(--cds-text-primary, #161616);
4630
4696
  }
@@ -4639,7 +4705,7 @@ svg.cds--cc--color-legend g.legend-title text {
4639
4705
 
4640
4706
  .cds--definition-term:focus {
4641
4707
  outline: 1px solid var(--cds-focus, #0f62fe);
4642
- border-bottom-color: var(--cds-border-interactive, #0f62fe);
4708
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
4643
4709
  }
4644
4710
  @media screen and (prefers-contrast) {
4645
4711
  .cds--definition-term:focus {
@@ -4648,7 +4714,7 @@ svg.cds--cc--color-legend g.legend-title text {
4648
4714
  }
4649
4715
 
4650
4716
  .cds--definition-term:hover {
4651
- border-bottom-color: var(--cds-border-interactive, #0f62fe);
4717
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
4652
4718
  }
4653
4719
 
4654
4720
  .cds--definition-tooltip {
@@ -4656,8 +4722,8 @@ svg.cds--cc--color-legend g.legend-title text {
4656
4722
  font-weight: var(--cds-body-01-font-weight, 400);
4657
4723
  line-height: var(--cds-body-01-line-height, 1.42857);
4658
4724
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
4659
- max-width: 11rem;
4660
4725
  padding: 0.5rem 1rem;
4726
+ max-inline-size: 11rem;
4661
4727
  }
4662
4728
 
4663
4729
  .cds--btn {
@@ -4686,19 +4752,19 @@ svg.cds--cc--color-legend g.legend-title text {
4686
4752
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4687
4753
  position: relative;
4688
4754
  display: inline-flex;
4689
- width: max-content;
4690
- max-width: 20rem;
4691
- min-height: var(--cds-layout-size-height-local);
4692
4755
  flex-shrink: 0;
4693
4756
  justify-content: space-between;
4694
4757
  margin: 0;
4695
4758
  border-radius: 0;
4696
4759
  cursor: pointer;
4760
+ inline-size: max-content;
4761
+ max-inline-size: 20rem;
4762
+ min-block-size: var(--cds-layout-size-height-local);
4697
4763
  outline: none;
4698
4764
  padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
4699
4765
  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
4700
4766
  padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
4701
- text-align: left;
4767
+ text-align: start;
4702
4768
  text-decoration: none;
4703
4769
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
4704
4770
  vertical-align: top;
@@ -4717,11 +4783,11 @@ svg.cds--cc--color-legend g.legend-title text {
4717
4783
  }
4718
4784
  .cds--btn .cds--btn__icon {
4719
4785
  position: absolute;
4720
- top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4721
- right: var(--cds-layout-density-padding-inline-local);
4722
- width: 1rem;
4723
- height: 1rem;
4724
4786
  flex-shrink: 0;
4787
+ block-size: 1rem;
4788
+ inline-size: 1rem;
4789
+ inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4790
+ inset-inline-end: var(--cds-layout-density-padding-inline-local);
4725
4791
  margin-block-start: 0.0625rem;
4726
4792
  }
4727
4793
 
@@ -4843,7 +4909,7 @@ svg.cds--cc--color-legend g.legend-title text {
4843
4909
  }
4844
4910
  .cds--btn--ghost .cds--btn__icon {
4845
4911
  position: static;
4846
- margin-left: 0.5rem;
4912
+ margin-inline-start: 0.5rem;
4847
4913
  }
4848
4914
  .cds--btn--ghost:hover, .cds--btn--ghost:active {
4849
4915
  color: var(--cds-link-primary-hover, #0043ce);
@@ -4862,15 +4928,15 @@ svg.cds--cc--color-legend g.legend-title text {
4862
4928
  }
4863
4929
 
4864
4930
  .cds--btn--icon-only {
4865
- width: var(--cds-layout-size-height-local);
4866
- height: var(--cds-layout-size-height-local);
4867
4931
  justify-content: center;
4868
4932
  padding: 0;
4933
+ block-size: var(--cds-layout-size-height-local);
4934
+ inline-size: var(--cds-layout-size-height-local);
4869
4935
  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4870
4936
  }
4871
4937
  .cds--btn--icon-only > :first-child {
4872
- min-width: 1rem;
4873
4938
  margin-block-start: 0.0625rem;
4939
+ min-inline-size: 1rem;
4874
4940
  }
4875
4941
  .cds--btn--icon-only .cds--btn__icon {
4876
4942
  position: static;
@@ -4997,7 +5063,7 @@ svg.cds--cc--color-legend g.legend-title text {
4997
5063
  }
4998
5064
  .cds--btn--danger--ghost .cds--btn__icon {
4999
5065
  position: static;
5000
- margin-left: 0.5rem;
5066
+ margin-inline-start: 0.5rem;
5001
5067
  }
5002
5068
  .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
5003
5069
  color: var(--cds-text-on-color, #ffffff);
@@ -5022,12 +5088,12 @@ svg.cds--cc--color-legend g.legend-title text {
5022
5088
  }
5023
5089
 
5024
5090
  .cds--btn.cds--btn--expressive .cds--btn__icon {
5025
- width: 1.25rem;
5026
- height: 1.25rem;
5091
+ block-size: 1.25rem;
5092
+ inline-size: 1.25rem;
5027
5093
  }
5028
5094
 
5029
5095
  .cds--btn-set .cds--btn.cds--btn--expressive {
5030
- max-width: 20rem;
5096
+ max-inline-size: 20rem;
5031
5097
  }
5032
5098
 
5033
5099
  .cds--btn.cds--skeleton {
@@ -5037,7 +5103,7 @@ svg.cds--cc--color-legend g.legend-title text {
5037
5103
  background: var(--cds-skeleton-background, #e8e8e8);
5038
5104
  box-shadow: none;
5039
5105
  pointer-events: none;
5040
- width: 9.375rem;
5106
+ inline-size: 9.375rem;
5041
5107
  }
5042
5108
  .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
5043
5109
  border: none;
@@ -5046,11 +5112,11 @@ svg.cds--cc--color-legend g.legend-title text {
5046
5112
  }
5047
5113
  .cds--btn.cds--skeleton::before {
5048
5114
  position: absolute;
5049
- width: 100%;
5050
- height: 100%;
5051
5115
  animation: 3000ms ease-in-out skeleton infinite;
5052
5116
  background: var(--cds-skeleton-element, #c6c6c6);
5117
+ block-size: 100%;
5053
5118
  content: "";
5119
+ inline-size: 100%;
5054
5120
  will-change: transform-origin, transform, opacity;
5055
5121
  }
5056
5122
  @media (prefers-reduced-motion: reduce) {
@@ -5068,8 +5134,8 @@ svg.cds--cc--color-legend g.legend-title text {
5068
5134
  }
5069
5135
 
5070
5136
  .cds--btn-set .cds--btn {
5071
- width: 100%;
5072
- max-width: 12.25rem;
5137
+ inline-size: 100%;
5138
+ max-inline-size: 12.25rem;
5073
5139
  }
5074
5140
  .cds--btn-set .cds--btn:not(:focus) {
5075
5141
  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
@@ -5118,6 +5184,10 @@ svg.cds--cc--color-legend g.legend-title text {
5118
5184
  }
5119
5185
  }
5120
5186
 
5187
+ [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
5188
+ box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
5189
+ }
5190
+
5121
5191
  .cds--cc--grid-brush g.grid-brush rect.selection {
5122
5192
  fill: none;
5123
5193
  fill-opacity: 0;
@@ -5269,15 +5339,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5269
5339
  .cds--modal {
5270
5340
  position: fixed;
5271
5341
  z-index: 9000;
5272
- top: 0;
5273
- left: 0;
5274
5342
  display: flex;
5275
- width: 100vw;
5276
- height: 100vh;
5277
5343
  align-items: center;
5278
5344
  justify-content: center;
5279
5345
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
5346
+ block-size: 100vh;
5280
5347
  content: "";
5348
+ inline-size: 100vw;
5349
+ inset-block-start: 0;
5350
+ inset-inline-start: 0;
5281
5351
  opacity: 0;
5282
5352
  transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
5283
5353
  visibility: hidden;
@@ -5304,7 +5374,8 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5304
5374
  .cds--modal .cds--date-picker__input,
5305
5375
  .cds--modal .cds--multi-select,
5306
5376
  .cds--modal .cds--number__control-btn::before,
5307
- .cds--modal .cds--number__control-btn::after {
5377
+ .cds--modal .cds--number__control-btn::after,
5378
+ .cds--modal .cds--list-box input[role=combobox] {
5308
5379
  background-color: var(--cds-field-02, #ffffff);
5309
5380
  }
5310
5381
  .cds--modal .cds--list-box__menu {
@@ -5314,13 +5385,13 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5314
5385
  background-color: var(--cds-border-subtle-02, #e0e0e0);
5315
5386
  }
5316
5387
  .cds--modal .cds--list-box__menu-item__option {
5317
- border-top-color: var(--cds-border-subtle-02, #e0e0e0);
5388
+ border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
5318
5389
  }
5319
5390
  .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
5320
- border-top-color: var(--cds-layer-hover-02, #e8e8e8);
5391
+ border-block-start-color: var(--cds-layer-hover-02, #e8e8e8);
5321
5392
  }
5322
5393
  .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
5323
- border-top-color: var(--cds-layer-selected-hover-02, #d1d1d1);
5394
+ border-block-start-color: var(--cds-layer-selected-hover-02, #d1d1d1);
5324
5395
  }
5325
5396
  .cds--modal .cds--text-input--fluid .cds--text-input,
5326
5397
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
@@ -5354,7 +5425,7 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5354
5425
  }
5355
5426
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
5356
5427
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
5357
- border-left: 2px solid var(--cds-focus, #0f62fe);
5428
+ border-inline-start: 2px solid var(--cds-focus, #0f62fe);
5358
5429
  }
5359
5430
 
5360
5431
  .cds--modal.is-visible .cds--modal-container {
@@ -5364,15 +5435,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5364
5435
 
5365
5436
  .cds--modal-container {
5366
5437
  position: fixed;
5367
- top: 0;
5368
5438
  display: grid;
5369
5439
  overflow: hidden;
5370
- width: 100%;
5371
- height: 100%;
5372
- max-height: 100%;
5373
5440
  background-color: var(--cds-layer);
5441
+ block-size: 100%;
5374
5442
  grid-template-columns: 100%;
5375
5443
  grid-template-rows: auto 1fr auto;
5444
+ inline-size: 100%;
5445
+ inset-block-start: 0;
5446
+ max-block-size: 100%;
5376
5447
  outline: 3px solid transparent;
5377
5448
  outline-offset: -3px;
5378
5449
  transform: translate3d(0, -24px, 0);
@@ -5382,20 +5453,20 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5382
5453
  @media (min-width: 42rem) {
5383
5454
  .cds--modal-container {
5384
5455
  position: static;
5385
- width: 84%;
5386
- height: auto;
5387
- max-height: 90%;
5456
+ block-size: auto;
5457
+ inline-size: 84%;
5458
+ max-block-size: 90%;
5388
5459
  }
5389
5460
  }
5390
5461
  @media (min-width: 66rem) {
5391
5462
  .cds--modal-container {
5392
- width: 60%;
5393
- max-height: 84%;
5463
+ inline-size: 60%;
5464
+ max-block-size: 84%;
5394
5465
  }
5395
5466
  }
5396
5467
  @media (min-width: 82rem) {
5397
5468
  .cds--modal-container {
5398
- width: 48%;
5469
+ inline-size: 48%;
5399
5470
  }
5400
5471
  }
5401
5472
  .cds--modal-container .cds--modal-container-body {
@@ -5408,15 +5479,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5408
5479
  line-height: var(--cds-body-01-line-height, 1.42857);
5409
5480
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
5410
5481
  position: relative;
5411
- padding-top: 0.5rem;
5412
- padding-right: 1rem;
5413
- padding-left: 1rem;
5414
- margin-bottom: 3rem;
5415
5482
  color: var(--cds-text-primary, #161616);
5416
5483
  font-weight: 400;
5417
5484
  grid-column: 1/-1;
5418
5485
  grid-row: 2/-2;
5486
+ margin-block-end: 3rem;
5419
5487
  overflow-y: auto;
5488
+ padding-block-start: 0.5rem;
5489
+ padding-inline-end: 1rem;
5490
+ padding-inline-start: 1rem;
5420
5491
  }
5421
5492
  .cds--modal-content:focus {
5422
5493
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -5429,8 +5500,8 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5429
5500
  }
5430
5501
 
5431
5502
  .cds--modal-content .cds--form--fluid {
5432
- margin-right: -1rem;
5433
- margin-left: -1rem;
5503
+ margin-inline-end: -1rem;
5504
+ margin-inline-start: -1rem;
5434
5505
  }
5435
5506
 
5436
5507
  .cds--modal-content > p,
@@ -5439,20 +5510,20 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5439
5510
  font-weight: var(--cds-body-01-font-weight, 400);
5440
5511
  line-height: var(--cds-body-01-line-height, 1.42857);
5441
5512
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
5442
- padding-right: calc(20% - 2rem);
5513
+ padding-inline-end: calc(20% - 2rem);
5443
5514
  }
5444
5515
 
5445
5516
  .cds--modal-content--with-form {
5446
- padding-right: 1rem;
5517
+ padding-inline-end: 1rem;
5447
5518
  }
5448
5519
 
5449
5520
  .cds--modal-header {
5450
- padding-top: 1rem;
5451
- padding-right: 3rem;
5452
- padding-left: 1rem;
5453
- margin-bottom: 0.5rem;
5454
5521
  grid-column: 1/-1;
5455
5522
  grid-row: 1/1;
5523
+ margin-block-end: 0.5rem;
5524
+ padding-block-start: 1rem;
5525
+ padding-inline-end: 3rem;
5526
+ padding-inline-start: 1rem;
5456
5527
  }
5457
5528
 
5458
5529
  .cds--modal-header__label {
@@ -5467,8 +5538,8 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5467
5538
  font-weight: var(--cds-label-01-font-weight, 400);
5468
5539
  line-height: var(--cds-label-01-line-height, 1.33333);
5469
5540
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5470
- margin-bottom: 0.25rem;
5471
5541
  color: var(--cds-text-secondary, #525252);
5542
+ margin-block-end: 0.25rem;
5472
5543
  }
5473
5544
  .cds--modal-header__label *,
5474
5545
  .cds--modal-header__label *::before,
@@ -5488,8 +5559,8 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5488
5559
  font-weight: var(--cds-heading-03-font-weight, 400);
5489
5560
  line-height: var(--cds-heading-03-line-height, 1.4);
5490
5561
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
5491
- padding-right: calc(20% - 3rem);
5492
5562
  color: var(--cds-text-primary, #161616);
5563
+ padding-inline-end: calc(20% - 3rem);
5493
5564
  }
5494
5565
  .cds--modal-header__heading *,
5495
5566
  .cds--modal-header__heading *::before,
@@ -5498,90 +5569,90 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5498
5569
  }
5499
5570
 
5500
5571
  .cds--modal-container--xs .cds--modal-content__regular-content {
5501
- padding-right: 1rem;
5572
+ padding-inline-end: 1rem;
5502
5573
  }
5503
5574
  .cds--modal-container--xs .cds--modal-content > p {
5504
- padding-right: 0;
5575
+ padding-inline-end: 0;
5505
5576
  }
5506
5577
  @media (min-width: 42rem) {
5507
5578
  .cds--modal-container--xs {
5508
- width: 48%;
5579
+ inline-size: 48%;
5509
5580
  }
5510
5581
  }
5511
5582
  @media (min-width: 66rem) {
5512
5583
  .cds--modal-container--xs {
5513
- width: 32%;
5514
- max-height: 48%;
5584
+ inline-size: 32%;
5585
+ max-block-size: 48%;
5515
5586
  }
5516
5587
  }
5517
5588
  @media (min-width: 82rem) {
5518
5589
  .cds--modal-container--xs {
5519
- width: 24%;
5590
+ inline-size: 24%;
5520
5591
  }
5521
5592
  }
5522
5593
 
5523
5594
  .cds--modal-container--sm .cds--modal-content__regular-content {
5524
- padding-right: 1rem;
5595
+ padding-inline-end: 1rem;
5525
5596
  }
5526
5597
  .cds--modal-container--sm .cds--modal-content > p {
5527
- padding-right: 0;
5598
+ padding-inline-end: 0;
5528
5599
  }
5529
5600
  @media (min-width: 42rem) {
5530
5601
  .cds--modal-container--sm {
5531
- width: 60%;
5602
+ inline-size: 60%;
5532
5603
  }
5533
5604
  }
5534
5605
  @media (min-width: 66rem) {
5535
5606
  .cds--modal-container--sm {
5536
- width: 42%;
5537
- max-height: 72%;
5607
+ inline-size: 42%;
5608
+ max-block-size: 72%;
5538
5609
  }
5539
5610
  .cds--modal-container--sm .cds--modal-content > p,
5540
5611
  .cds--modal-container--sm .cds--modal-content__regular-content {
5541
- padding-right: 20%;
5612
+ padding-inline-end: 20%;
5542
5613
  }
5543
5614
  }
5544
5615
  @media (min-width: 82rem) {
5545
5616
  .cds--modal-container--sm {
5546
- width: 36%;
5617
+ inline-size: 36%;
5547
5618
  }
5548
5619
  }
5549
5620
 
5550
5621
  @media (min-width: 42rem) {
5551
5622
  .cds--modal-container--lg {
5552
- width: 96%;
5623
+ inline-size: 96%;
5553
5624
  }
5554
5625
  }
5555
5626
  @media (min-width: 66rem) {
5556
5627
  .cds--modal-container--lg {
5557
- width: 84%;
5558
- max-height: 96%;
5628
+ inline-size: 84%;
5629
+ max-block-size: 96%;
5559
5630
  }
5560
5631
  }
5561
5632
  @media (min-width: 82rem) {
5562
5633
  .cds--modal-container--lg {
5563
- width: 72%;
5634
+ inline-size: 72%;
5564
5635
  }
5565
5636
  }
5566
5637
 
5567
5638
  .cds--modal-scroll-content > *:last-child {
5568
- padding-bottom: 2rem;
5639
+ padding-block-end: 2rem;
5569
5640
  }
5570
5641
 
5571
5642
  .cds--modal-content--overflow-indicator {
5572
5643
  position: absolute;
5573
- bottom: 3rem;
5574
- left: 0;
5575
- width: 100%;
5576
- height: 2rem;
5577
5644
  background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
5645
+ block-size: 2rem;
5578
5646
  content: "";
5579
5647
  grid-column: 1/-1;
5580
5648
  grid-row: 2/-2;
5649
+ inline-size: 100%;
5650
+ inset-block-end: 3rem;
5651
+ inset-inline-start: 0;
5581
5652
  pointer-events: none;
5582
5653
  }
5583
5654
 
5584
- @media not all and (min-resolution: 0.001dpcm) {
5655
+ @media not all and (min-resolution >= 0.001dpcm) {
5585
5656
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
5586
5657
  .cds--modal-content--overflow-indicator {
5587
5658
  background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
@@ -5589,13 +5660,13 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5589
5660
  }
5590
5661
  }
5591
5662
  .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
5592
- width: calc(100% - 4px);
5593
5663
  margin: 0 2px 2px;
5664
+ inline-size: calc(100% - 4px);
5594
5665
  }
5595
5666
 
5596
5667
  @media screen and (-ms-high-contrast: active) {
5597
5668
  .cds--modal-scroll-content > *:last-child {
5598
- padding-bottom: 0;
5669
+ padding-block-end: 0;
5599
5670
  }
5600
5671
  .cds--modal-content--overflow-indicator {
5601
5672
  display: none;
@@ -5603,21 +5674,21 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5603
5674
  }
5604
5675
  .cds--modal-footer {
5605
5676
  display: flex;
5606
- height: 4rem;
5607
5677
  justify-content: flex-end;
5608
- margin-top: auto;
5678
+ block-size: 4rem;
5609
5679
  grid-column: 1/-1;
5610
5680
  grid-row: -1/-1;
5681
+ margin-block-start: auto;
5611
5682
  }
5612
5683
 
5613
5684
  .cds--modal-footer .cds--btn {
5614
- max-width: none;
5615
- height: 4rem;
5616
5685
  flex: 0 1 50%;
5617
5686
  align-items: baseline;
5618
- padding-top: 0.875rem;
5619
- padding-bottom: 2rem;
5620
5687
  margin: 0;
5688
+ block-size: 4rem;
5689
+ max-inline-size: none;
5690
+ padding-block-end: 2rem;
5691
+ padding-block-start: 0.875rem;
5621
5692
  }
5622
5693
 
5623
5694
  .cds--modal-footer--three-button .cds--btn {
@@ -5628,15 +5699,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5628
5699
  .cds--modal-close {
5629
5700
  position: absolute;
5630
5701
  z-index: 2;
5631
- top: 0;
5632
- right: 0;
5633
5702
  overflow: hidden;
5634
- width: 3rem;
5635
- height: 3rem;
5636
5703
  padding: 0.75rem;
5637
5704
  border: 2px solid transparent;
5638
5705
  background-color: transparent;
5706
+ block-size: 3rem;
5639
5707
  cursor: pointer;
5708
+ inline-size: 3rem;
5709
+ inset-block-start: 0;
5710
+ inset-inline-end: 0;
5640
5711
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5641
5712
  }
5642
5713
  .cds--modal-close:hover {
@@ -5652,9 +5723,9 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
5652
5723
  }
5653
5724
 
5654
5725
  .cds--modal-close__icon {
5655
- width: 1.25rem;
5656
- height: 1.25rem;
5726
+ block-size: 1.25rem;
5657
5727
  fill: var(--cds-icon-primary, #161616);
5728
+ inline-size: 1.25rem;
5658
5729
  }
5659
5730
 
5660
5731
  .cds--body--with-modal-open {
@@ -5728,10 +5799,10 @@ textarea:-webkit-autofill:focus {
5728
5799
  line-height: var(--cds-label-01-line-height, 1.33333);
5729
5800
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5730
5801
  display: inline-block;
5731
- margin-bottom: 0.5rem;
5732
5802
  color: var(--cds-text-secondary, #525252);
5733
5803
  font-weight: 400;
5734
5804
  line-height: 1rem;
5805
+ margin-block-end: 0.5rem;
5735
5806
  vertical-align: baseline;
5736
5807
  }
5737
5808
  .cds--label html {
@@ -5759,13 +5830,13 @@ textarea:-webkit-autofill:focus {
5759
5830
  }
5760
5831
 
5761
5832
  .cds--label--no-margin {
5762
- margin-bottom: 0;
5833
+ margin-block-end: 0;
5763
5834
  }
5764
5835
 
5765
5836
  .cds--label + .cds--tooltip {
5766
5837
  position: relative;
5767
- top: 0.2rem;
5768
- left: 0.5rem;
5838
+ inset-block-start: 0.2rem;
5839
+ inset-inline-start: 0.5rem;
5769
5840
  }
5770
5841
 
5771
5842
  .cds--label + .cds--tooltip .cds--tooltip__trigger {
@@ -5783,7 +5854,7 @@ textarea:-webkit-autofill:focus {
5783
5854
  background: none;
5784
5855
  cursor: pointer;
5785
5856
  text-align: start;
5786
- width: 100%;
5857
+ inline-size: 100%;
5787
5858
  display: flex;
5788
5859
  align-items: center;
5789
5860
  justify-content: center;
@@ -5814,8 +5885,8 @@ textarea:-webkit-autofill:focus {
5814
5885
  }
5815
5886
 
5816
5887
  .cds--label + .cds--toggletip {
5817
- top: 0.2rem;
5818
- left: 0.5rem;
5888
+ inset-block-start: 0.2rem;
5889
+ inset-inline-start: 0.5rem;
5819
5890
  }
5820
5891
 
5821
5892
  .cds--label.cds--skeleton {
@@ -5825,8 +5896,8 @@ textarea:-webkit-autofill:focus {
5825
5896
  background: var(--cds-skeleton-background, #e8e8e8);
5826
5897
  box-shadow: none;
5827
5898
  pointer-events: none;
5828
- width: 4.6875rem;
5829
- height: 0.875rem;
5899
+ block-size: 0.875rem;
5900
+ inline-size: 4.6875rem;
5830
5901
  }
5831
5902
  .cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active {
5832
5903
  border: none;
@@ -5835,11 +5906,11 @@ textarea:-webkit-autofill:focus {
5835
5906
  }
5836
5907
  .cds--label.cds--skeleton::before {
5837
5908
  position: absolute;
5838
- width: 100%;
5839
- height: 100%;
5840
5909
  animation: 3000ms ease-in-out skeleton infinite;
5841
5910
  background: var(--cds-skeleton-element, #c6c6c6);
5911
+ block-size: 100%;
5842
5912
  content: "";
5913
+ inline-size: 100%;
5843
5914
  will-change: transform-origin, transform, opacity;
5844
5915
  }
5845
5916
  @media (prefers-reduced-motion: reduce) {
@@ -5894,8 +5965,8 @@ input[data-invalid] ~ .cds--form-requirement,
5894
5965
  .cds--list-box--warning ~ .cds--form-requirement {
5895
5966
  display: block;
5896
5967
  overflow: visible;
5897
- max-height: 12.5rem;
5898
5968
  font-weight: 400;
5969
+ max-block-size: 12.5rem;
5899
5970
  }
5900
5971
 
5901
5972
  input[data-invalid] ~ .cds--form-requirement,
@@ -5925,7 +5996,7 @@ input[data-invalid] ~ .cds--form-requirement,
5925
5996
  margin: 0;
5926
5997
  }
5927
5998
 
5928
- input:not(output):not([data-invalid]):-moz-ui-invalid {
5999
+ input:not(output, [data-invalid]):-moz-ui-invalid {
5929
6000
  box-shadow: none;
5930
6001
  }
5931
6002
 
@@ -5936,8 +6007,8 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
5936
6007
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5937
6008
  display: none;
5938
6009
  overflow: hidden;
5939
- max-height: 0;
5940
6010
  margin: 0.25rem 0 0;
6011
+ max-block-size: 0;
5941
6012
  }
5942
6013
  .cds--form-requirement html {
5943
6014
  font-size: 100%;
@@ -5957,7 +6028,7 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
5957
6028
  }
5958
6029
 
5959
6030
  .cds--select--inline .cds--form__helper-text {
5960
- margin-top: 0;
6031
+ margin-block-start: 0;
5961
6032
  }
5962
6033
 
5963
6034
  .cds--form__helper-text {
@@ -5965,9 +6036,9 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
5965
6036
  line-height: var(--cds-helper-text-01-line-height, 1.33333);
5966
6037
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
5967
6038
  z-index: 0;
5968
- width: 100%;
5969
- margin-top: 0.25rem;
5970
6039
  color: var(--cds-text-secondary, #525252);
6040
+ inline-size: 100%;
6041
+ margin-block-start: 0.25rem;
5971
6042
  opacity: 1;
5972
6043
  }
5973
6044
 
@@ -5998,34 +6069,34 @@ fieldset[disabled] .cds--form__helper-text {
5998
6069
 
5999
6070
  .cds--form-item.cds--checkbox-wrapper {
6000
6071
  position: relative;
6001
- margin-bottom: 0.25rem;
6072
+ margin-block-end: 0.25rem;
6002
6073
  }
6003
6074
 
6004
6075
  .cds--form-item.cds--checkbox-wrapper:first-of-type {
6005
- margin-top: 0.1875rem;
6076
+ margin-block-start: 0.1875rem;
6006
6077
  }
6007
6078
 
6008
6079
  .cds--label + .cds--form-item.cds--checkbox-wrapper {
6009
- margin-top: -0.125rem;
6080
+ margin-block-start: -0.125rem;
6010
6081
  }
6011
6082
 
6012
6083
  .cds--form-item.cds--checkbox-wrapper:last-of-type {
6013
- margin-bottom: 0.1875rem;
6084
+ margin-block-end: 0.1875rem;
6014
6085
  }
6015
6086
 
6016
6087
  .cds--checkbox {
6017
6088
  position: absolute;
6018
6089
  overflow: hidden;
6019
- width: 1px;
6020
- height: 1px;
6021
6090
  padding: 0;
6022
6091
  border: 0;
6023
6092
  margin: -1px;
6093
+ block-size: 1px;
6024
6094
  clip: rect(0, 0, 0, 0);
6095
+ inline-size: 1px;
6025
6096
  visibility: inherit;
6026
6097
  white-space: nowrap;
6027
- top: 1.25rem;
6028
- left: 0.7rem;
6098
+ inset-block-start: 1.25rem;
6099
+ inset-inline-start: 0.7rem;
6029
6100
  }
6030
6101
 
6031
6102
  .cds--checkbox-label {
@@ -6035,10 +6106,10 @@ fieldset[disabled] .cds--form__helper-text {
6035
6106
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6036
6107
  position: relative;
6037
6108
  display: flex;
6038
- min-height: 1.5rem;
6039
- padding-top: 0.1875rem;
6040
- padding-left: 1.25rem;
6041
6109
  cursor: pointer;
6110
+ min-block-size: 1.5rem;
6111
+ padding-block-start: 0.1875rem;
6112
+ padding-inline-start: 1.25rem;
6042
6113
  user-select: none;
6043
6114
  }
6044
6115
  .cds--checkbox-label html {
@@ -6059,7 +6130,7 @@ fieldset[disabled] .cds--form__helper-text {
6059
6130
  }
6060
6131
 
6061
6132
  .cds--checkbox-label-text {
6062
- padding-left: 0.375rem;
6133
+ padding-inline-start: 0.375rem;
6063
6134
  }
6064
6135
 
6065
6136
  .cds--checkbox-label::before,
@@ -6069,30 +6140,30 @@ fieldset[disabled] .cds--form__helper-text {
6069
6140
 
6070
6141
  .cds--checkbox-label::before {
6071
6142
  position: absolute;
6072
- top: 0.125rem;
6073
- left: 0;
6074
- width: 1rem;
6075
- height: 1rem;
6076
6143
  border: 1px solid var(--cds-icon-primary, #161616);
6077
6144
  margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
6078
6145
  background-color: transparent;
6146
+ block-size: 1rem;
6079
6147
  border-radius: 2px;
6080
6148
  content: "";
6149
+ inline-size: 1rem;
6150
+ inset-block-start: 0.125rem;
6151
+ inset-inline-start: 0;
6081
6152
  }
6082
6153
 
6083
6154
  .cds--checkbox-label::after {
6084
6155
  position: absolute;
6085
- top: 0.46875rem;
6086
- left: 0.4375rem;
6087
- width: 0.5625rem;
6088
- height: 0.3125rem;
6089
- border-bottom: 1.5px solid var(--cds-icon-inverse, #ffffff);
6090
- border-left: 1.5px solid var(--cds-icon-inverse, #ffffff);
6091
- margin-top: -0.1875rem /*rtl:0rem*/;
6092
6156
  background: none;
6157
+ block-size: 0.3125rem;
6158
+ border-block-end: 1.5px solid var(--cds-icon-inverse, #ffffff);
6159
+ border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
6093
6160
  content: "";
6161
+ inline-size: 0.5625rem;
6162
+ inset-block-start: 0.46875rem;
6163
+ inset-inline-start: 0.4375rem;
6164
+ margin-block-start: -0.1875rem;
6094
6165
  transform: scale(0) rotate(-45deg);
6095
- transform-origin: bottom right /*rtl:center*/;
6166
+ transform-origin: bottom right;
6096
6167
  }
6097
6168
 
6098
6169
  .cds--checkbox:checked + .cds--checkbox-label::before,
@@ -6105,14 +6176,14 @@ fieldset[disabled] .cds--form__helper-text {
6105
6176
 
6106
6177
  .cds--checkbox:checked + .cds--checkbox-label::after,
6107
6178
  .cds--checkbox-label[data-contained-checkbox-state=true]::after {
6108
- transform: scale(1) rotate(-45deg) /*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/;
6179
+ transform: scale(1) rotate(-45deg);
6109
6180
  }
6110
6181
 
6111
6182
  .cds--checkbox:indeterminate + .cds--checkbox-label::after {
6112
- top: 0.6875rem;
6113
- width: 0.5rem;
6114
- border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
6115
- border-left: 0 solid var(--cds-icon-inverse, #ffffff);
6183
+ border-block-end: 2px solid var(--cds-icon-inverse, #ffffff);
6184
+ border-inline-start: 0 solid var(--cds-icon-inverse, #ffffff);
6185
+ inline-size: 0.5rem;
6186
+ inset-block-start: 0.6875rem;
6116
6187
  transform: scale(1) rotate(0deg);
6117
6188
  }
6118
6189
 
@@ -6162,13 +6233,14 @@ fieldset[disabled] .cds--form__helper-text {
6162
6233
  .cds--checkbox-group__validation-msg,
6163
6234
  .cds--checkbox__validation-msg {
6164
6235
  display: none;
6165
- align-items: flex-end;
6166
- margin-top: 0.25rem;
6236
+ align-items: flex-start;
6237
+ margin-block-start: 0.25rem;
6167
6238
  }
6168
6239
 
6169
6240
  .cds--checkbox__invalid-icon {
6170
- margin: 0 0.0625rem 0 0.1875rem;
6241
+ margin: 0.0625rem 0.0625rem 0 0.1875rem;
6171
6242
  fill: var(--cds-support-error, #da1e28);
6243
+ min-inline-size: 1rem;
6172
6244
  }
6173
6245
 
6174
6246
  .cds--checkbox__invalid-icon--warning {
@@ -6192,9 +6264,9 @@ fieldset[disabled] .cds--form__helper-text {
6192
6264
  .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
6193
6265
  display: block;
6194
6266
  overflow: visible;
6195
- max-height: 100%;
6196
- margin-top: 0;
6197
- margin-left: 0.5rem;
6267
+ margin-block-start: 0;
6268
+ margin-inline-start: 0.5rem;
6269
+ max-block-size: 100%;
6198
6270
  }
6199
6271
 
6200
6272
  .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
@@ -6240,9 +6312,10 @@ fieldset[disabled] .cds--form__helper-text {
6240
6312
  background: var(--cds-skeleton-background, #e8e8e8);
6241
6313
  box-shadow: none;
6242
6314
  pointer-events: none;
6243
- width: 6.25rem;
6244
- height: 1rem;
6245
- margin: 0.0625rem 0 0 0.375rem;
6315
+ block-size: 1rem;
6316
+ inline-size: 6.25rem;
6317
+ margin-block: 0.0625rem 0;
6318
+ margin-inline: 0.375rem 0;
6246
6319
  }
6247
6320
  .cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active {
6248
6321
  border: none;
@@ -6251,11 +6324,11 @@ fieldset[disabled] .cds--form__helper-text {
6251
6324
  }
6252
6325
  .cds--checkbox-label-text.cds--skeleton::before {
6253
6326
  position: absolute;
6254
- width: 100%;
6255
- height: 100%;
6256
6327
  animation: 3000ms ease-in-out skeleton infinite;
6257
6328
  background: var(--cds-skeleton-element, #c6c6c6);
6329
+ block-size: 100%;
6258
6330
  content: "";
6331
+ inline-size: 100%;
6259
6332
  will-change: transform-origin, transform, opacity;
6260
6333
  }
6261
6334
  @media (prefers-reduced-motion: reduce) {
@@ -6268,6 +6341,17 @@ fieldset[disabled] .cds--form__helper-text {
6268
6341
  position: relative;
6269
6342
  }
6270
6343
 
6344
+ [dir=rtl] .cds--checkbox-label::after {
6345
+ margin-block-start: 0;
6346
+ margin-inline-start: -0.0625rem;
6347
+ transform-origin: center;
6348
+ }
6349
+
6350
+ [dir=rtl] .cds--checkbox:checked + .cds--checkbox-label::after,
6351
+ [dir=rtl] .cds--checkbox-label[data-contained-checkbox-state=true]::after {
6352
+ transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
6353
+ }
6354
+
6271
6355
  .cds--radio-button-group {
6272
6356
  box-sizing: border-box;
6273
6357
  padding: 0;
@@ -6287,7 +6371,7 @@ fieldset[disabled] .cds--form__helper-text {
6287
6371
  }
6288
6372
 
6289
6373
  .cds--label + .cds--form-item .cds--radio-button-group {
6290
- margin-top: 0;
6374
+ margin-block-start: 0;
6291
6375
  }
6292
6376
 
6293
6377
  .cds--radio-button-group--vertical {
@@ -6298,22 +6382,22 @@ fieldset[disabled] .cds--form__helper-text {
6298
6382
  align-items: flex-end;
6299
6383
  }
6300
6384
  .cds--radio-button-group--vertical .cds--radio-button__label {
6301
- margin-right: 0;
6302
6385
  line-height: 1.25;
6386
+ margin-inline-end: 0;
6303
6387
  }
6304
6388
  .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
6305
- margin-bottom: 0.5rem;
6389
+ margin-block-end: 0.5rem;
6306
6390
  }
6307
6391
 
6308
6392
  .cds--radio-button {
6309
6393
  position: absolute;
6310
6394
  overflow: hidden;
6311
- width: 1px;
6312
- height: 1px;
6313
6395
  padding: 0;
6314
6396
  border: 0;
6315
6397
  margin: -1px;
6398
+ block-size: 1px;
6316
6399
  clip: rect(0, 0, 0, 0);
6400
+ inline-size: 1px;
6317
6401
  visibility: inherit;
6318
6402
  white-space: nowrap;
6319
6403
  visibility: inherit;
@@ -6326,8 +6410,8 @@ fieldset[disabled] .cds--form__helper-text {
6326
6410
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6327
6411
  display: flex;
6328
6412
  align-items: center;
6329
- margin-right: 1rem;
6330
6413
  cursor: pointer;
6414
+ margin-inline-end: 1rem;
6331
6415
  }
6332
6416
 
6333
6417
  .cds--radio-button__appearance {
@@ -6338,13 +6422,14 @@ fieldset[disabled] .cds--form__helper-text {
6338
6422
  font-family: inherit;
6339
6423
  font-size: 100%;
6340
6424
  vertical-align: baseline;
6341
- width: 1.125rem;
6342
- height: 1.125rem;
6343
6425
  flex-shrink: 0;
6344
6426
  border: 1px solid var(--cds-icon-primary, #161616);
6345
- margin: 0.0625rem 0.5rem 0.125rem 0.125rem;
6346
6427
  background-color: transparent;
6428
+ block-size: 1.125rem;
6347
6429
  border-radius: 50%;
6430
+ inline-size: 1.125rem;
6431
+ margin-block: 0.0625rem 0.125rem;
6432
+ margin-inline: 0.125rem 0.5rem;
6348
6433
  }
6349
6434
  .cds--radio-button__appearance *,
6350
6435
  .cds--radio-button__appearance *::before,
@@ -6361,11 +6446,11 @@ fieldset[disabled] .cds--form__helper-text {
6361
6446
  .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
6362
6447
  position: relative;
6363
6448
  display: inline-block;
6364
- width: 100%;
6365
- height: 100%;
6366
6449
  background-color: var(--cds-icon-primary, #161616);
6450
+ block-size: 100%;
6367
6451
  border-radius: 50%;
6368
6452
  content: "";
6453
+ inline-size: 100%;
6369
6454
  transform: scale(0.5);
6370
6455
  }
6371
6456
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -6409,12 +6494,12 @@ fieldset[disabled] .cds--form__helper-text {
6409
6494
  .cds--radio-button__validation-msg {
6410
6495
  display: none;
6411
6496
  align-items: flex-end;
6412
- margin-top: 0.375rem;
6497
+ margin-block-start: 0.375rem;
6413
6498
  }
6414
6499
 
6415
6500
  .cds--radio-button__invalid-icon {
6416
- margin: 0 0.0625rem 0 0.1875rem;
6417
6501
  fill: var(--cds-support-error, #da1e28);
6502
+ margin-inline: 0.1875rem 0.0625rem;
6418
6503
  }
6419
6504
 
6420
6505
  .cds--radio-button__invalid-icon--warning {
@@ -6434,9 +6519,9 @@ fieldset[disabled] .cds--form__helper-text {
6434
6519
  .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
6435
6520
  display: block;
6436
6521
  overflow: visible;
6437
- max-height: 100%;
6438
- margin-top: 0;
6439
- margin-left: 0.5rem;
6522
+ margin-block-start: 0;
6523
+ margin-inline-start: 0.5rem;
6524
+ max-block-size: 100%;
6440
6525
  }
6441
6526
 
6442
6527
  .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
@@ -6444,7 +6529,7 @@ fieldset[disabled] .cds--form__helper-text {
6444
6529
  }
6445
6530
 
6446
6531
  .cds--radio-button-group ~ .cds--form__helper-text {
6447
- margin-top: 0.375rem;
6532
+ margin-block-start: 0.375rem;
6448
6533
  }
6449
6534
 
6450
6535
  .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
@@ -6459,8 +6544,8 @@ fieldset[disabled] .cds--form__helper-text {
6459
6544
  background: var(--cds-skeleton-background, #e8e8e8);
6460
6545
  box-shadow: none;
6461
6546
  pointer-events: none;
6462
- width: 6.25rem;
6463
- height: 1.125rem;
6547
+ block-size: 1.125rem;
6548
+ inline-size: 6.25rem;
6464
6549
  }
6465
6550
  .cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active {
6466
6551
  border: none;
@@ -6469,11 +6554,11 @@ fieldset[disabled] .cds--form__helper-text {
6469
6554
  }
6470
6555
  .cds--radio-button__label.cds--skeleton::before {
6471
6556
  position: absolute;
6472
- width: 100%;
6473
- height: 100%;
6474
6557
  animation: 3000ms ease-in-out skeleton infinite;
6475
6558
  background: var(--cds-skeleton-element, #c6c6c6);
6559
+ block-size: 100%;
6476
6560
  content: "";
6561
+ inline-size: 100%;
6477
6562
  will-change: transform-origin, transform, opacity;
6478
6563
  }
6479
6564
  @media (prefers-reduced-motion: reduce) {
@@ -6494,12 +6579,12 @@ fieldset[disabled] .cds--form__helper-text {
6494
6579
  }
6495
6580
 
6496
6581
  .cds--radio-button-wrapper:not(:last-of-type) {
6497
- margin-right: 1rem;
6582
+ margin-inline-end: 1rem;
6498
6583
  }
6499
6584
 
6500
6585
  .cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
6501
- margin-right: 0;
6502
- margin-bottom: 0.5rem;
6586
+ margin-block-end: 0.5rem;
6587
+ margin-inline-end: 0;
6503
6588
  }
6504
6589
 
6505
6590
  .cds--radio-button-group--label-right .cds--radio-button__label,
@@ -6514,13 +6599,13 @@ fieldset[disabled] .cds--form__helper-text {
6514
6599
 
6515
6600
  .cds--radio-button-group--label-left .cds--radio-button__appearance,
6516
6601
  .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance {
6517
- margin-right: 0;
6518
- margin-left: 0.5rem;
6602
+ margin-inline-end: 0;
6603
+ margin-inline-start: 0.5rem;
6519
6604
  }
6520
6605
 
6521
6606
  .cds--data-table-container {
6522
6607
  position: relative;
6523
- padding-top: 0.125rem;
6608
+ padding-block-start: 0.125rem;
6524
6609
  }
6525
6610
 
6526
6611
  .cds--data-table-content {
@@ -6528,9 +6613,21 @@ fieldset[disabled] .cds--form__helper-text {
6528
6613
  overflow-x: auto;
6529
6614
  }
6530
6615
 
6616
+ .cds--data-table-content:focus {
6617
+ outline: 2px solid var(--cds-focus, #0f62fe);
6618
+ outline-offset: -2px;
6619
+ }
6620
+ @media screen and (prefers-contrast) {
6621
+ .cds--data-table-content:focus {
6622
+ outline-style: dotted;
6623
+ }
6624
+ }
6625
+
6531
6626
  .cds--data-table-header {
6532
- padding: 1rem 0 1.5rem 1rem;
6533
6627
  background: var(--cds-layer);
6628
+ padding-block-end: 1.5rem;
6629
+ padding-block-start: 1rem;
6630
+ padding-inline: 1rem;
6534
6631
  }
6535
6632
 
6536
6633
  .cds--data-table-header__title {
@@ -6550,19 +6647,19 @@ fieldset[disabled] .cds--form__helper-text {
6550
6647
  }
6551
6648
  @media (min-width: 42rem) {
6552
6649
  .cds--data-table-header__description {
6553
- max-width: 50ch;
6650
+ max-inline-size: 50ch;
6554
6651
  }
6555
6652
  }
6556
6653
  @media (min-width: 66rem) {
6557
6654
  .cds--data-table-header__description {
6558
- max-width: 80ch;
6655
+ max-inline-size: 80ch;
6559
6656
  }
6560
6657
  }
6561
6658
 
6562
6659
  .cds--data-table {
6563
- width: 100%;
6564
6660
  border-collapse: collapse;
6565
6661
  border-spacing: 0;
6662
+ inline-size: 100%;
6566
6663
  }
6567
6664
 
6568
6665
  .cds--data-table thead {
@@ -6578,14 +6675,14 @@ fieldset[disabled] .cds--form__helper-text {
6578
6675
  font-weight: var(--cds-body-compact-01-font-weight, 400);
6579
6676
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
6580
6677
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6581
- width: 100%;
6582
6678
  background-color: var(--cds-layer);
6679
+ inline-size: 100%;
6583
6680
  }
6584
6681
 
6585
6682
  .cds--data-table tr {
6586
- width: 100%;
6587
- height: 3rem;
6588
6683
  border: none;
6684
+ block-size: 3rem;
6685
+ inline-size: 100%;
6589
6686
  }
6590
6687
 
6591
6688
  .cds--data-table tbody tr,
@@ -6600,9 +6697,9 @@ fieldset[disabled] .cds--form__helper-text {
6600
6697
 
6601
6698
  .cds--data-table tbody tr:hover td,
6602
6699
  .cds--data-table tbody tr:hover th {
6603
- border-top: 1px solid var(--cds-layer-hover);
6604
- border-bottom: 1px solid var(--cds-layer-hover);
6605
6700
  background: var(--cds-layer-hover);
6701
+ border-block-end: 1px solid var(--cds-layer-hover);
6702
+ border-block-start: 1px solid var(--cds-layer-hover);
6606
6703
  color: var(--cds-text-primary, #161616);
6607
6704
  }
6608
6705
 
@@ -6616,33 +6713,33 @@ fieldset[disabled] .cds--form__helper-text {
6616
6713
 
6617
6714
  .cds--data-table th,
6618
6715
  .cds--data-table td {
6619
- text-align: left;
6716
+ text-align: start;
6620
6717
  vertical-align: middle;
6621
6718
  }
6622
6719
 
6623
6720
  .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
6624
- padding-top: 1rem;
6625
- padding-bottom: 1rem;
6721
+ padding-block-end: 1rem;
6722
+ padding-block-start: 1rem;
6626
6723
  }
6627
6724
  .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
6628
- padding-top: 0.5rem;
6725
+ padding-block-start: 0.5rem;
6629
6726
  }
6630
6727
  .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
6631
- padding-top: 0.8125rem;
6728
+ padding-block-start: 0.8125rem;
6632
6729
  }
6633
6730
  .cds--data-table.cds--data-table--top-aligned-body td {
6634
6731
  vertical-align: top;
6635
6732
  }
6636
6733
 
6637
6734
  .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
6638
- padding-top: 1rem;
6639
- padding-bottom: 1rem;
6735
+ padding-block-end: 1rem;
6736
+ padding-block-start: 1rem;
6640
6737
  }
6641
6738
  .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
6642
- padding-top: 0.5rem;
6739
+ padding-block-start: 0.5rem;
6643
6740
  }
6644
6741
  .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
6645
- padding-top: 0.8125rem;
6742
+ padding-block-start: 0.8125rem;
6646
6743
  }
6647
6744
  .cds--data-table.cds--data-table--top-aligned-header th {
6648
6745
  vertical-align: top;
@@ -6650,7 +6747,7 @@ fieldset[disabled] .cds--form__helper-text {
6650
6747
 
6651
6748
  .cds--data-table th[align=right],
6652
6749
  .cds--data-table td[align=right] {
6653
- text-align: right;
6750
+ text-align: end;
6654
6751
  }
6655
6752
 
6656
6753
  .cds--data-table th[align=center],
@@ -6659,33 +6756,33 @@ fieldset[disabled] .cds--form__helper-text {
6659
6756
  }
6660
6757
 
6661
6758
  .cds--data-table th {
6662
- padding-right: 1rem;
6663
- padding-left: 1rem;
6664
6759
  background-color: var(--cds-layer-accent);
6665
6760
  color: var(--cds-text-primary, #161616);
6761
+ padding-inline-end: 1rem;
6762
+ padding-inline-start: 1rem;
6666
6763
  }
6667
6764
 
6668
6765
  .cds--data-table th:last-of-type {
6669
6766
  position: static;
6670
- width: auto;
6767
+ inline-size: auto;
6671
6768
  }
6672
6769
 
6673
6770
  .cds--data-table .cds--table-header-label {
6674
- text-align: left;
6771
+ text-align: start;
6675
6772
  }
6676
6773
 
6677
6774
  .cds--data-table td,
6678
6775
  .cds--data-table tbody th {
6679
- padding-right: 1rem;
6680
- padding-left: 1rem;
6681
- border-top: 1px solid var(--cds-layer);
6682
- border-bottom: 1px solid var(--cds-border-subtle);
6683
6776
  background: var(--cds-layer);
6777
+ border-block-end: 1px solid var(--cds-border-subtle);
6778
+ border-block-start: 1px solid var(--cds-layer);
6684
6779
  color: var(--cds-text-secondary, #525252);
6780
+ padding-inline-end: 1rem;
6781
+ padding-inline-start: 1rem;
6685
6782
  }
6686
6783
  .cds--data-table td + td:first-of-type,
6687
6784
  .cds--data-table tbody th + td:first-of-type {
6688
- padding-left: 0.75rem;
6785
+ padding-inline-start: 0.75rem;
6689
6786
  }
6690
6787
 
6691
6788
  @supports (-moz-appearance: none) {
@@ -6737,8 +6834,8 @@ fieldset[disabled] .cds--form__helper-text {
6737
6834
 
6738
6835
  .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
6739
6836
  position: relative;
6740
- top: 0.1875rem;
6741
- margin-right: 0.5rem;
6837
+ inset-block-start: 0.1875rem;
6838
+ margin-inline-end: 0.5rem;
6742
6839
  }
6743
6840
 
6744
6841
  .cds--data-table .cds--overflow-menu:hover,
@@ -6757,47 +6854,47 @@ fieldset[disabled] .cds--form__helper-text {
6757
6854
 
6758
6855
  .cds--data-table--xs td.cds--table-column-menu,
6759
6856
  .cds--data-table--sm td.cds--table-column-menu {
6760
- height: 1.5rem;
6761
- padding-top: 0;
6762
- padding-bottom: 0;
6857
+ block-size: 1.5rem;
6858
+ padding-block-end: 0;
6859
+ padding-block-start: 0;
6763
6860
  }
6764
6861
 
6765
6862
  .cds--data-table--sm td.cds--table-column-menu {
6766
- height: 2rem;
6863
+ block-size: 2rem;
6767
6864
  }
6768
6865
 
6769
6866
  .cds--data-table--md td.cds--table-column-menu {
6770
- height: 2.5rem;
6867
+ block-size: 2.5rem;
6771
6868
  }
6772
6869
 
6773
6870
  .cds--data-table--xl .cds--table-column-menu {
6774
- padding-top: 0.5rem;
6871
+ padding-block-start: 0.5rem;
6775
6872
  }
6776
6873
 
6777
6874
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
6778
- border-bottom: 1px solid var(--cds-layer);
6875
+ border-block-end: 1px solid var(--cds-layer);
6779
6876
  }
6780
6877
 
6781
6878
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
6782
- border-top: 1px solid var(--cds-layer-accent);
6783
- border-bottom: 1px solid var(--cds-layer-accent);
6784
6879
  background-color: var(--cds-layer-accent);
6880
+ border-block-end: 1px solid var(--cds-layer-accent);
6881
+ border-block-start: 1px solid var(--cds-layer-accent);
6785
6882
  }
6786
6883
 
6787
6884
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
6788
- border-top: 1px solid var(--cds-layer-hover);
6789
- border-bottom: 1px solid var(--cds-layer-hover);
6790
6885
  background-color: var(--cds-layer-hover);
6886
+ border-block-end: 1px solid var(--cds-layer-hover);
6887
+ border-block-start: 1px solid var(--cds-layer-hover);
6791
6888
  }
6792
6889
 
6793
6890
  .cds--table-column-checkbox .cds--checkbox-label {
6794
- padding-left: 0;
6891
+ padding-inline-start: 0;
6795
6892
  }
6796
6893
 
6797
6894
  .cds--data-table th.cds--table-column-checkbox {
6798
6895
  position: static;
6799
- width: 2rem;
6800
6896
  background: var(--cds-layer-accent);
6897
+ inline-size: 2rem;
6801
6898
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
6802
6899
  }
6803
6900
 
@@ -6805,100 +6902,100 @@ fieldset[disabled] .cds--form__helper-text {
6805
6902
  .cds--data-table tbody td.cds--table-column-checkbox,
6806
6903
  .cds--data-table thead th.cds--table-expand,
6807
6904
  .cds--data-table tbody td.cds--table-expand {
6808
- min-width: 0;
6905
+ min-inline-size: 0;
6809
6906
  }
6810
6907
 
6811
6908
  .cds--data-table thead th.cds--table-column-checkbox,
6812
6909
  .cds--data-table tbody td.cds--table-column-checkbox {
6813
- min-width: 2.5rem;
6814
- padding-right: 0.25rem;
6815
- padding-left: 1rem;
6910
+ min-inline-size: 2.5rem;
6911
+ padding-inline-end: 0.25rem;
6912
+ padding-inline-start: 1rem;
6816
6913
  }
6817
6914
 
6818
6915
  .cds--data-table thead th.cds--table-expand,
6819
6916
  .cds--data-table tbody td.cds--table-expand {
6820
- width: 2rem;
6821
- height: 2rem;
6917
+ block-size: 2rem;
6918
+ inline-size: 2rem;
6822
6919
  }
6823
6920
 
6824
6921
  .cds--data-table--xs thead th.cds--table-expand,
6825
6922
  .cds--data-table--xs tbody td.cds--table-expand {
6826
- width: 1.5rem;
6827
- height: 1.5rem;
6828
6923
  padding: 0 0 0 0.5rem;
6924
+ block-size: 1.5rem;
6925
+ inline-size: 1.5rem;
6829
6926
  }
6830
6927
 
6831
6928
  .cds--data-table--sm thead th.cds--table-expand,
6832
6929
  .cds--data-table--sm tbody td.cds--table-expand {
6833
- width: 2rem;
6834
- height: 2rem;
6835
6930
  padding: 0;
6836
- padding-left: 0.5rem;
6931
+ block-size: 2rem;
6932
+ inline-size: 2rem;
6933
+ padding-inline-start: 0.5rem;
6837
6934
  }
6838
6935
 
6839
6936
  .cds--data-table--md thead th.cds--table-expand,
6840
6937
  .cds--data-table--md tbody td.cds--table-expand {
6841
- width: 2.5rem;
6842
- height: 2.5rem;
6843
6938
  padding: 0.25rem 0 0.25rem 0.5rem;
6939
+ block-size: 2.5rem;
6940
+ inline-size: 2.5rem;
6844
6941
  }
6845
6942
 
6846
6943
  .cds--data-table--xl thead th.cds--table-expand,
6847
6944
  .cds--data-table--xl tbody td.cds--table-expand {
6848
- height: 4rem;
6849
- padding-top: 0.625rem;
6850
- padding-bottom: 1.375rem;
6945
+ block-size: 4rem;
6946
+ padding-block-end: 1.375rem;
6947
+ padding-block-start: 0.625rem;
6851
6948
  }
6852
6949
 
6853
6950
  .cds--data-table--xl .cds--table-column-checkbox {
6854
- padding-top: 0.8125rem;
6951
+ padding-block-start: 0.8125rem;
6855
6952
  }
6856
6953
 
6857
6954
  .cds--data-table--xl .cds--table-column-radio {
6858
- padding-top: 1rem;
6955
+ padding-block-start: 1rem;
6859
6956
  }
6860
6957
 
6861
6958
  .cds--table-column-radio {
6862
- width: 48px;
6959
+ inline-size: 48px;
6863
6960
  }
6864
6961
 
6865
6962
  .cds--table-column-radio .cds--radio-button__appearance {
6866
- margin-right: -0.125rem;
6963
+ margin-inline-end: -0.125rem;
6867
6964
  }
6868
6965
 
6869
6966
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
6870
6967
  tr.cds--data-table--selected td {
6871
- border-top: 1px solid var(--cds-layer-selected);
6872
- border-bottom: 1px solid var(--cds-layer-active);
6873
6968
  background-color: var(--cds-layer-selected);
6969
+ border-block-end: 1px solid var(--cds-layer-active);
6970
+ border-block-start: 1px solid var(--cds-layer-selected);
6874
6971
  color: var(--cds-text-primary, #161616);
6875
6972
  }
6876
6973
 
6877
6974
  .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
6878
6975
  tr.cds--data-table--selected:first-of-type td {
6879
- border-top: 1px solid var(--cds-border-subtle-selected);
6976
+ border-block-start: 1px solid var(--cds-border-subtle-selected);
6880
6977
  }
6881
6978
 
6882
6979
  .cds--data-table--zebra tbody tr:last-of-type:nth-child(odd).cds--data-table--selected td,
6883
6980
  .cds--data-table--zebra tbody tr:last-of-type:nth-child(even).cds--data-table--selected td,
6884
6981
  tr.cds--data-table--selected:last-of-type td {
6885
- border-top: 1px solid var(--cds-layer-selected);
6886
- border-bottom: 1px solid var(--cds-layer-selected);
6982
+ border-block-end: 1px solid var(--cds-layer-selected);
6983
+ border-block-start: 1px solid var(--cds-layer-selected);
6887
6984
  }
6888
6985
 
6889
6986
  .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected td {
6890
- border-bottom: 1px solid var(--cds-layer-active);
6987
+ border-block-end: 1px solid var(--cds-layer-active);
6891
6988
  }
6892
6989
 
6893
6990
  .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
6894
- border-bottom: 1px solid var(--cds-layer-selected-hover);
6991
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
6895
6992
  }
6896
6993
 
6897
6994
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
6898
6995
  .cds--data-table tbody .cds--data-table--selected:hover td {
6899
- border-top: 1px solid var(--cds-layer-selected-hover);
6900
- border-bottom: 1px solid var(--cds-layer-selected-hover);
6901
6996
  background: var(--cds-layer-selected-hover);
6997
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
6998
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
6902
6999
  color: var(--cds-text-primary, #161616);
6903
7000
  }
6904
7001
 
@@ -6909,108 +7006,108 @@ tr.cds--data-table--selected:last-of-type td {
6909
7006
  .cds--data-table--xs thead tr,
6910
7007
  .cds--data-table--xs tbody tr,
6911
7008
  .cds--data-table--xs tbody tr th {
6912
- height: 1.5rem;
7009
+ block-size: 1.5rem;
6913
7010
  }
6914
7011
 
6915
7012
  .cds--data-table--xs .cds--table-header-label {
6916
- padding-top: 0.125rem;
6917
- padding-bottom: 0.125rem;
7013
+ padding-block-end: 0.125rem;
7014
+ padding-block-start: 0.125rem;
6918
7015
  }
6919
7016
 
6920
7017
  .cds--data-table--xs td,
6921
7018
  .cds--data-table--xs tbody tr th {
6922
- padding-top: 0.125rem;
6923
- padding-bottom: 0.125rem;
7019
+ padding-block-end: 0.125rem;
7020
+ padding-block-start: 0.125rem;
6924
7021
  }
6925
7022
 
6926
7023
  .cds--data-table--xs .cds--overflow-menu {
6927
- width: 2rem;
6928
- height: calc(100% + 1px);
7024
+ block-size: calc(100% + 1px);
7025
+ inline-size: 2rem;
6929
7026
  }
6930
7027
 
6931
7028
  .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
6932
7029
  .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
6933
- padding-top: 0;
6934
- padding-bottom: 0;
7030
+ padding-block-end: 0;
7031
+ padding-block-start: 0;
6935
7032
  }
6936
7033
 
6937
7034
  .cds--data-table.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox-label {
6938
- height: 1.4375rem;
6939
- min-height: 1.4375rem;
7035
+ block-size: 1.4375rem;
7036
+ min-block-size: 1.4375rem;
6940
7037
  }
6941
7038
 
6942
7039
  .cds--data-table--sm thead tr,
6943
7040
  .cds--data-table--sm tbody tr,
6944
7041
  .cds--data-table--sm tbody tr th {
6945
- height: 2rem;
7042
+ block-size: 2rem;
6946
7043
  }
6947
7044
 
6948
7045
  .cds--data-table--sm .cds--table-header-label {
6949
- padding-top: 0.4375rem;
6950
- padding-bottom: 0.4375rem;
7046
+ padding-block-end: 0.4375rem;
7047
+ padding-block-start: 0.4375rem;
6951
7048
  }
6952
7049
 
6953
7050
  .cds--data-table--sm td,
6954
7051
  .cds--data-table--sm tbody tr th,
6955
7052
  .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
6956
- padding-top: 0.4375rem;
6957
- padding-bottom: 0.375rem;
7053
+ padding-block-end: 0.375rem;
7054
+ padding-block-start: 0.4375rem;
6958
7055
  }
6959
7056
 
6960
7057
  .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
6961
7058
  .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
6962
- padding-top: 0.1875rem;
6963
- padding-bottom: 0.1875rem;
7059
+ padding-block-end: 0.1875rem;
7060
+ padding-block-start: 0.1875rem;
6964
7061
  }
6965
7062
 
6966
7063
  .cds--data-table--sm .cds--overflow-menu {
6967
- height: calc(100% + 1px);
7064
+ block-size: calc(100% + 1px);
6968
7065
  }
6969
7066
 
6970
7067
  .cds--data-table--md thead tr,
6971
7068
  .cds--data-table--md tbody tr,
6972
7069
  .cds--data-table--md tbody tr th {
6973
- height: 2.5rem;
7070
+ block-size: 2.5rem;
6974
7071
  }
6975
7072
 
6976
7073
  .cds--data-table--md .cds--table-header-label,
6977
7074
  .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
6978
- padding-top: 0.4375rem;
6979
- padding-bottom: 0.4375rem;
7075
+ padding-block-end: 0.4375rem;
7076
+ padding-block-start: 0.4375rem;
6980
7077
  }
6981
7078
 
6982
7079
  .cds--data-table--md td,
6983
7080
  .cds--data-table--md tbody tr th {
6984
- padding-top: 0.4375rem;
6985
- padding-bottom: 0.375rem;
7081
+ padding-block-end: 0.375rem;
7082
+ padding-block-start: 0.4375rem;
6986
7083
  }
6987
7084
 
6988
7085
  .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
6989
7086
  .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
6990
- padding-top: 0.1875rem;
6991
- padding-bottom: 0.1875rem;
7087
+ padding-block-end: 0.1875rem;
7088
+ padding-block-start: 0.1875rem;
6992
7089
  }
6993
7090
 
6994
7091
  .cds--data-table--md .cds--table-column-menu {
6995
- padding-top: 0.1875rem;
6996
- padding-bottom: 0.1875rem;
7092
+ padding-block-end: 0.1875rem;
7093
+ padding-block-start: 0.1875rem;
6997
7094
  }
6998
7095
 
6999
7096
  .cds--data-table--xl thead tr,
7000
7097
  .cds--data-table--xl tbody tr,
7001
7098
  .cds--data-table--xl tbody tr th {
7002
- height: 4rem;
7099
+ block-size: 4rem;
7003
7100
  }
7004
7101
 
7005
7102
  .cds--data-table--xl .cds--table-header-label {
7006
- padding-top: 1rem;
7007
- padding-bottom: 1rem;
7103
+ padding-block-end: 1rem;
7104
+ padding-block-start: 1rem;
7008
7105
  }
7009
7106
 
7010
7107
  .cds--data-table--xl td,
7011
7108
  .cds--data-table--xl tbody tr th {
7012
- padding-top: 1rem;
7013
- padding-bottom: 1rem;
7109
+ padding-block-end: 1rem;
7110
+ padding-block-start: 1rem;
7014
7111
  }
7015
7112
 
7016
7113
  .cds--data-table--xl th,
@@ -7026,11 +7123,11 @@ tr.cds--data-table--selected:last-of-type td {
7026
7123
  }
7027
7124
 
7028
7125
  .cds--data-table--static {
7029
- width: auto;
7126
+ inline-size: auto;
7030
7127
  }
7031
7128
 
7032
7129
  .cds--data-table-container--static {
7033
- width: fit-content;
7130
+ inline-size: fit-content;
7034
7131
  }
7035
7132
 
7036
7133
  .cds--data-table_inner-container {
@@ -7053,14 +7150,14 @@ tr.cds--data-table--selected:last-of-type td {
7053
7150
  .cds--data-table--sticky-header thead {
7054
7151
  position: sticky;
7055
7152
  z-index: 1;
7056
- top: 0;
7057
7153
  overflow: scroll;
7058
- width: 100%;
7154
+ inline-size: 100%;
7155
+ inset-block-start: 0;
7059
7156
  -ms-overflow-style: none;
7060
7157
  will-change: transform;
7061
7158
  }
7062
7159
  .cds--data-table--sticky-header thead tr th {
7063
- border-bottom: 1px solid var(--cds-layer-active);
7160
+ border-block-end: 1px solid var(--cds-layer-active);
7064
7161
  }
7065
7162
  .cds--data-table--sticky-header tbody {
7066
7163
  flex-direction: column;
@@ -7069,52 +7166,52 @@ tr.cds--data-table--selected:last-of-type td {
7069
7166
  will-change: transform;
7070
7167
  }
7071
7168
  .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
7072
- height: auto;
7073
- min-height: 3rem;
7169
+ block-size: auto;
7170
+ min-block-size: 3rem;
7074
7171
  }
7075
7172
  .cds--data-table--sticky-header tr.cds--expandable-row:not(.cds--parent-row) {
7076
- height: auto;
7173
+ block-size: auto;
7077
7174
  }
7078
7175
  .cds--data-table--sticky-header .cds--table-expand {
7079
- max-width: 3rem;
7176
+ max-inline-size: 3rem;
7080
7177
  }
7081
7178
  .cds--data-table--sticky-header thead .cds--table-expand {
7082
7179
  align-items: center;
7083
7180
  }
7084
7181
  .cds--data-table--sticky-header .cds--parent-row {
7085
- min-height: 3rem;
7182
+ min-block-size: 3rem;
7086
7183
  }
7087
7184
  .cds--data-table--sticky-header:not(.cds--data-table--xs):not(.cds--data-table--xl):not(.cds--data-table--sm) td:not(.cds--table-column-menu):not(.cds--table-column-checkbox) {
7088
- padding-top: 0.875rem;
7185
+ padding-block-start: 0.875rem;
7089
7186
  }
7090
7187
  .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
7091
- border-top: 1px solid var(--cds-layer-hover);
7188
+ border-block-start: 1px solid var(--cds-layer-hover);
7092
7189
  }
7093
7190
  .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
7094
7191
  overflow: hidden;
7095
7192
  }
7096
7193
  .cds--data-table--sticky-header tr.cds--data-table--selected:first-of-type td {
7097
- border-top: none;
7194
+ border-block-start: none;
7098
7195
  }
7099
7196
  .cds--data-table--sticky-header thead th.cds--table-column-checkbox,
7100
7197
  .cds--data-table--sticky-header tbody tr td.cds--table-column-checkbox {
7101
- width: 2.25rem;
7102
- min-width: 2.25rem;
7103
7198
  align-items: center;
7199
+ inline-size: 2.25rem;
7200
+ min-inline-size: 2.25rem;
7104
7201
  }
7105
7202
  .cds--data-table--sticky-header.cds--data-table--xl thead th.cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--xl td.cds--table-column-checkbox {
7106
7203
  align-items: flex-start;
7107
7204
  }
7108
7205
  .cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty {
7109
- max-width: 4rem;
7206
+ max-inline-size: 4rem;
7110
7207
  }
7111
7208
  .cds--data-table--sticky-header th:empty:not(.cds--table-expand) {
7112
- max-width: 2.25rem;
7209
+ max-inline-size: 2.25rem;
7113
7210
  }
7114
7211
  .cds--data-table--sticky-header td.cds--table-column-menu {
7115
- height: auto;
7116
7212
  align-items: center;
7117
- padding-top: 0;
7213
+ block-size: auto;
7214
+ padding-block-start: 0;
7118
7215
  }
7119
7216
  .cds--data-table--sticky-header thead::-webkit-scrollbar,
7120
7217
  .cds--data-table--sticky-header tbody::-webkit-scrollbar {
@@ -7127,51 +7224,51 @@ tr.cds--data-table--selected:last-of-type td {
7127
7224
  }
7128
7225
  }
7129
7226
  .cds--data-table--sticky-header tbody tr:last-of-type {
7130
- border-bottom: 0;
7227
+ border-block-end: 0;
7131
7228
  }
7132
7229
  .cds--data-table--sticky-header th:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon),
7133
7230
  .cds--data-table--sticky-header td:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon) {
7134
- width: 100%;
7135
- min-width: 0;
7231
+ inline-size: 100%;
7232
+ min-inline-size: 0;
7136
7233
  }
7137
7234
  .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
7138
- height: auto;
7235
+ block-size: auto;
7139
7236
  }
7140
7237
  .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row) {
7141
- min-height: 1.5rem;
7238
+ min-block-size: 1.5rem;
7142
7239
  }
7143
7240
  .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row) {
7144
- min-height: 2rem;
7241
+ min-block-size: 2rem;
7145
7242
  }
7146
7243
  .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
7147
- min-height: 4rem;
7244
+ min-block-size: 4rem;
7148
7245
  }
7149
7246
  .cds--data-table--sticky-header.cds--data-table--xs tr td.cds--table-expand {
7150
- padding-top: 0.25rem;
7247
+ padding-block-start: 0.25rem;
7151
7248
  }
7152
7249
  .cds--data-table--sticky-header.cds--data-table--sm tr td.cds--table-expand {
7153
- padding-top: 0.5rem;
7250
+ padding-block-start: 0.5rem;
7154
7251
  }
7155
7252
  .cds--data-table--sticky-header .cds--table-header-label {
7156
7253
  display: block;
7157
7254
  overflow-x: hidden;
7158
7255
  text-overflow: ellipsis;
7159
7256
  white-space: nowrap;
7160
- max-width: calc(100% - 10px);
7161
- padding-top: 0.9375rem;
7162
- padding-bottom: 1rem;
7257
+ max-inline-size: calc(100% - 10px);
7163
7258
  overflow-y: hidden;
7259
+ padding-block-end: 1rem;
7260
+ padding-block-start: 0.9375rem;
7164
7261
  }
7165
7262
  .cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label {
7166
- padding-top: 0.1875rem;
7167
- padding-bottom: 0;
7263
+ padding-block-end: 0;
7264
+ padding-block-start: 0.1875rem;
7168
7265
  }
7169
7266
  .cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label {
7170
- padding-top: 0.5rem;
7171
- padding-bottom: 0;
7267
+ padding-block-end: 0;
7268
+ padding-block-start: 0.5rem;
7172
7269
  }
7173
7270
  .cds--data-table--sticky-header.cds--data-table--xl th .cds--table-header-label {
7174
- padding-top: 1rem;
7271
+ padding-block-start: 1rem;
7175
7272
  }
7176
7273
  .cds--data-table--sticky-header.cds--data-table--xl th.cds--table-expand {
7177
7274
  display: flex;
@@ -7182,11 +7279,11 @@ tr.cds--data-table--selected:last-of-type td {
7182
7279
  }
7183
7280
 
7184
7281
  .cds--data-table--max-width {
7185
- max-width: 100%;
7282
+ max-inline-size: 100%;
7186
7283
  }
7187
7284
 
7188
7285
  .cds--data-table--sticky-header {
7189
- max-height: 18.75rem;
7286
+ max-block-size: 18.75rem;
7190
7287
  }
7191
7288
 
7192
7289
  .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
@@ -7367,7 +7464,7 @@ tr.cds--data-table--selected:last-of-type td {
7367
7464
  background: none;
7368
7465
  cursor: pointer;
7369
7466
  text-align: start;
7370
- width: 100%;
7467
+ inline-size: 100%;
7371
7468
  box-sizing: border-box;
7372
7469
  padding: 0;
7373
7470
  border: 0;
@@ -7379,12 +7476,12 @@ tr.cds--data-table--selected:last-of-type td {
7379
7476
  outline-offset: -2px;
7380
7477
  position: relative;
7381
7478
  display: flex;
7382
- width: 2.5rem;
7383
- height: 2.5rem;
7384
- min-height: 2.5rem;
7385
7479
  align-items: center;
7386
7480
  justify-content: center;
7481
+ block-size: 2.5rem;
7387
7482
  cursor: pointer;
7483
+ inline-size: 2.5rem;
7484
+ min-block-size: 2.5rem;
7388
7485
  transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7389
7486
  }
7390
7487
  .cds--overflow-menu *,
@@ -7428,13 +7525,13 @@ tr.cds--data-table--selected:last-of-type td {
7428
7525
  }
7429
7526
 
7430
7527
  .cds--overflow-menu--sm {
7431
- width: 2rem;
7432
- height: 2rem;
7528
+ block-size: 2rem;
7529
+ inline-size: 2rem;
7433
7530
  }
7434
7531
 
7435
7532
  .cds--overflow-menu--lg {
7436
- width: 3rem;
7437
- height: 3rem;
7533
+ block-size: 3rem;
7534
+ inline-size: 3rem;
7438
7535
  }
7439
7536
 
7440
7537
  .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
@@ -7463,9 +7560,9 @@ tr.cds--data-table--selected:last-of-type td {
7463
7560
  }
7464
7561
 
7465
7562
  .cds--overflow-menu__icon {
7466
- width: 1rem;
7467
- height: 1rem;
7563
+ block-size: 1rem;
7468
7564
  fill: var(--cds-icon-primary, #161616);
7565
+ inline-size: 1rem;
7469
7566
  }
7470
7567
 
7471
7568
  .cds--overflow-menu__wrapper {
@@ -7483,13 +7580,13 @@ tr.cds--data-table--selected:last-of-type td {
7483
7580
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
7484
7581
  position: absolute;
7485
7582
  z-index: 6000;
7486
- top: 32px;
7487
- left: 0;
7488
7583
  display: none;
7489
- width: 10rem;
7490
7584
  flex-direction: column;
7491
7585
  align-items: flex-start;
7492
7586
  background-color: var(--cds-layer);
7587
+ inline-size: 10rem;
7588
+ inset-block-start: 32px;
7589
+ inset-inline-start: 0;
7493
7590
  list-style: none;
7494
7591
  }
7495
7592
  .cds--overflow-menu-options *,
@@ -7526,57 +7623,57 @@ tr.cds--data-table--selected:last-of-type td {
7526
7623
  }
7527
7624
 
7528
7625
  .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
7529
- top: -0.1875rem;
7530
- left: 0;
7531
- width: 2.5rem;
7532
- height: 0.1875rem;
7626
+ block-size: 0.1875rem;
7627
+ inline-size: 2.5rem;
7628
+ inset-block-start: -0.1875rem;
7629
+ inset-inline-start: 0;
7533
7630
  }
7534
7631
 
7535
7632
  .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7536
- bottom: -0.5rem;
7537
- left: 0;
7538
- width: 2.5rem;
7539
- height: 0.5rem;
7633
+ block-size: 0.5rem;
7634
+ inline-size: 2.5rem;
7635
+ inset-block-end: -0.5rem;
7636
+ inset-inline-start: 0;
7540
7637
  }
7541
7638
 
7542
7639
  .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
7543
- top: 0;
7544
- right: -0.375rem;
7545
- width: 0.375rem;
7546
- height: 2.5rem;
7640
+ block-size: 2.5rem;
7641
+ inline-size: 0.375rem;
7642
+ inset-block-start: 0;
7643
+ inset-inline-end: -0.375rem;
7547
7644
  }
7548
7645
 
7549
7646
  .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7550
- top: 0;
7551
- left: -0.375rem;
7552
- width: 0.375rem;
7553
- height: 2.5rem;
7647
+ block-size: 2.5rem;
7648
+ inline-size: 0.375rem;
7649
+ inset-block-start: 0;
7650
+ inset-inline-start: -0.375rem;
7554
7651
  }
7555
7652
 
7556
7653
  .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7557
- width: 2rem;
7654
+ inline-size: 2rem;
7558
7655
  }
7559
7656
  .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7560
- height: 2rem;
7657
+ block-size: 2rem;
7561
7658
  }
7562
7659
 
7563
7660
  .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7564
- width: 3rem;
7661
+ inline-size: 3rem;
7565
7662
  }
7566
7663
  .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7567
- height: 3rem;
7664
+ block-size: 3rem;
7568
7665
  }
7569
7666
 
7570
7667
  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
7571
7668
  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
7572
- right: 0;
7573
- left: auto;
7669
+ inset-inline-end: 0;
7670
+ inset-inline-start: auto;
7574
7671
  }
7575
7672
 
7576
7673
  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
7577
7674
  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7578
- top: auto;
7579
- bottom: 0;
7675
+ inset-block-end: 0;
7676
+ inset-block-start: auto;
7580
7677
  }
7581
7678
 
7582
7679
  .cds--overflow-menu-options--open {
@@ -7584,7 +7681,7 @@ tr.cds--data-table--selected:last-of-type td {
7584
7681
  }
7585
7682
 
7586
7683
  .cds--overflow-menu-options__content {
7587
- width: 100%;
7684
+ inline-size: 100%;
7588
7685
  }
7589
7686
 
7590
7687
  .cds--overflow-menu-options__option {
@@ -7596,11 +7693,11 @@ tr.cds--data-table--selected:last-of-type td {
7596
7693
  font-size: 100%;
7597
7694
  vertical-align: baseline;
7598
7695
  display: flex;
7599
- width: 100%;
7600
- height: 2.5rem;
7601
7696
  align-items: center;
7602
7697
  padding: 0;
7603
7698
  background-color: transparent;
7699
+ block-size: 2.5rem;
7700
+ inline-size: 100%;
7604
7701
  transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7605
7702
  }
7606
7703
  .cds--overflow-menu-options__option *,
@@ -7610,24 +7707,24 @@ tr.cds--data-table--selected:last-of-type td {
7610
7707
  }
7611
7708
 
7612
7709
  .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
7613
- height: 2rem;
7710
+ block-size: 2rem;
7614
7711
  }
7615
7712
 
7616
7713
  .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
7617
- height: 3rem;
7714
+ block-size: 3rem;
7618
7715
  }
7619
7716
 
7620
7717
  .cds--overflow-menu--divider {
7621
- border-top: 1px solid var(--cds-border-subtle);
7718
+ border-block-start: 1px solid var(--cds-border-subtle);
7622
7719
  }
7623
7720
 
7624
7721
  .cds--overflow-menu--light .cds--overflow-menu--divider {
7625
- border-top: 1px solid var(--cds-border-subtle);
7722
+ border-block-start: 1px solid var(--cds-border-subtle);
7626
7723
  }
7627
7724
 
7628
7725
  a.cds--overflow-menu-options__btn::before {
7629
7726
  display: inline-block;
7630
- height: 100%;
7727
+ block-size: 100%;
7631
7728
  content: "";
7632
7729
  vertical-align: middle;
7633
7730
  }
@@ -7640,18 +7737,18 @@ a.cds--overflow-menu-options__btn::before {
7640
7737
  outline: 2px solid transparent;
7641
7738
  outline-offset: -2px;
7642
7739
  display: inline-flex;
7643
- width: 100%;
7644
- max-width: 11.25rem;
7645
- height: 100%;
7646
7740
  align-items: center;
7647
7741
  padding: 0 1rem;
7648
7742
  border: none;
7649
7743
  background-color: transparent;
7744
+ block-size: 100%;
7650
7745
  color: var(--cds-text-secondary, #525252);
7651
7746
  cursor: pointer;
7652
7747
  font-family: inherit;
7653
7748
  font-weight: 400;
7654
- text-align: left;
7749
+ inline-size: 100%;
7750
+ max-inline-size: 11.25rem;
7751
+ text-align: start;
7655
7752
  transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7656
7753
  }
7657
7754
  .cds--overflow-menu-options__btn:hover {
@@ -7718,10 +7815,10 @@ a.cds--overflow-menu-options__btn::before {
7718
7815
  }
7719
7816
 
7720
7817
  .cds--overflow-menu--flip {
7721
- left: -140px;
7818
+ inset-inline-start: -140px;
7722
7819
  }
7723
7820
  .cds--overflow-menu--flip::before {
7724
- left: 145px;
7821
+ inset-inline-start: 145px;
7725
7822
  }
7726
7823
 
7727
7824
  /* stylelint-disable */