@ds-mo/ui 14.8.0 → 14.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -699,6 +699,7 @@
699
699
  }
700
700
 
701
701
  :where(.ds-table__header-label--interactive:focus-visible),
702
+ :where(.ds-table__header-labels[data-header-help]:focus-visible),
702
703
  :where(.ds-table__selection-control:focus-visible) {
703
704
  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
704
705
  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
@@ -730,6 +731,12 @@
730
731
  gap: var(--dimension-space-025);
731
732
  }
732
733
 
734
+ :where(.ds-table__header-labels[data-header-help]) {
735
+ border-radius: var(--dimension-radius-025);
736
+ cursor: default;
737
+ outline: none;
738
+ }
739
+
733
740
  :where(.ds-table__header-segment) {
734
741
  flex: 0 1 auto;
735
742
  gap: var(--dimension-space-025);
@@ -1439,14 +1446,42 @@
1439
1446
  min-block-size: var(--dimension-space-025);
1440
1447
  }
1441
1448
 
1449
+ :where(.ds-table--state-fill .ds-table__table) {
1450
+ block-size: 100%;
1451
+ }
1452
+
1453
+ :where(.ds-table--state-fill .ds-table__viewport) {
1454
+ min-block-size: var(--ds-table-max-block-size);
1455
+ }
1456
+
1457
+ :where(.ds-table--state-fill .ds-table__state-body),
1458
+ :where(.ds-table--state-fill .ds-table__state-row),
1459
+ :where(.ds-table--state-fill .ds-table__state-cell) {
1460
+ block-size: 100%;
1461
+ }
1462
+
1442
1463
  :where(.ds-table__state-cell) {
1443
- block-size: calc(var(--dimension-size-800) * 2);
1464
+ min-block-size: calc(var(--dimension-size-800) * 2);
1444
1465
  }
1445
1466
 
1446
1467
  :where(.ds-table__state-band) {
1468
+ align-self: stretch;
1469
+ flex: 1 1 auto;
1447
1470
  min-block-size: calc(var(--dimension-size-800) * 2);
1448
1471
  }
1449
1472
 
1473
+ :where(.ds-table--state-fill .ds-table__state-band) {
1474
+ block-size: 100%;
1475
+ min-block-size: 100%;
1476
+ }
1477
+
1478
+ :where(.ds-table__state-band) > ds-empty-state {
1479
+ flex: 1 1 auto;
1480
+ min-block-size: 0;
1481
+ inline-size: 100%;
1482
+ block-size: 100%;
1483
+ }
1484
+
1450
1485
  :where(.ds-table__skeleton-row) {
1451
1486
  pointer-events: none;
1452
1487
  }
@@ -1525,6 +1560,7 @@
1525
1560
  }
1526
1561
 
1527
1562
  :where(.ds-table__header-label--interactive:focus-visible),
1563
+ :where(.ds-table__header-labels[data-header-help]:focus-visible),
1528
1564
  :where(.ds-table__selection-control:focus-visible),
1529
1565
  :where(.ds-table__viewport:focus-visible) {
1530
1566
  outline-color: var(--ds-forced-color-selected);
@@ -248,6 +248,8 @@ export interface TableColumn {
248
248
  header: string;
249
249
  /** Screen-reader-only column name for an intentionally blank visual header. */
250
250
  headerLabel?: string;
251
+ /** Supplementary header help. Does not replace the visible or accessible column name. */
252
+ help?: string;
251
253
  /** Optional labels for columns that present and sort multiple related data points. */
252
254
  headerSegments?: TableHeaderSegment[];
253
255
  align?: TableCellAlign;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "14.8.0",
3
+ "version": "14.9.0",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",