@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/data-table/data-table.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_k21i7_3 {
+  ._root_ywjb2_3 {
     --_table-radius: var(
     	--table-radius,
     	var(--sys-radius-md)
@@ -70,18 +70,18 @@
     );
     display: flex;
     flex-direction: column;
-    gap: var(--sys-unit-8);
-    color: var(--sys-color-text);
+    gap: var(--table-gap, var(--sys-unit-8));
+    color: var(--table-fg, var(--sys-color-text));
     min-block-size: 0;
   }
-  ._toolbar_k21i7_77 {
+  ._toolbar_ywjb2_77 {
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--sys-unit-8);
+    gap: var(--table-toolbar-gap, var(--sys-unit-8));
   }
-  ._scrollFrame_k21i7_84 {
+  ._scrollFrame_ywjb2_84 {
     position: relative;
     display: flex;
     flex: 0 1 auto;
@@ -89,16 +89,10 @@
     min-block-size: 0;
     timeline-scope: --table-scroll;
   }
-  ._stale_k21i7_92 {
-    display: flex;
-    flex: 1 1 0;
-    min-inline-size: 0;
-    min-block-size: 0;
-  }
-  ._staleOverlay_k21i7_98 {
+  ._staleOverlay_ywjb2_92 {
     border-radius: var(--_table-radius);
   }
-  ._contentWrap_k21i7_101 {
+  ._contentWrap_ywjb2_95 {
     position: relative;
     isolation: isolate;
     flex: 1 1 0;
@@ -106,19 +100,19 @@
     min-block-size: 0;
     overflow: auto;
     border-radius: var(--_table-radius);
-    background: var(--sys-color-surface);
+    background: var(--table-bg, var(--sys-color-surface));
     scroll-timeline: --table-scroll inline;
   }
-  ._contentWrap_k21i7_101 {
+  ._contentWrap_ywjb2_95 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._contentWrap_k21i7_101:focus-visible {
+  ._contentWrap_ywjb2_95:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @supports (animation-timeline: scroll()) {
-    ._scrollFrame_k21i7_84::before,
-    ._scrollFrame_k21i7_84::after {
+    ._scrollFrame_ywjb2_84::before,
+    ._scrollFrame_ywjb2_84::after {
       position: absolute;
       z-index: 1;
       inset-block: 0 var(--table-scrollbar-block, 0px);
@@ -129,24 +123,24 @@
       animation-fill-mode: both;
       animation-timeline: --table-scroll;
     }
-    ._scrollFrame_k21i7_84:has(._th_k21i7_132[data-sticky=start])::before,
-    ._scrollFrame_k21i7_84:has(._th_k21i7_132[data-sticky=end])::after {
+    ._scrollFrame_ywjb2_84:has(._th_ywjb2_126[data-sticky=start])::before,
+    ._scrollFrame_ywjb2_84:has(._th_ywjb2_126[data-sticky=end])::after {
       content: "";
     }
-    ._scrollFrame_k21i7_84::before {
+    ._scrollFrame_ywjb2_84::before {
       inset-inline-start: var(--table-sticky-total, 0px);
       background: linear-gradient(to right, var(--_table-edge-shadow), transparent);
-      animation-name: _edgeStart_k21i7_1;
+      animation-name: _edgeStart_ywjb2_1;
       animation-range: var(--_table-edge-slack) calc(var(--_table-edge-cue) + var(--_table-edge-slack));
     }
-    ._scrollFrame_k21i7_84::after {
+    ._scrollFrame_ywjb2_84::after {
       inset-inline-end: calc(var(--table-sticky-end-total, 0px) + var(--table-scrollbar-inline, 0px));
       background: linear-gradient(to left, var(--_table-edge-shadow), transparent);
-      animation-name: _edgeEnd_k21i7_1;
+      animation-name: _edgeEnd_ywjb2_1;
       animation-range: calc(100% - var(--_table-edge-cue) - var(--_table-edge-slack)) calc(100% - var(--_table-edge-slack));
     }
   }
-  @keyframes _edgeStart_k21i7_1 {
+  @keyframes _edgeStart_ywjb2_1 {
     from {
       opacity: 0;
     }
@@ -154,7 +148,7 @@
       opacity: 1;
     }
   }
-  @keyframes _edgeEnd_k21i7_1 {
+  @keyframes _edgeEnd_ywjb2_1 {
     from {
       opacity: 1;
     }
@@ -162,66 +156,66 @@
       opacity: 0;
     }
   }
-  ._refreshFailed_k21i7_165 {
+  ._refreshFailed_ywjb2_159 {
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--sys-unit-6);
-    border-radius: var(--sys-radius-md);
-    background: var(--sys-color-error-bg);
-    padding: var(--sys-unit-6) var(--sys-unit-8);
-    color: var(--sys-color-error-fg);
-    font: var(--sys-font-label-medium);
-  }
-  ._table_k21i7_177 {
+    gap: var(--table-refresh-failed-gap, var(--sys-unit-6));
+    border-radius: var(--table-refresh-failed-radius, var(--sys-radius-md));
+    background: var(--table-refresh-failed-bg, var(--sys-color-error-bg));
+    padding: var(--table-refresh-failed-pad-y, var(--sys-unit-6)) var(--table-refresh-failed-pad-x, var(--sys-unit-8));
+    color: var(--table-refresh-failed-fg, var(--sys-color-error-fg));
+    font: var(--table-refresh-failed-font, var(--sys-font-label-medium));
+  }
+  ._table_ywjb2_171 {
     inline-size: max-content;
     min-inline-size: var(--_table-min-inline);
     border-collapse: separate;
     border-spacing: 0;
-    font: var(--sys-font-body-medium);
+    font: var(--table-font, var(--sys-font-body-medium));
     font-variant-numeric: tabular-nums;
   }
-  ._thead_k21i7_185 {
+  ._thead_ywjb2_179 {
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
     background: var(--_table-header-bg);
   }
-  ._th_k21i7_132 {
+  ._th_ywjb2_126 {
     block-size: var(--_table-header-min-block);
     padding: var(--_table-header-pad-y) var(--_table-cell-pad-x);
     vertical-align: middle;
     color: var(--_table-header-fg);
     text-align: start;
-    font: var(--sys-font-label-small);
+    font: var(--table-header-font, var(--sys-font-label-small));
     white-space: nowrap;
   }
-  ._th_k21i7_132:has(> ._sortToggle_k21i7_200) {
+  ._th_ywjb2_126:has(> ._sortToggle_ywjb2_194) {
     padding: 0;
   }
-  ._sortToggle_k21i7_200 {
+  ._sortToggle_ywjb2_194 {
     display: flex;
     align-items: center;
-    gap: var(--sys-unit-4);
+    gap: var(--table-sort-gap, var(--sys-unit-4));
     inline-size: 100%;
-    border-radius: var(--sys-radius-full);
+    border-radius: var(--table-sort-radius, var(--sys-radius-full));
     padding: var(--_table-header-pad-y) var(--_table-cell-pad-x);
     color: inherit;
     font: inherit;
   }
-  ._sortToggle_k21i7_200 {
+  ._sortToggle_ywjb2_194 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._sortToggle_k21i7_200:focus-visible {
+  ._sortToggle_ywjb2_194:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._sortToggle_k21i7_200 {
+  ._sortToggle_ywjb2_194 {
     position: relative;
     isolation: isolate;
   }
-  ._sortToggle_k21i7_200::after {
+  ._sortToggle_ywjb2_194::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -232,91 +226,91 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._sortToggle_k21i7_200::after {
+    ._sortToggle_ywjb2_194::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._sortToggle_k21i7_200:hover:not(:disabled, [data-disabled])::after {
+  ._sortToggle_ywjb2_194:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._sortToggle_k21i7_200:active:not(:disabled, [data-disabled])::after {
+  ._sortToggle_ywjb2_194:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._sortToggle_k21i7_200 {
+  ._sortToggle_ywjb2_194 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
-  ._th_k21i7_132[data-numeric=true] ._sortToggle_k21i7_200 {
+  ._th_ywjb2_126[data-numeric=true] ._sortToggle_ywjb2_194 {
     justify-content: flex-end;
   }
-  ._sortIcon_k21i7_251 {
+  ._sortIcon_ywjb2_245 {
     display: inline-flex;
     flex-shrink: 0;
     font-size: var(--table-sort-icon-size, 1em);
   }
-  ._sortIcon_k21i7_251[data-sort=none] {
+  ._sortIcon_ywjb2_245[data-sort=none] {
     color: color-mix(in oklab, var(--_table-header-fg) 55%, var(--_table-header-bg));
   }
-  ._th_k21i7_132[data-fit=true],
-  ._td_k21i7_260[data-fit=true] {
+  ._th_ywjb2_126[data-fit=true],
+  ._td_ywjb2_254[data-fit=true] {
     inline-size: 1px;
     white-space: nowrap;
   }
-  ._th_k21i7_132[data-numeric=true],
-  ._td_k21i7_260[data-numeric=true] {
+  ._th_ywjb2_126[data-numeric=true],
+  ._td_ywjb2_254[data-numeric=true] {
     text-align: end;
     font-variant-numeric: tabular-nums;
   }
-  ._th_k21i7_132[data-sticky],
-  ._td_k21i7_260[data-sticky] {
+  ._th_ywjb2_126[data-sticky],
+  ._td_ywjb2_254[data-sticky] {
     position: sticky;
     z-index: 1;
   }
-  ._th_k21i7_132[data-sticky] {
+  ._th_ywjb2_126[data-sticky] {
     background: var(--_table-header-bg);
   }
-  ._td_k21i7_260[data-sticky] {
-    background: var(--sys-color-surface);
+  ._td_ywjb2_254[data-sticky] {
+    background: var(--table-bg, var(--sys-color-surface));
   }
   @media not (prefers-reduced-motion) {
-    ._td_k21i7_260[data-sticky] {
+    ._td_ywjb2_254[data-sticky] {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._row_k21i7_285[data-stripe=true] ._td_k21i7_260[data-sticky] {
+  ._row_ywjb2_279[data-stripe=true] ._td_ywjb2_254[data-sticky] {
     background: var(--_table-row-stripe);
   }
-  ._row_k21i7_285:hover ._td_k21i7_260[data-sticky] {
+  ._row_ywjb2_279:hover ._td_ywjb2_254[data-sticky] {
     background: var(--_table-row-hover);
   }
   @media not (prefers-reduced-motion) {
-    ._row_k21i7_285 {
+    ._row_ywjb2_279 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._row_k21i7_285[data-stripe=true] {
+  ._row_ywjb2_279[data-stripe=true] {
     background: var(--_table-row-stripe);
   }
-  ._row_k21i7_285:hover {
+  ._row_ywjb2_279:hover {
     background: var(--_table-row-hover);
   }
-  ._td_k21i7_260 {
+  ._td_ywjb2_254 {
     padding: var(--_table-cell-pad-y) var(--_table-cell-pad-x);
     vertical-align: middle;
     white-space: nowrap;
   }
-  ._subRow_k21i7_307 {
+  ._subRow_ywjb2_301 {
     background: var(--_table-subrow-bg);
   }
-  ._subRow_k21i7_307 > td {
+  ._subRow_ywjb2_301 > td {
     padding: 0;
   }
-  ._subRow_k21i7_307 > ._td_k21i7_260[data-sticky] {
+  ._subRow_ywjb2_301 > ._td_ywjb2_254[data-sticky] {
     background: var(--_table-subrow-bg);
   }
-  ._skeletonBar_k21i7_316 {
-    min-inline-size: var(--sys-unit-16);
+  ._skeletonBar_ywjb2_310 {
+    min-inline-size: var(--table-skeleton-min-inline, var(--sys-unit-16));
   }
-  ._busyCaption_k21i7_319 {
+  ._busyCaption_ywjb2_313 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -324,23 +318,23 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._stateCell_k21i7_327 {
-    padding: var(--sys-unit-24) var(--_table-cell-pad-x);
-    color: var(--sys-color-text-muted);
+  ._stateCell_ywjb2_321 {
+    padding: var(--table-state-pad-y, var(--sys-unit-24)) var(--_table-cell-pad-x);
+    color: var(--table-state-fg, var(--sys-color-text-muted));
     text-align: center;
   }
-  ._errorState_k21i7_332 {
-    color: var(--sys-color-error-fg);
+  ._errorState_ywjb2_326 {
+    color: var(--table-error-fg, var(--sys-color-error-fg));
   }
-  ._pagination_k21i7_335 {
+  ._pagination_ywjb2_329 {
     flex-shrink: 0;
     align-self: flex-end;
   }
-  ._selectionContainer_k21i7_339 {
+  ._selectionContainer_ywjb2_333 {
     container: selection-bar/inline-size;
     min-inline-size: 0;
   }
-  ._selectionBar_k21i7_343 {
+  ._selectionBar_ywjb2_337 {
     --_selection-stagger: var(
     	--selection-stagger,
     	calc(var(--sys-motion-instant) / 4)
@@ -359,107 +353,110 @@
     flex-shrink: 0;
     flex-wrap: nowrap;
     align-items: center;
-    gap: var(--sys-unit-6);
+    gap: var(--selection-gap, var(--sys-unit-6));
     isolation: isolate;
     min-inline-size: 0;
     overflow-x: auto;
     border-radius: var(--_selection-radius);
     padding-block: var(--_selection-pad);
     padding-inline: 0;
-    color: var(--sys-color-text);
+    color: var(--selection-fg, var(--sys-color-text));
     white-space: nowrap;
   }
-  ._selectionBar_k21i7_343 {
+  ._selectionBar_ywjb2_337 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._selectionBar_k21i7_343:focus-visible {
+  ._selectionBar_ywjb2_337:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._selectionBar_k21i7_343::before {
+  ._selectionBar_ywjb2_337::before {
     position: absolute;
     inset: 0;
     z-index: -1;
     border-radius: inherit;
-    background: var(--sys-color-surface);
+    background: var(--selection-bg, var(--sys-color-surface));
     content: "";
     opacity: 0;
     scale: 0.98 0.8;
   }
-  ._selectionBar_k21i7_343[data-selected] {
-    --_selection-text-inset: var(--sys-unit-6);
+  ._selectionBar_ywjb2_337[data-selected] {
+    --_selection-text-inset: var(
+    	--selection-text-inset,
+    	var(--sys-unit-6)
+    );
     padding-inline: var(--_selection-pad);
   }
-  ._selectionBar_k21i7_343[data-selected]::before {
+  ._selectionBar_ywjb2_337[data-selected]::before {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._selectionBar_k21i7_343 {
+    ._selectionBar_ywjb2_337 {
       transition: padding-inline var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_k21i7_343::before {
+    ._selectionBar_ywjb2_337::before {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-accelerate), scale var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_k21i7_343[data-selected] {
+    ._selectionBar_ywjb2_337[data-selected] {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
-    ._selectionBar_k21i7_343[data-selected]::before {
+    ._selectionBar_ywjb2_337[data-selected]::before {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
   }
-  ._selectionSummary_k21i7_413 {
+  ._selectionSummary_ywjb2_410 {
     display: grid;
     flex-shrink: 0;
     align-items: center;
     padding-inline-start: var(--_selection-text-inset);
   }
   @media not (prefers-reduced-motion) {
-    ._selectionSummary_k21i7_413 {
+    ._selectionSummary_ywjb2_410 {
       transition: padding-inline-start var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_k21i7_343[data-selected] ._selectionSummary_k21i7_413 {
+    ._selectionBar_ywjb2_337[data-selected] ._selectionSummary_ywjb2_410 {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
   }
-  ._selectionTotal_k21i7_428,
-  ._selectionCount_k21i7_429,
-  ._selectionMeasure_k21i7_430 {
+  ._selectionTotal_ywjb2_425,
+  ._selectionCount_ywjb2_426,
+  ._selectionMeasure_ywjb2_427 {
     grid-area: 1/1;
-    font: var(--sys-font-body-medium);
+    font: var(--selection-font, var(--sys-font-body-medium));
   }
-  ._selectionTotal_k21i7_428 {
-    color: var(--sys-color-text-muted);
+  ._selectionTotal_ywjb2_425 {
+    color: var(--selection-total-fg, var(--sys-color-text-muted));
   }
-  ._selectionCount_k21i7_429 {
+  ._selectionCount_ywjb2_426 {
     font-variant-numeric: tabular-nums;
   }
-  ._selectionBar_k21i7_343:not([data-selected]) ._selectionCount_k21i7_429 {
+  ._selectionBar_ywjb2_337:not([data-selected]) ._selectionCount_ywjb2_426 {
     opacity: 0;
     translate: 0 var(--sys-unit-2);
   }
-  ._selectionBar_k21i7_343[data-selected] ._selectionCount_k21i7_429 {
+  ._selectionBar_ywjb2_337[data-selected] ._selectionCount_ywjb2_426 {
     opacity: 1;
     translate: 0;
   }
-  ._selectionMeasure_k21i7_430 {
+  ._selectionMeasure_ywjb2_427 {
     visibility: hidden;
     font-variant-numeric: tabular-nums;
   }
-  ._selectionBar_k21i7_343[data-selected] ._selectionTotal_k21i7_428 {
+  ._selectionBar_ywjb2_337[data-selected] ._selectionTotal_ywjb2_425 {
     opacity: 0;
     translate: 0 calc(-1 * var(--sys-unit-2));
   }
   @media not (prefers-reduced-motion) {
-    ._selectionTotal_k21i7_428,
-    ._selectionCount_k21i7_429 {
+    ._selectionTotal_ywjb2_425,
+    ._selectionCount_ywjb2_426 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), translate var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._selectionStatus_k21i7_462 {
+  ._selectionStatus_ywjb2_459 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -467,53 +464,53 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._selectionActions_k21i7_470 {
+  ._selectionActions_ywjb2_467 {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: nowrap;
     align-items: center;
     gap: var(--_selection-pad);
   }
-  ._selectionActions_k21i7_470 > * {
+  ._selectionActions_ywjb2_467 > * {
     opacity: 1;
   }
-  ._selectionActions_k21i7_470[inert] {
+  ._selectionActions_ywjb2_467[inert] {
     visibility: hidden;
   }
-  ._selectionActions_k21i7_470[inert] > * {
+  ._selectionActions_ywjb2_467[inert] > * {
     opacity: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._selectionActions_k21i7_470 {
+    ._selectionActions_ywjb2_467 {
       transition: visibility var(--sys-motion-instant);
     }
-    ._selectionActions_k21i7_470 > * {
+    ._selectionActions_ywjb2_467 > * {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
-    ._selectionActions_k21i7_470:not([inert]) > :nth-child(1) {
+    ._selectionActions_ywjb2_467:not([inert]) > :nth-child(1) {
       transition-delay: var(--_selection-stagger);
     }
-    ._selectionActions_k21i7_470:not([inert]) > :nth-child(2) {
+    ._selectionActions_ywjb2_467:not([inert]) > :nth-child(2) {
       transition-delay: calc(var(--_selection-stagger) * 2);
     }
   }
-  ._selectionSelectAll_k21i7_500[data-starting-style], ._selectionSelectAll_k21i7_500[data-ending-style] {
+  ._selectionSelectAll_ywjb2_497[data-starting-style], ._selectionSelectAll_ywjb2_497[data-ending-style] {
     opacity: 0;
   }
-  ._selectionBulk_k21i7_503 {
+  ._selectionBulk_ywjb2_500 {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    gap: var(--sys-unit-6);
+    gap: var(--selection-bulk-gap, var(--sys-unit-6));
     margin-inline-start: auto;
   }
   @container selection-bar (max-width: 36rem) {
-    ._selectionBar_k21i7_343 {
+    ._selectionBar_ywjb2_337 {
       flex-wrap: wrap;
       overflow-x: visible;
       row-gap: var(--_selection-pad);
     }
-    ._selectionActions_k21i7_470 {
+    ._selectionActions_ywjb2_467 {
       flex-wrap: wrap;
     }
   }

package/dist/data-table/data-table.d.ts

@@ -1,9 +1,9 @@
 import type { ReactTable } from "@tanstack/react-table";
 import type { ReactNode } from "react";
-import { type PaginationContentProps, type PaginationRootProps } from "../components/pagination/pagination.tsx";
+import { type PaginationRootProps } from "../components/pagination/pagination.tsx";
 import type { RowSelectionView } from "../lib/hooks/use-row-selection.ts";
 import { DataTableContent } from "./data-table-content.tsx";
-import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table } from "./data-table-parts.tsx";
+import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, SortIcon, StaleOverlay, StateRow, SubRow, Table } from "./data-table-parts.tsx";
 import { DataTableSelectionBar } from "./data-table-selection.tsx";
 import type { DataTableStatus } from "./resolve-view.ts";
 import { type DataTableFeatures } from "./table-features.ts";
@@ -36,18 +36,18 @@ export type DataTableToolbarProps = Readonly<{
 /** Layout slot above the table for search, filters and actions. */
 declare const Toolbar: ({ children, className, }: DataTableToolbarProps) => ReactNode;
 type TableBoundPagination = "pageIndex" | "pageCount" | "pageSize" | "pageSizes" | "onPageIndexChange" | "onPageSizeChange";
-export type DataTablePaginationProps = Omit<PaginationRootProps, TableBoundPagination | "children"> & ((PaginationContentProps & Readonly<{
-    children?: undefined;
-}>) | (Readonly<{
-    /** The `Pagination` parts, such as `Pagination.PageSize`, `Pagination.Index` and `Pagination.Controls`, in place of the ready-made pager. */
-    children: ReactNode;
-}> & Readonly<Partial<Record<keyof PaginationContentProps, undefined>>>));
+export type DataTablePaginationProps = Omit<PaginationRootProps, TableBoundPagination>;
 /**
- * The pager driven by the instance's pagination API (built with
- * `manualPagination` + server `rowCount`): the ready-made `Pagination` from its
- * labels and icons, or a `Pagination.Root` holding the parts it is given. The
- * page sizes come from the table's `meta.pageSizeOptions`, and picking one
- * returns to the first page.
+ * The `Pagination.Root` driven by the instance's pagination API (built with
+ * `manualPagination` + server `rowCount`), holding the `Pagination` parts it is
+ * given. The page sizes come from the table's `meta.pageSizeOptions`, and
+ * picking one returns to the first page.
+ *
+ * @example
+ * <DataTable.Pagination>
+ * 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+ * 	<Pagination.Controls>…</Pagination.Controls>
+ * </DataTable.Pagination>
  */
 declare const DataTablePagination: (props: DataTablePaginationProps) => ReactNode;
 type DataTableParts = Readonly<{
@@ -66,6 +66,7 @@ type DataTableParts = Readonly<{
     HeaderRow: typeof HeaderRow;
     HeaderCell: typeof HeaderCell;
     SortButton: typeof SortButton;
+    SortIcon: typeof SortIcon;
     Body: typeof Body;
     Row: typeof Row;
     Cell: typeof Cell;
@@ -98,19 +99,13 @@ type DataTableParts = Readonly<{
  * 		sortAscendingIcon={<ArrowUpwardIcon />}
  * 		sortDescendingIcon={<ArrowDownwardIcon />}
  * 	/>
- * 	<DataTable.Pagination
- * 		pageSizeLabel="Rows per page"
- * 		indexLabel={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`}
- * 		firstLabel="First page"
- * 		previousLabel="Previous page"
- * 		nextLabel="Next page"
- * 		lastLabel="Last page"
- * 		firstIcon={<FirstPageIcon />}
- * 		previousIcon={<ChevronLeftIcon />}
- * 		nextIcon={<ChevronRightIcon />}
- * 		lastIcon={<LastPageIcon />}
- * 		checkIcon={<CheckIcon />}
- * 	/>
+ * 	<DataTable.Pagination>
+ * 		<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+ * 		<Pagination.Controls>
+ * 			<Pagination.Previous render={<IconButton label="Previous page" variant="tertiary"><ChevronLeftIcon /></IconButton>} />
+ * 			<Pagination.Next render={<IconButton label="Next page" variant="tertiary"><ChevronRightIcon /></IconButton>} />
+ * 		</Pagination.Controls>
+ * 	</DataTable.Pagination>
  * </DataTable.Root>
  */
 export declare const DataTable: DataTableParts;