@elliemae/ds-pagination 3.70.0-next.2 → 3.70.0-next.4

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "3.70.0-next.2",
+  "version": "3.70.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "files": [
-    "dist"
+    "dist",
+    "skills"
   ],
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -37,22 +38,22 @@
   },
   "dependencies": {
     "@xstyled/system": "~3.8.1",
-    "@elliemae/ds-button-v2": "3.70.0-next.2",
-    "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.2",
-    "@elliemae/ds-grid": "3.70.0-next.2",
-    "@elliemae/ds-icons": "3.70.0-next.2",
-    "@elliemae/ds-system": "3.70.0-next.2",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.2",
-    "@elliemae/ds-typography": "3.70.0-next.2",
-    "@elliemae/ds-props-helpers": "3.70.0-next.2"
+    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.4",
+    "@elliemae/ds-button-v2": "3.70.0-next.4",
+    "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.4",
+    "@elliemae/ds-props-helpers": "3.70.0-next.4",
+    "@elliemae/ds-system": "3.70.0-next.4",
+    "@elliemae/ds-grid": "3.70.0-next.4",
+    "@elliemae/ds-icons": "3.70.0-next.4",
+    "@elliemae/ds-typography": "3.70.0-next.4",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.4"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.2",
-    "@elliemae/ds-test-utils": "3.70.0-next.2"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.4",
+    "@elliemae/ds-test-utils": "3.70.0-next.4"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.0.1",

package/skills/ds-pagination-health-check/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: ds-pagination-health-check
+description: >
+  Audit the current state of a @elliemae/ds-pagination implementation. Use before starting
+  a task that depends on pagination, to verify a foundation before building on it, or when
+  diagnosing unexpected behavior. Produces a complete state report: what is correct and sound,
+  what requires fixing, what is suboptimal, and what gaps may affect the current task.
+type: health-check
+library: ds-pagination
+library_version: '3.60.0'
+requires:
+  - ds-pagination-setup
+  - ds-pagination-slots
+---
+
+## Purpose
+
+This skill audits an existing `@elliemae/ds-pagination` integration. It is not a setup guide. It tells you the current state of a pagination implementation that already exists.
+
+**Use it:**
+
+- Before starting a task that involves pagination — to understand what you are about to touch
+- Before making pagination load-bearing for a new feature — to verify the foundation
+- When pagination is behaving unexpectedly — to surface what the implementation gets wrong
+
+---
+
+## Load the embedded knowledge
+
+Load the following skills **as reference knowledge only**. You are reading their embedded understanding of correct patterns — their Common Mistakes, mandatory props, and OOB-first guidance become the diagnostic lens. You are not running them as tasks.
+
+- `ds-pagination-setup` — required props, state management, server-side vs client-side model, deprecated API, pageIndex reset
+- `ds-pagination-slots` — slot props have no effect on most pagination primitives in current version; standard HTML props work as the workaround
+
+---
+
+## Procedure
+
+### Step 1 — Locate and read the implementation
+
+Find every file where pagination primitives from `@elliemae/ds-pagination` are rendered. For each instance:
+
+- Record which primitives are used: `DSPaginationContainer`, `DSPaginator`, `DSPagePrevButton`, `DSPageNextButton`, `DSPerPageSelector`, `DSPaginationSeparator`
+- Record whether the monolithic `DSPagination` (deprecated) is used instead
+- Read where pagination state lives (`pageIndex`, `pageSize`, `pageCount`) — state manager, store, atoms, or `useState`
+- Read every callback handler (`onPageChange`, `onPreviousPage`, `onNextPage`, `onPageSizeChange`)
+- Check whether `isLoadingPageCount` is used where `pageCount` may be async
+- Check whether `TablePagination` (or equivalent) is defined at module level
+- Check what `data` is passed to the consuming DataTable — full dataset or current page slice
+
+### Step 2 — Apply diagnostic checks
+
+**CRITICAL** — prevents correct function; fix before proceeding
+**HIGH** — meaningful risk; should fix
+**MEDIUM** — suboptimal; worth addressing
+**SOUND** — correct; rely on it
+
+#### Assembly checks
+
+- [ ] Composable parts are used — not the deprecated monolithic `DSPagination` component
+- [ ] `TablePagination` (or equivalent component) is defined at module level — not inside another component body
+- [ ] `data` passed to any consuming DataTable is the current page slice — DataTable renders what it receives
+
+#### State management checks
+
+- [ ] `pageIndex`, `pageSize`, `pageCount` live in the project's state manager — not `useState`
+- [ ] No `useEffect` watching pagination state to dispatch API calls — consequences belong inside the callbacks
+- [ ] `pageIndex` resets to 1 inside `onPageSizeChange` — not doing so leaves users on a non-existent page
+
+#### Loading state checks
+
+- [ ] `isLoadingPageCount={true}` is used when `pageCount` is async — absence renders `0` or broken state
+- [ ] `isLoadingPageCount` and `pageCount ?? 0` are treated as independent concerns — the `?? 0` is a null-safety guard, not a spinner trigger
+
+#### Memoization checks
+
+- [ ] `onPageChange`, `onPreviousPage`, `onNextPage`, `onPageSizeChange` are wrapped in `useCallback`
+- [ ] `perPageOptions` is stable (`useMemo` if constructed inline)
+- [ ] `pageDetails` is stable (`useMemo` if constructed inline)
+
+#### Deprecated API check
+
+- [ ] Capital-P `Pagination` render prop is used where DataTable integration is present — not deprecated lowercase `pagination` prop
+
+#### Pagination model check
+
+- [ ] Every page or size change dispatches an API call — client-side array slicing is only acceptable as a temporary, explicitly owned workaround with a documented remediation plan
+
+### Step 3 — Produce the state report
+
+**Foundation — what is correct and sound**
+What the implementation gets right. Be specific — this is what you can rely on.
+
+**Critical issues — fix before proceeding**
+Each item with file, location, and pointer to the `ds-pagination-setup` skill section covering the fix.
+
+**Warnings — should address, not blocking**
+Each item with context on the risk.
+
+**Awareness — no action needed, good to know**
+Suboptimal patterns that are not breaking.
+
+**Gaps relevant to this task**
+What the current task will require that is not yet present in the implementation.
+
+---
+
+## What this skill does NOT do
+
+- It does not generate or modify code
+- It does not run the setup skill as a task
+- It does not replace human judgment on trade-offs
+
+## When this isn't enough
+
+**ICE internal:** Microsoft Teams — Dimsum channel (informal) / Jira Dimsum board (formal)
+**Partners:** Your organization's Dimsum point of contact

package/skills/ds-pagination-setup/SKILL.md

@@ -0,0 +1,322 @@
+---
+name: ds-pagination-setup
+description: >
+  Composable pagination bar assembly for @elliemae/ds-pagination. DSPaginationContainer,
+  DSPaginator, DSPagePrevButton, DSPageNextButton, DSPerPageSelector, DSPaginationSeparator.
+  State (pageIndex, pageSize, pageCount) in project state manager — not useState. isLoadingPageCount
+  on DSPaginator for async page count. DSPagination (monolithic) is the legacy API — never use.
+  pageIndex resets to 1 on pageSize change.
+type: core
+library: ds-pagination
+library_version: '3.60.0'
+sources:
+  - '@elliemae/ds-pagination:dist/types/react-desc-prop-types.d.ts'
+  - '@elliemae/ds-pagination:dist/types/parts/DSPaginator/react-desc-prop-types.d.ts'
+  - '@elliemae/ds-pagination:dist/types/parts/DSPerPageSelector/react-desc-prop-types.d.ts'
+---
+
+## Setup
+
+Define `PaginationBar` at module level — never inside another component. Read pagination state from the project's state manager. The most common stacks in ICE codebases, in order of prevalence: RTK (Redux Toolkit), vanilla Redux, Redux-Saga (pre-RTK codebases), and other solutions that need to be discovered before writing any state shape.
+
+**On pagination model — ideal vs current reality:** The correct long-term model is server-side pagination: every page or size change dispatches an API call, and the backend returns only the requested slice. This is how `DSPagination` is meant to be used. If the current backend does not yet support paginated endpoints and an in-memory slice is the temporary reality, that is a legitimate constraint — not something to pretend away. If that is the situation: surface it explicitly, confirm the team understands the tradeoff, verify there is a documented remediation plan to move to server-side when backend support is available, and proceed. A deliberate, owned compromise is different from an unexamined shortcut. The example below shows the server-side model — if adapting to an in-memory slice, the `fetchPage` dispatches become local slice operations, and the team explicitly owns the data freshness and memory cost implications.
+
+```jsx
+import {
+  DSPageNextButton,
+  DSPagePrevButton,
+  DSPaginationContainer,
+  DSPaginationSeparator,
+  DSPaginator,
+  DSPerPageSelector,
+} from '@elliemae/ds-pagination';
+
+const PaginationBar = () => {
+  const { pageIndex, pageSize, pageCount } = useSelector(selectPaginationState);
+  const dispatch = useDispatch();
+
+  const onPreviousPage = useCallback(() => {
+    dispatch(fetchPage({ page: pageIndex - 1, pageSize }));
+  }, [dispatch, pageIndex, pageSize]);
+
+  const onNextPage = useCallback(() => {
+    dispatch(fetchPage({ page: pageIndex + 1, pageSize }));
+  }, [dispatch, pageIndex, pageSize]);
+
+  const onPageChange = useCallback(
+    (idx) => {
+      dispatch(fetchPage({ page: idx, pageSize }));
+    },
+    [dispatch, pageSize],
+  );
+
+  const onPageSizeChange = useCallback(
+    (newPageSize) => {
+      dispatch(setPageSize(newPageSize));
+      dispatch(setPageIndex(1));
+      dispatch(fetchPage({ page: 1, pageSize: newPageSize }));
+    },
+    [dispatch],
+  );
+
+  return (
+    <DSPaginationContainer>
+      <DSPerPageSelector pageSize={pageSize} onPageSizeChange={onPageSizeChange} />
+      <DSPaginationSeparator mr={24} />
+      <DSPagePrevButton canPreviousPage={pageIndex !== 1} onPreviousPage={onPreviousPage} />
+      <DSPaginationSeparator />
+      <DSPaginator pageCount={pageCount} pageIndex={pageIndex} onPageChange={onPageChange} />
+      <DSPaginationSeparator />
+      <DSPageNextButton canNextPage={pageIndex !== pageCount} onNextPage={onNextPage} />
+    </DSPaginationContainer>
+  );
+};
+```
+
+## Core Patterns
+
+### Basic prev/page/next bar (no per-page selector)
+
+```jsx
+const PaginationBar = () => {
+  const { pageIndex, pageCount } = useSelector(selectPaginationState);
+  const dispatch = useDispatch();
+  const onPreviousPage = useCallback(() => dispatch(fetchPage({ page: pageIndex - 1 })), [dispatch, pageIndex]);
+  const onPageChange = useCallback((idx) => dispatch(fetchPage({ page: idx })), [dispatch]);
+  const onNextPage = useCallback(() => dispatch(fetchPage({ page: pageIndex + 1 })), [dispatch, pageIndex]);
+
+  return (
+    <DSPaginationContainer>
+      <DSPagePrevButton canPreviousPage={pageIndex !== 1} onPreviousPage={onPreviousPage} />
+      <DSPaginationSeparator />
+      <DSPaginator pageCount={pageCount} pageIndex={pageIndex} onPageChange={onPageChange} />
+      <DSPaginationSeparator />
+      <DSPageNextButton canNextPage={pageIndex !== pageCount} onNextPage={onNextPage} />
+    </DSPaginationContainer>
+  );
+};
+```
+
+### Async page count with isLoadingPageCount
+
+`isLoadingPageCount={true}` shows a spinner in `DSPaginator` instead of the page picker. While loading, also guard `canPreviousPage` and `canNextPage` — the total page count is unknown so navigation should be disabled.
+
+```jsx
+<DSPagePrevButton canPreviousPage={!isPageCountLoading && pageIndex !== 1} onPreviousPage={onPreviousPage} />
+<DSPaginationSeparator />
+<DSPaginator
+  pageCount={pageCount}
+  isLoadingPageCount={isPageCountLoading}
+  pageIndex={pageIndex}
+  onPageChange={onPageChange}
+/>
+<DSPaginationSeparator />
+<DSPageNextButton canNextPage={!isPageCountLoading && pageIndex !== pageCount} onNextPage={onNextPage} />
+```
+
+If `pageCount` in your state can be `null` or `undefined` while loading, add a fallback: `pageCount={pageCount ?? 0}`. This prevents passing an invalid type — it is a null-safety guard unrelated to `isLoadingPageCount`.
+
+### Per-page selector — options array vs step-based
+
+Two configuration modes for `DSPerPageSelector`:
+
+```jsx
+// Explicit options array — use when you need specific values including non-numeric options
+<DSPerPageSelector
+  pageSize={pageSize}
+  onPageSizeChange={onPageSizeChange}
+  perPageOptions={[10, 20, 50, { type: 'single', dsId: 'all', label: 'All', value: totalRecords }]}
+/>
+
+// Step-based — use when you want a generated range from minPerPage to maxPerPage
+<DSPerPageSelector
+  pageSize={pageSize}
+  onPageSizeChange={onPageSizeChange}
+  minPerPage={10}
+  maxPerPage={50}
+  perPageStep={10}
+/>
+```
+
+Both modes require `onPageSizeChange` to reset `pageIndex` to 1.
+
+### Segmented paginator with pageDetails
+
+`pageDetails` provides per-page range summaries in the paginator dropdown. `pageDetailsTitle` labels the column. Build server-side or derive from dataset slice metadata.
+
+```jsx
+const pageDetails = pages.map((p) => `${p.firstRecord}-${p.lastRecord}`);
+
+<DSPaginator
+  pageCount={pageCount}
+  pageIndex={pageIndex}
+  onPageChange={onPageChange}
+  pageDetailsTitle="Records"
+  pageDetails={pageDetails}
+/>;
+```
+
+## Common Mistakes
+
+### CRITICAL Using DSPagination (monolithic) instead of composable parts
+
+Wrong:
+
+```jsx
+import { DSPagination } from '@elliemae/ds-pagination';
+<DSPagination pageIndex={pageIndex} pageCount={pageCount} onPageChange={handlePageChange} />;
+```
+
+Correct:
+
+```jsx
+import {
+  DSPaginationContainer,
+  DSPaginator,
+  DSPagePrevButton,
+  DSPageNextButton,
+  DSPaginationSeparator,
+} from '@elliemae/ds-pagination';
+
+<DSPaginationContainer>
+  <DSPagePrevButton canPreviousPage={pageIndex !== 1} onPreviousPage={handlePrevious} />
+  <DSPaginationSeparator />
+  <DSPaginator pageCount={pageCount} pageIndex={pageIndex} onPageChange={handlePageChange} />
+  <DSPaginationSeparator />
+  <DSPageNextButton canNextPage={pageIndex !== pageCount} onNextPage={handleNext} />
+</DSPaginationContainer>;
+```
+
+`DSPagination` is the pre-v3.15 monolithic API, kept only for backward compatibility — its namespace is marked `// LEGACY WAY OF USING THE PAGINATION COMPONENT`. All new implementations use the composable parts.
+
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-pagination-features--basic
+
+---
+
+### HIGH Not resetting pageIndex to 1 when pageSize changes
+
+Wrong:
+
+```jsx
+const onPageSizeChange = useCallback(
+  (newPageSize) => {
+    dispatch(setPageSize(newPageSize));
+    dispatch(fetchPage({ page: pageIndex, pageSize: newPageSize }));
+  },
+  [dispatch, pageIndex, pageSize],
+);
+```
+
+Correct:
+
+```jsx
+const onPageSizeChange = useCallback(
+  (newPageSize) => {
+    dispatch(setPageSize(newPageSize));
+    dispatch(setPageIndex(1));
+    dispatch(fetchPage({ page: 1, pageSize: newPageSize }));
+  },
+  [dispatch],
+);
+```
+
+When page size changes, the total page count changes. The current `pageIndex` may no longer exist in the new page layout.
+
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-pagination-features--per-page-selector-with-options
+
+---
+
+### HIGH Non-primitive pagination props not memoized
+
+Every callback and non-primitive prop passed to pagination primitives must be a stable reference.
+
+| Prop               | Component           | Memoization                     |
+| ------------------ | ------------------- | ------------------------------- |
+| `onPreviousPage`   | `DSPagePrevButton`  | `useCallback`                   |
+| `onNextPage`       | `DSPageNextButton`  | `useCallback`                   |
+| `onPageChange`     | `DSPaginator`       | `useCallback`                   |
+| `onPageSizeChange` | `DSPerPageSelector` | `useCallback`                   |
+| `perPageOptions`   | `DSPerPageSelector` | `useMemo` if constructed inline |
+| `pageDetails`      | `DSPaginator`       | `useMemo` if constructed inline |
+
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-pagination-features--basic
+
+---
+
+### MEDIUM Passing 0 for pageCount while total count is loading
+
+Wrong:
+
+```jsx
+<DSPaginator pageCount={0} pageIndex={pageIndex} onPageChange={onPageChange} />
+```
+
+Correct:
+
+```jsx
+<DSPaginator
+  pageCount={pageCount}
+  isLoadingPageCount={isPageCountLoading}
+  pageIndex={pageIndex}
+  onPageChange={onPageChange}
+/>
+```
+
+`isLoadingPageCount={true}` shows the spinner regardless of `pageCount`. Without it, the paginator renders whatever value `pageCount` has — including `0`, which displays as a broken state.
+
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-pagination-features--loading-page-count
+
+---
+
+### HIGH Client-side array slicing used without deliberate team ownership
+
+```jsx
+const pagedData = allRecords.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
+const pageCount = Math.ceil(allRecords.length / pageSize);
+```
+
+Client-side slicing is not automatically wrong — it is a known tradeoff that is sometimes the right call given backend constraints. What makes it a problem is when it is implemented without explicit team awareness: the full dataset is in memory and growing stale the moment the source data changes, there is no backend cost saving, and compounding with sorting and filtering multiplies the fragility.
+
+Before implementing or accepting a client-side slice approach, surface these questions to the team:
+
+- Does the backend currently support paginated endpoints? If not, is this on a roadmap?
+- Has the team acknowledged the data freshness implication (in-memory snapshot vs live data)?
+- Is there a documented plan to migrate to server-side pagination when backend support is available?
+
+If the answer to all three is yes and the team owns the decision — proceed. Document the temporary nature explicitly in code. If the team has not considered these questions, raise them before writing the implementation.
+
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-pagination-features--basic
+
+---
+
+### HIGH Managing pagination state with useState instead of the project state manager
+
+Wrong:
+
+```jsx
+const [pageIndex, setPageIndex] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+```
+
+Correct:
+
+```jsx
+const { pageIndex, pageSize, pageCount } = useSelector(selectPaginationState);
+const dispatch = useDispatch();
+```
+
+Stories use `useState` as a teaching simplification. Production code must use the project's state manager. Pagination state drives API calls and is shared across the view — it cannot be local component state.
+
+---
+
+## When composable parts are not enough
+
+If the six composable primitives cannot satisfy the layout or behavior requirement:
+
+1. Confirm the requirement with UI/UX — most pagination variations are achievable via composition, ordering, and xstyled props on the primitives.
+2. Contact the Dimsum team to validate whether a first-class solution should be added.
+
+**ICE internal:** Microsoft Teams — Dimsum channel (informal) / Jira Dimsum board (formal)
+**Partners:** Your organization's Dimsum point of contact
+
+See also: `@elliemae/ds-data-table` `Pagination` render prop — if this pagination bar is used with a DataTable, load the DataTable pagination skill for the integration wiring.

package/skills/ds-pagination-slots/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: ds-pagination-slots
+description: >
+  Slot injection surface for @elliemae/ds-pagination. Verified against v3.60.0 via probe.
+  DSPaginationContainer (ROOT, WRAPPER) and DSPaginationSeparator (SEPARATOR) have functional
+  slot injection. DSPaginator, DSPagePrevButton, DSPageNextButton, and DSPerPageSelector slot
+  props have no effect in the current version — use standard HTML props on those four directly.
+type: core
+library: ds-pagination
+library_version: '3.60.0'
+requires:
+  - ds-pagination-setup
+sources:
+  - '@elliemae/ds-pagination:dist/types/react-desc-prop-types.d.ts'
+  - '@elliemae/ds-pagination:dist/types/parts/DSPaginationContainer/react-desc-prop-types.d.ts'
+---
+
+## Slot surface — DOM hierarchy
+
+Slots are injection points into specific rendered DOM nodes. Understanding the hierarchy is required to inject props at the correct level.
+
+**About this map:** Verified against `@elliemae/ds-pagination@3.60.0` via probe tests. Slot names are governed by the Dimsum breaking change protocol — renames are intentional and documented. If something doesn't match your installed version, inspect the rendered HTML in your environment. If you cannot do it autonomously, ask the human in the loop to render the component with synthetic data only — not production data containing real user information.
+
+Each entry shows: `slot-key (data-dimsum-slot="value") · tag[role] · notes`.
+
+```
+DSPaginationContainer renders:
+
+ROOT (dsPaginationRoot) · div  ← inject aria-label, data-* here
+└── WRAPPER (dsPaginationWrapper) · div
+    ├── DSPerPageSelector  ← no dsPaginationPerPageSelector in DOM (slot prop not active in current version)
+    │   └── dsButtonRoot · button  (inner dropdown trigger)
+    │       └── dsTypographyRoot · span
+    ├── SEPARATOR (dsPaginationSeparator) · div  ← functional ✓
+    ├── DSPagePrevButton  ← no dsPaginationPrevPage in DOM (slot prop not active in current version)
+    │   └── dsButtonRoot · button  (inner button)
+    │       └── dsIconRoot · span
+    │           └── dsIconSvg · svg
+    ├── SEPARATOR (dsPaginationSeparator) · div  ← functional ✓
+    ├── DSPaginator  ← no dsPaginationPaginator in DOM (slot prop not active in current version)
+    │   └── dsButtonRoot · button  (inner dropdown trigger)
+    │       ├── dsTypographyRoot · span
+    │       └── dsIconRoot · span
+    │           └── dsIconSvg · svg
+    ├── SEPARATOR (dsPaginationSeparator) · div  ← functional ✓
+    └── DSPageNextButton  ← no dsPaginationNextButton in DOM (slot prop not active in current version)
+        └── dsButtonRoot · button  (inner button)
+            └── dsIconRoot · span
+                └── dsIconSvg · svg
+```
+
+### What works
+
+`DSPaginationContainer` slot props (`dsPaginationRoot`, `dsPaginationWrapper`) accept injection:
+
+```jsx
+<DSPaginationContainer dsPaginationRoot={{ 'aria-label': 'Loan results pagination', 'data-section': 'pagination' }}>
+  ...
+</DSPaginationContainer>
+```
+
+`DSPaginationSeparator` slot prop (`dsPaginationSeparator`) also works.
+
+### What doesn't work
+
+`DSPaginator`, `DSPagePrevButton`, `DSPageNextButton`, and `DSPerPageSelector` do not produce their own `dsPagination*` slot attributes. Passing e.g. `dsPaginationPaginator={{ ... }}` to `DSPaginator` has no effect at runtime.
+
+**Current workaround:** Use standard HTML props directly on these components — `aria-*` and `data-*` attributes passed directly as props work correctly on all of them:
+
+```jsx
+<DSPagePrevButton
+  canPreviousPage={pageIndex !== 1}
+  onPreviousPage={onPreviousPage}
+  aria-label="Go to previous page"
+  data-testid="pagination-prev"
+/>
+
+<DSPaginator
+  pageCount={pageCount}
+  pageIndex={pageIndex}
+  onPageChange={onPageChange}
+  aria-label="Page selector"
+/>
+```
+
+This gap is tracked by the Dimsum team. Contact them if slot injection on these components is required for your use case.
+
+## When this isn't enough
+
+**ICE internal:** Microsoft Teams — Dimsum channel (informal) / Jira Dimsum board (formal)
+**Partners:** Your organization's Dimsum point of contact