From dc70d7eb1fa7cd571a9a0c5d2e1bdf450daf30d4 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 22 Jun 2026 09:32:18 -0300
Subject: [PATCH 1/4] [ENG-46087] feat(webkit): replace data-table with
 composable Table and Paginator

Add the composition + data-driven Table and the Paginator under data/, replacing
the legacy data-table component.

- Table: compound API (Table.Header/Body/Row/Cell/...), data-driven mode via the
  @tanstack/vue-table engine (sorting/selection/pagination/global filter), frozen
  columns + sticky header, grow-to-fill sizing, per-column `resizable`, and an
  action column auto-pinned to the trailing edge.
- Paginator: pagination-button / paginator-info / paginator-page-size parts.
- Remove the legacy data/data-table component; add data/table + data/paginator
  exports (the data/data-table export is dropped, no alias kept).
- Specs and Storybook stories for Table and Paginator.
---
 .specs/data-table.md                          | 197 -----
 .specs/paginator.md                           | 210 +++++
 .specs/table.md                               | 303 +++++++
 .../stories/webkit/data/DataTable.stories.js  | 416 ---------
 .../stories/webkit/data/Paginator.stories.js  | 259 ++++++
 .../src/stories/webkit/data/Table.stories.js  | 804 ++++++++++++++++++
 packages/webkit/package.json                  |  35 +-
 .../composables/use-data-table-context.js     |  14 -
 .../composables/use-data-table-filter.js      |  33 -
 .../composables/use-data-table-pagination.js  |  50 --
 .../composables/use-data-table-selection.js   |  51 --
 .../composables/use-data-table-sort.js        |  37 -
 .../data/data-table/data-table-actions.vue    |  30 -
 .../data-table/data-table-batch-actions.vue   |  62 --
 .../data/data-table/data-table-breadcrumb.vue |  66 --
 .../data-table/data-table-column-selector.vue | 100 ---
 .../data/data-table/data-table-column.vue     |  78 --
 .../data/data-table/data-table-export.vue     |  57 --
 .../data-table/data-table-filter-chips.vue    |  72 --
 .../data/data-table/data-table-filter.vue     | 161 ----
 .../data-table/data-table-inline-create.vue   |  86 --
 .../data-table-last-modified-popup.vue        |  60 --
 .../data-table/data-table-position-input.vue  |  58 --
 .../data-table/data-table-refresh-button.vue  |  48 --
 .../data-table/data-table-review-changes.vue  |  61 --
 .../data-table/data-table-row-actions.vue     | 126 ---
 .../data/data-table/data-table-search.vue     |  80 --
 .../data/data-table/data-table-toolbar.vue    |  57 --
 .../data-table/data-table-view-all-footer.vue |  47 -
 .../data-table/data-table-view-toggle.vue     |  67 --
 .../components/data/data-table/data-table.vue | 612 -------------
 .../data/data-table/injection-key.ts          |  87 --
 .../components/data/data-table/package.json   |  11 -
 .../data-table/utils/format-filter-value.js   |   7 -
 .../src/components/data/paginator/index.ts    |  30 +
 .../data/paginator/injection-key.ts           |   8 +
 .../components/data/paginator/package.json    |  11 +
 .../paginator/pagination-button/package.json  |  11 +
 .../pagination-button/pagination-button.vue   |  84 ++
 .../paginator/paginator-info/package.json     |  11 +
 .../paginator-info/paginator-info.vue         |  33 +
 .../paginator-page-size/package.json          |  11 +
 .../paginator-page-size.vue                   |  75 ++
 .../components/data/paginator/paginator.vue   | 198 +++++
 .../webkit/src/components/data/table/index.ts |  50 ++
 .../components/data/table/injection-key.ts    |  28 +
 .../src/components/data/table/package.json    |  11 +
 .../data/table/table-body/package.json        |  11 +
 .../data/table/table-body/table-body.vue      |  36 +
 .../data/table/table-caption/package.json     |  11 +
 .../table/table-caption/table-caption.vue     |  34 +
 .../data/table/table-cell/package.json        |  11 +
 .../data/table/table-cell/table-cell.vue      |  88 ++
 .../data/table/table-footer/package.json      |  11 +
 .../data/table/table-footer/table-footer.vue  |  34 +
 .../data/table/table-head-cell/package.json   |  11 +
 .../table/table-head-cell/table-head-cell.vue | 124 +++
 .../data/table/table-header/package.json      |  11 +
 .../data/table/table-header/table-header.vue  |  60 ++
 .../data/table/table-row/package.json         |  11 +
 .../data/table/table-row/table-row.vue        |  54 ++
 .../data/table/table-search/package.json      |  11 +
 .../data/table/table-search/table-search.vue  |  48 ++
 .../data/table/table-sort-button/package.json |  11 +
 .../table-sort-button/table-sort-button.vue   |  66 ++
 .../data/table/table-toolbar/package.json     |  11 +
 .../table/table-toolbar/table-toolbar.vue     |  33 +
 .../src/components/data/table/table.vue       | 783 +++++++++++++++++
 pnpm-lock.yaml                                |  20 +
 69 files changed, 3643 insertions(+), 2850 deletions(-)
 delete mode 100644 .specs/data-table.md
 create mode 100644 .specs/paginator.md
 create mode 100644 .specs/table.md
 delete mode 100644 apps/storybook/src/stories/webkit/data/DataTable.stories.js
 create mode 100644 apps/storybook/src/stories/webkit/data/Paginator.stories.js
 create mode 100644 apps/storybook/src/stories/webkit/data/Table.stories.js
 delete mode 100644 packages/webkit/src/components/data/data-table/composables/use-data-table-context.js
 delete mode 100644 packages/webkit/src/components/data/data-table/composables/use-data-table-filter.js
 delete mode 100644 packages/webkit/src/components/data/data-table/composables/use-data-table-pagination.js
 delete mode 100644 packages/webkit/src/components/data/data-table/composables/use-data-table-selection.js
 delete mode 100644 packages/webkit/src/components/data/data-table/composables/use-data-table-sort.js
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-actions.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-batch-actions.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-breadcrumb.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-column-selector.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-column.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-export.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-filter-chips.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-filter.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-inline-create.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-last-modified-popup.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-position-input.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-refresh-button.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-review-changes.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-row-actions.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-search.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-toolbar.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-view-all-footer.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table-view-toggle.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/data-table.vue
 delete mode 100644 packages/webkit/src/components/data/data-table/injection-key.ts
 delete mode 100644 packages/webkit/src/components/data/data-table/package.json
 delete mode 100644 packages/webkit/src/components/data/data-table/utils/format-filter-value.js
 create mode 100644 packages/webkit/src/components/data/paginator/index.ts
 create mode 100644 packages/webkit/src/components/data/paginator/injection-key.ts
 create mode 100644 packages/webkit/src/components/data/paginator/package.json
 create mode 100644 packages/webkit/src/components/data/paginator/pagination-button/package.json
 create mode 100644 packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
 create mode 100644 packages/webkit/src/components/data/paginator/paginator-info/package.json
 create mode 100644 packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
 create mode 100644 packages/webkit/src/components/data/paginator/paginator-page-size/package.json
 create mode 100644 packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
 create mode 100644 packages/webkit/src/components/data/paginator/paginator.vue
 create mode 100644 packages/webkit/src/components/data/table/index.ts
 create mode 100644 packages/webkit/src/components/data/table/injection-key.ts
 create mode 100644 packages/webkit/src/components/data/table/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-body/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-body/table-body.vue
 create mode 100644 packages/webkit/src/components/data/table/table-caption/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-caption/table-caption.vue
 create mode 100644 packages/webkit/src/components/data/table/table-cell/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-cell/table-cell.vue
 create mode 100644 packages/webkit/src/components/data/table/table-footer/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-footer/table-footer.vue
 create mode 100644 packages/webkit/src/components/data/table/table-head-cell/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
 create mode 100644 packages/webkit/src/components/data/table/table-header/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-header/table-header.vue
 create mode 100644 packages/webkit/src/components/data/table/table-row/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-row/table-row.vue
 create mode 100644 packages/webkit/src/components/data/table/table-search/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-search/table-search.vue
 create mode 100644 packages/webkit/src/components/data/table/table-sort-button/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-sort-button/table-sort-button.vue
 create mode 100644 packages/webkit/src/components/data/table/table-toolbar/package.json
 create mode 100644 packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
 create mode 100644 packages/webkit/src/components/data/table/table.vue

diff --git a/.specs/data-table.md b/.specs/data-table.md
deleted file mode 100644
index 82a2d17c..00000000
--- a/.specs/data-table.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-name: data-table
-category: data
-structure: composition
-status: implemented
-spec_version: 1
-created: 2026-05-22
-last_updated: 2026-05-22
-checksum: 3dcb1a858556ea3dbb0ecc50481128baea0d457069fc8da30a031db7c79d4033
----
-
-
-# DataTable — Component Spec
-
-## Purpose
-
-Composition-based data table for listing, filtering, sorting, and acting on tabular records. Mirrors the `core/list-data-table` API (toolbar + column slots) using webkit primitives instead of PrimeVue. Supports headerless list rows (workloads layout) and full column-header grid mode. No TanStack Table dependency.
-
-## Sub-components
-
-- `data-table.vue` — Root shell, table engine, empty/loading logic, CSV export.
-- `data-table-column.vue` — Column registration with `#header` and `#body` scoped slots.
-- `data-table-toolbar.vue` — Two-line toolbar with `first-line` and `second-line` slots.
-- `data-table-search.vue` — Debounced search input bound to global filter.
-- `data-table-actions.vue` — Trailing toolbar action cluster slot wrapper.
-- `data-table-export.vue` — Export/CSV trigger button.
-- `data-table-column-selector.vue` — Toggle column visibility panel.
-- `data-table-filter.vue` — Anchored filter panel with field picker and `filter-field` slot.
-- `data-table-filter-chips.vue` — Removable applied-filter chips row.
-- `data-table-row-actions.vue` — Per-row kebab menu or inline action.
-- `data-table-batch-actions.vue` — Bulk selection action bar.
-- `data-table-breadcrumb.vue` — Path navigation above the table.
-- `data-table-inline-create.vue` — Inline create row form.
-- `data-table-position-input.vue` — Row order position input.
-- `data-table-refresh-button.vue` — Table refresh control.
-- `data-table-review-changes.vue` — Pending reorder/edit review footer.
-- `data-table-view-toggle.vue` — View mode switcher.
-- `data-table-view-all-footer.vue` — View-all footer CTA.
-- `data-table-last-modified-popup.vue` — Hover popup for last-modified metadata.
-
-## Props
-
-| Prop | Type | Default | Required | JSDoc |
-|---|---|---|---|---|
-| `data` | `Record<string, unknown>[]` | `[]` | no | Row records to render. |
-| `dataKey` | `string` | `'id'` | no | Unique row identifier field. |
-| `columns` | `ColumnDefinition[]` | `[]` | no | Column metadata for skeleton, export, and column selector. |
-| `loading` | `boolean` | `false` | no | Shows loading skeleton rows when true. |
-| `totalRecords` | `number` | `0` | no | Total record count for lazy pagination. |
-| `lazy` | `boolean` | `false` | no | When true, pagination and sort emit events for server fetch. |
-| `first` | `number` | `0` | no | Zero-based index of the first row on the current page. |
-| `hideHeader` | `boolean` | `false` | no | Hides column headers; renders headerless list rows. |
-| `rowHover` | `boolean` | `true` | no | Applies hover surface token on rows. |
-| `scrollable` | `boolean` | `false` | no | Wraps the table body in a scroll area. |
-| `scrollHeight` | `string` | `''` | no | Max height when scrollable is true. |
-| `showGridlines` | `boolean` | `false` | no | Shows row/column divider borders. |
-| `filters` | `Record<string, unknown>` | `{}` | no | Active filter state including global search. |
-| `sortField` | `string` | `''` | no | Current sort field name. |
-| `sortOrder` | `number` | `1` | no | Sort direction: 1 ascending, -1 descending. |
-| `sortMode` | `'single' \| 'multiple'` | `'single'` | no | Single or multi-column sort mode. |
-| `globalFilterFields` | `string[]` | `[]` | no | Fields included in global text search. |
-| `searchValue` | `string` | `''` | no | Bound search input value for empty-state logic. |
-| `appliedFilters` | `FilterDefinition[]` | `[]` | no | Applied filter chips shown below the toolbar. |
-| `paginator` | `boolean` | `false` | no | Enables pagination controls. |
-| `rows` | `number` | `10` | no | Rows per page. |
-| `rowsPerPageOptions` | `number[]` | `[10, 25, 50, 100]` | no | Page size options in the paginator. |
-| `selection` | `Record<string, unknown> \| Record<string, unknown>[] \| null` | `null` | no | Selected row or rows. |
-| `selectable` | `boolean` | `false` | no | Enables row selection checkboxes. |
-| `editMode` | `'row' \| 'cell'` | `'row'` | no | Row or cell edit mode. |
-| `editingRows` | `Record<string, unknown>[]` | `[]` | no | Rows currently in edit state. |
-| `exportFilename` | `string` | `'export'` | no | Default CSV export filename. |
-| `exportFunction` | `(options: { data: Record<string, unknown>[]; fields: string[] }) => void \| null` | `null` | no | Custom export handler; null uses built-in CSV. |
-| `emptyListMessage` | `string` | `'No data available'` | no | In-table empty message when filtered with no rows. |
-| `emptyBlock` | `EmptyBlockConfig` | `{ title: 'No data has been created', description: 'No data has been created.', createButtonLabel: 'Create' }` | no | Full-page empty block configuration. |
-| `notShowEmptyBlock` | `boolean` | `false` | no | Always renders the table shell even when data is empty. |
-| `hasEmptyBlockSlot` | `boolean` | `false` | no | Uses the emptyBlock slot instead of the default block. |
-| `skeletonRows` | `number` | `5` | no | Skeleton placeholder row count while loading. |
-| `frozenValue` | `Record<string, unknown>[]` | `[]` | no | Frozen rows pinned above the scroll body. |
-| `resizableColumns` | `boolean` | `false` | no | Reserved; column resize deferred in v1. |
-| `rowClass` | `(row: Record<string, unknown>) => string \| null` | `null` | no | Returns extra classes for a row. |
-| `expandableRowGroups` | `boolean` | `false` | no | Enables expandable row groups. |
-| `rowGroupMode` | `'subheader' \| 'rowspan'` | `'subheader'` | no | Row group rendering mode. |
-| `groupRowsBy` | `string` | `''` | no | Field used to group rows. |
-| `expandedRowGroups` | `string[]` | `[]` | no | Currently expanded group keys. |
-
-## Events
-
-| Event | Payload | Notes |
-|---|---|---|
-| `update:filters` | `value: Record<string, unknown>` | v-model:filters. |
-| `update:sortField` | `value: string` | v-model:sortField. |
-| `update:sortOrder` | `value: number` | v-model:sortOrder. |
-| `update:selection` | `value: Record<string, unknown> \| Record<string, unknown>[] \| null` | v-model:selection. |
-| `update:editingRows` | `value: Record<string, unknown>[]` | v-model:editingRows. |
-| `update:expandedRowGroups` | `value: string[]` | v-model:expandedRowGroups. |
-| `update:first` | `value: number` | v-model:first. |
-| `page` | `event: PageEvent` | Fires on page change. |
-| `sort` | `event: SortEvent` | Fires on sort change. |
-| `filter` | `event: Record<string, unknown>` | Fires when filters change. |
-| `row-click` | `event: { data: Record<string, unknown>; originalEvent: MouseEvent }` | Fires on row click. |
-| `row-reorder` | `event: RowOrderingResult` | Fires when rows are reordered. |
-| `row-edit-save` | `event: RowEditEvent` | Fires when a row edit is saved. |
-| `row-edit-cancel` | `event: RowEditEvent` | Fires when a row edit is cancelled. |
-| `click-to-create` | `void` | Fires from the empty block create action. |
-
-## Slots
-
-| Slot | Scope | Notes |
-|---|---|---|
-| `default` | — | DataTableColumn children. |
-| `header` | — | Toolbar area; typically DataTableToolbar. |
-| `footer` | — | Table footer content. |
-| `empty` | — | Custom in-table empty state. |
-| `emptyBlock` | — | Full-page empty block replacement. |
-| `emptyBlockButton` | — | Trailing action in the empty block. |
-| `illustration` | — | Illustration in the empty block. |
-| `loading` | — | Custom loading overlay. |
-| `expansion` | `{ data: Record<string, unknown>; index: number }` | Row expansion content. |
-| `groupheader` | `{ data: Record<string, unknown> }` | Row group header content. |
-| `groupfooter` | `{ data: Record<string, unknown> }` | Row group footer content. |
-
-## States
-
-- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`, `loading`
-- `data-state` values: `selected` | `unselected` on rows when selectable
-- `data-disabled` mirrors disabled controls in toolbar sub-components
-- `data-loading` mirrors the root `loading` prop
-
-## Motion & Animations
-
-| Trigger | Animation / Transition | Token | Reduced-motion fallback |
-|---|---|---|---|
-| row hover | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
-| filter chip remove | `transition-opacity duration-150 ease-out` | inline | `motion-reduce:transition-none` |
-| loading skeleton | `animate-blink` | semantic | `motion-reduce:animate-none` |
-
-## Tokens
-
-| Region | Token (DESIGN.md) |
-|---|---|
-| typography (primary cell) | `.text-body-sm` |
-| typography (secondary cell) | `.text-body-xs` |
-| typography (header) | `.text-body-sm` |
-| surface | `var(--bg-surface)` |
-| surface hover | `var(--bg-surface-hover)` |
-| text | `var(--text-default)` |
-| text muted | `var(--text-muted)` |
-| border | `var(--border-default)` |
-| spacing | `var(--spacing-3)` |
-| spacing row | `var(--spacing-4)` |
-| shape | `var(--shape-elements)` |
-| ring | `var(--ring-color)` |
-
-## Theme gaps
-
-| Figma variable | Temporary primitive | Follow-up |
-|---|---|---|
-| _none_ | — | — |
-
-## Accessibility (WCAG 2.1 AA)
-
-- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
-- Keyboard map: `Tab` focuses interactive controls; `Enter`/`Space` activates buttons and sortable headers; `Escape` closes filter panel and row menus; arrow keys navigate paginator when focused.
-- ARIA: root uses `role="table"` or `role="grid"`; header cells use `scope="col"`; selectable rows use `aria-selected`; sortable headers use `aria-sort`.
-- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
-- `motion-reduce:transition-none motion-reduce:transform-none` on animated states.
-- Touch target ≥40×40 px on toolbar and row action controls.
-
-## Stories (Storybook)
-
-- Default — basic three-column table with headers.
-- WithFilters — workloads-like layout (filter toggle, search, chips, headerless rows); justified because filter/search/chip interaction is the primary UX differentiator.
-- WithLazyLoad — server-driven pagination with lazy prop; justified because lazy + totalRecords is a distinct data-fetch path.
-- Empty — empty block vs in-table empty; justified because root visibility logic is non-trivial.
-
-## Constraints — DO NOT
-
-<!-- This block is injected VERBATIM into every sub-agent prompt.
-     spec-validator rejects the spec if this block is missing or shorter than the template. -->
-
-- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
-- Do not add events beyond the Events table above. Same rule for slots and sub-components.
-- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
-- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
-- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
-- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
-- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
-- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
-- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
-- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
-- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
-- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
-- Do not edit the root `package.json` or `.github/workflows/*`.
-- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
-- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
-- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
-- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/paginator.md b/.specs/paginator.md
new file mode 100644
index 00000000..12920b21
--- /dev/null
+++ b/.specs/paginator.md
@@ -0,0 +1,210 @@
+---
+name: paginator
+category: data
+structure: composition
+status: approved
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=483-929
+  node_id: 483:929
+checksum: b7aa41afb484a9e064ead27c9f9bb6d9f0912e8bc686c00dce34d0c975b9683d
+created: 2026-06-16
+last_updated: 2026-06-19
+---
+
+# Paginator — Component Spec
+
+## Purpose
+
+Pagination controls for tables and lists, pixel-perfect to Figma, in two modes. **Composition mode** (default): a three-region landmark — page-info text, navigation buttons (Previous / page numbers / overflow / Next), and a rows-per-page selector — wired by hand through slots, with the consumer owning the current page, total, and page-size state. **Data-driven mode**: pass `total` (and optionally `page` / `pageSize`) and the Paginator renders its own info text, Previous / windowed page numbers / overflow ellipsis / Next, and the rows-per-page selector, emitting `update:page` / `update:pageSize` / `page-change` so the consumer can bind state via `v-model`. This component owns markup, tokens, and a11y; the data engine is a small internal page-window calculation — **no external pagination library**. Pairs with the [`Table`](./table.md) component.
+
+## Usage
+
+Composition mode — one import of the root; every part is reached via dot-notation (`<Paginator.Button>`, `<Paginator.Info>`, `<Paginator.PageSize>`). The root binding must be PascalCase (`Paginator`).
+
+```vue
+<script setup>
+import Paginator from '@aziontech/webkit/data/paginator'
+</script>
+
+<template>
+  <Paginator>
+    <template #info>
+      <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>
+    </template>
+
+    <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
+    <Paginator.Button kind="number" selected>1</Paginator.Button>
+    <Paginator.Button kind="number">2</Paginator.Button>
+    <Paginator.Button kind="number">3</Paginator.Button>
+    <Paginator.Button kind="more" />
+    <Paginator.Button kind="next">Next</Paginator.Button>
+
+    <template #controls>
+      <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />
+    </template>
+  </Paginator>
+</template>
+```
+
+Each sub-component is also a standalone import (`import PaginationButton from '@aziontech/webkit/data/pagination-button'`, …) — the tree-shaking path.
+
+Data-driven mode — pass `total` and bind state; the Paginator renders the controls and emits the page/page-size changes:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Paginator from '@aziontech/webkit/data/paginator'
+
+const page = ref(1)
+const pageSize = ref(10)
+</script>
+
+<template>
+  <Paginator
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :total="200"
+    :page-size-options="[10, 25, 50, 100]"
+    @page-change="loadPage"
+  />
+</template>
+```
+
+## Sub-components
+
+<!-- Each sub-component lives in its own folder under the root, with its own package.json.
+     The shared injection-key.ts sits one directory up from each sub-component.
+     Per-sub-component props/events are listed here (the root Props/Events/Slots tables
+     below describe ONLY the root Paginator element).
+     Compound API: index.ts (Object.assign; vue-tsc emits index.d.ts) attaches the sub-components
+     to the root as `Paginator.Button` (PaginationButton) / `Paginator.Info` / `Paginator.PageSize`
+     (PascalCase root required). See `.claude/rules/compound-api.md`. -->
+
+- `pagination-button/pagination-button.vue` — a single pagination control, height 28px, `var(--shape-button)` radius. Props `kind?: 'previous' | 'next' | 'number' | 'more'`, `selected?: boolean` (current-page treatment), `disabled?: boolean`. Emits `click: [event: MouseEvent]`. `previous` renders `pi pi-chevron-left` + the default slot; `next` renders the default slot + `pi pi-chevron-right`; `more` renders `pi pi-ellipsis-h`; `number` renders the default slot. Hover/active use the DESIGN.md ghost-layer surfaces; `selected` uses `var(--bg-selected)` + border; `disabled` uses `var(--bg-disabled)` + `var(--text-disabled)`.
+- `paginator-info/paginator-info.vue` — muted page-info text container (default slot), `.text-label-sm` / `var(--text-muted)`.
+- `paginator-page-size/paginator-page-size.vue` — rows-per-page selector (native `<select>`), 64×32, `var(--bg-canvas)` frame over a `var(--bg-surface)` field with `var(--border-default)` border, value `.text-label-sm` muted, `pi pi-chevron-down`. Props `modelValue?: number`, `options?: number[]` (default `[10, 25, 50, 100]`). Emits `update:modelValue: [value: number]`. Placed in the Paginator `controls` slot.
+
+<!-- Resulting layout:
+
+  packages/webkit/src/components/webkit/data/paginator/
+  ├── paginator.vue
+  ├── index.ts              (compound: Object.assign attaches sub-components; vue-tsc emits index.d.ts)
+  ├── package.json          (main/module → ./index.ts, types → ./index.d.ts)
+  ├── injection-key.ts
+  ├── pagination-button/    { pagination-button.vue, package.json }
+  ├── paginator-info/       { paginator-info.vue, package.json }
+  └── paginator-page-size/  { paginator-page-size.vue, package.json }
+
+  Public exports stay flat: ./data/paginator (→ index.ts), ./data/pagination-button, ./data/paginator-info, ./data/paginator-page-size -->
+
+## Props
+
+<!-- Root <Paginator> element only. Sub-component props are listed in the Sub-components section. -->
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `page` | `number` | `1` | no | Current page, 1-based (data-driven mode). Supports `v-model:page`. |
+| `total` | `number` | `undefined` | no | Total item count. When set, the Paginator runs in data-driven mode and renders its own controls. |
+| `pageSize` | `number` | `10` | no | Rows per page (data-driven mode). Supports `v-model:page-size`. |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | no | Page-size options offered in the rows-per-page selector. |
+| `siblingCount` | `number` | `1` | no | Page numbers shown on each side of the current page before collapsing into an overflow ellipsis. |
+| `ariaLabel` | `string` | `'Pagination'` | no | Accessible name for the navigation landmark. |
+
+## Events
+
+| Event | Payload | Notes |
+|---|---|---|
+| `update:page` | `[page: number]` | Current page changed in data-driven mode (Previous / Next / page number). Supports `v-model:page`. |
+| `update:pageSize` | `[pageSize: number]` | Rows-per-page changed via the internal selector. Supports `v-model:page-size`. |
+| `page-change` | `[page: number]` | Convenience action event fired alongside `update:page` whenever the page changes. |
+
+<!-- These events are emitted by the root Paginator only in data-driven mode (when `total` is set). In composition mode the root emits nothing: page changes come from the slotted pagination-button (`click`) and the rows-per-page change from the slotted PaginatorPageSize (`update:modelValue`). -->
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `info` | — | Left region: page-info text (typically PaginatorInfo). In data-driven mode, overrides the default "Showing X to Y of Z entries" text. |
+| `default` | — | Center region: pagination navigation buttons (composition mode only — ignored in data-driven mode, where the buttons are rendered internally). |
+| `controls` | — | Right region: rows-per-page selector (PaginatorPageSize). In data-driven mode, overrides the internally-rendered selector. |
+
+## States
+
+- Visual states: `default`, `hover`, `active`, `focus-visible`, `selected`, `disabled`
+- `data-kind` on PaginationButton: `previous` | `next` | `number` | `more`.
+- `data-selected` on PaginationButton mirrors the current-page `selected` prop; `aria-current="page"` set when selected.
+- `data-disabled` on PaginationButton mirrors the `disabled` prop; `disabled` attribute and `aria-disabled` set.
+- Data-driven mode: `Previous` is disabled on the first page, `Next` on the last; the current page button is `selected` (`aria-current="page"`); the overflow ellipsis (`more`) is non-interactive.
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+|---|---|---|---|
+| button hover / active | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| button label typography | `.text-button-lg` |
+| info / select typography | `.text-label-sm` |
+| surface (default button) | `var(--bg-surface)` |
+| surface (current page) | `var(--bg-selected)` |
+| surface (hover) | `var(--bg-hover)` |
+| surface (active) | `var(--bg-active)` |
+| surface (disabled) | `var(--bg-disabled)` |
+| text | `var(--text-default)` |
+| text muted (info / select) | `var(--text-muted)` |
+| text disabled | `var(--text-disabled)` |
+| border (current page) | `var(--border-default)` |
+| border width | `var(--border-width-default)` |
+| gap (numbers group) | `var(--spacing-xxs)` |
+| gap / padding (button) | `var(--spacing-xs)` |
+| shape (button) | `var(--shape-button)` |
+| ring | `var(--ring-color)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on every pagination button.
+- Keyboard map: `Tab` moves across buttons and the rows-per-page selector; `Enter`/`Space` activates a button; disabled buttons are skipped.
+- ARIA: root `<nav>` with `aria-label` (the `ariaLabel` prop); current-page button sets `aria-current="page"`; disabled buttons set the `disabled` attribute and `aria-disabled`; icon glyphs are `aria-hidden`.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state.
+- `motion-reduce:transition-none motion-reduce:transform-none` on animated states.
+- Touch target ≥40×40 px or a justified deviation (Figma button height is 28px; pad the hit area).
+
+## Stories (Storybook)
+
+- Default — full paginator with page-info text, Previous/numbers/overflow/Next, and a rows-per-page selector.
+- Buttons — PaginationButton in every `kind` (`previous` / `next` / `number` / `more`) and state (`default` / `selected` / `disabled`); justified because the button kinds and the current-page (`selected`) and `disabled` treatments are the core sub-component API and are not all visible in the Default story.
+- DataDriven — `total`-driven paginator with `v-model:page` / `v-model:page-size` and the `page-change` action; justified because the data-driven mode (internal rendering of info text, windowed page numbers, overflow ellipsis, page-size selector) and its emitted events are a distinct API surface from the slot-composition Default story and cannot be exercised there.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export and the root `package.json` main/module point at `index.ts`, `types` at `index.d.ts`. Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/table.md b/.specs/table.md
new file mode 100644
index 00000000..13632dc2
--- /dev/null
+++ b/.specs/table.md
@@ -0,0 +1,303 @@
+---
+name: table
+category: data
+structure: composition
+status: approved
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=2053-7649
+  node_id: 2053:7649
+checksum: 926ddec17d9574a0c62b18cf4cf11177861db7f0cdcf562e5bca303f7c56f9c2
+created: 2026-06-16
+last_updated: 2026-06-19
+---
+
+# Table — Component Spec
+
+## Purpose
+
+Composition primitives for building accessible, pixel-perfect data tables, in two modes. **Composition mode** (default): compose the anatomy by hand (header / body / rows / cells) — the component owns markup, tokens, a11y, configurable column sizing (an emphasized first column), sortable headers, selectable rows, and a **freeze system** for sticky columns (e.g. an actions column) and a sticky header. **Data-driven mode**: pass `data` + `columns` and the table renders itself via the headless **`@tanstack/vue-table`** engine, still rendering through the same primitives (our markup/tokens/a11y, pixel-perfect to Figma). Pairs with the [`Paginator`](./paginator.md) component (rendered automatically in the footer when `paginated`). A top **toolbar band** (`title` / `toolbar` / `filters` slots) sits above the scroll viewport in both modes for a title, search / filter / export / column-selector actions, and removable filter chips; the `toolbar` and `filters` slots are scoped with the TanStack `table` instance (in data-driven mode) so the consumer can drive filtering, global search, and column visibility through the table's own methods.
+
+**Engine.** Data-driven mode is driven by **`@tanstack/vue-table`** (`useVueTable` + `getCoreRowModel` / `getSortedRowModel` / `getFilteredRowModel` / `getPaginationRowModel`), covering sorting, pagination, row selection, column visibility, and global filtering — client- and server-side (`manualSorting` / `manualPagination` / `manualFiltering`). It is a pure-logic library (no markup/styles/positioning/animation), granted narrowly to this single component per [`.claude/rules/dependencies.md`](../.claude/rules/dependencies.md) § Exceptions; rendering stays 100% in our primitives. State is exposed via v-model (`sorting`, `rowSelection`, `columnVisibility`, `globalFilter`, `pagination`). `@tanstack/virtual` remains forbidden.
+
+## Usage
+
+Composition mode — one import of the root; every part is reached via dot-notation (`<Table.Row>`, `<Table.Cell>`, …). The root binding must be PascalCase (`Table`); `table` lowercase collides with the native element.
+
+```vue
+<script setup>
+import Table from '@aziontech/webkit/data/table'
+</script>
+
+<template>
+  <Table max-height="480px">
+    <Table.Caption>Workloads</Table.Caption>
+
+    <Table.Header frozen>
+      <Table.Row>
+        <Table.HeadCell :grow="2" sortable sort-direction="ascending">Name</Table.HeadCell>
+        <Table.HeadCell>Status</Table.HeadCell>
+        <Table.HeadCell kind="action" frozen="end"><span class="sr-only">Actions</span></Table.HeadCell>
+      </Table.Row>
+    </Table.Header>
+
+    <Table.Body>
+      <Table.Row selected>
+        <Table.Cell :grow="2">acme-prod</Table.Cell>
+        <Table.Cell>Active</Table.Cell>
+        <Table.Cell kind="action" frozen="end">…</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+
+    <template #footer>
+      <Table.Footer>
+        <!-- Paginator goes here; rendered below the scroll viewport, so it never scrolls -->
+      </Table.Footer>
+    </template>
+  </Table>
+</template>
+```
+
+Each sub-component is also a standalone import (`import TableRow from '@aziontech/webkit/data/table-row'`, …) — the tree-shaking path when only a few parts are used.
+
+Data-driven mode (TanStack engine renders the table from `data` + `columns`):
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Table from '@aziontech/webkit/data/table'
+
+const sorting = ref([])
+const rowSelection = ref({})
+const data = ref([{ id: '1', name: 'acme-prod', status: 'Active' }])
+const columns = [
+  { accessorKey: 'name', header: 'Name', enableSorting: true, grow: 2, frozen: 'start' },
+  { accessorKey: 'status', header: 'Status', enableSorting: true }
+]
+</script>
+
+<template>
+  <Table
+    :data="data"
+    :columns="columns"
+    enable-sorting
+    enable-row-selection
+    paginated
+    max-height="480px"
+    v-model:sorting="sorting"
+    v-model:row-selection="rowSelection"
+    @row-click="(row) => console.log(row)"
+  >
+    <template #title>Workloads</template>
+    <template #toolbar>
+      <!-- Context-aware: reads/drives the TanStack globalFilter via inject — no wiring -->
+      <Table.Search placeholder="Search" />
+    </template>
+    <template #filters="{ table }">
+      <Chip
+        v-if="table.getState().globalFilter"
+        :label="table.getState().globalFilter"
+        removable
+        @remove="() => table.setGlobalFilter('')"
+      />
+    </template>
+    <template #cell-status="{ value }">
+      <Tag>{{ value }}</Tag>
+    </template>
+  </Table>
+</template>
+```
+
+## Sub-components
+
+<!-- Each sub-component lives in its own folder under the root, with its own package.json.
+     The shared injection-key.ts sits one directory up from each sub-component.
+     Per-sub-component props/events are listed here (the root Props/Events/Slots tables
+     below describe ONLY the root Table element).
+     Compound API: index.ts (Object.assign; vue-tsc emits index.d.ts) attaches every sub-component
+     to the root as `Table.Header` / `Table.Row` / `Table.Cell` / … (PascalCase root required).
+     See `.claude/rules/compound-api.md`. -->
+
+- `table-header/table-header.vue` — `role="rowgroup"` header band. Props `frozen?: boolean` → sticky top within the scroll container; `variant?: 'default' | 'compact'` → `compact` shrinks the header cells' height and padding (published to the head cells through the row-group context, so the consumer sets it once on the header).
+- `table-body/table-body.vue` — `role="rowgroup"` body band.
+- `table-footer/table-footer.vue` — `role="rowgroup"` footer band (hosts the Paginator); muted text.
+- `table-caption/table-caption.vue` — accessible caption / title line; `text-label-sm` muted.
+- `table-row/table-row.vue` — `role="row"`, flex container. Props `selected?: boolean`, `frozen?: boolean`. Forwards native listeners (e.g. `@click`) to its root via attribute fallthrough. Bottom divider `var(--border-width-default)` / `var(--border-default)`; hover `var(--bg-canvas)`; selected `var(--bg-selected)`. The row publishes its resolved background as the `--table-row-bg` custom property so frozen cells (and their edge fade) track the row hover/selected color instead of drifting against it.
+- `table-head-cell/table-head-cell.vue` — `role="columnheader"`, height 44px. Props `kind?: 'default' | 'checkbox' | 'action' | 'slot'` (`checkbox`/`action` are 40px fixed-width so the header aligns with the body's checkbox/action cells), `sortable?: boolean`, `sortDirection?: 'none' | 'ascending' | 'descending'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3` (flex weight; first column uses `2`), `frozen?: 'start' | 'end'`. Emits `sort: [direction: 'ascending' | 'descending']`. Renders `table-sort-button` when `sortable`. When `resizable`, renders a drag-to-resize handle on the right edge (`resizing` reflects the active drag; `resizeHandler` is the pointer handler supplied by the data-driven root).
+- `table-cell/table-cell.vue` — `role="cell"`, min height 48px. Props `kind?: 'default' | 'checkbox' | 'action'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3`, `frozen?: 'start' | 'end'`, `clickable?: boolean` (underlines the cell text). Cell text never wraps (single line, truncates) — there is no wrap option. A `grow` column carries a fixed, content-independent flex basis (`flex: <grow> 0 5rem`) identical to its header cell, so the column resolves to the same width in the header and in every body row; when the table overflows it shrinks to that minimum and the viewport scrolls horizontally — instead of each row sizing the column to its own content, which misaligned the header from the body. A `width` column overrides the basis with a fixed pixel width. Content (avatar, tag, icon, description, copy, "+99") is composed by the consumer via the default slot using existing primitives.
+- `table-sort-button/table-sort-button.vue` — sort control used inside `table-head-cell`, rendered as the webkit `IconButton` (`kind="transparent"`, `size="small"` → 28×28) so size, padding, and alignment match the design system. Props `direction?: 'none' | 'ascending' | 'descending'`, `hidden?: boolean`. Emits `toggle: [direction: 'ascending' | 'descending']`. Glyphs via `pi pi-sort-alt` (none) / `pi pi-sort-amount-up` (ascending) / `pi pi-sort-amount-down` (descending).
+- `table-toolbar/table-toolbar.vue` — flex container (end-aligned) for toolbar actions placed in the `toolbar` slot; injects the table context for its testId.
+- `table-search/table-search.vue` — context-aware search input. Reads and drives the TanStack `globalFilter` through the injected table context, so it needs no wiring. Prop `placeholder?: string` (default `'Search'`).
+
+<!-- Resulting layout:
+
+  packages/webkit/src/components/webkit/data/table/
+  ├── table.vue
+  ├── index.ts              (compound: Object.assign attaches sub-components; vue-tsc emits index.d.ts)
+  ├── package.json          (main/module → ./index.ts, types → ./index.d.ts)
+  ├── injection-key.ts
+  ├── table-header/         { table-header.vue, package.json }
+  ├── table-body/           { table-body.vue, package.json }
+  ├── table-footer/         { table-footer.vue, package.json }
+  ├── table-caption/        { table-caption.vue, package.json }
+  ├── table-row/            { table-row.vue, package.json }
+  ├── table-head-cell/      { table-head-cell.vue, package.json }
+  ├── table-cell/           { table-cell.vue, package.json }
+  └── table-sort-button/    { table-sort-button.vue, package.json }
+
+  Public exports stay flat: ./data/table (→ index.ts), ./data/table-header, … ./data/table-sort-button -->
+
+## Props
+
+<!-- Root <Table> element only. Sub-component props are listed in the Sub-components section. -->
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `maxHeight` | `string` | `''` | no | Max height (CSS length). The viewport scrolls dynamically: horizontal scroll appears automatically when columns overflow the width; vertical scroll appears only when `maxHeight` is set smaller than the content (under the sticky header). |
+| `data` | `Record<string, unknown>[]` | `[]` | no | Data-driven mode: row records. |
+| `columns` | `TableColumn[]` | `[]` | no | Data-driven mode: column definitions (`{ id?, accessorKey?, header?, enableSorting?, grow?, frozen?, width?, align?, kind?, resizable? }`; `width` (px) sets a fixed pixel column (also needed when a frozen column precedes another frozen column on the same edge, so sticky offsets can be summed); a `grow` column without `width` keeps a shared fixed basis so the header and body stay aligned and the cell never wraps. A column with no `grow` defaults to weight `2` for the first column and `1` for the rest, so the columns fill the available space proportionally. A `kind: 'action'` column is automatically pinned to the trailing (right) edge — staying reachable while the rest scrolls horizontally — and is never resizable. **`resizable: true`** opts a column into a live mouse/touch drag-to-resize handle on its header (native pointer events; the `@tanstack/vue-table` exception covers sorting/pagination/selection/visibility, not sizing). On the first drag of any divider every flexible column freezes at its current rendered width; from then on dragging changes **only that column** and the table grows (horizontal scroll) — the others are untouched. The drag floor is the column's own content width (header label + visible body cells), so a column never shrinks past its content. Frozen and action columns ignore `resizable`. When non-empty, the table renders itself via TanStack. |
+| `rowKey` | `string` | `'id'` | no | Field used as the stable row id (for selection). |
+| `enableSorting` | `boolean` | `false` | no | Enable sorting globally; per-column `enableSorting` overrides. |
+| `enableRowSelection` | `boolean` | `false` | no | Add a leading selection-checkbox column. |
+| `selectOnRowClick` | `boolean` | `false` | no | Data-driven mode: clicking a row toggles its selection (requires `enableRowSelection`); interactive cells still own their own click. |
+| `headerVariant` | `'default' \| 'compact'` | `'default'` | no | Header density (data-driven): `compact` shrinks the column-header row's height and padding. Forwarded to the `TableHeader`'s `variant`. |
+| `paginated` | `boolean` | `false` | no | Render a Paginator in the footer. |
+| `pageSize` | `number` | `10` | no | Rows per page when paginated. |
+| `sorting` | `SortingState` | `undefined` | no | v-model:sorting (TanStack SortingState). |
+| `rowSelection` | `RowSelectionState` | `undefined` | no | v-model:rowSelection (TanStack RowSelectionState). |
+| `columnVisibility` | `VisibilityState` | `undefined` | no | v-model:columnVisibility (TanStack VisibilityState). |
+| `globalFilter` | `string` | `undefined` | no | v-model:globalFilter text. |
+| `pagination` | `PaginationState` | `undefined` | no | v-model:pagination (TanStack PaginationState). |
+| `manualSorting` | `boolean` | `false` | no | Server-side sorting: emit events, do not sort locally. |
+| `manualPagination` | `boolean` | `false` | no | Server-side pagination: emit events, do not slice locally. |
+| `manualFiltering` | `boolean` | `false` | no | Server-side filtering: emit events, do not filter locally. |
+| `rowCount` | `number` | `undefined` | no | Total row count for manual pagination. |
+| `rowsPerPageOptions` | `number[]` | `[10, 25, 50, 100]` | no | Rows-per-page options shown in the footer selector. |
+
+## Events
+
+<!-- Root events fire only in data-driven mode. In composition mode, sort comes from
+     table-head-cell (`sort`) and row clicks fall through on table-row. -->
+
+| Event | Payload | Notes |
+|---|---|---|
+| `update:sorting` | `value: SortingState` | v-model:sorting. |
+| `update:rowSelection` | `value: RowSelectionState` | v-model:rowSelection. |
+| `update:columnVisibility` | `value: VisibilityState` | v-model:columnVisibility. |
+| `update:globalFilter` | `value: string` | v-model:globalFilter. |
+| `update:pagination` | `value: PaginationState` | v-model:pagination. |
+| `row-click` | `row: Record<string, unknown>` | Fires when a rendered row is clicked (data-driven mode). |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Composition mode: the scrollable region (TableCaption, TableHeader, TableBody). |
+| `footer` | — | Footer region rendered below the scroll viewport (e.g. TableFooter + Paginator), so it never scrolls with the body. In data-driven mode it renders automatically when `paginated`. |
+| `caption` | — | Data-driven mode: caption content (wrapped in TableCaption), fixed above the scroll viewport. |
+| `title` | — | Title text shown at the start of the toolbar band, fixed above the scroll viewport (both modes). |
+| `toolbar` | `{ table }` | Action band (search, filter trigger, refresh, export, column-selector) above the scroll viewport, end-aligned beside the title. `table` is the TanStack instance in data-driven mode, `undefined` in composition mode. |
+| `filters` | `{ table }` | Active-filter chips row below the toolbar (both modes); same `table` scope as `toolbar`. |
+| `empty` | — | Data-driven mode: shown when there are no rows. |
+
+Per-column slots (data-driven mode) are name-computed at runtime, one per column id, so they are documented here rather than as enumerable `defineSlots` rows: `cell-<columnId>` (scope `{ row, value }`) renders custom body-cell content; `header-<columnId>` (scope `{ column }`) renders custom header content.
+
+## States
+
+- Visual states: `default`, `hover`, `focus-visible`, `active`, `selected`
+- The viewport is always a scroll container (`overflow: auto`): horizontal scroll is automatic when columns overflow; vertical scroll engages only when `maxHeight` constrains the content.
+- `data-frozen` on TableHeader (`true`), TableHeadCell / TableCell (`start` | `end`), and TableRow (`true`). A frozen head/body cell renders a CSS-only fade (gradient pseudo-element) just outside its inner edge that dissolves the horizontally scrolling content into the row background (`from-transparent` → `var(--table-row-bg)`, the row-published color, so it matches the row on hover/selected) — `frozen=start` fades on the right, `frozen=end` on the left. The fade tints nothing; it only masks the content sliding under the pinned column.
+- `data-state` on TableRow: `selected` | `unselected`; `data-selected` mirrors the `selected` prop; `aria-selected` set when selected.
+- `data-kind` on TableHeadCell (`default` | `checkbox` | `action` | `slot`) and TableCell (`default` | `checkbox` | `action`).
+- `data-align` on head/body cells: `start` | `center` | `end`.
+- `data-grow` on head/body cells: `1` | `2` | `3` (flex weight).
+- `data-sortable` and `data-sort` (`none` | `ascending` | `descending`) on TableHeadCell; `aria-sort` mirrors `data-sort`.
+- `data-direction` (`none` | `ascending` | `descending`) and `data-hidden` on TableSortButton.
+- `data-clickable` on TableCell mirrors the `clickable` prop.
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+|---|---|---|---|
+| row hover / selected | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+| sort glyph reveal on header hover | `transition-opacity duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| header typography | `.text-label-sm` |
+| toolbar title typography | `.text-label-md` |
+| body cell typography | `.text-label-md` |
+| secondary / description typography | `.text-label-sm` |
+| surface | `var(--bg-surface)` |
+| outer border (card edge) | `var(--border-default)` |
+| outer border width | `var(--border-width-default)` |
+| frozen column surface / edge fade (follow the row via `--table-row-bg`) | `var(--bg-surface)` · `var(--bg-canvas)` · `var(--bg-selected)` |
+| frozen column edge fade (dissolves scrolling content) | `var(--bg-surface)` |
+| row hover | `var(--bg-canvas)` |
+| row selected | `var(--bg-selected)` |
+| text | `var(--text-default)` |
+| text muted (header / description) | `var(--text-muted)` |
+| divider | `var(--border-default)` |
+| divider width | `var(--border-width-default)` |
+| cell padding x | `var(--spacing-sm)` |
+| gap | `var(--spacing-xs)` |
+| shape (cells / surface) | `var(--shape-elements)` |
+| shape (sort button) | `var(--shape-button)` |
+| ring | `var(--ring-color)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]` on the sort button and any interactive cell content.
+- Keyboard map: `Tab` focuses sortable headers and interactive cell content; `Enter`/`Space` toggles a sortable header; row click is mouse/touch (no keyboard trap).
+- ARIA: root `role="table"`; `table-header`/`table-body`/`table-footer` `role="rowgroup"`; `table-row` `role="row"`; `table-head-cell` `role="columnheader"` with `aria-sort` when sortable; `table-cell` `role="cell"`; selected rows set `aria-selected`.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including muted header text.
+- `motion-reduce:transition-none motion-reduce:transform-none` on animated states.
+- Touch target ≥40×40 px on the sort button and row action controls.
+
+## Stories (Storybook)
+
+This component has no `kind`/`size` on its root, so the canonical Types/Sizes stories do not apply. Instead there is one story per scenario (the component's value is the behaviors, not root variants) plus a Full reference; each wires its events to the Actions panel.
+
+All stories use the data-driven API (`<Table :data :columns>` via the TanStack engine, the granted `@tanstack/vue-table` exception) with per-column `cell-<id>` slots and a shared row-action menu. Per the toolbar policy, **only Full Example renders the `#toolbar` / `#filters` band** — every other story omits it so the table opens straight onto its compact column-header row.
+
+- With Checkboxes — selection scenario; `enable-row-selection` adds the leading checkbox column with a select-all header (all / none / indeterminate) and per-row selection via `v-model:row-selection`; justified because the selection surface (`kind="checkbox"` cell + select-all) is a distinct behavior.
+- Compact Header — a denser header via `header-variant="compact"` (reduced header-row height and padding), with no toolbar band so the table opens straight onto that header row; justified because the compact header density is a distinct presentation.
+- No Border — the outer card border removed via a consumer `class` override (`class="!border-0"`) flowing onto the root through attribute fallthrough; justified because consumer class override of the surface framing is a distinct integration concern.
+- Selected Row — a pre-selected row (the `var(--bg-selected)` surface + `aria-selected`) seeded through `v-model:row-selection`, with `select-on-row-click` toggling selection on inert row clicks; justified because the selected-row state and row-click selection are distinct behaviors.
+- Fixed Layout with Column Sizes — every column declares an explicit pixel `width` (fixed layout, columns keep their declared size and scroll horizontally past the surface); justified because explicit column sizing is distinct from the grow-to-fill default.
+- Resizable Columns — a simple table whose columns opt into drag-to-resize via per-column `resizable: true`; dragging a header divider resizes only that column (the others freeze) and the table grows; justified because the per-column resize affordance is a distinct behavior.
+- Sticky Column — freeze scenario; a frozen start column (Name) and a frozen actions (end) column inside a horizontally scrollable container, with the CSS-only edge fade; justified because the freeze system is the primary differentiator of this component.
+- Compact Header with Sticky Column — the compact header density (`header-variant="compact"`) combined with frozen start/end columns inside a horizontally scrollable container; justified because combining the compact header with frozen columns is a distinct composite scenario.
+- Full Example — the complete data table over a larger dataset (multiple paginator pages): the only story with the toolbar band — a composed `#toolbar="{ table }"` (filter / context-aware search / refresh / export / column-selector) with a removable `#filters="{ table }"` chip (search drives `table.setGlobalFilter`; the chip clears it) — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, and a paginator. Its docs embed an inline-SVG reference preview of the assembled table; justified because the assembled page is the canonical real-world usage.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export and the root `package.json` main/module point at `index.ts`, `types` at `index.d.ts`. Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/webkit/data/DataTable.stories.js b/apps/storybook/src/stories/webkit/data/DataTable.stories.js
deleted file mode 100644
index 6872835a..00000000
--- a/apps/storybook/src/stories/webkit/data/DataTable.stories.js
+++ /dev/null
@@ -1,416 +0,0 @@
-import IconButton from '@aziontech/webkit/icon-button'
-import Avatar from '@aziontech/webkit/avatar'
-import Tag from '@aziontech/webkit/tag'
-import DataTable from '@aziontech/webkit/data/data-table'
-import DataTableActions from '@aziontech/webkit/data/data-table-actions'
-import DataTableColumn from '@aziontech/webkit/data/data-table-column'
-import DataTableExport from '@aziontech/webkit/data/data-table-export'
-import DataTableFilter from '@aziontech/webkit/data/data-table-filter'
-import DataTableFilterChips from '@aziontech/webkit/data/data-table-filter-chips'
-import DataTableRowActions from '@aziontech/webkit/data/data-table-row-actions'
-import DataTableSearch from '@aziontech/webkit/data/data-table-search'
-import DataTableToolbar from '@aziontech/webkit/data/data-table-toolbar'
-import StatusIndicator from '@aziontech/webkit/feedback/status-indicator'
-import DropdownMenu from '@aziontech/webkit/overlay/dropdown-menu'
-import DropdownMenuContent from '@aziontech/webkit/overlay/dropdown-menu-content'
-import DropdownMenuItem from '@aziontech/webkit/overlay/dropdown-menu-item'
-import DropdownMenuTrigger from '@aziontech/webkit/overlay/dropdown-menu-trigger'
-import { ref } from 'vue'
-
-const workloads = [
-  {
-    id: 'wl-001',
-    name: 'edge-service',
-    domains: ['mydomain.azion.app', 'api.azion.app', 'cdn.azion.app'],
-    status: 'Active',
-    lastModified: 'May 15, 2026, 11:00:25 am',
-    ownerEmail: 'rafael.umman@azion.com'
-  },
-  {
-    id: 'wl-002',
-    name: 'billing-api',
-    domains: ['billing.azion.app'],
-    status: 'Active',
-    lastModified: 'May 14, 2026, 9:12:10 am',
-    ownerEmail: 'maria.silva@azion.com'
-  },
-  {
-    id: 'wl-003',
-    name: 'analytics-worker',
-    domains: ['analytics.azion.app', 'metrics.azion.app'],
-    status: 'Inactive',
-    lastModified: 'May 10, 2026, 4:45:00 pm',
-    ownerEmail: 'joao.pereira@azion.com'
-  }
-]
-
-const defaultColumns = [
-  { field: 'name', header: 'Name' },
-  { field: 'domains', header: 'Domain' },
-  { field: 'status', header: 'Status' },
-  { field: 'lastModified', header: 'Last Modified' },
-  { field: 'ownerEmail', header: 'Owner' }
-]
-
-/** @type {import('@storybook/vue3').Meta<typeof DataTable>} */
-const meta = {
-  title: 'Webkit/Data/DataTable',
-  component: DataTable,
-  subcomponents: {
-    DataTableColumn,
-    DataTableToolbar,
-    DataTableSearch,
-    DataTableActions,
-    DataTableExport,
-    DataTableFilter,
-    DataTableFilterChips,
-    DataTableRowActions
-  },
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    backgrounds: { default: 'dark' },
-    a11y: {
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'focus-order-semantics', enabled: true }
-        ]
-      }
-    },
-    docs: {
-      description: {
-        component:
-          'Composition-based data table for listing, filtering, sorting, and acting on tabular records. Mirrors the core list-data-table API using webkit primitives.'
-      }
-    }
-  },
-  argTypes: {
-    data: {
-      control: false,
-      description: 'Row records to render.',
-      table: { type: { summary: 'Record<string, unknown>[]' }, category: 'props' }
-    },
-    hideHeader: {
-      control: 'boolean',
-      description: 'Hides column headers; renders headerless list rows.',
-      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
-    },
-    paginator: {
-      control: 'boolean',
-      description: 'Enables pagination controls.',
-      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
-    },
-    lazy: {
-      control: 'boolean',
-      description: 'When true, pagination and sort emit events for server fetch.',
-      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Shows loading skeleton rows when true.',
-      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
-    },
-    onPage: {
-      action: 'page',
-      table: { type: { summary: '(event: PageEvent) => void' }, category: 'events' }
-    },
-    onSort: {
-      action: 'sort',
-      table: { type: { summary: '(event: SortEvent) => void' }, category: 'events' }
-    },
-    'onRow-click': {
-      action: 'row-click',
-      table: {
-        type: { summary: '(event: { data: Record<string, unknown>; originalEvent: MouseEvent }) => void' },
-        category: 'events'
-      }
-    },
-    'onClick-to-create': {
-      action: 'click-to-create',
-      table: { type: { summary: '() => void' }, category: 'events' }
-    },
-    header: {
-      control: false,
-      description: 'Toolbar area; typically DataTableToolbar.',
-      table: { type: { summary: 'VNode' }, category: 'slots' }
-    },
-    default: {
-      control: false,
-      description: 'DataTableColumn children.',
-      table: { type: { summary: 'VNode' }, category: 'slots' }
-    }
-  },
-  args: {
-    data: workloads,
-    columns: defaultColumns,
-    hideHeader: false,
-    paginator: false,
-    lazy: false,
-    loading: false
-  }
-}
-
-export default meta
-
-/** @type {import('@storybook/vue3').StoryObj<typeof DataTable>} */
-export const Default = {
-  render: (args) => ({
-    components: { DataTable, DataTableColumn },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DataTable v-bind="args">
-        <DataTableColumn field="name" header="Name" sortable />
-        <DataTableColumn field="status" header="Status" />
-        <DataTableColumn field="ownerEmail" header="Owner" />
-      </DataTable>
-    `
-  }),
-  parameters: {
-    docs: { description: { story: 'Basic three-column table with sortable name column.' } }
-  }
-}
-
-/** @type {import('@storybook/vue3').StoryObj<typeof DataTable>} */
-export const WithFilters = {
-  render: (args) => ({
-    components: {
-      DataTable,
-      DataTableColumn,
-      DataTableToolbar,
-      DataTableSearch,
-      DataTableActions,
-      DataTableExport,
-      DataTableFilter,
-      DataTableFilterChips,
-      DataTableRowActions,
-      IconButton,
-      StatusIndicator,
-      Tag,
-      Avatar,
-      DropdownMenu,
-      DropdownMenuTrigger,
-      DropdownMenuContent,
-      DropdownMenuItem
-    },
-    setup() {
-      const items = ref([...workloads])
-      const searchValue = ref('')
-      const appliedFilters = ref([])
-      const filterRef = ref(null)
-
-      const onSearch = (value) => {
-        searchValue.value = value
-      }
-
-      const toggleFilter = () => {
-        filterRef.value?.toggle()
-      }
-
-      const handleApplyFilter = (filter) => {
-        const idx = appliedFilters.value.findIndex((item) => item.field === filter.field)
-        if (idx >= 0) appliedFilters.value[idx] = filter
-        else appliedFilters.value.push(filter)
-      }
-
-      const handleRemoveFilter = (field) => {
-        appliedFilters.value = appliedFilters.value.filter((item) => item.field !== field)
-      }
-
-      const handleEditFilter = ({ filter }) => {
-        filterRef.value?.openForFilter(filter)
-      }
-
-      const getActions = (rowData) => [
-        { label: 'Clone', icon: 'pi pi-clone', command: () => console.log('Clone', rowData.name) },
-        { separator: true },
-        { label: 'Delete', icon: 'pi pi-trash', command: () => console.log('Delete', rowData.name) }
-      ]
-
-      return {
-        args,
-        items,
-        searchValue,
-        appliedFilters,
-        filterRef,
-        onSearch,
-        toggleFilter,
-        handleApplyFilter,
-        handleRemoveFilter,
-        handleEditFilter,
-        getActions,
-        defaultColumns
-      }
-    },
-    template: `
-      <DataTable
-        v-bind="args"
-        :data="items"
-        :columns="defaultColumns"
-        :searchValue="searchValue"
-        :appliedFilters="appliedFilters"
-        :globalFilterFields="['name', 'id', 'status', 'ownerEmail', 'domains']"
-        hideHeader
-      >
-        <template #header>
-          <DataTableToolbar :showDivider="appliedFilters.length > 0">
-            <template #first-line>
-              <div class="flex w-full items-center justify-between gap-[var(--spacing-3)]">
-                <span class="flex items-center gap-[var(--spacing-2)]">
-                  <IconButton
-                    icon="pi pi-filter"
-                    ariaLabel="Open filters"
-                    kind="outlined"
-                    size="small"
-                    @click="toggleFilter"
-                  />
-                  <DataTableSearch
-                    v-model="searchValue"
-                    placeholder="Search Workloads"
-                    :debounce="300"
-                    @search="onSearch"
-                  />
-                </span>
-                <DataTableActions>
-                  <DataTableExport />
-                  <DropdownMenu>
-                    <DropdownMenuTrigger>
-                      <IconButton icon="pi pi-ellipsis-h" ariaLabel="Table actions" kind="outlined" size="small" />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuItem label="Refresh" />
-                      <DropdownMenuItem label="Settings" />
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </DataTableActions>
-              </div>
-            </template>
-            <template #second-line v-if="appliedFilters.length > 0">
-              <DataTableFilterChips
-                :appliedFilters="appliedFilters"
-                @remove="handleRemoveFilter"
-                @edit="handleEditFilter"
-              />
-            </template>
-          </DataTableToolbar>
-        </template>
-
-        <DataTableColumn field="name" header="Name">
-          <template #body="{ data }">
-            <div class="flex flex-col">
-              <span class="text-body-sm text-[var(--text-default)]">{{ data.name }}</span>
-              <span class="text-body-xs text-[var(--text-muted)]">{{ data.id }}</span>
-            </div>
-          </template>
-        </DataTableColumn>
-
-        <DataTableColumn field="domains" header="Domain">
-          <template #body="{ data }">
-            <div class="flex items-center gap-[var(--spacing-2)]">
-              <span class="text-body-sm text-[var(--text-default)]">{{ data.domains[0] }}</span>
-              <Tag v-if="data.domains.length > 1" :value="'+' + (data.domains.length - 1)" severity="secondary" />
-            </div>
-          </template>
-        </DataTableColumn>
-
-        <DataTableColumn field="status" header="Status">
-          <template #body="{ data }">
-            <StatusIndicator :label="data.status" :status="data.status === 'Active' ? 'positive' : 'neutral'" />
-          </template>
-        </DataTableColumn>
-
-        <DataTableColumn field="lastModified" header="Last Modified" />
-
-        <DataTableColumn field="ownerEmail" header="Owner">
-          <template #body="{ data }">
-            <div class="flex items-center gap-[var(--spacing-2)]">
-              <span class="text-body-sm text-[var(--text-default)]">{{ data.ownerEmail }}</span>
-              <Avatar :label="data.ownerEmail.slice(0, 1).toUpperCase()" size="small" />
-            </div>
-          </template>
-        </DataTableColumn>
-
-        <DataTableColumn field="actions" header="">
-          <template #body="{ data }">
-            <DataTableRowActions :rowData="data" :actions="getActions" />
-          </template>
-        </DataTableColumn>
-
-        <DataTableFilter ref="filterRef" :filters="defaultColumns" @apply="handleApplyFilter" />
-      </DataTable>
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Workloads-like layout with filter toggle, search, chips, and headerless rich rows.'
-      }
-    }
-  }
-}
-
-/** @type {import('@storybook/vue3').StoryObj<typeof DataTable>} */
-export const WithLazyLoad = {
-  render: (args) => ({
-    components: { DataTable, DataTableColumn },
-    setup() {
-      const items = ref(workloads.slice(0, 2))
-      const totalRecords = ref(workloads.length)
-      const first = ref(0)
-      const rows = ref(2)
-      const loading = ref(false)
-
-      const onPage = (event) => {
-        loading.value = true
-        first.value = event.first
-        setTimeout(() => {
-          items.value = workloads.slice(event.first, event.first + event.rows)
-          loading.value = false
-        }, 400)
-      }
-
-      return { args, items, totalRecords, first, rows, loading, onPage }
-    },
-    template: `
-      <DataTable
-        v-bind="args"
-        :data="items"
-        :totalRecords="totalRecords"
-        :first="first"
-        :rows="rows"
-        :loading="loading"
-        lazy
-        paginator
-        @page="onPage"
-      >
-        <DataTableColumn field="name" header="Name" sortable />
-        <DataTableColumn field="status" header="Status" />
-        <DataTableColumn field="ownerEmail" header="Owner" />
-      </DataTable>
-    `
-  }),
-  parameters: {
-    docs: { description: { story: 'Server-driven pagination using lazy mode and totalRecords.' } }
-  }
-}
-
-/** @type {import('@storybook/vue3').StoryObj<typeof DataTable>} */
-export const Empty = {
-  render: (args) => ({
-    components: { DataTable, DataTableColumn },
-    setup() {
-      return { args: { ...args, data: [] } }
-    },
-    template: `
-      <DataTable v-bind="args">
-        <DataTableColumn field="name" header="Name" />
-        <DataTableColumn field="status" header="Status" />
-      </DataTable>
-    `
-  }),
-  parameters: {
-    docs: { description: { story: 'Empty block when no data, search, or filters are active.' } }
-  }
-}
diff --git a/apps/storybook/src/stories/webkit/data/Paginator.stories.js b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
new file mode 100644
index 00000000..38ae8598
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
@@ -0,0 +1,259 @@
+import PaginationButton from '@aziontech/webkit/data/pagination-button'
+import Paginator from '@aziontech/webkit/data/paginator'
+import PaginatorInfo from '@aziontech/webkit/data/paginator-info'
+import PaginatorPageSize from '@aziontech/webkit/data/paginator-page-size'
+import { ref, watch } from 'vue'
+
+const paginatorComponents = {
+  Paginator,
+  PaginationButton,
+  PaginatorInfo,
+  PaginatorPageSize
+}
+
+const usage = [
+  '```vue',
+  '<Paginator>',
+  '  <template #info>',
+  '    <PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>',
+  '  </template>',
+  '  <PaginationButton kind="previous" disabled>Previous</PaginationButton>',
+  '  <PaginationButton kind="number" selected>1</PaginationButton>',
+  '  <PaginationButton kind="number">2</PaginationButton>',
+  '  <PaginationButton kind="more" />',
+  '  <PaginationButton kind="next">Next</PaginationButton>',
+  '  <template #controls>',
+  '    <PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />',
+  '  </template>',
+  '</Paginator>',
+  '```'
+].join('\n')
+
+/** @type {import('@storybook/vue3').Meta<typeof Paginator>} */
+const meta = {
+  title: 'Webkit/Data/Paginator',
+  component: Paginator,
+  subcomponents: { PaginationButton, PaginatorInfo },
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Pagination controls — a three-region landmark (page-info text, navigation buttons, rows-per-page selector). No data engine; wire current page and page-size through your own state.\n\n' +
+          usage
+      }
+    }
+  },
+  argTypes: {
+    page: {
+      control: { type: 'number' },
+      description: 'Current page, 1-based (data-driven mode). Supports v-model:page.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+        category: 'props'
+      }
+    },
+    total: {
+      control: { type: 'number' },
+      description:
+        'Total item count. When set, the Paginator runs in data-driven mode and renders its own controls.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' },
+        category: 'props'
+      }
+    },
+    pageSize: {
+      control: { type: 'number' },
+      description: 'Rows per page (data-driven mode). Supports v-model:page-size.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '10' },
+        category: 'props'
+      }
+    },
+    pageSizeOptions: {
+      control: 'object',
+      description: 'Page-size options offered in the rows-per-page selector.',
+      table: {
+        type: { summary: 'number[]' },
+        defaultValue: { summary: '[10, 25, 50, 100]' },
+        category: 'props'
+      }
+    },
+    siblingCount: {
+      control: { type: 'number' },
+      description:
+        'Page numbers shown on each side of the current page before collapsing into an overflow ellipsis.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+        category: 'props'
+      }
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the navigation landmark.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: "'Pagination'" },
+        category: 'props'
+      }
+    },
+    'onUpdate:page': {
+      action: 'update:page',
+      description: 'Current page changed (data-driven mode). Supports v-model:page.',
+      table: { type: { summary: '(page: number) => void' }, category: 'events' }
+    },
+    'onUpdate:pageSize': {
+      action: 'update:pageSize',
+      description: 'Rows-per-page changed via the internal selector. Supports v-model:page-size.',
+      table: { type: { summary: '(pageSize: number) => void' }, category: 'events' }
+    },
+    'onPage-change': {
+      action: 'page-change',
+      description: 'Fired alongside update:page whenever the page changes.',
+      table: { type: { summary: '(page: number) => void' }, category: 'events' }
+    },
+    info: {
+      control: false,
+      description: 'Left region: page-info text (typically PaginatorInfo).',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    default: {
+      control: false,
+      description: 'Center region: pagination navigation buttons.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    controls: {
+      control: false,
+      description: 'Right region: rows-per-page selector (e.g. Dropdown).',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    }
+  },
+  args: {
+    ariaLabel: 'Pagination'
+  }
+}
+
+export default meta
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Paginator>} */
+export const Default = {
+  render: (args) => ({
+    components: paginatorComponents,
+    setup() {
+      return { args }
+    },
+    template: `
+      <Paginator v-bind="args">
+        <template #info>
+          <PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>
+        </template>
+        <PaginationButton kind="previous" disabled>Previous</PaginationButton>
+        <PaginationButton kind="number" selected>1</PaginationButton>
+        <PaginationButton kind="number">2</PaginationButton>
+        <PaginationButton kind="number">3</PaginationButton>
+        <PaginationButton kind="more" />
+        <PaginationButton kind="next">Next</PaginationButton>
+        <template #controls>
+          <PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />
+        </template>
+      </Paginator>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Full paginator: page-info text, Previous/numbers/overflow/Next, and a rows-per-page selector.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Paginator>} */
+export const Buttons = {
+  render: () => ({
+    components: paginatorComponents,
+    template: `
+      <div class="flex flex-col gap-[var(--spacing-4)]">
+        <div class="flex items-center gap-[var(--spacing-2)]">
+          <PaginationButton kind="previous">Previous</PaginationButton>
+          <PaginationButton kind="number">1</PaginationButton>
+          <PaginationButton kind="number" selected>2</PaginationButton>
+          <PaginationButton kind="more" />
+          <PaginationButton kind="next">Next</PaginationButton>
+        </div>
+        <div class="flex items-center gap-[var(--spacing-2)]">
+          <PaginationButton kind="previous" disabled>Previous</PaginationButton>
+          <PaginationButton kind="number" disabled>1</PaginationButton>
+          <PaginationButton kind="next" disabled>Next</PaginationButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'PaginationButton kinds (previous / next / number / more) and states: default, selected (current page), and disabled.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Paginator>} */
+export const DataDriven = {
+  render: (args) => ({
+    components: { Paginator },
+    setup() {
+      const page = ref(args.page ?? 1)
+      const pageSize = ref(args.pageSize ?? 10)
+      // Keep local v-model state in sync with the Controls panel (args are
+      // reactive, but the refs are seeded once in setup, so watch to re-sync).
+      watch(
+        () => args.page,
+        (value) => (page.value = value ?? 1)
+      )
+      watch(
+        () => args.pageSize,
+        (value) => (pageSize.value = value ?? 10)
+      )
+      return { args, page, pageSize }
+    },
+    template: `
+      <Paginator
+        v-bind="args"
+        v-model:page="page"
+        v-model:page-size="pageSize"
+      />
+    `
+  }),
+  args: {
+    page: 1,
+    total: 200,
+    pageSize: 10,
+    pageSizeOptions: [10, 25, 50, 100],
+    siblingCount: 1
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Data-driven mode: pass `total` and bind `v-model:page` / `v-model:page-size`. The Paginator renders its own info text, windowed page numbers, overflow ellipsis, and the rows-per-page selector, emitting `update:page` / `update:pageSize` / `page-change`.'
+      }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/webkit/data/Table.stories.js b/apps/storybook/src/stories/webkit/data/Table.stories.js
new file mode 100644
index 00000000..b2c46624
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/data/Table.stories.js
@@ -0,0 +1,804 @@
+import Chip from '@aziontech/webkit/chip'
+import Table from '@aziontech/webkit/data/table'
+import IconButton from '@aziontech/webkit/icon-button'
+import DropdownMenu from '@aziontech/webkit/overlay/dropdown-menu'
+import DropdownMenuContent from '@aziontech/webkit/overlay/dropdown-menu-content'
+import {
+  dropdownMenuItem,
+  dropdownMenuSeparator
+} from '@aziontech/webkit/overlay/dropdown-menu-factory'
+import DropdownMenuFromModel from '@aziontech/webkit/overlay/dropdown-menu-from-model'
+import DropdownMenuPortal from '@aziontech/webkit/overlay/dropdown-menu-portal'
+import DropdownMenuTrigger from '@aziontech/webkit/overlay/dropdown-menu-trigger'
+import Tag from '@aziontech/webkit/tag'
+import { ref } from 'vue'
+
+const components = {
+  Table,
+  Tag,
+  Chip,
+  IconButton,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuFromModel
+}
+
+// --- Static, non-reactive fixtures -----------------------------------------
+// Defined once at module scope (never wrapped in ref/reactive) so the rows
+// carry no per-row reactivity overhead and are shared across every render.
+
+const applications = Object.freeze([
+  {
+    id: '1773684562',
+    name: 'webkit-storybook',
+    status: 'Active',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Jun 18, 2026, 06:31:37 PM'
+  },
+  {
+    id: '1780526808',
+    name: 'teste app',
+    status: 'Active',
+    editor: 'guilherme.santana+v4@azion.com',
+    modified: 'Jun 3, 2026, 07:35:44 PM'
+  },
+  {
+    id: '1778769112',
+    name: 'teste-do-ng-new-template',
+    status: 'Active',
+    editor: 'paulo.ferreira+v4@azion.com',
+    modified: 'May 14, 2026, 11:46:14 AM'
+  },
+  {
+    id: '1772542164',
+    name: 'icons-gallery',
+    status: 'Active',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Apr 30, 2026, 02:24:06 PM'
+  },
+  {
+    id: '1775518977',
+    name: 'azion-console-kit-storybook',
+    status: 'Active',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Apr 13, 2026, 03:28:51 PM'
+  },
+  {
+    id: '1779034218',
+    name: 'edge-functions-demo',
+    status: 'Active',
+    editor: 'herbert.julio+v4@azion.com',
+    modified: 'Apr 2, 2026, 09:12:08 AM'
+  },
+  {
+    id: '1771902645',
+    name: 'api-gateway-prod',
+    status: 'Active',
+    editor: 'maria.lima+v4@azion.com',
+    modified: 'Mar 27, 2026, 05:48:19 PM'
+  },
+  {
+    id: '1776510338',
+    name: 'static-site-blog',
+    status: 'Inactive',
+    editor: 'lucas.alves+v4@azion.com',
+    modified: 'Mar 19, 2026, 11:03:55 AM'
+  },
+  {
+    id: '1770448901',
+    name: 'image-optimizer',
+    status: 'Active',
+    editor: 'guilherme.santana+v4@azion.com',
+    modified: 'Mar 8, 2026, 02:37:41 PM'
+  },
+  {
+    id: '1778221764',
+    name: 'waf-rules-staging',
+    status: 'Degraded',
+    editor: 'paulo.ferreira+v4@azion.com',
+    modified: 'Feb 28, 2026, 07:54:12 PM'
+  },
+  {
+    id: '1772990057',
+    name: 'cache-purge-tool',
+    status: 'Active',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Feb 21, 2026, 10:26:30 AM'
+  },
+  {
+    id: '1774663180',
+    name: 'dns-manager',
+    status: 'Active',
+    editor: 'herbert.julio+v4@azion.com',
+    modified: 'Feb 12, 2026, 04:09:47 PM'
+  },
+  {
+    id: '1771135492',
+    name: 'load-balancer-test',
+    status: 'Inactive',
+    editor: 'maria.lima+v4@azion.com',
+    modified: 'Feb 3, 2026, 08:41:05 AM'
+  },
+  {
+    id: '1779558613',
+    name: 'video-streaming',
+    status: 'Active',
+    editor: 'lucas.alves+v4@azion.com',
+    modified: 'Jan 27, 2026, 01:18:53 PM'
+  },
+  {
+    id: '1773320926',
+    name: 'auth-service',
+    status: 'Active',
+    editor: 'guilherme.santana+v4@azion.com',
+    modified: 'Jan 19, 2026, 06:02:34 PM'
+  },
+  {
+    id: '1776847209',
+    name: 'analytics-dashboard',
+    status: 'Degraded',
+    editor: 'paulo.ferreira+v4@azion.com',
+    modified: 'Jan 9, 2026, 09:47:21 AM'
+  },
+  {
+    id: '1770773542',
+    name: 'docs-portal',
+    status: 'Active',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Dec 30, 2025, 03:33:16 PM'
+  },
+  {
+    id: '1778004885',
+    name: 'marketplace-app',
+    status: 'Active',
+    editor: 'herbert.julio+v4@azion.com',
+    modified: 'Dec 18, 2025, 11:55:48 AM'
+  },
+  {
+    id: '1772457118',
+    name: 'live-ingest-demo',
+    status: 'Inactive',
+    editor: 'maria.lima+v4@azion.com',
+    modified: 'Dec 7, 2025, 05:24:09 PM'
+  },
+  {
+    id: '1775190431',
+    name: 'edge-sql-playground',
+    status: 'Active',
+    editor: 'lucas.alves+v4@azion.com',
+    modified: 'Nov 26, 2025, 02:11:37 PM'
+  },
+  {
+    id: '1779713764',
+    name: 'network-lists-admin',
+    status: 'Active',
+    editor: 'guilherme.santana+v4@azion.com',
+    modified: 'Nov 14, 2025, 08:39:50 AM'
+  },
+  {
+    id: '1773846097',
+    name: 'origin-shield-test',
+    status: 'Active',
+    editor: 'paulo.ferreira+v4@azion.com',
+    modified: 'Nov 3, 2025, 04:57:22 PM'
+  },
+  {
+    id: '1776239350',
+    name: 'realtime-metrics',
+    status: 'Degraded',
+    editor: 'robson.junior+v4@azion.com',
+    modified: 'Oct 22, 2025, 10:48:14 AM'
+  },
+  {
+    id: '1771568683',
+    name: 'certificate-manager',
+    status: 'Active',
+    editor: 'herbert.julio+v4@azion.com',
+    modified: 'Oct 11, 2025, 01:29:06 PM'
+  },
+  {
+    id: '1778392016',
+    name: 'data-stream-pipeline',
+    status: 'Active',
+    editor: 'maria.lima+v4@azion.com',
+    modified: 'Sep 30, 2025, 07:15:43 PM'
+  }
+])
+
+// No explicit `width` — columns distribute across the full container via their
+// `grow` flex weight, so the table fills the surface with no horizontal scroll.
+const columns = [
+  { accessorKey: 'name', header: 'Name', grow: 2 },
+  { accessorKey: 'id', header: 'ID', enableSorting: false },
+  { accessorKey: 'status', header: 'Status' },
+  { accessorKey: 'editor', header: 'Last Editor', enableSorting: false, grow: 2 },
+  { accessorKey: 'modified', header: 'Last Modified', grow: 2 },
+  { id: 'actions', header: '', kind: 'action', enableSorting: false }
+]
+
+// Fixed-layout variant: every column carries an explicit pixel `width`, so the
+// columns keep their declared size instead of distributing to fill the surface.
+const sizedColumns = [
+  { accessorKey: 'name', header: 'Name', width: 280 },
+  { accessorKey: 'id', header: 'ID', enableSorting: false, width: 160 },
+  { accessorKey: 'status', header: 'Status', width: 130 },
+  { accessorKey: 'editor', header: 'Last Editor', enableSorting: false, width: 300 },
+  { accessorKey: 'modified', header: 'Last Modified', width: 220 },
+  { id: 'actions', header: '', kind: 'action', enableSorting: false }
+]
+
+// Wide variant: the same rows extended with extra fields so the table has more
+// columns than fit the surface. Derived deterministically (no per-row reactivity).
+const protocols = ['HTTP & HTTPS', 'HTTP', 'HTTPS', 'gRPC']
+const createdPool = [
+  'Jan 14, 2026, 10:22:00 AM',
+  'Nov 28, 2025, 03:41:18 PM',
+  'Oct 5, 2025, 09:15:44 AM',
+  'Sep 12, 2025, 06:50:09 PM',
+  'Aug 1, 2025, 11:30:27 AM',
+  'Jul 19, 2025, 02:08:53 PM',
+  'Jun 6, 2025, 04:44:36 PM',
+  'May 23, 2025, 08:17:12 AM'
+]
+
+const applicationsWide = Object.freeze(
+  applications.map((app, index) => ({
+    ...app,
+    protocol: protocols[index % protocols.length],
+    domains: (index % 5) + 1,
+    origins: (index % 3) + 1,
+    created: createdPool[index % createdPool.length]
+  }))
+)
+
+// Larger dataset for the Full Example: the wide rows replicated to ~48 entries
+// so the paginator spans several pages. Ids stay unique (base id + index) and
+// later cycles get a numeric suffix on the name.
+const applicationsLarge = Object.freeze(
+  Array.from({ length: 48 }, (_, index) => {
+    const base = applicationsWide[index % applicationsWide.length]
+    const cycle = Math.floor(index / applicationsWide.length)
+    return {
+      ...base,
+      id: String(Number(base.id) + index),
+      name: cycle === 0 ? base.name : `${base.name}-${cycle}`
+    }
+  })
+)
+
+// Every column carries an explicit `width` so the row widths sum past the
+// surface (horizontal scroll). Name is pinned to the start edge and the actions
+// menu to the end edge — both stay put while the middle columns scroll under them.
+const wideColumns = [
+  { accessorKey: 'name', header: 'Name', grow: 2, frozen: 'start', width: 260 },
+  { accessorKey: 'id', header: 'ID', enableSorting: false, width: 170 },
+  { accessorKey: 'status', header: 'Status', width: 140 },
+  { accessorKey: 'protocol', header: 'Protocol', enableSorting: false, width: 170 },
+  { accessorKey: 'domains', header: 'Domains', align: 'end', width: 130 },
+  { accessorKey: 'origins', header: 'Origins', align: 'end', width: 130 },
+  { accessorKey: 'editor', header: 'Last Editor', enableSorting: false, width: 280 },
+  { accessorKey: 'created', header: 'Created', width: 220 },
+  { accessorKey: 'modified', header: 'Last Modified', width: 220 },
+  { id: 'actions', header: '', kind: 'action', frozen: 'end', enableSorting: false }
+]
+
+// Per-column resize is opt-in via `resizable: true`. The simple set with every
+// column resizable powers the Resizable Columns story; the wide set with every
+// column resizable powers Full Example (frozen Name + action ignore the flag).
+const resizableColumns = columns.map((col) => ({ ...col, resizable: true }))
+const fullColumns = wideColumns.map((col) => ({ ...col, resizable: true }))
+
+// One shared, immutable action list — built once, reused by every row's menu.
+const rowActionNodes = [
+  dropdownMenuItem('View details', { value: 'view', icon: 'pi pi-eye' }),
+  dropdownMenuItem('Edit', { value: 'edit', icon: 'pi pi-pencil' }),
+  dropdownMenuItem('Duplicate', { value: 'duplicate', icon: 'pi pi-copy' }),
+  dropdownMenuSeparator(),
+  dropdownMenuItem('Delete', { value: 'delete', icon: 'pi pi-trash' })
+]
+
+const statusSeverity = (status) =>
+  status === 'Active' ? 'success' : status === 'Degraded' ? 'warning' : 'danger'
+
+// --- Shared template fragments ---------------------------------------------
+// The per-cell slots are identical across every story (the Name link, the
+// Status Tag, and the trailing row-action menu), so they live in one constant
+// interpolated into each template instead of being copy-pasted per story.
+
+const CELL_SLOTS = `
+        <template #cell-name="{ row, value }">
+          <a
+            :href="'/applications/' + row.id"
+            class="cursor-pointer truncate text-[var(--text-default)] no-underline hover:underline active:underline"
+            @click="(event) => onLink(event, row)"
+          >{{ value }}</a>
+        </template>
+
+        <template #cell-status="{ value }">
+          <Tag :severity="statusSeverity(value)">{{ value }}</Tag>
+        </template>
+
+        <template #header-actions>
+          <span class="sr-only">Actions</span>
+        </template>
+        <template #cell-actions="{ row }">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent>
+                <DropdownMenuFromModel
+                  :nodes="rowActionNodes"
+                  @select="(action) => args.onRowAction({ id: row.id, action })"
+                />
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenu>
+        </template>
+`
+
+// The complete toolbar band — ONLY the Full Example uses it. A filter trigger, a
+// context-aware Table.Search (drives the TanStack global filter through inject),
+// and refresh / export / column-selector actions; the #filters slot renders a
+// removable Chip mirroring the active search, clearing it via the scoped table.
+const FULL_TOOLBAR = `
+        <template #toolbar>
+          <div class="flex w-full items-center justify-between gap-[var(--spacing-sm)]">
+            <span class="flex items-center gap-[var(--spacing-xs)]">
+              <IconButton icon="pi pi-filter" aria-label="Filter" kind="transparent" size="small" />
+              <span class="w-[260px]">
+                <Table.Search placeholder="Search keywords..." />
+              </span>
+            </span>
+            <span class="flex items-center gap-[var(--spacing-xs)]">
+              <IconButton icon="pi pi-refresh" aria-label="Refresh" kind="transparent" size="small" />
+              <IconButton icon="pi pi-download" aria-label="Export" kind="transparent" size="small" />
+              <IconButton icon="pi pi-objects-column" aria-label="Columns" kind="transparent" size="small" />
+            </span>
+          </div>
+        </template>
+        <template #filters="{ table }">
+          <Chip
+            v-if="table.getState().globalFilter"
+            :label="'Search: ' + table.getState().globalFilter"
+            removable
+            @remove="() => table.setGlobalFilter('')"
+          />
+        </template>
+`
+
+// Link cell handler: a plain click is a cell action carrying the SAME payload as
+// row-click (the full row record); a modified click (⌘/Ctrl/Shift) keeps the
+// anchor's native open-in-new-tab behaviour.
+const makeOnLink = (args) => (event, row) => {
+  event.stopPropagation()
+  if (event.metaKey || event.ctrlKey || event.shiftKey) return
+  event.preventDefault()
+  args.onCellClick(row)
+}
+
+// Render factory: every story is the same data-driven <Table> wired to the
+// controls; only the data set, the column set, the pre-seeded selection, extra
+// root attributes, and (Full only) the toolbar differ.
+const makeStory =
+  ({ rows, columns: cols, selection = {}, attrs = '', toolbar = '' }) =>
+  (args) => ({
+    components,
+    setup() {
+      const sorting = ref([])
+      const rowSelection = ref({ ...selection })
+      const onLink = makeOnLink(args)
+      return { args, rows, cols, rowActionNodes, sorting, rowSelection, statusSeverity, onLink }
+    },
+    template: `
+      <Table
+        :data="rows"
+        :columns="cols"
+        row-key="id"
+        :max-height="args.maxHeight"
+        :paginated="args.paginated"
+        :page-size="args.pageSize"
+        :enable-sorting="args.enableSorting"
+        :enable-row-selection="args.enableRowSelection"
+        :select-on-row-click="args.selectOnRowClick"
+        :header-variant="args.headerVariant"
+        v-model:sorting="sorting"
+        v-model:row-selection="rowSelection"
+        @row-click="args.onRowClick"
+        @update:sorting="args.onUpdateSorting"
+        @update:row-selection="args.onUpdateRowSelection"
+        @update:pagination="args.onUpdatePagination"
+        ${attrs}
+      >
+        ${toolbar}${CELL_SLOTS}
+      </Table>
+    `
+  })
+
+// --- Docs ------------------------------------------------------------------
+
+const docs = [
+  '## Table',
+  '',
+  'A data-driven table built on the headless TanStack engine and rendered entirely',
+  'through our own primitives (markup, design tokens, a11y). Pass `data` + `columns`',
+  'and the table renders rows, sorting, selection, pagination, and frozen columns for',
+  'you; customise any cell with a `cell-<columnId>` slot.',
+  '',
+  '### Basic usage',
+  '',
+  '```vue',
+  '<script setup>',
+  "import { ref } from 'vue'",
+  "import Table from '@aziontech/webkit/data/table'",
+  "import Tag from '@aziontech/webkit/tag'",
+  '',
+  "const data = ref([{ id: '1', name: 'acme-prod', status: 'Active' }])",
+  'const columns = [',
+  "  { accessorKey: 'name', header: 'Name', grow: 2 },",
+  "  { accessorKey: 'status', header: 'Status' },",
+  "  { id: 'actions', header: '', kind: 'action' }",
+  ']',
+  '</script>',
+  '',
+  '<template>',
+  '  <Table :data="data" :columns="columns" row-key="id" enable-sorting paginated>',
+  '    <template #cell-status="{ value }"><Tag>{{ value }}</Tag></template>',
+  '    <template #cell-actions="{ row }"><!-- row menu --></template>',
+  '  </Table>',
+  '</template>',
+  '```',
+  '',
+  '### Column options',
+  '',
+  'Each column entry accepts:',
+  '',
+  '- `grow` (`1 | 2 | 3`) — flex weight; a `grow` column expands to fill the surface (use `2` for the emphasized first column).',
+  '- `width` (px) — a fixed-size column (fixed layout); overrides `grow`.',
+  "- `frozen` (`'start' | 'end'`) — pins the column to an edge so it stays put while the rest scroll horizontally.",
+  '- `resizable` (`boolean`) — opts the column into a drag-to-resize handle on its header; resizing one column freezes the others and grows the table (frozen/action columns ignore it).',
+  "- `align` (`'start' | 'center' | 'end'`), `enableSorting`, and `kind: 'action'` for the trailing menu cell (auto-pinned to the right edge).",
+  '',
+  '### Selection, sorting & pagination',
+  '',
+  'Add `enable-row-selection` for a leading checkbox column (with select-all), `enable-sorting`',
+  'for sortable headers, and `paginated` to render a Paginator in the footer. State is exposed',
+  'through v-model (`sorting`, `row-selection`, `pagination`, `global-filter`).',
+  '',
+  '### Toolbar (optional)',
+  '',
+  'The `toolbar` / `filters` slots add an action band above the viewport, scoped with the',
+  'TanStack `table` instance — a context-aware `Table.Search` drives the global filter and a',
+  'removable `Chip` clears it (see **Full Example**). Omit the slots for a compact,',
+  'header-only table.'
+].join('\n')
+
+// Inline SVG mock of the assembled table, embedded in the Full Example docs as a
+// reference preview (dark theme, matching the design tokens visually).
+const FULL_EXAMPLE_PREVIEW_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="384" viewBox="0 0 1180 384" font-family="-apple-system,Segoe UI,Roboto,sans-serif">
+  <rect x="6" y="6" width="1168" height="372" rx="10" fill="#1b1b1e" stroke="#34343a"/>
+  <rect x="22" y="20" width="40" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
+  <path d="M32 28h20l-7 8v8l-6 3v-11z" fill="none" stroke="#9a9aa2" stroke-width="1.6" stroke-linejoin="round"/>
+  <rect x="72" y="20" width="300" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
+  <circle cx="90" cy="34" r="5" fill="none" stroke="#7a7a82" stroke-width="1.6"/>
+  <line x1="94" y1="38" x2="98" y2="42" stroke="#7a7a82" stroke-width="1.6"/>
+  <text x="108" y="39" fill="#6c6c74" font-size="13">Search keywords...</text>
+  <rect x="1050" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
+  <path d="M1059 36a8 8 0 1 0 2-6" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
+  <path d="M1061 24v6h6" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
+  <rect x="1090" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
+  <path d="M1107 26v12m-5-5l5 5l5-5M1101 44h12" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
+  <rect x="1130" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
+  <path d="M1140 27v12M1147 27v12M1136 27h16" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
+  <line x1="6" y1="64" x2="1174" y2="64" stroke="#2c2c32"/>
+  <rect x="22" y="76" width="150" height="26" rx="13" fill="#2a2a30"/>
+  <text x="34" y="93" fill="#d3d3d8" font-size="12.5">Name is: test</text>
+  <circle cx="160" cy="89" r="7" fill="#3a3a42"/>
+  <path d="M157 86l6 6M163 86l-6 6" stroke="#c9c9d0" stroke-width="1.3"/>
+  <line x1="6" y1="116" x2="1174" y2="116" stroke="#2c2c32"/>
+  <rect x="26" y="129" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
+  <text x="60" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Name</text>
+  <text x="320" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">ID</text>
+  <text x="470" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Status</text>
+  <text x="600" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Last Editor</text>
+  <text x="880" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Last Modified</text>
+  <line x1="6" y1="153" x2="1174" y2="153" stroke="#2c2c32"/>
+  <g>
+    <rect x="26" y="173" width="16" height="16" rx="4" fill="#1f6feb"/>
+    <path d="M30 181l3 3l5-6" fill="none" stroke="#fff" stroke-width="1.6"/>
+    <text x="60" y="186" fill="#e7e7ea" font-size="13">webkit-storybook</text>
+    <text x="320" y="186" fill="#9a9aa2" font-size="13">1773684562</text>
+    <rect x="470" y="173" width="62" height="22" rx="11" fill="#123524"/>
+    <text x="483" y="188" fill="#52d07f" font-size="12">Active</text>
+    <text x="600" y="186" fill="#9a9aa2" font-size="13">robson.junior@azion.com</text>
+    <text x="880" y="186" fill="#9a9aa2" font-size="13">Jun 18, 2026, 06:31:37 PM</text>
+    <circle cx="1147" cy="178" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="184" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="190" r="1.6" fill="#9a9aa2"/>
+    <line x1="6" y1="207" x2="1174" y2="207" stroke="#26262b"/>
+  </g>
+  <g>
+    <rect x="26" y="227" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
+    <text x="60" y="240" fill="#e7e7ea" font-size="13">teste app</text>
+    <text x="320" y="240" fill="#9a9aa2" font-size="13">1780526808</text>
+    <rect x="470" y="227" width="62" height="22" rx="11" fill="#123524"/>
+    <text x="483" y="242" fill="#52d07f" font-size="12">Active</text>
+    <text x="600" y="240" fill="#9a9aa2" font-size="13">guilherme.santana@azion.com</text>
+    <text x="880" y="240" fill="#9a9aa2" font-size="13">Jun 3, 2026, 07:35:44 PM</text>
+    <circle cx="1147" cy="232" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="238" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="244" r="1.6" fill="#9a9aa2"/>
+    <line x1="6" y1="261" x2="1174" y2="261" stroke="#26262b"/>
+  </g>
+  <g>
+    <rect x="26" y="281" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
+    <text x="60" y="294" fill="#e7e7ea" font-size="13">static-site-blog</text>
+    <text x="320" y="294" fill="#9a9aa2" font-size="13">1776510338</text>
+    <rect x="470" y="281" width="70" height="22" rx="11" fill="#3a1a1c"/>
+    <text x="483" y="296" fill="#f0656f" font-size="12">Inactive</text>
+    <text x="600" y="294" fill="#9a9aa2" font-size="13">lucas.alves@azion.com</text>
+    <text x="880" y="294" fill="#9a9aa2" font-size="13">Mar 19, 2026, 11:03:55 AM</text>
+    <circle cx="1147" cy="286" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="292" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="298" r="1.6" fill="#9a9aa2"/>
+  </g>
+  <line x1="6" y1="320" x2="1174" y2="320" stroke="#2c2c32"/>
+  <text x="470" y="356" fill="#8b8b92" font-size="12.5">Showing 1 to 10 of 48 entries</text>
+  <g fill="none" stroke="#6a6a72" stroke-width="1.5">
+    <path d="M724 346l-4 4l4 4M732 346l-4 4l4 4"/>
+    <path d="M756 346l-4 4l4 4"/>
+  </g>
+  <rect x="776" y="340" width="24" height="22" rx="6" fill="#1f6feb"/>
+  <text x="784" y="356" fill="#fff" font-size="12.5">1</text>
+  <text x="812" y="356" fill="#9a9aa2" font-size="12.5">2</text>
+  <text x="838" y="356" fill="#9a9aa2" font-size="12.5">3</text>
+  <text x="864" y="356" fill="#9a9aa2" font-size="12.5">4</text>
+  <g fill="none" stroke="#6a6a72" stroke-width="1.5">
+    <path d="M892 346l4 4l-4 4"/>
+    <path d="M916 346l4 4l-4 4M924 346l4 4l-4 4"/>
+  </g>
+  <rect x="1004" y="340" width="58" height="24" rx="6" fill="#232327" stroke="#3a3a40"/>
+  <text x="1014" y="356" fill="#c9c9d0" font-size="12.5">10</text>
+  <path d="M1048 350l4 4l4-4" fill="none" stroke="#9a9aa2" stroke-width="1.5"/>
+  <rect x="1130" y="340" width="34" height="24" rx="6" fill="#232327" stroke="#3a3a40"/>
+  <text x="1143" y="356" fill="#c9c9d0" font-size="12.5">1</text>
+</svg>
+`
+
+const fullExamplePreview =
+  'data:image/svg+xml;utf8,' + encodeURIComponent(FULL_EXAMPLE_PREVIEW_SVG.trim())
+
+/** @type {import('@storybook/vue3').Meta<typeof Table>} */
+const meta = {
+  title: 'Webkit/Data/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: { component: docs }
+    }
+  },
+  argTypes: {
+    maxHeight: {
+      control: 'text',
+      description:
+        'Max height (CSS length). Vertical scroll engages only when set smaller than the content; horizontal scroll is always automatic.',
+      table: { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'props' }
+    },
+    paginated: {
+      control: 'boolean',
+      description: 'Render a Paginator in the footer and slice the rows by page.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
+    },
+    pageSize: {
+      control: { type: 'number' },
+      description: 'Rows per page when paginated.',
+      table: { type: { summary: 'number' }, defaultValue: { summary: '10' }, category: 'props' }
+    },
+    enableSorting: {
+      control: 'boolean',
+      description: 'Enable sorting globally; per-column `enableSorting` overrides.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
+    },
+    enableRowSelection: {
+      control: 'boolean',
+      description: 'Add a leading selection-checkbox column.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
+    },
+    selectOnRowClick: {
+      control: 'boolean',
+      description: 'Clicking a row toggles its selection (requires enableRowSelection).',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
+    },
+    headerVariant: {
+      control: 'inline-radio',
+      options: ['default', 'compact'],
+      description: 'Header density: `compact` shrinks the column-header row height and padding.',
+      table: {
+        type: { summary: "'default' | 'compact'" },
+        defaultValue: { summary: "'default'" },
+        category: 'props'
+      }
+    },
+    onRowClick: { action: 'row-click', table: { category: 'events' } },
+    onRowAction: { action: 'row-action', table: { category: 'events' } },
+    onCellClick: { action: 'cell-click', table: { category: 'events (cell)' } },
+    onUpdateSorting: { action: 'update:sorting', table: { category: 'events' } },
+    onUpdateRowSelection: { action: 'update:rowSelection', table: { category: 'events' } },
+    onUpdatePagination: { action: 'update:pagination', table: { category: 'events' } }
+  },
+  args: {
+    maxHeight: '',
+    paginated: true,
+    pageSize: 10,
+    enableSorting: true,
+    enableRowSelection: false,
+    selectOnRowClick: false,
+    headerVariant: 'default'
+  }
+}
+
+export default meta
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const WithCheckboxes = {
+  name: 'With Checkboxes',
+  render: makeStory({ rows: applications, columns }),
+  args: {
+    enableRowSelection: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A leading selection column (`enable-row-selection`): each row gets a checkbox and the header gets a select-all box that reflects the all/none/indeterminate state. Selection is exposed via `v-model:row-selection`; changes log to the Actions panel.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const CompactHeader = {
+  name: 'Compact Header',
+  render: makeStory({ rows: applications, columns }),
+  args: {
+    paginated: false,
+    headerVariant: 'compact'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A denser header via `header-variant="compact"` (forwarded to `Table.Header`): the column-header row uses a reduced height and padding. No toolbar band, so the table opens straight onto that header row.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const NoBorder = {
+  name: 'No Border',
+  render: makeStory({ rows: applications, columns, attrs: 'class="!border-0"' }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The outer card border removed by passing a utility class (`class="!border-0"`) — it flows onto the root via attribute fallthrough. Useful when the table sits inside a surface that already provides its own framing. The internal row dividers remain.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const SelectedRow = {
+  name: 'Selected Row',
+  render: makeStory({
+    rows: applications,
+    columns,
+    selection: { [applications[1].id]: true }
+  }),
+  args: {
+    enableRowSelection: true,
+    selectOnRowClick: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A row in the selected state: the second row is pre-selected via `v-model:row-selection`, rendering the `var(--bg-selected)` surface and `aria-selected`. With `select-on-row-click`, clicking anywhere on an inert part of a row toggles its selection.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const FixedLayoutWithColumnSizes = {
+  name: 'Fixed Layout with Column Sizes',
+  render: makeStory({ rows: applications, columns: sizedColumns }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Every column declares an explicit pixel `width`, so the layout is fixed: columns keep their declared size instead of distributing to fill the surface, and the viewport scrolls horizontally if the widths sum past it.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const ResizableColumns = {
+  name: 'Resizable Columns',
+  render: makeStory({ rows: applications, columns: resizableColumns }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A simple table whose columns opt into drag-to-resize via per-column `resizable: true`. Drag a header divider: only that column resizes (the others freeze at their current width) and the table grows with horizontal scroll. A column can shrink only down to its own content width. Frozen and action columns ignore `resizable`.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const StickyColumn = {
+  name: 'Sticky Column',
+  render: makeStory({ rows: applicationsWide, columns: wideColumns }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Extra columns (Protocol, Domains, Origins, Created) push the rows past the surface. The **Name** column is pinned to the start edge (`frozen: "start"`) and the **actions** menu to the end edge (`frozen: "end"`): both stay put while the middle columns scroll horizontally underneath, with a CSS-only edge fade dissolving the scrolling content under each pinned column.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const CompactHeaderWithStickyColumn = {
+  name: 'Compact Header with Sticky Column',
+  render: makeStory({ rows: applicationsWide, columns: wideColumns }),
+  args: {
+    paginated: false,
+    headerVariant: 'compact'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A compact header (`header-variant="compact"`) combined with the freeze system: the frozen **Name** / **actions** columns stay pinned while the middle columns scroll horizontally, and the denser header is sticky within the scroll viewport. No toolbar or paginator.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const FullExample = {
+  name: 'Full Example',
+  render: makeStory({
+    rows: applicationsLarge,
+    columns: fullColumns,
+    toolbar: FULL_TOOLBAR
+  }),
+  args: {
+    enableRowSelection: true,
+    selectOnRowClick: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The complete data table over a larger dataset (48 rows across several pages): a composed toolbar (filter / context-aware search / refresh / export / column-selector) wired through the scoped `#toolbar="{ table }"` / `#filters="{ table }"` slots — the search drives `table.setGlobalFilter` and the removable chip clears it — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, and a paginator.\n\nReference preview:\n\n![Full data table example](' +
+          fullExamplePreview +
+          ')'
+      }
+    }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 6addc4a2..5b97fea1 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -30,6 +30,7 @@
     "figma:unpublish": "figma connect unpublish"
   },
   "dependencies": {
+    "@tanstack/vue-table": "^8.21.3",
     "@vueuse/core": "^10.11.1",
     "clsx": "^2.1.1",
     "primevue": "3.35.0",
@@ -144,25 +145,21 @@
     "./content/card-pricing": "./src/components/content/card-pricing/card-pricing.vue",
     "./content/item": "./src/components/content/item/index.js",
     "./content/currency": "./src/components/content/currency/currency.vue",
-    "./data/data-table": "./src/components/data/data-table/data-table.vue",
-    "./data/data-table-actions": "./src/components/data/data-table/data-table-actions.vue",
-    "./data/data-table-batch-actions": "./src/components/data/data-table/data-table-batch-actions.vue",
-    "./data/data-table-breadcrumb": "./src/components/data/data-table/data-table-breadcrumb.vue",
-    "./data/data-table-column": "./src/components/data/data-table/data-table-column.vue",
-    "./data/data-table-column-selector": "./src/components/data/data-table/data-table-column-selector.vue",
-    "./data/data-table-export": "./src/components/data/data-table/data-table-export.vue",
-    "./data/data-table-filter": "./src/components/data/data-table/data-table-filter.vue",
-    "./data/data-table-filter-chips": "./src/components/data/data-table/data-table-filter-chips.vue",
-    "./data/data-table-inline-create": "./src/components/data/data-table/data-table-inline-create.vue",
-    "./data/data-table-last-modified-popup": "./src/components/data/data-table/data-table-last-modified-popup.vue",
-    "./data/data-table-position-input": "./src/components/data/data-table/data-table-position-input.vue",
-    "./data/data-table-refresh-button": "./src/components/data/data-table/data-table-refresh-button.vue",
-    "./data/data-table-review-changes": "./src/components/data/data-table/data-table-review-changes.vue",
-    "./data/data-table-row-actions": "./src/components/data/data-table/data-table-row-actions.vue",
-    "./data/data-table-search": "./src/components/data/data-table/data-table-search.vue",
-    "./data/data-table-toolbar": "./src/components/data/data-table/data-table-toolbar.vue",
-    "./data/data-table-view-all-footer": "./src/components/data/data-table/data-table-view-all-footer.vue",
-    "./data/data-table-view-toggle": "./src/components/data/data-table/data-table-view-toggle.vue",
+    "./data/table": "./src/components/data/table/index.ts",
+    "./data/table-header": "./src/components/data/table/table-header/table-header.vue",
+    "./data/table-body": "./src/components/data/table/table-body/table-body.vue",
+    "./data/table-footer": "./src/components/data/table/table-footer/table-footer.vue",
+    "./data/table-caption": "./src/components/data/table/table-caption/table-caption.vue",
+    "./data/table-row": "./src/components/data/table/table-row/table-row.vue",
+    "./data/table-head-cell": "./src/components/data/table/table-head-cell/table-head-cell.vue",
+    "./data/table-cell": "./src/components/data/table/table-cell/table-cell.vue",
+    "./data/table-sort-button": "./src/components/data/table/table-sort-button/table-sort-button.vue",
+    "./data/table-toolbar": "./src/components/data/table/table-toolbar/table-toolbar.vue",
+    "./data/table-search": "./src/components/data/table/table-search/table-search.vue",
+    "./data/paginator": "./src/components/data/paginator/index.ts",
+    "./data/pagination-button": "./src/components/data/paginator/pagination-button/pagination-button.vue",
+    "./data/paginator-info": "./src/components/data/paginator/paginator-info/paginator-info.vue",
+    "./data/paginator-page-size": "./src/components/data/paginator/paginator-page-size/paginator-page-size.vue",
     "./message": "./src/components/feedback/message/message.vue",
     "./feedback/status-indicator": "./src/components/feedback/status-indicator/status-indicator.vue",
     "./inputs/input-text": "./src/components/inputs/input-text/input-text.vue",
diff --git a/packages/webkit/src/components/data/data-table/composables/use-data-table-context.js b/packages/webkit/src/components/data/data-table/composables/use-data-table-context.js
deleted file mode 100644
index ba5688d0..00000000
--- a/packages/webkit/src/components/data/data-table/composables/use-data-table-context.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject } from 'vue'
-
-import { DataTableInjectionKey } from '../injection-key'
-
-export function useDataTableContext() {
-  const ctx = inject(DataTableInjectionKey)
-  if (!ctx) {
-    throw new Error('DataTable sub-components must be used within DataTable.')
-  }
-  return ctx
-}
-export function provideDataTableContext(ctx) {
-  return ctx
-}
diff --git a/packages/webkit/src/components/data/data-table/composables/use-data-table-filter.js b/packages/webkit/src/components/data/data-table/composables/use-data-table-filter.js
deleted file mode 100644
index 7912ebca..00000000
--- a/packages/webkit/src/components/data/data-table/composables/use-data-table-filter.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { computed } from 'vue'
-
-export function useDataTableFilter(data, options) {
-  const globalQuery = computed(() => {
-    const fromFilters = options.filters.value?.['global']
-    const value = options.searchValue.value || fromFilters?.value || ''
-    return String(value).trim().toLowerCase()
-  })
-  const filteredData = computed(() => {
-    let rows = [...data.value]
-    if (globalQuery.value && options.globalFilterFields.value.length > 0) {
-      rows = rows.filter((row) =>
-        options.globalFilterFields.value.some((field) => {
-          const cell = row[field]
-          return cell != null && String(cell).toLowerCase().includes(globalQuery.value)
-        })
-      )
-    }
-    for (const filter of options.appliedFilters.value) {
-      const field = filter.field
-      const raw = filter.value
-      if (raw === null || raw === undefined || raw === '') continue
-      rows = rows.filter((row) => {
-        const cell = row[field]
-        if (Array.isArray(raw)) return raw.includes(cell)
-        return String(cell).toLowerCase() === String(raw).toLowerCase()
-      })
-    }
-    return rows
-  })
-  const hasActiveSearch = computed(() => globalQuery.value.length > 0)
-  return { filteredData, hasActiveSearch, globalQuery }
-}
diff --git a/packages/webkit/src/components/data/data-table/composables/use-data-table-pagination.js b/packages/webkit/src/components/data/data-table/composables/use-data-table-pagination.js
deleted file mode 100644
index 059111bf..00000000
--- a/packages/webkit/src/components/data/data-table/composables/use-data-table-pagination.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { computed } from 'vue'
-
-export function useDataTablePagination(data, options) {
-  const pageCount = computed(() => {
-    const total = options.lazy.value ? options.totalRecords.value : data.value.length
-    return Math.max(1, Math.ceil(total / options.rows.value))
-  })
-  const currentPage = computed(() => Math.floor(options.first.value / options.rows.value))
-  const paginatedData = computed(() => {
-    if (!options.paginator.value || options.lazy.value) return data.value
-    const start = options.first.value
-    return data.value.slice(start, start + options.rows.value)
-  })
-  function goToPage(page) {
-    const first = page * options.rows.value
-    options.first.value = first
-    options.onPage({
-      first,
-      rows: options.rows.value,
-      page,
-      pageCount: pageCount.value
-    })
-  }
-  function previousPage() {
-    if (currentPage.value > 0) goToPage(currentPage.value - 1)
-  }
-  function nextPage() {
-    if (currentPage.value < pageCount.value - 1) goToPage(currentPage.value + 1)
-  }
-  const canPrevious = computed(() => currentPage.value > 0)
-  const canNext = computed(() => currentPage.value < pageCount.value - 1)
-  const pageReport = computed(() => {
-    const total = options.lazy.value ? options.totalRecords.value : data.value.length
-    if (total === 0) return 'Showing 0 entries'
-    const start = options.first.value + 1
-    const end = Math.min(options.first.value + options.rows.value, total)
-    return `Showing ${start} to ${end} of ${total} entries`
-  })
-  return {
-    paginatedData,
-    pageCount,
-    currentPage,
-    goToPage,
-    previousPage,
-    nextPage,
-    canPrevious,
-    canNext,
-    pageReport
-  }
-}
diff --git a/packages/webkit/src/components/data/data-table/composables/use-data-table-selection.js b/packages/webkit/src/components/data/data-table/composables/use-data-table-selection.js
deleted file mode 100644
index 92441617..00000000
--- a/packages/webkit/src/components/data/data-table/composables/use-data-table-selection.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { computed, ref } from 'vue'
-
-export function useDataTableSelection(data, dataKey, selectionProp, onUpdateSelection, multiple) {
-  const internalSelection = ref([])
-  const selectedRows = computed({
-    get: () => {
-      if (selectionProp.value == null) return internalSelection.value
-      if (Array.isArray(selectionProp.value)) return selectionProp.value
-      return [selectionProp.value]
-    },
-    set: (rows) => {
-      internalSelection.value = rows
-      if (multiple.value) {
-        onUpdateSelection(rows)
-      } else {
-        onUpdateSelection(rows[0] ?? null)
-      }
-    }
-  })
-  function isRowSelected(row) {
-    const key = row[dataKey]
-    return selectedRows.value.some((item) => item[dataKey] === key)
-  }
-  function toggleRow(row) {
-    if (isRowSelected(row)) {
-      selectedRows.value = selectedRows.value.filter((item) => item[dataKey] !== row[dataKey])
-    } else if (multiple.value) {
-      selectedRows.value = [...selectedRows.value, row]
-    } else {
-      selectedRows.value = [row]
-    }
-  }
-  const isAllSelected = computed(() => {
-    if (data.value.length === 0) return false
-    return data.value.every((row) => isRowSelected(row))
-  })
-  function toggleAll() {
-    if (isAllSelected.value) {
-      selectedRows.value = []
-    } else {
-      selectedRows.value = [...data.value]
-    }
-  }
-  return {
-    selectedRows,
-    isRowSelected,
-    toggleRow,
-    isAllSelected,
-    toggleAll
-  }
-}
diff --git a/packages/webkit/src/components/data/data-table/composables/use-data-table-sort.js b/packages/webkit/src/components/data/data-table/composables/use-data-table-sort.js
deleted file mode 100644
index 53a193bb..00000000
--- a/packages/webkit/src/components/data/data-table/composables/use-data-table-sort.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { computed } from 'vue'
-
-export function useDataTableSort(data, sortField, sortOrder, columns) {
-  const sortedData = computed(() => {
-    const rows = [...data.value]
-    if (!sortField.value) return rows
-    const column = columns.value.find(
-      (col) => col.field === sortField.value || col.sortField === sortField.value
-    )
-    const key = column?.sortField ?? sortField.value
-    rows.sort((a, b) => {
-      const av = a[key]
-      const bv = b[key]
-      if (av === bv) return 0
-      if (av == null) return 1
-      if (bv == null) return -1
-      if (typeof av === 'number' && typeof bv === 'number') {
-        return sortOrder.value === -1 ? bv - av : av - bv
-      }
-      const as = String(av).toLowerCase()
-      const bs = String(bv).toLowerCase()
-      if (as < bs) return sortOrder.value === -1 ? 1 : -1
-      if (as > bs) return sortOrder.value === -1 ? -1 : 1
-      return 0
-    })
-    return rows
-  })
-  function toggleSort(field) {
-    if (sortField.value === field) {
-      sortOrder.value = sortOrder.value === 1 ? -1 : 1
-    } else {
-      sortField.value = field
-      sortOrder.value = 1
-    }
-  }
-  return { sortedData, toggleSort }
-}
diff --git a/packages/webkit/src/components/data/data-table/data-table-actions.vue b/packages/webkit/src/components/data/data-table/data-table-actions.vue
deleted file mode 100644
index f60dade1..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-actions.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableActions',
-    inheritAttrs: false
-  })
-
-  defineSlots<{
-    default(): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__actions`
-  )
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="flex items-center gap-[var(--spacing-xs)]"
-    :data-testid="testId"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-batch-actions.vue b/packages/webkit/src/components/data/data-table/data-table-batch-actions.vue
deleted file mode 100644
index 38891eca..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-batch-actions.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableBatchActions',
-    inheritAttrs: false
-  })
-
-  export interface BatchAction {
-    label: string
-    icon?: string
-    command: () => void
-    severity?: string
-  }
-
-  withDefaults(
-    defineProps<{
-      /** Number of selected rows. */
-      selectedCount?: number
-      /** Bulk action buttons. */
-      actions?: BatchAction[]
-    }>(),
-    {
-      selectedCount: 0,
-      actions: () => []
-    }
-  )
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__batch-actions`
-  )
-</script>
-
-<template>
-  <div
-    v-if="selectedCount > 0"
-    v-bind="attrs"
-    class="flex items-center gap-[var(--spacing-sm)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-canvas)] px-[var(--spacing-md)] py-[var(--spacing-xs)]"
-    :data-testid="testId"
-  >
-    <span class="whitespace-nowrap text-body-sm text-[var(--text-muted)]">
-      {{ selectedCount }} {{ selectedCount === 1 ? 'item' : 'items' }} selected
-    </span>
-    <div class="flex gap-[var(--spacing-xs)]">
-      <Button
-        v-for="action in actions"
-        :key="action.label"
-        :label="action.label"
-        :icon="action.icon"
-        kind="outlined"
-        size="small"
-        :data-testid="`${testId}__action-${action.label}`"
-        @click="action.command"
-      />
-    </div>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-breadcrumb.vue b/packages/webkit/src/components/data/data-table/data-table-breadcrumb.vue
deleted file mode 100644
index 0a53f482..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-breadcrumb.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableBreadcrumb',
-    inheritAttrs: false
-  })
-
-  export interface BreadcrumbSegment {
-    label: string
-    path: string
-  }
-
-  withDefaults(
-    defineProps<{
-      /** Breadcrumb path segments. */
-      segments?: BreadcrumbSegment[]
-    }>(),
-    {
-      segments: () => []
-    }
-  )
-
-  const emit = defineEmits<{
-    navigate: [path: string]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__breadcrumb`
-  )
-</script>
-
-<template>
-  <nav
-    v-bind="attrs"
-    class="flex flex-wrap items-center gap-[var(--spacing-xs)] text-body-sm text-[var(--text-muted)]"
-    :data-testid="testId"
-    aria-label="Breadcrumb"
-  >
-    <template
-      v-for="(segment, index) in segments"
-      :key="segment.path"
-    >
-      <button
-        type="button"
-        class="transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
-        :class="
-          index === segments.length - 1 ? 'text-[var(--text-default)]' : 'text-[var(--text-muted)]'
-        "
-        :data-testid="`${testId}__segment-${index}`"
-        @click="emit('navigate', segment.path)"
-      >
-        {{ segment.label }}
-      </button>
-      <span
-        v-if="index < segments.length - 1"
-        aria-hidden="true"
-        >/</span
-      >
-    </template>
-  </nav>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-column-selector.vue b/packages/webkit/src/components/data/data-table/data-table-column-selector.vue
deleted file mode 100644
index a867822c..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-column-selector.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-  import { computed, ref, useAttrs } from 'vue'
-
-  import IconButton from '../../actions/icon-button/icon-button.vue'
-  import Checkbox from '../../inputs/checkbox/checkbox.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-  import type { ColumnDefinition } from './injection-key'
-
-  defineOptions({
-    name: 'DataTableColumnSelector',
-    inheritAttrs: false
-  })
-
-  const props = withDefaults(
-    defineProps<{
-      /** All available columns. */
-      columns?: ColumnDefinition[]
-      /** Currently visible column fields. */
-      selectedColumns?: string[]
-    }>(),
-    {
-      columns: () => [],
-      selectedColumns: () => []
-    }
-  )
-
-  const emit = defineEmits<{
-    'update:selectedColumns': [value: string[]]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__column-selector`
-  )
-
-  const open = ref(false)
-
-  const internalSelected = computed({
-    get: () => props.selectedColumns,
-    set: (value: string[]) => emit('update:selectedColumns', value)
-  })
-
-  function toggle() {
-    open.value = !open.value
-  }
-
-  function isVisible(field: string) {
-    return internalSelected.value.includes(field)
-  }
-
-  function toggleColumn(field: string) {
-    if (isVisible(field)) {
-      internalSelected.value = internalSelected.value.filter((item) => item !== field)
-      ctx.toggleColumnVisibility(field, false)
-    } else {
-      internalSelected.value = [...internalSelected.value, field]
-      ctx.toggleColumnVisibility(field, true)
-    }
-  }
-
-  defineExpose({ toggle })
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="relative"
-    :data-testid="testId"
-  >
-    <IconButton
-      icon="pi pi-table"
-      ariaLabel="Toggle columns"
-      kind="outlined"
-      size="small"
-      :data-testid="`${testId}__trigger`"
-      @click="toggle"
-    />
-    <div
-      v-if="open"
-      class="absolute right-0 top-full z-10 mt-[var(--spacing-xs)] min-w-[12rem] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)]"
-      :data-testid="`${testId}__panel`"
-    >
-      <p class="mb-[var(--spacing-xs)] text-body-sm text-[var(--text-default)]">Columns</p>
-      <label
-        v-for="column in columns"
-        :key="column.field"
-        class="flex cursor-pointer items-center gap-[var(--spacing-xs)] py-[var(--spacing-xs)] text-body-sm text-[var(--text-default)]"
-        :data-testid="`${testId}__option-${column.field}`"
-      >
-        <Checkbox
-          :binary="true"
-          :modelValue="isVisible(column.field)"
-          @update:modelValue="() => toggleColumn(column.field)"
-        />
-        <span>{{ column.header }}</span>
-      </label>
-    </div>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-column.vue b/packages/webkit/src/components/data/data-table/data-table-column.vue
deleted file mode 100644
index 64458776..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-column.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-  import { computed, onMounted, onUnmounted, useAttrs, useSlots } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableColumn',
-    inheritAttrs: false
-  })
-
-  const props = withDefaults(
-    defineProps<{
-      /** Row field key for this column. */
-      field?: string
-      /** Header label text. */
-      header?: string
-      /** Enables sort on this column. */
-      sortable?: boolean
-      /** Freezes column to left or right edge. */
-      frozen?: boolean
-      /** Frozen alignment side. */
-      alignFrozen?: 'left' | 'right'
-      /** Optional inline width/style. */
-      style?: string
-      /** Sort key when different from field. */
-      sortField?: string
-    }>(),
-    {
-      field: '',
-      header: '',
-      sortable: false,
-      frozen: false,
-      alignFrozen: 'left',
-      style: '',
-      sortField: ''
-    }
-  )
-
-  defineSlots<{
-    header(): unknown
-    body(props: { data: Record<string, unknown>; index: number }): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const slots = useSlots()
-  const ctx = useDataTableContext()
-
-  const columnField = computed(() => props.field || `col-${props.header}` || 'column')
-
-  const registration = computed(() => ({
-    field: columnField.value,
-    header: props.header,
-    sortField: props.sortField || props.field || columnField.value,
-    sortable: props.sortable,
-    frozen: props.frozen,
-    alignFrozen: props.alignFrozen,
-    style: props.style,
-    hidden: false,
-    bodySlot: slots['body'],
-    headerSlot: slots['header']
-  }))
-
-  onMounted(() => {
-    ctx.registerColumn(registration.value)
-  })
-
-  onUnmounted(() => {
-    ctx.unregisterColumn(columnField.value)
-  })
-</script>
-
-<template>
-  <span
-    v-bind="attrs"
-    hidden
-    aria-hidden="true"
-  />
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-export.vue b/packages/webkit/src/components/data/data-table/data-table-export.vue
deleted file mode 100644
index 94188244..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-export.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableExport',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Export button label. */
-      label?: string
-      /** Disables the export button. */
-      disabled?: boolean
-      /** Shows loading state on the button. */
-      loading?: boolean
-    }>(),
-    {
-      label: 'Export',
-      disabled: false,
-      loading: false
-    }
-  )
-
-  const emit = defineEmits<{
-    export: []
-    click: [event: MouseEvent]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__export`
-  )
-
-  function handleClick(event: MouseEvent) {
-    emit('click', event)
-    emit('export')
-    ctx.exportCSV()
-  }
-</script>
-
-<template>
-  <Button
-    v-bind="attrs"
-    :label="label"
-    kind="outlined"
-    size="small"
-    :disabled="disabled"
-    :loading="loading"
-    :data-testid="testId"
-    @click="handleClick"
-  />
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-filter-chips.vue b/packages/webkit/src/components/data/data-table/data-table-filter-chips.vue
deleted file mode 100644
index 7879aa22..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-filter-chips.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-  import type { FilterDefinition } from './injection-key'
-  import { formatFilterValue } from './utils/format-filter-value'
-
-  defineOptions({
-    name: 'DataTableFilterChips',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Applied filters to display as chips. */
-      appliedFilters?: FilterDefinition[]
-    }>(),
-    {
-      appliedFilters: () => []
-    }
-  )
-
-  const emit = defineEmits<{
-    remove: [field: string]
-    edit: [payload: { filter: FilterDefinition; event: unknown }]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__filter-chips`
-  )
-
-  function removeFilter(field: string) {
-    emit('remove', field)
-  }
-
-  function editFilter(filter: FilterDefinition, event: unknown) {
-    emit('edit', { filter, event })
-  }
-</script>
-
-<template>
-  <div
-    v-if="appliedFilters.length > 0"
-    v-bind="attrs"
-    class="flex flex-wrap gap-[var(--spacing-xs)]"
-    :data-testid="testId"
-  >
-    <button
-      v-for="filter in appliedFilters"
-      :key="filter.field"
-      type="button"
-      class="inline-flex cursor-pointer items-center gap-[var(--spacing-xs)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-body-sm text-[var(--text-default)] transition-opacity duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
-      :data-testid="`${testId}__chip-${filter.field}`"
-      @click="(event) => editFilter(filter, event)"
-      @keydown.enter="(event) => editFilter(filter, event)"
-      @keydown.space.prevent="(event) => editFilter(filter, event)"
-    >
-      <span class="text-[var(--text-muted)]"
-        >{{ filter.label }} {{ filter.matchMode ?? 'is' }}:</span
-      >
-      <span>{{ formatFilterValue(filter.field, filter.value) }}</span>
-      <span
-        class="text-[var(--text-muted)]"
-        aria-hidden="true"
-        @click.stop="removeFilter(filter.field)"
-        >×</span
-      >
-    </button>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-filter.vue b/packages/webkit/src/components/data/data-table/data-table-filter.vue
deleted file mode 100644
index a124a9d4..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-filter.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-  import { computed, ref, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import Dropdown from '../../inputs/dropdown/dropdown.vue'
-  import InputText from '../../inputs/input-text/input-text.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-  import type { ColumnDefinition } from './injection-key'
-
-  defineOptions({
-    name: 'DataTableFilter',
-    inheritAttrs: false
-  })
-
-  const props = withDefaults(
-    defineProps<{
-      /** Column definitions available for filtering. */
-      filters?: ColumnDefinition[]
-    }>(),
-    {
-      filters: () => []
-    }
-  )
-
-  const emit = defineEmits<{
-    apply: [filter: { field: string; label: string; value: unknown; matchMode?: string }]
-  }>()
-
-  defineSlots<{
-    'filter-field'(scope: {
-      field: string
-      value: unknown
-      onUpdate: (value: unknown) => void
-    }): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__filter`
-  )
-
-  const open = ref(false)
-  const selectedField = ref<string | null>(null)
-  const filterValue = ref<unknown>('')
-
-  const filterOptions = computed(() =>
-    props.filters
-      .filter((column) => column.header)
-      .map((column) => ({
-        label: column.header,
-        value: column.sortField || column.field
-      }))
-  )
-
-  const selectedLabel = computed(() => {
-    const match = filterOptions.value.find((option) => option.value === selectedField.value)
-    return match?.label ?? ''
-  })
-
-  function toggle(_event?: unknown) {
-    open.value = !open.value
-  }
-
-  function handleFieldChange(value: string) {
-    selectedField.value = value
-    filterValue.value = ''
-  }
-
-  function openForFilter(filter: { field?: string; value?: unknown } = {}, _event?: unknown) {
-    selectedField.value = filter.field ?? null
-    filterValue.value = filter.value ?? ''
-    open.value = true
-  }
-
-  function handleCancel() {
-    open.value = false
-    selectedField.value = null
-    filterValue.value = ''
-  }
-
-  function handleApply() {
-    if (!selectedField.value) return
-    const hasValue =
-      filterValue.value !== null && filterValue.value !== undefined && filterValue.value !== ''
-    if (!hasValue) return
-    emit('apply', {
-      field: selectedField.value,
-      label: selectedLabel.value,
-      value: filterValue.value,
-      matchMode: 'is'
-    })
-    handleCancel()
-  }
-
-  function updateFilterValue(value: unknown) {
-    filterValue.value = value
-  }
-
-  defineExpose({
-    toggle,
-    openForFilter
-  })
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="relative"
-    :data-testid="testId"
-  >
-    <div
-      v-if="open"
-      tabindex="-1"
-      class="absolute left-0 top-full z-10 mt-[var(--spacing-xs)] w-[20rem] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)] focus:outline-none"
-      :data-testid="`${testId}__panel`"
-    >
-      <div class="flex flex-col gap-[var(--spacing-sm)]">
-        <Dropdown
-          :modelValue="selectedField"
-          :options="filterOptions"
-          optionLabel="label"
-          optionValue="value"
-          placeholder="Select field"
-          :data-testid="`${testId}__field`"
-          @update:modelValue="handleFieldChange"
-        />
-        <slot
-          v-if="selectedField && $slots['filter-field']"
-          name="filter-field"
-          :field="selectedField"
-          :value="filterValue"
-          :onUpdate="updateFilterValue"
-        />
-        <InputText
-          v-else-if="selectedField"
-          :modelValue="String(filterValue ?? '')"
-          placeholder="Filter value"
-          :data-testid="`${testId}__value`"
-          @update:modelValue="(value: string) => updateFilterValue(value)"
-        />
-        <div class="flex justify-end gap-[var(--spacing-xs)]">
-          <Button
-            label="Cancel"
-            kind="text"
-            size="small"
-            :data-testid="`${testId}__cancel`"
-            @click="handleCancel"
-          />
-          <Button
-            label="Apply"
-            kind="primary"
-            size="small"
-            :data-testid="`${testId}__apply`"
-            @click="handleApply"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-inline-create.vue b/packages/webkit/src/components/data/data-table/data-table-inline-create.vue
deleted file mode 100644
index 6187bc87..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-inline-create.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-  import { computed, ref, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import InputText from '../../inputs/input-text/input-text.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableInlineCreate',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Placeholder for the name field. */
-      placeholder?: string
-      /** Disables the inline create form. */
-      disabled?: boolean
-    }>(),
-    {
-      placeholder: 'Name',
-      disabled: false
-    }
-  )
-
-  const emit = defineEmits<{
-    save: [name: string]
-    cancel: []
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__inline-create`
-  )
-
-  const name = ref('')
-
-  function handleSave() {
-    if (!name.value.trim()) return
-    emit('save', name.value.trim())
-    name.value = ''
-  }
-
-  function handleCancel() {
-    name.value = ''
-    emit('cancel')
-  }
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="flex items-center gap-[var(--spacing-xs)]"
-    :data-testid="testId"
-  >
-    <InputText
-      :modelValue="name"
-      :placeholder="placeholder"
-      @update:modelValue="
-        (value: string) => {
-          name = value
-        }
-      "
-      :disabled="disabled"
-      :data-testid="`${testId}__input`"
-      @keyup.enter="handleSave"
-    />
-    <Button
-      label="Save"
-      kind="primary"
-      size="small"
-      :disabled="disabled"
-      :data-testid="`${testId}__save`"
-      @click="handleSave"
-    />
-    <Button
-      label="Cancel"
-      kind="text"
-      size="small"
-      :disabled="disabled"
-      :data-testid="`${testId}__cancel`"
-      @click="handleCancel"
-    />
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-last-modified-popup.vue b/packages/webkit/src/components/data/data-table/data-table-last-modified-popup.vue
deleted file mode 100644
index 5ad70c66..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-last-modified-popup.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableLastModifiedPopup',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Controls popup visibility. */
-      visible?: boolean
-      /** Last editor display name. */
-      lastEditor?: string
-      /** Last modified timestamp string. */
-      lastModified?: string
-      /** Popup horizontal position in px. */
-      position?: number
-    }>(),
-    {
-      visible: false,
-      lastEditor: '',
-      lastModified: '',
-      position: 0
-    }
-  )
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__last-modified-popup`
-  )
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    v-bind="attrs"
-    class="absolute z-20 rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-surface)] p-[var(--spacing-sm)] text-body-xs text-[var(--text-default)]"
-    :style="{ left: `${position}px` }"
-    role="tooltip"
-    :data-testid="testId"
-  >
-    <p
-      v-if="lastEditor"
-      :data-testid="`${testId}__editor`"
-    >
-      {{ lastEditor }}
-    </p>
-    <p
-      v-if="lastModified"
-      class="text-[var(--text-muted)]"
-      :data-testid="`${testId}__modified`"
-    >
-      {{ lastModified }}
-    </p>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-position-input.vue b/packages/webkit/src/components/data/data-table/data-table-position-input.vue
deleted file mode 100644
index c5a839c6..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-position-input.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import InputText from '../../inputs/input-text/input-text.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTablePositionInput',
-    inheritAttrs: false
-  })
-
-  const props = withDefaults(
-    defineProps<{
-      /** Position value. */
-      modelValue?: number
-      /** Minimum allowed position. */
-      min?: number
-      /** Maximum allowed position. */
-      max?: number
-      /** Disables the input. */
-      disabled?: boolean
-    }>(),
-    {
-      modelValue: 1,
-      min: 1,
-      max: 9999,
-      disabled: false
-    }
-  )
-
-  const emit = defineEmits<{
-    'update:modelValue': [value: number]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__position-input`
-  )
-
-  function handleUpdate(value: string) {
-    const parsed = Number.parseInt(value, 10)
-    if (Number.isNaN(parsed)) return
-    const clamped = Math.min(props.max, Math.max(props.min, parsed))
-    emit('update:modelValue', clamped)
-  }
-</script>
-
-<template>
-  <InputText
-    v-bind="attrs"
-    type="number"
-    :modelValue="String(modelValue)"
-    :disabled="disabled"
-    :data-testid="testId"
-    @update:modelValue="handleUpdate"
-  />
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-refresh-button.vue b/packages/webkit/src/components/data/data-table/data-table-refresh-button.vue
deleted file mode 100644
index f7b0ab70..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-refresh-button.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import IconButton from '../../actions/icon-button/icon-button.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableRefreshButton',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Disables the refresh control. */
-      disabled?: boolean
-      /** Shows loading state. */
-      loading?: boolean
-    }>(),
-    {
-      disabled: false,
-      loading: false
-    }
-  )
-
-  const emit = defineEmits<{
-    refresh: []
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__refresh`
-  )
-</script>
-
-<template>
-  <IconButton
-    v-bind="attrs"
-    icon="pi pi-refresh"
-    ariaLabel="Refresh table"
-    kind="outlined"
-    size="small"
-    :disabled="disabled"
-    :loading="loading"
-    :data-testid="testId"
-    @click="emit('refresh')"
-  />
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-review-changes.vue b/packages/webkit/src/components/data/data-table/data-table-review-changes.vue
deleted file mode 100644
index 16846c7d..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-review-changes.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableReviewChanges',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Number of pending altered rows. */
-      alteredCount?: number
-    }>(),
-    {
-      alteredCount: 0
-    }
-  )
-
-  const emit = defineEmits<{
-    discard: []
-    review: []
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__review-changes`
-  )
-</script>
-
-<template>
-  <div
-    v-if="alteredCount > 0"
-    v-bind="attrs"
-    class="flex items-center justify-between gap-[var(--spacing-sm)] rounded-[var(--shape-button)] border border-[var(--border-default)] bg-[var(--bg-canvas)] px-[var(--spacing-md)] py-[var(--spacing-sm)]"
-    :data-testid="testId"
-  >
-    <span class="text-body-sm text-[var(--text-default)]">
-      {{ alteredCount }} pending {{ alteredCount === 1 ? 'change' : 'changes' }}
-    </span>
-    <div class="flex gap-[var(--spacing-xs)]">
-      <Button
-        label="Discard"
-        kind="text"
-        size="small"
-        :data-testid="`${testId}__discard`"
-        @click="emit('discard')"
-      />
-      <Button
-        label="Review"
-        kind="primary"
-        size="small"
-        :data-testid="`${testId}__review`"
-        @click="emit('review')"
-      />
-    </div>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-row-actions.vue b/packages/webkit/src/components/data/data-table/data-table-row-actions.vue
deleted file mode 100644
index 2df5fe10..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-row-actions.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import IconButton from '../../actions/icon-button/icon-button.vue'
-  import DropdownMenu from '../../overlay/dropdown-menu/dropdown-menu.vue'
-  import DropdownMenuContent from '../../overlay/dropdown-menu/dropdown-menu-content.vue'
-  import DropdownMenuItem from '../../overlay/dropdown-menu/dropdown-menu-item.vue'
-  import DropdownMenuSeparator from '../../overlay/dropdown-menu/dropdown-menu-separator.vue'
-  import DropdownMenuTrigger from '../../overlay/dropdown-menu/dropdown-menu-trigger.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableRowActions',
-    inheritAttrs: false
-  })
-
-  export interface RowActionItem {
-    label: string
-    icon?: string
-    command?: (rowData: Record<string, unknown>) => void
-    disabled?: boolean | ((rowData: Record<string, unknown>) => boolean)
-    visible?: boolean | ((rowData: Record<string, unknown>) => boolean)
-    separator?: boolean
-  }
-
-  export interface InlineRowAction {
-    icon: string
-    label?: string
-    command?: (rowData: Record<string, unknown>) => void
-    disabled?: boolean | ((rowData: Record<string, unknown>) => boolean)
-  }
-
-  const props = withDefaults(
-    defineProps<{
-      /** Row data for action resolution. */
-      rowData: Record<string, unknown>
-      /** Menu actions array or resolver function. */
-      actions: RowActionItem[] | ((rowData: Record<string, unknown>) => RowActionItem[])
-      /** Optional single inline action instead of menu. */
-      inlineAction?: InlineRowAction | null
-    }>(),
-    {
-      inlineAction: null
-    }
-  )
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__row-actions`
-  )
-
-  const menuActions = computed(() => {
-    if (typeof props.actions === 'function') return props.actions(props.rowData)
-    return props.actions ?? []
-  })
-
-  const resolvedInlineDisabled = computed(() => {
-    if (!props.inlineAction) return false
-    if (typeof props.inlineAction.disabled === 'function') {
-      return props.inlineAction.disabled(props.rowData)
-    }
-    return Boolean(props.inlineAction.disabled)
-  })
-
-  function executeInlineAction() {
-    props.inlineAction?.command?.(props.rowData)
-  }
-
-  function runAction(action: RowActionItem) {
-    action.command?.(props.rowData)
-  }
-
-  function isDisabled(action: RowActionItem) {
-    if (typeof action.disabled === 'function') return action.disabled(props.rowData)
-    return Boolean(action.disabled)
-  }
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="flex items-center justify-end"
-    :data-testid="testId"
-  >
-    <IconButton
-      v-if="inlineAction"
-      :icon="inlineAction.icon"
-      :ariaLabel="inlineAction.label ?? 'Row action'"
-      kind="transparent"
-      size="small"
-      :disabled="resolvedInlineDisabled"
-      :data-testid="`${testId}__inline`"
-      @click="executeInlineAction"
-    />
-    <DropdownMenu
-      v-else
-      :data-testid="`${testId}__menu`"
-    >
-      <DropdownMenuTrigger>
-        <IconButton
-          icon="pi pi-ellipsis-v"
-          ariaLabel="Open row menu"
-          kind="transparent"
-          size="small"
-          :data-testid="`${testId}__trigger`"
-        />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <template
-          v-for="(action, index) in menuActions"
-          :key="`${action.label}-${index}`"
-        >
-          <DropdownMenuSeparator v-if="action.separator" />
-          <DropdownMenuItem
-            v-else
-            :label="action.label"
-            :icon="action.icon"
-            :disabled="isDisabled(action)"
-            @select="runAction(action)"
-          />
-        </template>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-search.vue b/packages/webkit/src/components/data/data-table/data-table-search.vue
deleted file mode 100644
index c095f8a9..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-search.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import InputText from '../../inputs/input-text/input-text.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableSearch',
-    inheritAttrs: false
-  })
-
-  const props = withDefaults(
-    defineProps<{
-      /** Search input value. */
-      modelValue?: string
-      /** Placeholder text. */
-      placeholder?: string
-      /** Debounce delay in ms before emitting search. */
-      debounce?: number
-      /** Disables the search input. */
-      disabled?: boolean
-    }>(),
-    {
-      modelValue: '',
-      placeholder: 'Search keywords...',
-      debounce: 0,
-      disabled: false
-    }
-  )
-
-  const emit = defineEmits<{
-    'update:modelValue': [value: string]
-    search: [value: string]
-    input: [value: string]
-  }>()
-
-  defineSlots<{
-    default(): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__search`
-  )
-
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null
-
-  function handleUpdate(value: string) {
-    emit('update:modelValue', value)
-    emit('input', value)
-    if (props.debounce > 0) {
-      if (debounceTimer) clearTimeout(debounceTimer)
-      debounceTimer = setTimeout(() => emit('search', value), props.debounce)
-    }
-  }
-
-  function handleEnter() {
-    emit('search', props.modelValue)
-  }
-</script>
-
-<template>
-  <span
-    v-bind="attrs"
-    class="flex w-full max-w-[32rem] flex-row items-center gap-[var(--spacing-sm)]"
-    :data-testid="testId"
-  >
-    <InputText
-      class="w-full"
-      :modelValue="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :data-testid="`${testId}__input`"
-      @update:modelValue="handleUpdate"
-      @keyup.enter="handleEnter"
-    />
-    <slot />
-  </span>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-toolbar.vue b/packages/webkit/src/components/data/data-table/data-table-toolbar.vue
deleted file mode 100644
index 4ef3c0bb..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-toolbar.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableToolbar',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Shows divider between toolbar lines. */
-      showDivider?: boolean
-    }>(),
-    {
-      showDivider: true
-    }
-  )
-
-  defineSlots<{
-    'first-line'(): unknown
-    'second-line'(): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__toolbar`
-  )
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="flex w-full flex-col gap-[var(--spacing-sm)]"
-    :data-testid="testId"
-  >
-    <div
-      class="px-[var(--spacing-sm)]"
-      :data-testid="`${testId}__first-line`"
-    >
-      <slot name="first-line" />
-    </div>
-    <hr
-      v-if="showDivider"
-      class="border-0 border-t border-[var(--border-default)]"
-      :data-testid="`${testId}__divider`"
-    />
-    <div
-      class="px-[var(--spacing-sm)]"
-      :data-testid="`${testId}__second-line`"
-    >
-      <slot name="second-line" />
-    </div>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-view-all-footer.vue b/packages/webkit/src/components/data/data-table/data-table-view-all-footer.vue
deleted file mode 100644
index cf237861..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-view-all-footer.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import Button from '../../actions/button/button.vue'
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableViewAllFooter',
-    inheritAttrs: false
-  })
-
-  withDefaults(
-    defineProps<{
-      /** Footer CTA label. */
-      label?: string
-    }>(),
-    {
-      label: 'View all'
-    }
-  )
-
-  const emit = defineEmits<{
-    click: [event: MouseEvent]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__view-all-footer`
-  )
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="flex justify-center border-t border-[var(--border-default)] px-[var(--spacing-sm)] py-[var(--spacing-sm)]"
-    :data-testid="testId"
-  >
-    <Button
-      :label="label"
-      kind="text"
-      size="small"
-      :data-testid="`${testId}__button`"
-      @click="emit('click', $event)"
-    />
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table-view-toggle.vue b/packages/webkit/src/components/data/data-table/data-table-view-toggle.vue
deleted file mode 100644
index ef9e1c40..00000000
--- a/packages/webkit/src/components/data/data-table/data-table-view-toggle.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
-
-  import { useDataTableContext } from './composables/use-data-table-context'
-
-  defineOptions({
-    name: 'DataTableViewToggle',
-    inheritAttrs: false
-  })
-
-  export interface ViewModeOption {
-    label: string
-    value: string
-  }
-
-  withDefaults(
-    defineProps<{
-      /** Available view modes. */
-      options?: ViewModeOption[]
-      /** Selected view mode value. */
-      modelValue?: string
-    }>(),
-    {
-      options: () => [],
-      modelValue: ''
-    }
-  )
-
-  const emit = defineEmits<{
-    'update:modelValue': [value: string]
-  }>()
-
-  const attrs = useAttrs()
-  const ctx = useDataTableContext()
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__view-toggle`
-  )
-
-  function select(value: string) {
-    emit('update:modelValue', value)
-  }
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="inline-flex rounded-[var(--shape-button)] border border-[var(--border-default)]"
-    role="group"
-    :data-testid="testId"
-  >
-    <button
-      v-for="option in options"
-      :key="option.value"
-      type="button"
-      class="px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-body-sm transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
-      :class="
-        modelValue === option.value
-          ? 'bg-[var(--primary)] text-[var(--primary-contrast)]'
-          : 'bg-[var(--bg-surface)] text-[var(--text-default)]'
-      "
-      :data-testid="`${testId}__${option.value}`"
-      @click="select(option.value)"
-    >
-      {{ option.label }}
-    </button>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/data-table.vue b/packages/webkit/src/components/data/data-table/data-table.vue
deleted file mode 100644
index 36ac2410..00000000
--- a/packages/webkit/src/components/data/data-table/data-table.vue
+++ /dev/null
@@ -1,612 +0,0 @@
-<script setup lang="ts">
-  import { computed, provide, ref, shallowRef, useAttrs, useSlots, watch } from 'vue'
-
-  import EmptyResultsBlock from '../../wip/empty-results-block/empty-results-block.vue'
-  import { useDataTableFilter } from './composables/use-data-table-filter'
-  import { useDataTablePagination } from './composables/use-data-table-pagination'
-  import { useDataTableSelection } from './composables/use-data-table-selection'
-  import { useDataTableSort } from './composables/use-data-table-sort'
-  import {
-    type ColumnDefinition,
-    DataTableInjectionKey,
-    type EmptyBlockConfig,
-    type FilterDefinition,
-    type PageEvent,
-    type RegisteredColumn,
-    type RowEditEvent,
-    type RowOrderingResult,
-    type SortEvent
-  } from './injection-key'
-
-  defineOptions({
-    name: 'DataTable',
-    inheritAttrs: false
-  })
-
-  type RowData = Record<string, unknown>
-  type RowDataList = RowData[]
-  type FiltersMap = Record<string, unknown>
-  type SelectionValue = RowData | RowDataList | null
-  type ExportHandler = (options: { data: RowDataList; fields: string[] }) => void
-  type RowClassHandler = (row: RowData) => string | null
-  type RowClickPayload = { data: RowData; originalEvent: MouseEvent }
-
-  const props = withDefaults(
-    defineProps<{
-      /** Row records to render. */
-      data?: RowDataList
-      /** Unique row identifier field. */
-      dataKey?: string
-      /** Column metadata for skeleton, export, and column selector. */
-      columns?: ColumnDefinition[]
-      /** Shows loading skeleton rows when true. */
-      loading?: boolean
-      /** Total record count for lazy pagination. */
-      totalRecords?: number
-      /** When true, pagination and sort emit events for server fetch. */
-      lazy?: boolean
-      /** Zero-based index of the first row on the current page. */
-      first?: number
-      /** Hides column headers; renders headerless list rows. */
-      hideHeader?: boolean
-      /** Applies hover surface token on rows. */
-      rowHover?: boolean
-      /** Wraps the table body in a scroll area. */
-      scrollable?: boolean
-      /** Max height when scrollable is true. */
-      scrollHeight?: string
-      /** Shows row/column divider borders. */
-      showGridlines?: boolean
-      /** Active filter state including global search. */
-      filters?: FiltersMap
-      /** Current sort field name. */
-      sortField?: string
-      /** Sort direction: 1 ascending, -1 descending. */
-      sortOrder?: number
-      /** Single or multi-column sort mode. */
-      sortMode?: 'single' | 'multiple'
-      /** Fields included in global text search. */
-      globalFilterFields?: string[]
-      /** Bound search input value for empty-state logic. */
-      searchValue?: string
-      /** Applied filter chips shown below the toolbar. */
-      appliedFilters?: FilterDefinition[]
-      /** Enables pagination controls. */
-      paginator?: boolean
-      /** Rows per page. */
-      rows?: number
-      /** Page size options in the paginator. */
-      rowsPerPageOptions?: number[]
-      /** Selected row or rows. */
-      selection?: SelectionValue
-      /** Enables row selection checkboxes. */
-      selectable?: boolean
-      /** Row or cell edit mode. */
-      editMode?: 'row' | 'cell'
-      /** Rows currently in edit state. */
-      editingRows?: RowDataList
-      /** Default CSV export filename. */
-      exportFilename?: string
-      /** Custom export handler; null uses built-in CSV. */
-      exportFunction?: ExportHandler | null
-      /** In-table empty message when filtered with no rows. */
-      emptyListMessage?: string
-      /** Full-page empty block configuration. */
-      emptyBlock?: EmptyBlockConfig
-      /** Always renders the table shell even when data is empty. */
-      notShowEmptyBlock?: boolean
-      /** Uses the emptyBlock slot instead of the default block. */
-      hasEmptyBlockSlot?: boolean
-      /** Skeleton placeholder row count while loading. */
-      skeletonRows?: number
-      /** Frozen rows pinned above the scroll body. */
-      frozenValue?: RowDataList
-      /** Reserved; column resize deferred in v1. */
-      resizableColumns?: boolean
-      /** Returns extra classes for a row. */
-      rowClass?: RowClassHandler | null
-      /** Enables expandable row groups. */
-      expandableRowGroups?: boolean
-      /** Row group rendering mode. */
-      rowGroupMode?: 'subheader' | 'rowspan'
-      /** Field used to group rows. */
-      groupRowsBy?: string
-      /** Currently expanded group keys. */
-      expandedRowGroups?: string[]
-    }>(),
-    {
-      data: () => [],
-      dataKey: 'id',
-      columns: () => [],
-      loading: false,
-      totalRecords: 0,
-      lazy: false,
-      first: 0,
-      hideHeader: false,
-      rowHover: true,
-      scrollable: false,
-      scrollHeight: '',
-      showGridlines: false,
-      filters: () => ({}),
-      sortField: '',
-      sortOrder: 1,
-      sortMode: 'single',
-      globalFilterFields: () => [],
-      searchValue: '',
-      appliedFilters: () => [],
-      paginator: false,
-      rows: 10,
-      rowsPerPageOptions: () => [10, 25, 50, 100],
-      selection: null,
-      selectable: false,
-      editMode: 'row',
-      editingRows: () => [],
-      exportFilename: 'export',
-      exportFunction: null,
-      emptyListMessage: 'No data available',
-      emptyBlock: () => ({
-        title: 'No data has been created',
-        description: 'No data has been created.',
-        createButtonLabel: 'Create'
-      }),
-      notShowEmptyBlock: false,
-      hasEmptyBlockSlot: false,
-      skeletonRows: 5,
-      frozenValue: () => [],
-      resizableColumns: false,
-      rowClass: null,
-      expandableRowGroups: false,
-      rowGroupMode: 'subheader',
-      groupRowsBy: '',
-      expandedRowGroups: () => []
-    }
-  )
-
-  const emit = defineEmits<{
-    'update:filters': [value: FiltersMap]
-    'update:sortField': [value: string]
-    'update:sortOrder': [value: number]
-    'update:selection': [value: SelectionValue]
-    'update:editingRows': [value: RowDataList]
-    'update:expandedRowGroups': [value: string[]]
-    'update:first': [value: number]
-    page: [event: PageEvent]
-    sort: [event: SortEvent]
-    filter: [event: FiltersMap]
-    'row-click': [event: RowClickPayload]
-    'row-reorder': [event: RowOrderingResult]
-    'row-edit-save': [event: RowEditEvent]
-    'row-edit-cancel': [event: RowEditEvent]
-    'click-to-create': []
-  }>()
-
-  type SlotRowScope = { data: RowData; index: number }
-  type SlotGroupScope = { data: RowData }
-
-  defineSlots<{
-    default(): unknown
-    header(): unknown
-    footer(): unknown
-    empty(): unknown
-    emptyBlock(): unknown
-    emptyBlockButton(): unknown
-    illustration(): unknown
-    loading(): unknown
-    expansion(props: SlotRowScope): unknown
-    groupheader(props: SlotGroupScope): unknown
-    groupfooter(props: SlotGroupScope): unknown
-  }>()
-
-  const attrs = useAttrs()
-  const slots = useSlots()
-
-  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'data-data-table')
-
-  const registeredColumns = shallowRef<RegisteredColumn[]>([])
-  const hadPreviousSearch = ref(false)
-  const firstRef = ref(props.first)
-  const sortFieldRef = ref(props.sortField)
-  const sortOrderRef = ref(props.sortOrder)
-
-  watch(
-    () => props.first,
-    (value) => {
-      firstRef.value = value
-    }
-  )
-  watch(
-    () => props.sortField,
-    (value) => {
-      sortFieldRef.value = value
-    }
-  )
-  watch(
-    () => props.sortOrder,
-    (value) => {
-      sortOrderRef.value = value
-    }
-  )
-
-  const dataRef = computed(() => props.data)
-  const filtersRef = computed(() => props.filters)
-  const searchValueRef = computed(() => props.searchValue)
-  const appliedFiltersRef = computed(() => props.appliedFilters)
-  const globalFilterFieldsRef = computed(() => props.globalFilterFields)
-  const paginatorRef = computed(() => props.paginator)
-  const rowsRef = computed(() => props.rows)
-  const lazyRef = computed(() => props.lazy)
-  const totalRecordsRef = computed(() => props.totalRecords)
-  const selectionRef = computed(() => props.selection)
-  const multipleSelection = computed(() => props.selectable)
-
-  const { filteredData, hasActiveSearch } = useDataTableFilter(dataRef, {
-    globalFilterFields: globalFilterFieldsRef,
-    searchValue: searchValueRef,
-    filters: filtersRef,
-    appliedFilters: appliedFiltersRef
-  })
-
-  const { sortedData, toggleSort } = useDataTableSort(
-    filteredData,
-    sortFieldRef,
-    sortOrderRef,
-    registeredColumns
-  )
-
-  const { paginatedData, previousPage, nextPage, canPrevious, canNext, pageReport } =
-    useDataTablePagination(sortedData, {
-      paginator: paginatorRef,
-      rows: rowsRef,
-      first: firstRef,
-      lazy: lazyRef,
-      totalRecords: totalRecordsRef,
-      onPage: (event: PageEvent) => {
-        emit('update:first', event.first)
-        emit('page', event)
-      }
-    })
-
-  const displayRows = computed(() => {
-    if (props.loading && props.data.length === 0 && props.columns.length > 0) {
-      return Array.from({ length: props.skeletonRows }, (_, index) => {
-        const row: Record<string, unknown> = { id: `skeleton-${index}` }
-        for (const col of props.columns) {
-          row[col.field] = null
-        }
-        return row
-      })
-    }
-    return paginatedData.value
-  })
-
-  const visibleColumns = computed(() => registeredColumns.value.filter((column) => !column.hidden))
-
-  const {
-    isRowSelected,
-    toggleRow: toggleRowSelection,
-    toggleAll: toggleAllSelection,
-    isAllSelected
-  } = useDataTableSelection(
-    displayRows,
-    props.dataKey,
-    selectionRef,
-    (value: SelectionValue) => emit('update:selection', value),
-    multipleSelection
-  )
-
-  watch(hasActiveSearch, (active, wasActive) => {
-    if (wasActive && !active) hadPreviousSearch.value = true
-    if (props.data.length > 0) hadPreviousSearch.value = false
-  })
-
-  watch(
-    () => props.data.length,
-    (length) => {
-      if (length > 0) hadPreviousSearch.value = false
-    }
-  )
-
-  const shouldRenderTable = computed(() => {
-    if (props.notShowEmptyBlock) return true
-    return (
-      props.data.length > 0 ||
-      props.loading ||
-      props.appliedFilters.length > 0 ||
-      hasActiveSearch.value ||
-      hadPreviousSearch.value
-    )
-  })
-
-  function registerColumn(column: RegisteredColumn) {
-    const existing = registeredColumns.value.findIndex((item) => item.field === column.field)
-    const next = [...registeredColumns.value]
-    if (existing >= 0) next[existing] = column
-    else next.push(column)
-    registeredColumns.value = next
-  }
-
-  function unregisterColumn(field: string) {
-    registeredColumns.value = registeredColumns.value.filter((column) => column.field !== field)
-  }
-
-  function toggleColumnVisibility(field: string, visible: boolean) {
-    registeredColumns.value = registeredColumns.value.map((column) =>
-      column.field === field ? { ...column, hidden: !visible } : column
-    )
-  }
-
-  function exportCSV() {
-    const fields =
-      visibleColumns.value.length > 0
-        ? visibleColumns.value.map((column) => column.field)
-        : props.columns.map((column) => column.field)
-
-    if (props.exportFunction) {
-      props.exportFunction({ data: props.data, fields })
-      return
-    }
-
-    const header = fields.join(',')
-    const lines = props.data.map((row) =>
-      fields.map((field) => JSON.stringify(row[field] ?? '')).join(',')
-    )
-    const csv = [header, ...lines].join('\n')
-    if (typeof globalThis.URL === 'undefined' || typeof globalThis.Blob === 'undefined') return
-    const blob = new globalThis.Blob([csv], { type: 'text/csv;charset=utf-8;' })
-    const url = globalThis.URL.createObjectURL(blob)
-    const link = globalThis.document.createElement('a')
-    link.href = url
-    link.download = `${props.exportFilename}.csv`
-    link.click()
-    globalThis.URL.revokeObjectURL(url)
-  }
-
-  function handleSort(field: string) {
-    toggleSort(field)
-    emit('update:sortField', sortFieldRef.value)
-    emit('update:sortOrder', sortOrderRef.value)
-    emit('sort', { sortField: sortFieldRef.value, sortOrder: sortOrderRef.value })
-  }
-
-  function handleRowClick(row: Record<string, unknown>, originalEvent: MouseEvent) {
-    emit('row-click', { data: row, originalEvent })
-  }
-
-  function ariaSortFor(field: string) {
-    if (sortFieldRef.value !== field) return 'none'
-    return sortOrderRef.value === -1 ? 'descending' : 'ascending'
-  }
-
-  provide(DataTableInjectionKey, {
-    testId: testId.value,
-    dataKey: props.dataKey,
-    hideHeader: props.hideHeader,
-    selectable: props.selectable,
-    rowHover: props.rowHover,
-    showGridlines: props.showGridlines,
-    columns: registeredColumns,
-    registerColumn,
-    unregisterColumn,
-    toggleColumnVisibility,
-    isRowSelected,
-    toggleRowSelection,
-    toggleAllSelection,
-    isAllSelected,
-    exportCSV
-  })
-
-  defineExpose({
-    exportCSV
-  })
-</script>
-
-<template>
-  <div
-    v-bind="attrs"
-    class="w-full max-w-full"
-    :data-testid="testId"
-    :data-loading="loading || null"
-  >
-    <template v-if="shouldRenderTable">
-      <div
-        class="flex w-full flex-col overflow-hidden rounded-[var(--shape-card)] border border-[var(--border-default)] bg-[var(--bg-surface)]"
-        :data-testid="`${testId}__shell`"
-      >
-        <div
-          v-if="slots['header']"
-          class="border-b border-[var(--border-default)] px-[var(--spacing-sm)] py-[var(--spacing-sm)]"
-          :data-testid="`${testId}__header`"
-        >
-          <slot name="header" />
-        </div>
-
-        <div
-          v-if="loading && slots['loading']"
-          class="px-[var(--spacing-sm)] py-[var(--spacing-sm)]"
-          :data-testid="`${testId}__loading`"
-        >
-          <slot name="loading" />
-        </div>
-
-        <div
-          class="relative w-full overflow-x-auto"
-          :style="scrollable && scrollHeight ? { maxHeight: scrollHeight } : undefined"
-          :data-testid="`${testId}__body`"
-        >
-          <table
-            class="w-full border-collapse"
-            role="table"
-            :data-testid="`${testId}__table`"
-          >
-            <thead v-if="!hideHeader && visibleColumns.length > 0">
-              <tr
-                class="border-b border-[var(--border-default)] bg-[var(--bg-canvas)]"
-                :data-testid="`${testId}__head-row`"
-              >
-                <th
-                  v-if="selectable"
-                  scope="col"
-                  class="w-10 px-[var(--spacing-sm)] py-[var(--spacing-sm)] text-left"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="isAllSelected"
-                    aria-label="Select all rows"
-                    @change="toggleAllSelection"
-                  />
-                </th>
-                <th
-                  v-for="column in visibleColumns"
-                  :key="column.field"
-                  scope="col"
-                  class="px-[var(--spacing-sm)] py-[var(--spacing-sm)] text-left text-body-sm text-[var(--text-default)]"
-                  :aria-sort="column.sortable ? ariaSortFor(column.sortField) : undefined"
-                  :style="column.style || undefined"
-                  :data-testid="`${testId}__head-${column.field}`"
-                >
-                  <button
-                    v-if="column.sortable"
-                    type="button"
-                    class="inline-flex items-center gap-[var(--spacing-xs)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
-                    @click="handleSort(column.sortField)"
-                  >
-                    <component
-                      :is="column.headerSlot ?? 'span'"
-                      v-if="column.headerSlot"
-                    />
-                    <span v-else>{{ column.header }}</span>
-                  </button>
-                  <template v-else>
-                    <component
-                      :is="column.headerSlot ?? 'span'"
-                      v-if="column.headerSlot"
-                    />
-                    <span v-else>{{ column.header }}</span>
-                  </template>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(row, rowIndex) in displayRows"
-                :key="String(row[dataKey] ?? rowIndex)"
-                class="border-b border-[var(--border-default)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none"
-                :class="[
-                  rowHover ? 'hover:bg-[var(--bg-hover)]' : '',
-                  rowClass ? rowClass(row) : '',
-                  showGridlines ? 'divide-x divide-[var(--border-default)]' : ''
-                ]"
-                :data-state="selectable && isRowSelected(row) ? 'selected' : 'unselected'"
-                :data-testid="`${testId}__row-${rowIndex}`"
-                @click="handleRowClick(row, $event)"
-              >
-                <td
-                  v-if="selectable"
-                  class="w-10 px-[var(--spacing-sm)] py-[var(--spacing-md)]"
-                >
-                  <input
-                    type="checkbox"
-                    :checked="isRowSelected(row)"
-                    aria-label="Select row"
-                    @click.stop
-                    @change="toggleRowSelection(row)"
-                  />
-                </td>
-                <td
-                  v-for="column in visibleColumns"
-                  :key="`${rowIndex}-${column.field}`"
-                  class="px-[var(--spacing-sm)] py-[var(--spacing-md)] align-middle text-body-sm text-[var(--text-default)]"
-                  :style="column.style || undefined"
-                  :data-testid="`${testId}__cell-${column.field}`"
-                >
-                  <template v-if="loading && row[dataKey]?.toString().startsWith('skeleton')">
-                    <span
-                      class="inline-block h-3 w-full max-w-[12rem] animate-blink rounded-[var(--shape-button)] bg-[var(--bg-canvas)] motion-reduce:animate-none"
-                      aria-hidden="true"
-                    />
-                  </template>
-                  <component
-                    :is="column.bodySlot"
-                    v-else-if="column.bodySlot"
-                    :data="row"
-                    :index="rowIndex"
-                  />
-                  <span v-else>{{ row[column.field] }}</span>
-                </td>
-              </tr>
-              <tr v-if="displayRows.length === 0 && !loading">
-                <td
-                  :colspan="visibleColumns.length + (selectable ? 1 : 0)"
-                  class="px-[var(--spacing-sm)] py-[var(--spacing-md)] text-center text-body-sm text-[var(--text-muted)]"
-                  :data-testid="`${testId}__empty`"
-                >
-                  <slot name="empty">
-                    {{ emptyListMessage }}
-                  </slot>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div
-          v-if="paginator"
-          class="flex items-center justify-between gap-[var(--spacing-sm)] border-t border-[var(--border-default)] px-[var(--spacing-sm)] py-[var(--spacing-sm)] text-body-xs text-[var(--text-muted)]"
-          :data-testid="`${testId}__paginator`"
-        >
-          <span>{{ pageReport }}</span>
-          <div class="flex items-center gap-[var(--spacing-xs)]">
-            <button
-              type="button"
-              class="inline-flex h-10 min-w-10 items-center justify-center rounded-[var(--shape-button)] border border-[var(--border-default)] px-[var(--spacing-xs)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:opacity-50"
-              :disabled="!canPrevious"
-              @click="previousPage"
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              class="inline-flex h-10 min-w-10 items-center justify-center rounded-[var(--shape-button)] border border-[var(--border-default)] px-[var(--spacing-xs)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:opacity-50"
-              :disabled="!canNext"
-              @click="nextPage"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-if="slots['footer']"
-          class="border-t border-[var(--border-default)] px-[var(--spacing-sm)] py-[var(--spacing-sm)]"
-          :data-testid="`${testId}__footer`"
-        >
-          <slot name="footer" />
-        </div>
-      </div>
-
-      <slot />
-    </template>
-
-    <template v-else>
-      <div v-if="hasEmptyBlockSlot">
-        <slot name="emptyBlock" />
-      </div>
-      <EmptyResultsBlock
-        v-else
-        :title="emptyBlock.title ?? 'No data has been created'"
-        :description="emptyBlock.description ?? 'No data has been created.'"
-        :createButtonLabel="emptyBlock.createButtonLabel ?? 'Create'"
-        :documentationService="emptyBlock.documentationService ?? undefined"
-        :data-testid="`${testId}__empty-block`"
-        @click-to-create="emit('click-to-create')"
-      >
-        <template #illustration>
-          <slot name="illustration" />
-        </template>
-        <template #default>
-          <slot name="emptyBlockButton" />
-        </template>
-      </EmptyResultsBlock>
-    </template>
-  </div>
-</template>
diff --git a/packages/webkit/src/components/data/data-table/injection-key.ts b/packages/webkit/src/components/data/data-table/injection-key.ts
deleted file mode 100644
index 69ad2d82..00000000
--- a/packages/webkit/src/components/data/data-table/injection-key.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { InjectionKey, Ref, ShallowRef, Slot } from 'vue'
-
-export interface ColumnDefinition {
-  field: string
-  header: string
-  sortField?: string
-  sortable?: boolean
-  frozen?: boolean
-  hiddenByDefault?: boolean
-  filterField?: string
-  type?: string
-}
-
-export interface FilterDefinition {
-  field: string
-  label: string
-  value: unknown
-  matchMode?: string
-}
-
-export interface EmptyBlockConfig {
-  title?: string
-  description?: string
-  createButtonLabel?: string
-  createPagePath?: string
-  onClickCreate?: () => void
-  documentationService?: (() => void) | null
-}
-
-export interface PageEvent {
-  first: number
-  rows: number
-  page: number
-  pageCount: number
-}
-
-export interface SortEvent {
-  sortField: string
-  sortOrder: number
-}
-
-export interface RowEditEvent {
-  data: Record<string, unknown>
-  newData: Record<string, unknown>
-  field?: string
-  index: number
-  originalEvent?: unknown
-}
-
-export interface RowOrderingResult {
-  from: number
-  to: number
-  reorderedData: Record<string, unknown>[]
-}
-
-export interface RegisteredColumn {
-  field: string
-  header: string
-  sortField: string
-  sortable: boolean
-  frozen: boolean
-  alignFrozen?: 'left' | 'right'
-  style?: string
-  hidden: boolean
-  bodySlot?: Slot
-  headerSlot?: Slot
-}
-
-export interface DataTableContext {
-  testId: string
-  dataKey: string
-  hideHeader: boolean
-  selectable: boolean
-  rowHover: boolean
-  showGridlines: boolean
-  columns: ShallowRef<RegisteredColumn[]>
-  registerColumn: (column: RegisteredColumn) => void
-  unregisterColumn: (field: string) => void
-  toggleColumnVisibility: (field: string, visible: boolean) => void
-  isRowSelected: (row: Record<string, unknown>) => boolean
-  toggleRowSelection: (row: Record<string, unknown>) => void
-  toggleAllSelection: () => void
-  isAllSelected: Ref<boolean>
-  exportCSV: () => void
-}
-
-export const DataTableInjectionKey: InjectionKey<DataTableContext> = Symbol('DataTableContext')
diff --git a/packages/webkit/src/components/data/data-table/package.json b/packages/webkit/src/components/data/data-table/package.json
deleted file mode 100644
index 3042ef61..00000000
--- a/packages/webkit/src/components/data/data-table/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "main": "./data-table.vue",
-  "module": "./data-table.vue",
-  "types": "./data-table.vue.d.ts",
-  "browser": {
-    "./sfc": "./data-table.vue"
-  },
-  "sideEffects": [
-    "*.vue"
-  ]
-}
diff --git a/packages/webkit/src/components/data/data-table/utils/format-filter-value.js b/packages/webkit/src/components/data/data-table/utils/format-filter-value.js
deleted file mode 100644
index 17447bde..00000000
--- a/packages/webkit/src/components/data/data-table/utils/format-filter-value.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/** Generic display formatter for applied filter chip values. */
-export function formatFilterValue(_filterKey, value) {
-  if (value === null || value === undefined) return ''
-  if (typeof value === 'boolean') return value ? 'true' : 'false'
-  if (Array.isArray(value)) return value.join(', ')
-  return String(value)
-}
diff --git a/packages/webkit/src/components/data/paginator/index.ts b/packages/webkit/src/components/data/paginator/index.ts
new file mode 100644
index 00000000..d15be033
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Compound API — each sub-component stays available as its own import
+ * (`@aziontech/webkit/data/pagination-button`, ...) and is also attached to the
+ * root for dot-notation usage: `<Paginator.Button>`, `<Paginator.Info>`,
+ * `<Paginator.PageSize>`.
+ *
+ * This is a `.ts` file so vue-tsc generates the adjacent `index.d.ts`, giving
+ * `<Paginator.Button>` full type-checking. `Object.assign` keeps one source of
+ * truth; the explicit `CompoundPaginator` annotation lets declaration emit
+ * reference the sub-component types instead of expanding the root's private
+ * `Props`. See `.claude/rules/compound-api.md`.
+ */
+import PaginationButton from './pagination-button/pagination-button.vue'
+import Paginator from './paginator.vue'
+import PaginatorInfo from './paginator-info/paginator-info.vue'
+import PaginatorPageSize from './paginator-page-size/paginator-page-size.vue'
+
+type CompoundPaginator = typeof Paginator & {
+  Button: typeof PaginationButton
+  Info: typeof PaginatorInfo
+  PageSize: typeof PaginatorPageSize
+}
+
+const PaginatorRoot = Object.assign(Paginator, {
+  Button: PaginationButton,
+  Info: PaginatorInfo,
+  PageSize: PaginatorPageSize
+}) as CompoundPaginator
+
+export default PaginatorRoot
diff --git a/packages/webkit/src/components/data/paginator/injection-key.ts b/packages/webkit/src/components/data/paginator/injection-key.ts
new file mode 100644
index 00000000..5e5f94e6
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/injection-key.ts
@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+
+export interface PaginatorContext {
+  /** Root data-testid; sub-components derive BEM-suffixed ids from it. */
+  testId: string
+}
+
+export const PaginatorInjectionKey: InjectionKey<PaginatorContext> = Symbol('PaginatorContext')
diff --git a/packages/webkit/src/components/data/paginator/package.json b/packages/webkit/src/components/data/paginator/package.json
new file mode 100644
index 00000000..202f3d20
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.d.ts",
+  "browser": {
+    "./sfc": "./index.ts"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/paginator/pagination-button/package.json b/packages/webkit/src/components/data/paginator/pagination-button/package.json
new file mode 100644
index 00000000..0d47dae7
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/pagination-button/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./pagination-button.vue",
+  "module": "./pagination-button.vue",
+  "types": "./pagination-button.vue.d.ts",
+  "browser": {
+    "./sfc": "./pagination-button.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue b/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
new file mode 100644
index 00000000..9fb5e3e0
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/pagination-button/pagination-button.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { PaginatorInjectionKey } from '../injection-key'
+
+  export type PaginationButtonKind = 'previous' | 'next' | 'number' | 'more'
+
+  defineOptions({
+    name: 'PaginationButton',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Button role within the paginator. */
+    kind?: PaginationButtonKind
+    /** Marks the current page (filled surface + aria-current). */
+    selected?: boolean
+    /** Disables interaction and applies disabled tokens. */
+    disabled?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'number',
+    selected: false,
+    disabled: false
+  })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(PaginatorInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__button` : 'data-paginator__button')
+  )
+
+  const handleClick = (event: MouseEvent) => {
+    if (props.disabled) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    v-bind="$attrs"
+    type="button"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-selected="selected || null"
+    :data-disabled="disabled || null"
+    :disabled="disabled"
+    :aria-current="selected ? 'page' : undefined"
+    :aria-disabled="disabled || undefined"
+    class="relative isolate inline-flex h-7 items-center justify-center whitespace-nowrap rounded-[var(--shape-button)] px-[var(--spacing-xs)] bg-[var(--bg-surface)] text-[var(--text-default)] text-button-lg transition-colors duration-150 ease-out motion-reduce:transition-none data-[kind=number]:w-10 data-[kind=more]:w-10 data-[kind=previous]:min-w-20 data-[kind=next]:min-w-20 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-hover)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out motion-reduce:before:transition-none before:content-[''] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--bg-active)] after:opacity-0 after:transition-opacity after:duration-150 after:ease-out motion-reduce:after:transition-none after:content-[''] hover:before:opacity-100 active:after:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[selected]:bg-[var(--bg-selected)] data-[selected]:border-[length:var(--border-width-default)] data-[selected]:border-solid data-[selected]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:text-[var(--text-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:before:hidden data-[disabled]:after:hidden"
+    @click="handleClick"
+  >
+    <span class="relative z-[1] inline-flex items-center gap-[var(--spacing-xs)]">
+      <i
+        v-if="kind === 'previous'"
+        class="pi pi-chevron-left text-[length:inherit] leading-none"
+        aria-hidden="true"
+      />
+      <i
+        v-if="kind === 'more'"
+        class="pi pi-ellipsis-h text-[length:inherit] leading-none"
+        aria-hidden="true"
+      />
+      <slot v-if="kind !== 'more'" />
+      <i
+        v-if="kind === 'next'"
+        class="pi pi-chevron-right text-[length:inherit] leading-none"
+        aria-hidden="true"
+      />
+    </span>
+  </button>
+</template>
diff --git a/packages/webkit/src/components/data/paginator/paginator-info/package.json b/packages/webkit/src/components/data/paginator/paginator-info/package.json
new file mode 100644
index 00000000..281f0617
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/paginator-info/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./paginator-info.vue",
+  "module": "./paginator-info.vue",
+  "types": "./paginator-info.vue.d.ts",
+  "browser": {
+    "./sfc": "./paginator-info.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue b/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
new file mode 100644
index 00000000..5429d0a1
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/paginator-info/paginator-info.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { PaginatorInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'PaginatorInfo',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(PaginatorInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__info` : 'data-paginator__info')
+  )
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    :data-testid="testId"
+    class="truncate text-label-sm text-[var(--text-muted)]"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/webkit/src/components/data/paginator/paginator-page-size/package.json b/packages/webkit/src/components/data/paginator/paginator-page-size/package.json
new file mode 100644
index 00000000..a69b6484
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/paginator-page-size/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./paginator-page-size.vue",
+  "module": "./paginator-page-size.vue",
+  "types": "./paginator-page-size.vue.d.ts",
+  "browser": {
+    "./sfc": "./paginator-page-size.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue b/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
new file mode 100644
index 00000000..2a48ce5c
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/paginator-page-size/paginator-page-size.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { PaginatorInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'PaginatorPageSize',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Selected rows-per-page value. */
+    modelValue?: number
+    /** Available page-size options. */
+    options?: number[]
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: 10,
+    options: () => [10, 25, 50, 100]
+  })
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: number]
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(PaginatorInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__page-size` : 'data-paginator__page-size')
+  )
+
+  // The selector must never render blank: if the current value isn't one of the
+  // configured options (e.g. a page size of 3 with the default [10, 25, 50, 100]),
+  // fold it in so there's always a matching option for the selected value.
+  const displayOptions = computed<number[]>(() =>
+    props.options.includes(props.modelValue)
+      ? props.options
+      : [...props.options, props.modelValue].sort((a, b) => a - b)
+  )
+
+  const handleChange = (event: Event) => {
+    emit('update:modelValue', Number((event.target as HTMLSelectElement).value))
+  }
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    class="relative inline-flex h-8 min-w-16 items-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)] text-body-sm text-[var(--text-muted)]"
+  >
+    <select
+      :value="modelValue"
+      aria-label="Rows per page"
+      class="h-8 w-full cursor-pointer appearance-none rounded-[var(--shape-elements)] border-[length:var(--border-width-default)] border-solid border-[var(--border-default)] bg-[var(--bg-surface)] pl-[var(--spacing-sm)] pr-7 text-label-sm text-[var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]"
+      @change="handleChange"
+    >
+      <option
+        v-for="opt in displayOptions"
+        :key="opt"
+        :value="opt"
+      >
+        {{ opt }}
+      </option>
+    </select>
+    <i
+      class="pi pi-chevron-down pointer-events-none absolute right-[var(--spacing-sm)] text-[length:inherit] leading-none"
+      aria-hidden="true"
+    />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/paginator/paginator.vue b/packages/webkit/src/components/data/paginator/paginator.vue
new file mode 100644
index 00000000..3c558ea0
--- /dev/null
+++ b/packages/webkit/src/components/data/paginator/paginator.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+  import { computed, provide, useAttrs } from 'vue'
+
+  import { PaginatorInjectionKey } from './injection-key'
+  import PaginationButton from './pagination-button/pagination-button.vue'
+  import PaginatorInfo from './paginator-info/paginator-info.vue'
+  import PaginatorPageSize from './paginator-page-size/paginator-page-size.vue'
+
+  type PageItem = { type: 'page' | 'more'; value: number; key: string }
+
+  defineOptions({
+    name: 'Paginator',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Current page, 1-based (data-driven mode). Supports v-model:page. */
+    page?: number
+    /** Total item count. When set, the Paginator runs in data-driven mode and renders its own controls. */
+    total?: number
+    /** Rows per page (data-driven mode). Supports v-model:page-size. */
+    pageSize?: number
+    /** Page-size options offered in the rows-per-page selector. */
+    pageSizeOptions?: number[]
+    /** Page numbers shown on each side of the current page before collapsing into an overflow ellipsis. */
+    siblingCount?: number
+    /** Accessible name for the navigation landmark. */
+    ariaLabel?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    page: 1,
+    total: undefined,
+    pageSize: 10,
+    pageSizeOptions: () => [10, 25, 50, 100],
+    siblingCount: 1,
+    ariaLabel: 'Pagination'
+  })
+
+  const emit = defineEmits<{
+    'update:page': [page: number]
+    'update:pageSize': [pageSize: number]
+    'page-change': [page: number]
+  }>()
+
+  defineSlots<{
+    info(): unknown
+    default(): unknown
+    controls(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed<string>(
+    () => (attrs['data-testid'] as string | undefined) ?? 'data-paginator'
+  )
+
+  provide(PaginatorInjectionKey, { testId: testId.value })
+
+  // When `total` is provided, the root renders and drives its own controls;
+  // otherwise it stays a pure layout landmark and the consumer fills the slots.
+  const dataDriven = computed<boolean>(() => props.total !== undefined)
+
+  const pageCount = computed<number>(() =>
+    props.total === undefined ? 0 : Math.max(1, Math.ceil(props.total / props.pageSize))
+  )
+
+  const currentPage = computed<number>(() =>
+    Math.min(Math.max(1, props.page), pageCount.value || 1)
+  )
+
+  const rangeStart = computed<number>(() =>
+    !props.total ? 0 : (currentPage.value - 1) * props.pageSize + 1
+  )
+
+  const rangeEnd = computed<number>(() =>
+    Math.min(currentPage.value * props.pageSize, props.total ?? 0)
+  )
+
+  const range = (start: number, end: number): number[] => {
+    const out: number[] = []
+    for (let i = start; i <= end; i++) out.push(i)
+    return out
+  }
+
+  const pageItems = computed<PageItem[]>(() => {
+    const count = pageCount.value
+    const current = currentPage.value
+    const siblings = Math.max(0, props.siblingCount)
+
+    const page = (value: number): PageItem => ({ type: 'page', value, key: `page-${value}` })
+    const more = (key: string): PageItem => ({ type: 'more', value: 0, key })
+
+    // first + last + current + 2 siblings + 2 ellipses
+    const totalSlots = siblings * 2 + 5
+    if (count <= totalSlots) return range(1, count).map(page)
+
+    const leftSibling = Math.max(current - siblings, 1)
+    const rightSibling = Math.min(current + siblings, count)
+    const showLeftMore = leftSibling > 2
+    const showRightMore = rightSibling < count - 1
+    const edgeCount = 3 + 2 * siblings
+
+    if (!showLeftMore && showRightMore) {
+      return [...range(1, edgeCount).map(page), more('more-end'), page(count)]
+    }
+    if (showLeftMore && !showRightMore) {
+      return [page(1), more('more-start'), ...range(count - edgeCount + 1, count).map(page)]
+    }
+    return [
+      page(1),
+      more('more-start'),
+      ...range(leftSibling, rightSibling).map(page),
+      more('more-end'),
+      page(count)
+    ]
+  })
+
+  const goToPage = (next: number) => {
+    const clamped = Math.min(Math.max(1, next), pageCount.value)
+    if (clamped === currentPage.value) return
+    emit('update:page', clamped)
+    emit('page-change', clamped)
+  }
+
+  const onPrevious = () => goToPage(currentPage.value - 1)
+  const onNext = () => goToPage(currentPage.value + 1)
+
+  const onItemClick = (item: PageItem) => {
+    if (item.type === 'page') goToPage(item.value)
+  }
+
+  const onPageSizeChange = (value: number) => {
+    emit('update:pageSize', value)
+    // Reset to the first page so the current page can never fall out of range.
+    if (currentPage.value !== 1) {
+      emit('update:page', 1)
+      emit('page-change', 1)
+    }
+  }
+</script>
+
+<template>
+  <nav
+    v-bind="$attrs"
+    :aria-label="ariaLabel"
+    :data-testid="testId"
+    class="flex w-full flex-wrap items-center justify-between gap-[var(--spacing-sm)] text-[var(--text-default)]"
+  >
+    <div class="flex min-w-0 items-center">
+      <slot name="info">
+        <PaginatorInfo v-if="dataDriven">
+          Showing {{ rangeStart }} to {{ rangeEnd }} of {{ total }} entries
+        </PaginatorInfo>
+      </slot>
+    </div>
+    <div
+      class="flex flex-auto flex-wrap items-center justify-end gap-x-[var(--spacing-sm)] gap-y-[var(--spacing-xs)]"
+    >
+      <div class="flex flex-wrap items-center justify-center gap-[var(--spacing-xxs)]">
+        <template v-if="dataDriven">
+          <PaginationButton
+            kind="previous"
+            :disabled="currentPage <= 1"
+            @click="onPrevious"
+          >
+            Previous
+          </PaginationButton>
+          <PaginationButton
+            v-for="item in pageItems"
+            :key="item.key"
+            :kind="item.type === 'more' ? 'more' : 'number'"
+            :selected="item.type === 'page' && item.value === currentPage"
+            @click="onItemClick(item)"
+          >
+            {{ item.type === 'page' ? item.value : '' }}
+          </PaginationButton>
+          <PaginationButton
+            kind="next"
+            :disabled="currentPage >= pageCount"
+            @click="onNext"
+          >
+            Next
+          </PaginationButton>
+        </template>
+        <slot v-else />
+      </div>
+      <slot name="controls">
+        <PaginatorPageSize
+          v-if="dataDriven"
+          :model-value="pageSize"
+          :options="pageSizeOptions"
+          @update:model-value="onPageSizeChange"
+        />
+      </slot>
+    </div>
+  </nav>
+</template>
diff --git a/packages/webkit/src/components/data/table/index.ts b/packages/webkit/src/components/data/table/index.ts
new file mode 100644
index 00000000..40e6a308
--- /dev/null
+++ b/packages/webkit/src/components/data/table/index.ts
@@ -0,0 +1,50 @@
+/**
+ * Compound API — each sub-component stays available as its own import
+ * (`@aziontech/webkit/data/table-header`, ...) and is also attached to the root
+ * for dot-notation usage: `<Table.Header>`, `<Table.Row>`, `<Table.Cell>`, etc.
+ *
+ * This is a `.ts` file so vue-tsc generates the adjacent `index.d.ts`, giving
+ * `<Table.Row>` full type-checking. `Object.assign` keeps one source of truth;
+ * the explicit `CompoundTable` annotation lets declaration emit reference the
+ * sub-component types instead of expanding the root's private `Props`.
+ * See `.claude/rules/compound-api.md`.
+ */
+import Table from './table.vue'
+import TableBody from './table-body/table-body.vue'
+import TableCaption from './table-caption/table-caption.vue'
+import TableCell from './table-cell/table-cell.vue'
+import TableFooter from './table-footer/table-footer.vue'
+import TableHeadCell from './table-head-cell/table-head-cell.vue'
+import TableHeader from './table-header/table-header.vue'
+import TableRow from './table-row/table-row.vue'
+import TableSearch from './table-search/table-search.vue'
+import TableSortButton from './table-sort-button/table-sort-button.vue'
+import TableToolbar from './table-toolbar/table-toolbar.vue'
+
+type CompoundTable = typeof Table & {
+  Header: typeof TableHeader
+  Body: typeof TableBody
+  Footer: typeof TableFooter
+  Caption: typeof TableCaption
+  Row: typeof TableRow
+  HeadCell: typeof TableHeadCell
+  Cell: typeof TableCell
+  SortButton: typeof TableSortButton
+  Toolbar: typeof TableToolbar
+  Search: typeof TableSearch
+}
+
+const TableRoot = Object.assign(Table, {
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Caption: TableCaption,
+  Row: TableRow,
+  HeadCell: TableHeadCell,
+  Cell: TableCell,
+  SortButton: TableSortButton,
+  Toolbar: TableToolbar,
+  Search: TableSearch
+}) as CompoundTable
+
+export default TableRoot
diff --git a/packages/webkit/src/components/data/table/injection-key.ts b/packages/webkit/src/components/data/table/injection-key.ts
new file mode 100644
index 00000000..47083ede
--- /dev/null
+++ b/packages/webkit/src/components/data/table/injection-key.ts
@@ -0,0 +1,28 @@
+import type { Table as TanstackTable } from '@tanstack/vue-table'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export type TableRowRecord = Record<string, unknown>
+
+export interface TableContext {
+  /** Root data-testid; sub-components derive BEM-suffixed ids from it. */
+  testId: string
+  /** TanStack table instance in data-driven mode; null in composition mode. */
+  table: ComputedRef<TanstackTable<TableRowRecord> | null>
+  /** Records of the currently-selected rows (data-driven mode). */
+  selectedRows: ComputedRef<TableRowRecord[]>
+  /** Count of selected rows. */
+  selectedCount: ComputedRef<number>
+  /** Clears the current row selection. */
+  clearSelection: () => void
+}
+
+export const TableInjectionKey: InjectionKey<TableContext> = Symbol('TableContext')
+
+export interface TableRowGroupContext {
+  /** Body rows highlight on hover; header/footer rows do not. */
+  hoverable: boolean
+  /** Compact density: header cells shrink their height and padding. Set by a compact TableHeader. */
+  compact?: boolean
+}
+
+export const TableRowGroupKey: InjectionKey<TableRowGroupContext> = Symbol('TableRowGroupContext')
diff --git a/packages/webkit/src/components/data/table/package.json b/packages/webkit/src/components/data/table/package.json
new file mode 100644
index 00000000..202f3d20
--- /dev/null
+++ b/packages/webkit/src/components/data/table/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.d.ts",
+  "browser": {
+    "./sfc": "./index.ts"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-body/package.json b/packages/webkit/src/components/data/table/table-body/package.json
new file mode 100644
index 00000000..1703fa6c
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-body/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-body.vue",
+  "module": "./table-body.vue",
+  "types": "./table-body.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-body.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-body/table-body.vue b/packages/webkit/src/components/data/table/table-body/table-body.vue
new file mode 100644
index 00000000..623e620a
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-body/table-body.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { computed, inject, provide, useAttrs } from 'vue'
+
+  import { TableInjectionKey, TableRowGroupKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableBody',
+    inheritAttrs: false
+  })
+
+  provide(TableRowGroupKey, { hoverable: true })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__body` : 'data-table__body')
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="rowgroup"
+    :data-testid="testId"
+    class="flex w-full flex-col [&>[role=row]:last-child]:border-b-0"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-caption/package.json b/packages/webkit/src/components/data/table/table-caption/package.json
new file mode 100644
index 00000000..c7fa8f82
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-caption/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-caption.vue",
+  "module": "./table-caption.vue",
+  "types": "./table-caption.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-caption.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-caption/table-caption.vue b/packages/webkit/src/components/data/table/table-caption/table-caption.vue
new file mode 100644
index 00000000..785fdf38
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-caption/table-caption.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { TableInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableCaption',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__caption` : 'data-table__caption')
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="caption"
+    :data-testid="testId"
+    class="px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-label-sm text-[var(--text-muted)]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-cell/package.json b/packages/webkit/src/components/data/table/table-cell/package.json
new file mode 100644
index 00000000..d520d831
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-cell/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-cell.vue",
+  "module": "./table-cell.vue",
+  "types": "./table-cell.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-cell.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-cell/table-cell.vue b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
new file mode 100644
index 00000000..663e44d0
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+  import { computed, inject, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue'
+
+  import { TableInjectionKey } from '../injection-key'
+
+  export type TableCellKind = 'default' | 'checkbox' | 'action'
+  export type TableCellAlign = 'start' | 'center' | 'end'
+  export type TableCellGrow = 1 | 2 | 3
+  export type TableCellFrozen = 'start' | 'end'
+
+  defineOptions({
+    name: 'TableCell',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** checkbox holds the row checkbox; action holds the row menu trigger. */
+    kind?: TableCellKind
+    /** Text alignment. */
+    align?: TableCellAlign
+    /** Flex weight; the emphasized first column uses 2. */
+    grow?: TableCellGrow
+    /** Pins the column to the start or end edge of the scroll container. */
+    frozen?: TableCellFrozen
+    /** Underlines the cell text to signal it links somewhere. */
+    clickable?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'default',
+    align: 'start',
+    grow: 1,
+    frozen: undefined,
+    clickable: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__cell` : 'data-table__cell')
+  )
+
+  const growAttr = computed<number | null>(() => (props.kind === 'default' ? props.grow : null))
+
+  const cellRef = ref<HTMLElement | null>(null)
+
+  // The cell decides whether a click belongs to it or to the row. A cell that
+  // owns its click — a link/clickable cell, the selection checkbox, or a
+  // row-action control — swallows the click so it never also fires the
+  // row-level click; an inert cell lets it bubble to the row, so a table with
+  // no owning cells stays fully row-clickable. The listener is attached
+  // natively (not via @click) so an inert cell remains a plain, non-interactive
+  // element with no implied keyboard affordance.
+  const ownsClick = computed<boolean>(
+    () => props.clickable || props.kind === 'action' || props.kind === 'checkbox'
+  )
+
+  const stopOwnedClick = (event: MouseEvent) => {
+    if (ownsClick.value) event.stopPropagation()
+  }
+
+  onMounted(() => cellRef.value?.addEventListener('click', stopOwnedClick))
+  onBeforeUnmount(() => cellRef.value?.removeEventListener('click', stopOwnedClick))
+</script>
+
+<template>
+  <div
+    ref="cellRef"
+    v-bind="$attrs"
+    role="cell"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-align="align"
+    :data-grow="growAttr"
+    :data-frozen="frozen ?? null"
+    :data-clickable="clickable || null"
+    class="flex min-h-12 min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] whitespace-nowrap text-label-md text-[var(--text-default)] data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))] data-[clickable]:cursor-pointer data-[clickable]:underline"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-footer/package.json b/packages/webkit/src/components/data/table/table-footer/package.json
new file mode 100644
index 00000000..f9763894
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-footer/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-footer.vue",
+  "module": "./table-footer.vue",
+  "types": "./table-footer.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-footer.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-footer/table-footer.vue b/packages/webkit/src/components/data/table/table-footer/table-footer.vue
new file mode 100644
index 00000000..24fad078
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-footer/table-footer.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { TableInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableFooter',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__footer` : 'data-table__footer')
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="rowgroup"
+    :data-testid="testId"
+    class="flex min-w-full flex-col bg-[var(--bg-surface)] text-[var(--text-muted)] border-t-[length:var(--border-width-default)] border-solid border-[var(--border-default)]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-head-cell/package.json b/packages/webkit/src/components/data/table/table-head-cell/package.json
new file mode 100644
index 00000000..fe93ee05
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-head-cell/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-head-cell.vue",
+  "module": "./table-head-cell.vue",
+  "types": "./table-head-cell.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-head-cell.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
new file mode 100644
index 00000000..7575ed21
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { TableInjectionKey, TableRowGroupKey } from '../injection-key'
+  import TableSortButton from '../table-sort-button/table-sort-button.vue'
+
+  export type TableHeadCellKind = 'default' | 'checkbox' | 'action' | 'slot'
+  export type TableHeadCellAlign = 'start' | 'center' | 'end'
+  export type TableHeadCellGrow = 1 | 2 | 3
+  export type TableHeadCellFrozen = 'start' | 'end'
+  export type SortDirection = 'none' | 'ascending' | 'descending'
+
+  defineOptions({
+    name: 'TableHeadCell',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** checkbox = select-all column; action = 40px header matching an action body cell; slot = free-form. */
+    kind?: TableHeadCellKind
+    /** Renders the sort button and the sort affordance. */
+    sortable?: boolean
+    /** Current sort direction; controlled. */
+    sortDirection?: SortDirection
+    /** Text alignment. */
+    align?: TableHeadCellAlign
+    /** Flex weight; the emphasized first column uses 2. */
+    grow?: TableHeadCellGrow
+    /** Pins the column to the start or end edge of the scroll container. */
+    frozen?: TableHeadCellFrozen
+    /** Renders a drag-to-resize handle on the right edge. */
+    resizable?: boolean
+    /** Whether this column is currently being resized (drag active). */
+    resizing?: boolean
+    /** Pointer handler (mousedown/touchstart) that starts the resize drag. */
+    resizeHandler?: (event: MouseEvent | globalThis.TouchEvent) => void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'default',
+    sortable: false,
+    sortDirection: 'none',
+    align: 'start',
+    grow: 1,
+    frozen: undefined,
+    resizable: false,
+    resizing: false,
+    resizeHandler: undefined
+  })
+
+  const emit = defineEmits<{
+    sort: [direction: 'ascending' | 'descending']
+  }>()
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+  // A compact TableHeader publishes density through the row-group context.
+  const group = inject(TableRowGroupKey, { hoverable: false })
+  const compact = computed<boolean>(() => group.compact === true)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__head-cell` : 'data-table__head-cell')
+  )
+
+  const growAttr = computed<number | null>(() =>
+    props.kind === 'checkbox' || props.kind === 'action' ? null : props.grow
+  )
+
+  const ariaSort = computed<SortDirection | undefined>(() =>
+    props.sortable ? props.sortDirection : undefined
+  )
+
+  const handleSort = (direction: 'ascending' | 'descending') => {
+    emit('sort', direction)
+  }
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="columnheader"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-sortable="sortable || null"
+    :data-sort="sortable ? sortDirection : null"
+    :data-align="align"
+    :data-grow="growAttr"
+    :data-frozen="frozen ?? null"
+    :data-compact="compact || null"
+    :aria-sort="ariaSort"
+    class="group/head relative flex h-11 min-w-0 items-center gap-[var(--spacing-xs)] px-[var(--spacing-sm)] data-[compact]:h-9 data-[compact]:px-[var(--spacing-xs)] text-label-sm text-[var(--text-muted)] data-[align=start]:text-start data-[align=center]:text-center data-[align=end]:text-end data-[align=start]:justify-start data-[align=center]:justify-center data-[align=end]:justify-end data-[grow=1]:flex-[1_0_5rem] data-[grow=2]:flex-[2_0_5rem] data-[grow=3]:flex-[3_0_5rem] data-[kind=checkbox]:w-10 data-[kind=checkbox]:flex-none data-[kind=checkbox]:justify-center data-[kind=checkbox]:px-0 data-[kind=action]:ml-auto data-[kind=action]:w-10 data-[kind=action]:flex-none data-[kind=action]:justify-center data-[kind=action]:px-0 data-[frozen=start]:sticky data-[frozen=start]:left-0 data-[frozen=end]:sticky data-[frozen=end]:right-0 data-[frozen]:z-10 data-[frozen]:bg-[var(--table-row-bg,var(--bg-surface))] data-[frozen=start]:after:pointer-events-none data-[frozen=start]:after:absolute data-[frozen=start]:after:inset-y-0 data-[frozen=start]:after:-right-6 data-[frozen=start]:after:w-6 data-[frozen=start]:after:content-[''] data-[frozen=start]:after:bg-gradient-to-l data-[frozen=start]:after:from-transparent data-[frozen=start]:after:to-[var(--table-row-bg,var(--bg-surface))] data-[frozen=end]:before:pointer-events-none data-[frozen=end]:before:absolute data-[frozen=end]:before:inset-y-0 data-[frozen=end]:before:-left-6 data-[frozen=end]:before:w-6 data-[frozen=end]:before:content-[''] data-[frozen=end]:before:bg-gradient-to-r data-[frozen=end]:before:from-transparent data-[frozen=end]:before:to-[var(--table-row-bg,var(--bg-surface))]"
+  >
+    <slot v-if="kind === 'checkbox' || kind === 'action'" />
+    <template v-else>
+      <span class="min-w-0 flex-1 truncate text-[length:inherit]"><slot /></span>
+      <span
+        v-if="sortable"
+        class="flex h-full shrink-0 items-center justify-center opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover/head:opacity-100 focus-within:opacity-100 group-data-[sort=ascending]/head:opacity-100 group-data-[sort=descending]/head:opacity-100"
+      >
+        <TableSortButton
+          :direction="sortDirection"
+          @toggle="handleSort"
+        />
+      </span>
+    </template>
+    <span
+      v-if="resizable"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize column"
+      :data-resizing="resizing || null"
+      class="absolute inset-y-0 right-0 z-20 w-2 shrink-0 cursor-col-resize touch-none select-none before:absolute before:inset-y-2 before:right-0 before:w-[2px] before:rounded-full before:bg-transparent before:content-[''] before:transition-colors before:duration-150 before:ease-out motion-reduce:before:transition-none hover:before:bg-[var(--border-strong)] data-[resizing]:before:bg-[var(--ring-color)]"
+      @mousedown.stop="resizeHandler"
+      @touchstart.stop="resizeHandler"
+      @click.stop
+    />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-header/package.json b/packages/webkit/src/components/data/table/table-header/package.json
new file mode 100644
index 00000000..4fec218d
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-header/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-header.vue",
+  "module": "./table-header.vue",
+  "types": "./table-header.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-header.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-header/table-header.vue b/packages/webkit/src/components/data/table/table-header/table-header.vue
new file mode 100644
index 00000000..b715497b
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-header/table-header.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import { computed, inject, provide, reactive, useAttrs } from 'vue'
+
+  import { TableInjectionKey, TableRowGroupKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableHeader',
+    inheritAttrs: false
+  })
+
+  type TableHeaderVariant = 'default' | 'compact'
+
+  interface Props {
+    /** Sticks the header to the top of the scroll container. */
+    frozen?: boolean
+    /** `compact` shrinks the header cells' height and padding for a denser header. */
+    variant?: TableHeaderVariant
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    frozen: false,
+    variant: 'default'
+  })
+
+  // Density flows to the head cells through the row-group context, so the
+  // consumer sets it once on the header instead of on every cell. `reactive`
+  // unwraps the computed, keeping `compact` a plain (but live) boolean.
+  provide(
+    TableRowGroupKey,
+    reactive({
+      hoverable: false,
+      compact: computed(() => props.variant === 'compact')
+    })
+  )
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__header` : 'data-table__header')
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="rowgroup"
+    :data-testid="testId"
+    :data-frozen="frozen || null"
+    class="flex w-full flex-col bg-[var(--bg-surface)] data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-20"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-row/package.json b/packages/webkit/src/components/data/table/table-row/package.json
new file mode 100644
index 00000000..764c805d
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-row/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-row.vue",
+  "module": "./table-row.vue",
+  "types": "./table-row.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-row.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-row/table-row.vue b/packages/webkit/src/components/data/table/table-row/table-row.vue
new file mode 100644
index 00000000..8a4189a5
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-row/table-row.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { TableInjectionKey, TableRowGroupKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableRow',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Applies the selected row surface and aria-selected. */
+    selected?: boolean
+    /** Sticks the row to the top of the scroll container (pinned row). */
+    frozen?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    selected: false,
+    frozen: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+  const group = inject(TableRowGroupKey, { hoverable: true })
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__row` : 'data-table__row')
+  )
+</script>
+
+<template>
+  <!-- Native listeners (e.g. @click) fall through via $attrs; row activation is
+       supplementary and keyboard-activatable controls live inside the cells. -->
+  <div
+    v-bind="$attrs"
+    role="row"
+    :data-testid="testId"
+    :data-state="selected ? 'selected' : 'unselected'"
+    :data-selected="selected || null"
+    :data-frozen="frozen || null"
+    :data-hoverable="group.hoverable || null"
+    :aria-selected="selected || undefined"
+    class="flex w-full items-stretch [--table-row-bg:var(--bg-surface)] bg-[var(--table-row-bg)] border-b-[length:var(--border-width-default)] border-solid border-[var(--border-default)] transition-colors duration-150 ease-out motion-reduce:transition-none data-[hoverable]:hover:[--table-row-bg:var(--bg-canvas)] data-[state=selected]:[--table-row-bg:var(--bg-selected)] data-[state=selected]:hover:[--table-row-bg:var(--bg-selected)] data-[frozen]:sticky data-[frozen]:top-0 data-[frozen]:z-10"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table-search/package.json b/packages/webkit/src/components/data/table/table-search/package.json
new file mode 100644
index 00000000..a21d91ea
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-search/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-search.vue",
+  "module": "./table-search.vue",
+  "types": "./table-search.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-search.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-search/table-search.vue b/packages/webkit/src/components/data/table/table-search/table-search.vue
new file mode 100644
index 00000000..43329809
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-search/table-search.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import InputText from '../../../inputs/input-text/input-text.vue'
+  import { TableInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableSearch',
+    inheritAttrs: false
+  })
+
+  withDefaults(
+    defineProps<{
+      /** Placeholder text for the search input. */
+      placeholder?: string
+    }>(),
+    {
+      placeholder: 'Search'
+    }
+  )
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__search` : 'data-table__search')
+  )
+
+  // Context-aware: reads and drives the table's global filter directly — no
+  // wiring needed by the consumer.
+  const globalFilter = computed<string>(() => {
+    const instance = ctx?.table.value
+    return instance ? ((instance.getState().globalFilter as string | undefined) ?? '') : ''
+  })
+  const setFilter = (value: string) => ctx?.table.value?.setGlobalFilter(value)
+</script>
+
+<template>
+  <InputText
+    v-bind="$attrs"
+    :data-testid="testId"
+    :model-value="globalFilter"
+    :placeholder="placeholder"
+    @update:model-value="setFilter"
+  />
+</template>
diff --git a/packages/webkit/src/components/data/table/table-sort-button/package.json b/packages/webkit/src/components/data/table/table-sort-button/package.json
new file mode 100644
index 00000000..4eb61a25
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-sort-button/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-sort-button.vue",
+  "module": "./table-sort-button.vue",
+  "types": "./table-sort-button.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-sort-button.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-sort-button/table-sort-button.vue b/packages/webkit/src/components/data/table/table-sort-button/table-sort-button.vue
new file mode 100644
index 00000000..eeb92ef9
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-sort-button/table-sort-button.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import IconButton from '../../../actions/icon-button/icon-button.vue'
+  import { TableInjectionKey } from '../injection-key'
+
+  export type SortDirection = 'none' | 'ascending' | 'descending'
+
+  defineOptions({
+    name: 'TableSortButton',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Current sort direction shown by the glyph. */
+    direction?: SortDirection
+    /** Hides the button while keeping its layout slot. */
+    hidden?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    direction: 'none',
+    hidden: false
+  })
+
+  const emit = defineEmits<{
+    toggle: [direction: 'ascending' | 'descending']
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__sort-button` : 'data-table__sort-button')
+  )
+
+  const icon = computed<string>(() => {
+    if (props.direction === 'ascending') return 'pi pi-sort-amount-up'
+    if (props.direction === 'descending') return 'pi pi-sort-amount-down'
+    return 'pi pi-sort-alt'
+  })
+
+  const ariaLabel = computed<string>(() => {
+    if (props.direction === 'ascending') return 'Sorted ascending'
+    if (props.direction === 'descending') return 'Sorted descending'
+    return 'Sort column'
+  })
+
+  const handleClick = () => {
+    emit('toggle', props.direction === 'ascending' ? 'descending' : 'ascending')
+  }
+</script>
+
+<template>
+  <IconButton
+    :icon="icon"
+    v-bind="{ ariaLabel }"
+    kind="transparent"
+    size="small"
+    :data-testid="testId"
+    :class="hidden ? 'invisible pointer-events-none' : undefined"
+    @click="handleClick"
+  />
+</template>
diff --git a/packages/webkit/src/components/data/table/table-toolbar/package.json b/packages/webkit/src/components/data/table/table-toolbar/package.json
new file mode 100644
index 00000000..d1f4f2e3
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-toolbar/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./table-toolbar.vue",
+  "module": "./table-toolbar.vue",
+  "types": "./table-toolbar.vue.d.ts",
+  "browser": {
+    "./sfc": "./table-toolbar.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue b/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
new file mode 100644
index 00000000..df4e682a
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table-toolbar/table-toolbar.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { TableInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'TableToolbar',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(TableInjectionKey, null)
+
+  const testId = computed<string>(
+    () =>
+      (attrs['data-testid'] as string | undefined) ??
+      (ctx ? `${ctx.testId}__toolbar-actions` : 'data-table__toolbar-actions')
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    class="flex flex-1 items-center justify-end gap-[var(--spacing-xs)]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/data/table/table.vue b/packages/webkit/src/components/data/table/table.vue
new file mode 100644
index 00000000..a70edd96
--- /dev/null
+++ b/packages/webkit/src/components/data/table/table.vue
@@ -0,0 +1,783 @@
+<script setup lang="ts">
+  import {
+    type ColumnDef,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    type PaginationState,
+    type Row,
+    type RowSelectionState,
+    type SortingState,
+    type Updater,
+    useVueTable,
+    type VisibilityState
+  } from '@tanstack/vue-table'
+  import { computed, provide, ref, useAttrs, useSlots, watch } from 'vue'
+
+  import Checkbox from '../../inputs/checkbox/checkbox.vue'
+  import ScrollArea from '../../layout/scroll-area/scroll-area.vue'
+  import PaginationButton from '../paginator/pagination-button/pagination-button.vue'
+  import Paginator from '../paginator/paginator.vue'
+  import PaginatorInfo from '../paginator/paginator-info/paginator-info.vue'
+  import PaginatorPageSize from '../paginator/paginator-page-size/paginator-page-size.vue'
+  import { TableInjectionKey } from './injection-key'
+  import TableBody from './table-body/table-body.vue'
+  import TableCaption from './table-caption/table-caption.vue'
+  import TableCell from './table-cell/table-cell.vue'
+  import TableFooter from './table-footer/table-footer.vue'
+  import TableHeadCell from './table-head-cell/table-head-cell.vue'
+  import TableHeader from './table-header/table-header.vue'
+  import TableRow from './table-row/table-row.vue'
+
+  type RowRecord = Record<string, unknown>
+
+  export interface TableColumn {
+    /** Column id; falls back to accessorKey. */
+    id?: string
+    /** Field read from each row record. */
+    accessorKey?: string
+    /** Header label (overridden by a `header-<id>` slot). */
+    header?: string
+    /** Allow sorting on this column. */
+    enableSorting?: boolean
+    /** Flex weight; the emphasized first column uses 2. */
+    grow?: 1 | 2 | 3
+    /** Pin this column to the start or end edge. */
+    frozen?: 'start' | 'end'
+    /** Fixed width (px) — needed for a frozen column that precedes another frozen column on the same edge, so sticky offsets can be summed. */
+    width?: number
+    /** Cell alignment. */
+    align?: 'start' | 'center' | 'end'
+    /** Body cell kind (action renders a 40px trailing cell, auto-pinned to the right edge). */
+    kind?: 'default' | 'action'
+    /** Allow drag-to-resize on this column's header (ignored for frozen/action columns). */
+    resizable?: boolean
+  }
+
+  type TableColumnMeta = Pick<TableColumn, 'grow' | 'frozen' | 'align' | 'kind' | 'resizable'>
+
+  defineOptions({
+    name: 'Table',
+    inheritAttrs: false
+  })
+
+  const props = withDefaults(
+    defineProps<{
+      /** Max height (CSS length). Vertical scroll engages only when set smaller than the content; horizontal scroll is always automatic. */
+      maxHeight?: string
+      /** Data-driven mode: row records. */
+      data?: RowRecord[]
+      /** Data-driven mode: column definitions. When set, the table renders itself via TanStack. */
+      columns?: TableColumn[]
+      /** Field used as the stable row id (for selection). */
+      rowKey?: string
+      /** Enable sorting globally (per-column `enableSorting` overrides). */
+      enableSorting?: boolean
+      /** Add a leading selection-checkbox column. */
+      enableRowSelection?: boolean
+      /** Data-driven mode: clicking a row toggles its selection (requires enableRowSelection). */
+      selectOnRowClick?: boolean
+      /** Header density: `compact` shrinks the column-header row's height and padding. */
+      headerVariant?: 'default' | 'compact'
+      /** Render a Paginator in the footer. */
+      paginated?: boolean
+      /** Rows per page when paginated. */
+      pageSize?: number
+      /** v-model:sorting (TanStack SortingState). */
+      sorting?: SortingState
+      /** v-model:rowSelection (TanStack RowSelectionState). */
+      rowSelection?: RowSelectionState
+      /** v-model:columnVisibility (TanStack VisibilityState). */
+      columnVisibility?: VisibilityState
+      /** v-model:globalFilter text. */
+      globalFilter?: string
+      /** v-model:pagination (TanStack PaginationState). */
+      pagination?: PaginationState
+      /** Server-side sorting: emit events, do not sort locally. */
+      manualSorting?: boolean
+      /** Server-side pagination: emit events, do not slice locally. */
+      manualPagination?: boolean
+      /** Server-side filtering: emit events, do not filter locally. */
+      manualFiltering?: boolean
+      /** Total row count for manual pagination. */
+      rowCount?: number
+      /** Rows-per-page options shown in the footer selector. */
+      rowsPerPageOptions?: number[]
+    }>(),
+    {
+      maxHeight: '',
+      data: () => [],
+      columns: () => [],
+      rowKey: 'id',
+      enableSorting: false,
+      enableRowSelection: false,
+      selectOnRowClick: false,
+      headerVariant: 'default',
+      paginated: false,
+      pageSize: 10,
+      sorting: undefined,
+      rowSelection: undefined,
+      columnVisibility: undefined,
+      globalFilter: undefined,
+      pagination: undefined,
+      manualSorting: false,
+      manualPagination: false,
+      manualFiltering: false,
+      rowCount: undefined,
+      rowsPerPageOptions: () => [10, 25, 50, 100]
+    }
+  )
+
+  const emit = defineEmits<{
+    'update:sorting': [value: SortingState]
+    'update:rowSelection': [value: RowSelectionState]
+    'update:columnVisibility': [value: VisibilityState]
+    'update:globalFilter': [value: string]
+    'update:pagination': [value: PaginationState]
+    'row-click': [row: RowRecord]
+  }>()
+
+  defineSlots<{
+    /** Composition mode: scrollable region (TableCaption, TableHeader, TableBody). */
+    default(): unknown
+    /** Title text at the start of the toolbar band. */
+    title(): unknown
+    /** Toolbar action band; scoped with the TanStack table instance in data-driven mode. */
+    toolbar(props?: Record<string, unknown>): unknown
+    /** Active-filter chips row; same table scope as toolbar. */
+    filters(props?: Record<string, unknown>): unknown
+    /** Data-driven caption content, wrapped in TableCaption. */
+    caption(): unknown
+    /** Data-driven empty state when there are no rows. */
+    empty(): unknown
+    /** Footer region below the scroll viewport, auto-rendered when data-driven and paginated. */
+    footer(): unknown
+    /** Per-column slots (data-driven): cell- and header- prefixed names, resolved at runtime. */
+    [name: string]: (props?: Record<string, unknown>) => unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  // Per-column `cell-<id>` / `header-<id>` slots are looked up by a computed name,
+  // which `defineSlots` cannot type as a static key — probe them through the raw
+  // slots record so the dynamic index doesn't trip the typed `$slots`.
+  const slots = useSlots()
+  const hasSlot = (name: string): boolean => Boolean((slots as Record<string, unknown>)[name])
+
+  const testId = computed<string>(
+    () => (attrs['data-testid'] as string | undefined) ?? 'data-table'
+  )
+
+  // ScrollArea (the project's scroll primitive) is the scroll viewport. It only
+  // forwards `class`, so the dynamic max-height is published as a CSS variable on
+  // the root and consumed by a static `max-h-[var(--table-viewport-height)]` class.
+  const viewportHeightVar = computed<Record<string, string> | undefined>(() =>
+    props.maxHeight ? { '--table-viewport-height': props.maxHeight } : undefined
+  )
+
+  const dataDriven = computed<boolean>(() => props.columns.length > 0)
+
+  // Controlled (v-model) with uncontrolled fallback.
+  const internalSorting = ref<SortingState>(props.sorting ?? [])
+  const internalRowSelection = ref<RowSelectionState>(props.rowSelection ?? {})
+  const internalColumnVisibility = ref<VisibilityState>(props.columnVisibility ?? {})
+  const internalGlobalFilter = ref<string>(props.globalFilter ?? '')
+  const internalPagination = ref<PaginationState>(
+    props.pagination ?? { pageIndex: 0, pageSize: props.pageSize }
+  )
+  watch(
+    () => props.sorting,
+    (v) => v && (internalSorting.value = v)
+  )
+  watch(
+    () => props.rowSelection,
+    (v) => v && (internalRowSelection.value = v)
+  )
+  watch(
+    () => props.columnVisibility,
+    (v) => v && (internalColumnVisibility.value = v)
+  )
+  watch(
+    () => props.globalFilter,
+    (v) => v !== undefined && (internalGlobalFilter.value = v)
+  )
+  watch(
+    () => props.pagination,
+    (v) => v && (internalPagination.value = v)
+  )
+  // Keep the uncontrolled pagination state in sync when the pageSize prop
+  // changes after mount; reset to the first page so it can't fall out of range.
+  watch(
+    () => props.pageSize,
+    (size: number) => {
+      if (props.pagination) return
+      internalPagination.value = { pageIndex: 0, pageSize: size }
+    }
+  )
+
+  function applyUpdater<T>(updater: Updater<T>, current: T): T {
+    return typeof updater === 'function' ? (updater as (old: T) => T)(current) : updater
+  }
+
+  const tableColumns = computed<ColumnDef<RowRecord>[]>(() =>
+    props.columns.map((col, index) => ({
+      id: col.id ?? col.accessorKey ?? col.header ?? '',
+      accessorKey: col.accessorKey,
+      header: col.header,
+      enableSorting: col.enableSorting ?? props.enableSorting,
+      size: col.width,
+      meta: {
+        // Default flex weight: the first (emphasized) column gets 2, the rest 1,
+        // so the columns fill the available space proportionally unless a column
+        // sets its own `grow`. Action columns ignore weight (fixed 40px).
+        grow: col.grow ?? (index === 0 ? 2 : 1),
+        frozen: col.frozen,
+        align: col.align,
+        kind: col.kind,
+        resizable: col.resizable
+      } satisfies TableColumnMeta
+    }))
+  )
+
+  const table = useVueTable({
+    get data() {
+      return props.data
+    },
+    get columns() {
+      return tableColumns.value
+    },
+    state: {
+      get sorting() {
+        return props.sorting ?? internalSorting.value
+      },
+      get rowSelection() {
+        return props.rowSelection ?? internalRowSelection.value
+      },
+      get columnVisibility() {
+        return props.columnVisibility ?? internalColumnVisibility.value
+      },
+      get globalFilter() {
+        return props.globalFilter ?? internalGlobalFilter.value
+      },
+      get pagination() {
+        return props.pagination ?? internalPagination.value
+      }
+    },
+    getRowId: (row) => String((row as RowRecord)[props.rowKey] ?? ''),
+    enableRowSelection: () => props.enableRowSelection,
+    manualSorting: props.manualSorting,
+    manualPagination: props.manualPagination,
+    manualFiltering: props.manualFiltering,
+    get rowCount() {
+      return props.rowCount
+    },
+    onSortingChange: (updater: Updater<SortingState>) => {
+      const next = applyUpdater(updater, props.sorting ?? internalSorting.value)
+      internalSorting.value = next
+      emit('update:sorting', next)
+    },
+    onRowSelectionChange: (updater: Updater<RowSelectionState>) => {
+      const next = applyUpdater(updater, props.rowSelection ?? internalRowSelection.value)
+      internalRowSelection.value = next
+      emit('update:rowSelection', next)
+    },
+    onColumnVisibilityChange: (updater: Updater<VisibilityState>) => {
+      const next = applyUpdater(updater, props.columnVisibility ?? internalColumnVisibility.value)
+      internalColumnVisibility.value = next
+      emit('update:columnVisibility', next)
+    },
+    onGlobalFilterChange: (updater: Updater<string>) => {
+      const next = applyUpdater(updater, props.globalFilter ?? internalGlobalFilter.value)
+      internalGlobalFilter.value = next
+      emit('update:globalFilter', next)
+    },
+    onPaginationChange: (updater: Updater<PaginationState>) => {
+      const next = applyUpdater(updater, props.pagination ?? internalPagination.value)
+      internalPagination.value = next
+      emit('update:pagination', next)
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: props.paginated ? getPaginationRowModel() : undefined
+  })
+
+  const headers = computed(() => table.getHeaderGroups()[0]?.headers ?? [])
+  const rows = computed(() => table.getRowModel().rows)
+
+  // --- Column resize (native pointer events) ---------------------------------
+  // The @tanstack/vue-table exception covers sorting / pagination / selection /
+  // visibility — NOT column sizing. Resize is implemented with native pointer/
+  // mouse events writing to a reactive width map keyed by column id. Only the
+  // dragged column's entry ever changes, so a resize never touches the other
+  // columns (PrimeVue "expand" behaviour): that column grows and the table
+  // scrolls horizontally. Drives the body rows' v-memo for live updates.
+  // The lower bound of a drag is the column's own content (header label + the
+  // visible body cells), measured at drag start — see columnContentMinWidth.
+  // This fallback only applies when that measurement can't run (no DOM handle).
+  const RESIZE_FALLBACK_MIN_WIDTH = 40
+  const resizeWidths = ref<Record<string, number>>({})
+  const resizingColumnId = ref<string | null>(null)
+
+  // Shared context exposed via inject so descendant slots/controls can reach the
+  // TanStack instance, the current selection, and clearSelection.
+  const selectedRows = computed<RowRecord[]>(() =>
+    table.getSelectedRowModel().rows.map((row) => row.original)
+  )
+  const selectedCount = computed<number>(() => table.getSelectedRowModel().rows.length)
+  const clearSelection = () => table.resetRowSelection()
+
+  provide(TableInjectionKey, {
+    testId: testId.value,
+    table: computed(() => (dataDriven.value ? table : null)),
+    selectedRows,
+    selectedCount,
+    clearSelection
+  })
+
+  const totalRows = computed<number>(() =>
+    props.manualPagination && props.rowCount !== undefined
+      ? props.rowCount
+      : table.getFilteredRowModel().rows.length
+  )
+  const pageIndex = computed<number>(() => table.getState().pagination.pageIndex)
+  const currentPageSize = computed<number>(() => table.getState().pagination.pageSize)
+  const rangeStart = computed<number>(() =>
+    totalRows.value === 0 ? 0 : pageIndex.value * currentPageSize.value + 1
+  )
+  const rangeEnd = computed<number>(() =>
+    Math.min((pageIndex.value + 1) * currentPageSize.value, totalRows.value)
+  )
+
+  type ColumnLike = { columnDef: { meta?: unknown } }
+  // An action column is always pinned to the trailing (right) edge so the row's
+  // actions stay reachable while the rest of the table scrolls horizontally. The
+  // edge is forced unless the column opts into a different `frozen` explicitly.
+  const metaOf = (column: ColumnLike): TableColumnMeta => {
+    const meta = (column.columnDef.meta as TableColumnMeta | undefined) ?? {}
+    return meta.kind === 'action' && !meta.frozen ? { ...meta, frozen: 'end' } : meta
+  }
+
+  type SortableColumn = { getIsSorted: () => 'asc' | 'desc' | false }
+  const sortDirectionOf = (column: SortableColumn): 'none' | 'ascending' | 'descending' => {
+    const sorted = column.getIsSorted()
+    if (sorted === 'asc') return 'ascending'
+    if (sorted === 'desc') return 'descending'
+    return 'none'
+  }
+
+  // Row click and cell click are distinct concerns, and the decision to swallow
+  // a click belongs to the CELL, not the row. A TableCell that owns its click
+  // (kind="action", kind="checkbox", or clickable) stops propagation itself, so
+  // this row-level click fires only for inert cells. A table whose cells never
+  // stop is therefore fully row-clickable. See table-cell.vue.
+  // When `selectOnRowClick` is set, a click on the inert row area toggles that
+  // row's selection (the checkbox cell already toggles it directly).
+  const onRowClick = (row: Row<RowRecord>) => {
+    if (props.selectOnRowClick && props.enableRowSelection) {
+      row.toggleSelected()
+    }
+    emit('row-click', row.original)
+  }
+
+  // Cumulative sticky offsets so adjacent frozen columns stack instead of overlapping.
+  // 40px = the fixed utility width shared by the checkbox and action columns.
+  const SELECTION_WIDTH = 40
+  const columnId = (c: TableColumn): string => c.id ?? c.accessorKey ?? c.header ?? ''
+  // Effective edge of a column: an action column defaults to the trailing edge
+  // (mirrors metaOf) so the sticky-offset maths sees it as frozen.
+  const frozenEdgeOf = (c: TableColumn): 'start' | 'end' | undefined =>
+    c.frozen ?? (c.kind === 'action' ? 'end' : undefined)
+  // Width a frozen column contributes to a neighbour's sticky offset: its explicit
+  // `width`, or the 40px utility width for an action column (which carries none).
+  const frozenWidthOf = (c: TableColumn): number =>
+    c.width ?? (c.kind === 'action' ? SELECTION_WIDTH : 0)
+  const leftFrozenCols = computed<TableColumn[]>(() =>
+    props.columns.filter((c: TableColumn) => frozenEdgeOf(c) === 'start')
+  )
+  const rightFrozenCols = computed<TableColumn[]>(() =>
+    props.columns.filter((c: TableColumn) => frozenEdgeOf(c) === 'end')
+  )
+  const selectionFrozen = computed<boolean>(
+    () => props.enableRowSelection && leftFrozenCols.value.length > 0
+  )
+
+  const leftOffsetOf = (id: string): number => {
+    let offset = selectionFrozen.value ? SELECTION_WIDTH : 0
+    for (const c of leftFrozenCols.value) {
+      if (columnId(c) === id) break
+      offset += frozenWidthOf(c)
+    }
+    return offset
+  }
+  const rightOffsetOf = (id: string): number => {
+    let offset = 0
+    for (const c of [...rightFrozenCols.value].reverse()) {
+      if (columnId(c) === id) break
+      offset += frozenWidthOf(c)
+    }
+    return offset
+  }
+  const widthOf = (id: string): number | undefined =>
+    props.columns.find((c: TableColumn) => columnId(c) === id)?.width
+  const cellStyleOf = (column: ColumnLike & { id: string }): Record<string, string> | undefined => {
+    const style: Record<string, string> = {}
+    const meta = metaOf(column)
+    // Column width (px). A column is fixed ONLY when it has been resized (a
+    // resizeWidths entry) or declares an explicit `width`; otherwise it has no
+    // inline width and falls back to its `data-[grow]` flex weight, so the
+    // columns distribute across — and fill — the available space. The first drag
+    // of any divider snapshots every flexible column's current width into
+    // resizeWidths (see startResize), freezing the whole row so a resize grows
+    // only the dragged column. The action column keeps its fixed 40px utility
+    // width (never resized).
+    const width =
+      meta.kind === 'action' ? undefined : (resizeWidths.value[column.id] ?? widthOf(column.id))
+    // Fixed width (not min-width) so every row sizes the column identically and
+    // the header lines up with the body — flex-grow would distribute differently per row.
+    // `!important`: a fixed column carries BOTH this inline width and the
+    // `data-[grow=N]:flex-[N_0_5rem]` weight class on the same element. Under a
+    // Tailwind `important: true` config (Storybook, PrimeVue-hosted apps), that
+    // weight class compiles to `flex: N 0 5rem !important` and would otherwise
+    // beat this inline style — dropping the column back into grow/distribute mode,
+    // where a resize redistributes space across siblings instead of growing only
+    // the dragged column. Marking the fixed size important keeps each resized
+    // column independent regardless of the host config.
+    if (width) {
+      style['flex'] = `0 0 ${width}px !important`
+      style['width'] = `${width}px !important`
+    }
+    const frozen = meta.frozen
+    if (frozen === 'start') style['left'] = `${leftOffsetOf(column.id)}px`
+    else if (frozen === 'end') style['right'] = `${rightOffsetOf(column.id)}px`
+    return Object.keys(style).length > 0 ? style : undefined
+  }
+
+  // A column is resizable only when it opts in (`resizable`) and is neither frozen
+  // (its width feeds the sticky offsets) nor the fixed-width action column.
+  const isResizableColumn = (column: ColumnLike & { id: string }): boolean =>
+    metaOf(column).resizable === true && !metaOf(column).frozen && metaOf(column).kind !== 'action'
+
+  // Starting width of a column before any drag: an explicit `width`, else a width
+  // derived from its `grow` weight (the emphasized column starts wider).
+  const initialColumnWidth = (column: ColumnLike & { id: string }): number =>
+    widthOf(column.id) ?? (metaOf(column).grow ?? 1) * 150
+
+  // Natural (max-content) width of a single header/body cell. The cell is cloned
+  // off the live grid and sized purely to its content. The `data-grow` /
+  // `data-frozen` attributes are removed so their Tailwind flex/sticky classes —
+  // which a host `important: true` config emits as `!important` — no longer match
+  // the clone, and the constraint properties are forced `important` inline so the
+  // clone shrinks to its content regardless of the host config. Cloning preserves
+  // arbitrary slot content (links, badges), so the measurement holds for any cell.
+  const measureCellContentWidth = (cellEl: HTMLElement, host: HTMLElement): number => {
+    const clone = cellEl.cloneNode(true) as HTMLElement
+    clone.removeAttribute('data-grow')
+    clone.removeAttribute('data-frozen')
+    clone.querySelectorAll('[role="separator"]').forEach((handle) => handle.remove())
+    clone.style.setProperty('position', 'absolute', 'important')
+    clone.style.setProperty('left', '0', 'important')
+    clone.style.setProperty('top', '0', 'important')
+    clone.style.setProperty('flex', 'none', 'important')
+    clone.style.setProperty('width', 'max-content', 'important')
+    clone.style.setProperty('max-width', 'none', 'important')
+    clone.style.setProperty('visibility', 'hidden', 'important')
+    clone.style.setProperty('pointer-events', 'none', 'important')
+    host.appendChild(clone)
+    const width = clone.getBoundingClientRect().width
+    clone.remove()
+    return width
+  }
+
+  // Lower bound of a column resize: the widest content the column currently
+  // shows — its header label and every visible (rendered) body cell — so a drag
+  // can shrink a column only until its content would clip, never past it. Indices
+  // line up because header and body rows share the same leading checkbox column.
+  const columnContentMinWidth = (headEl: HTMLElement): number => {
+    const tableEl = headEl.closest('[role="table"]') as HTMLElement | null
+    const row = headEl.closest('[role="row"]') as HTMLElement | null
+    const host = tableEl ?? globalThis.document.body
+    const colIndex = row ? Array.from(row.children).indexOf(headEl) : -1
+    const cells: HTMLElement[] =
+      tableEl && colIndex >= 0
+        ? Array.from(tableEl.querySelectorAll<HTMLElement>('[role="row"]'))
+            .map((r) => r.children[colIndex])
+            .filter((c): c is HTMLElement => c instanceof globalThis.HTMLElement)
+        : [headEl]
+    let max = 0
+    for (const cell of cells) max = Math.max(max, measureCellContentWidth(cell, host))
+    return Math.ceil(max) || RESIZE_FALLBACK_MIN_WIDTH
+  }
+
+  // Native pointer resize: capture the pointer X and the column's current width,
+  // then on move write ONLY this column's new width into the reactive map — the
+  // other columns never change. The listeners live on the document so the drag
+  // continues even when the pointer leaves the 3px handle.
+  const startResize = (
+    column: ColumnLike & { id: string },
+    event: MouseEvent | globalThis.TouchEvent
+  ): void => {
+    const pointX = (e: MouseEvent | globalThis.TouchEvent): number =>
+      'touches' in e ? (e.touches[0]?.clientX ?? 0) : e.clientX
+    const target = event.currentTarget as HTMLElement | null
+    const headEl = target?.closest('[role="columnheader"]') as HTMLElement | null
+    // Freeze every flexible column at its current rendered width before the drag.
+    // Until the first drag, un-resized columns are flex-distributed to fill the
+    // space; from now on they become individually fixed, so moving one never
+    // reflows the others. Measured from the header cells (header and body resolve
+    // to the same per-column width). Frozen and action columns are already fixed,
+    // and a column already in resizeWidths keeps its value.
+    const headerRow = headEl?.closest('[role="row"]') as HTMLElement | null
+    if (headerRow) {
+      const headerCells = Array.from(
+        headerRow.querySelectorAll<HTMLElement>('[role="columnheader"]')
+      )
+      const offset = props.enableRowSelection ? 1 : 0
+      const snapshot = { ...resizeWidths.value }
+      headers.value.forEach((header, columnIndex: number) => {
+        const m = metaOf(header.column)
+        if (m.frozen || m.kind === 'action' || snapshot[header.column.id] != null) return
+        const cell = headerCells[columnIndex + offset]
+        if (cell) snapshot[header.column.id] = Math.round(cell.getBoundingClientRect().width)
+      })
+      resizeWidths.value = snapshot
+    }
+    const startX = pointX(event)
+    const startWidth =
+      resizeWidths.value[column.id] ??
+      headEl?.getBoundingClientRect().width ??
+      initialColumnWidth(column)
+    // Measure the content floor once, up front: the column's DOM doesn't change
+    // during a drag, so re-measuring on every move would only cost reflows.
+    const minWidth = headEl ? columnContentMinWidth(headEl) : RESIZE_FALLBACK_MIN_WIDTH
+    resizingColumnId.value = column.id
+    const doc = globalThis.document
+    const onMove = (moveEvent: MouseEvent | globalThis.TouchEvent): void => {
+      moveEvent.preventDefault()
+      const next = Math.max(minWidth, Math.round(startWidth + (pointX(moveEvent) - startX)))
+      resizeWidths.value = { ...resizeWidths.value, [column.id]: next }
+    }
+    const onEnd = (): void => {
+      resizingColumnId.value = null
+      doc.removeEventListener('mousemove', onMove)
+      doc.removeEventListener('mouseup', onEnd)
+      doc.removeEventListener('touchmove', onMove)
+      doc.removeEventListener('touchend', onEnd)
+    }
+    doc.addEventListener('mousemove', onMove)
+    doc.addEventListener('mouseup', onEnd)
+    doc.addEventListener('touchmove', onMove, { passive: false })
+    doc.addEventListener('touchend', onEnd)
+    event.preventDefault()
+  }
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="table"
+    :data-testid="testId"
+    :style="viewportHeightVar"
+    class="flex w-full flex-col overflow-hidden rounded-[var(--shape-elements)] border-[length:var(--border-width-default)] border-solid border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)] text-body-sm"
+  >
+    <div
+      v-if="$slots['title'] || $slots['toolbar'] || $slots['filters']"
+      role="presentation"
+      :data-testid="`${testId}__toolbar`"
+      class="flex flex-col gap-[var(--spacing-xs)] border-b-[length:var(--border-width-default)] border-solid border-[var(--border-default)] px-[var(--spacing-sm)] py-[var(--spacing-xs)]"
+    >
+      <div
+        v-if="$slots['title'] || $slots['toolbar']"
+        class="flex items-center gap-[var(--spacing-sm)]"
+      >
+        <div
+          v-if="$slots['title']"
+          class="text-label-md text-[var(--text-default)]"
+        >
+          <slot name="title" />
+        </div>
+        <div
+          v-if="$slots['toolbar']"
+          class="flex flex-1 items-center justify-end gap-[var(--spacing-xs)]"
+        >
+          <slot
+            name="toolbar"
+            :table="dataDriven ? table : undefined"
+          />
+        </div>
+      </div>
+      <div
+        v-if="$slots['filters']"
+        class="flex flex-wrap items-center gap-[var(--spacing-xs)]"
+      >
+        <slot
+          name="filters"
+          :table="dataDriven ? table : undefined"
+        />
+      </div>
+    </div>
+
+    <TableCaption v-if="dataDriven && $slots['caption']">
+      <slot name="caption" />
+    </TableCaption>
+
+    <ScrollArea
+      orientation="both"
+      :data-testid="`${testId}__viewport`"
+      class="min-w-0 max-h-[var(--table-viewport-height)]"
+    >
+      <!-- Single width-defining container: the header and body share ONE
+           max-content box, so every row resolves to the same width and the
+           header columns stay aligned with the body columns. Without it each
+           rowgroup sizes to its own content (short labels vs. long cell text)
+           and the two drift apart once the table overflows horizontally. -->
+      <div
+        role="presentation"
+        class="flex w-max min-w-full flex-col"
+      >
+        <template v-if="dataDriven">
+          <TableHeader
+            frozen
+            :variant="headerVariant"
+          >
+            <TableRow>
+              <TableHeadCell
+                v-if="enableRowSelection"
+                kind="checkbox"
+                :frozen="selectionFrozen ? 'start' : undefined"
+              >
+                <Checkbox
+                  binary
+                  :model-value="table.getIsAllRowsSelected()"
+                  aria-label="Select all rows"
+                  @update:model-value="(v) => table.toggleAllRowsSelected(!!v)"
+                />
+              </TableHeadCell>
+              <TableHeadCell
+                v-for="header in headers"
+                :key="header.id"
+                :kind="metaOf(header.column).kind ?? 'default'"
+                :grow="metaOf(header.column).grow ?? 1"
+                :align="metaOf(header.column).align ?? 'start'"
+                :frozen="metaOf(header.column).frozen"
+                :style="cellStyleOf(header.column)"
+                :sortable="header.column.getCanSort()"
+                :sort-direction="sortDirectionOf(header.column)"
+                :resizable="isResizableColumn(header.column)"
+                :resizing="resizingColumnId === header.column.id"
+                :resize-handler="(event) => startResize(header.column, event)"
+                @sort="(direction) => header.column.toggleSorting(direction === 'descending')"
+              >
+                <slot
+                  v-if="hasSlot('header-' + header.column.id)"
+                  :name="'header-' + header.column.id"
+                  :column="header.column"
+                />
+                <template v-else>{{ header.column.columnDef.header }}</template>
+              </TableHeadCell>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            <TableRow
+              v-for="row in rows"
+              :key="row.id"
+              v-memo="[row.getIsSelected(), row.original, resizeWidths]"
+              :selected="row.getIsSelected()"
+              @click="onRowClick(row)"
+            >
+              <TableCell
+                v-if="enableRowSelection"
+                kind="checkbox"
+                :frozen="selectionFrozen ? 'start' : undefined"
+              >
+                <Checkbox
+                  binary
+                  :model-value="row.getIsSelected()"
+                  aria-label="Select row"
+                  @update:model-value="(v) => row.toggleSelected(!!v)"
+                />
+              </TableCell>
+              <TableCell
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :style="cellStyleOf(cell.column)"
+                :grow="metaOf(cell.column).grow ?? 1"
+                :align="metaOf(cell.column).align ?? 'start'"
+                :frozen="metaOf(cell.column).frozen"
+                :kind="metaOf(cell.column).kind ?? 'default'"
+              >
+                <slot
+                  v-if="hasSlot('cell-' + cell.column.id)"
+                  :name="'cell-' + cell.column.id"
+                  :row="row.original"
+                  :value="cell.getValue()"
+                />
+                <span
+                  v-else
+                  class="min-w-0 flex-1 truncate"
+                  >{{ cell.getValue() }}</span
+                >
+              </TableCell>
+            </TableRow>
+
+            <TableRow v-if="rows.length === 0">
+              <TableCell>
+                <slot name="empty">No data</slot>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </template>
+
+        <slot v-else />
+      </div>
+    </ScrollArea>
+
+    <TableFooter v-if="dataDriven && paginated">
+      <div class="flex items-center px-[var(--spacing-sm)] py-[var(--spacing-xs)]">
+        <Paginator class="w-full">
+          <template #info>
+            <PaginatorInfo>
+              Showing {{ rangeStart }} to {{ rangeEnd }} of {{ totalRows }} entries
+            </PaginatorInfo>
+          </template>
+          <PaginationButton
+            kind="previous"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
+          >
+            Previous
+          </PaginationButton>
+          <PaginationButton
+            v-for="n in table.getPageCount()"
+            :key="n"
+            kind="number"
+            :selected="pageIndex === n - 1"
+            @click="table.setPageIndex(n - 1)"
+          >
+            {{ n }}
+          </PaginationButton>
+          <PaginationButton
+            kind="next"
+            :disabled="!table.getCanNextPage()"
+            @click="table.nextPage()"
+          >
+            Next
+          </PaginationButton>
+          <template #controls>
+            <PaginatorPageSize
+              :model-value="currentPageSize"
+              :options="rowsPerPageOptions"
+              @update:model-value="(value) => table.setPageSize(value)"
+            />
+          </template>
+        </Paginator>
+      </div>
+    </TableFooter>
+    <slot
+      v-else-if="!dataDriven"
+      name="footer"
+    />
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24863a2c..bfa6c67b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -345,6 +345,9 @@ importers:
       '@aziontech/theme':
         specifier: ^2.3.2
         version: 2.3.2(typescript@6.0.3)(yaml@2.8.3)
+      '@tanstack/vue-table':
+        specifier: ^8.21.3
+        version: 8.21.3(vue@3.5.33(typescript@6.0.3))
       '@vueuse/core':
         specifier: ^10.11.1
         version: 10.11.1(vue@3.5.33(typescript@6.0.3))
@@ -2423,6 +2426,16 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/vue-table@8.21.3':
+    resolution: {integrity: sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -9617,6 +9630,13 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.19(yaml@2.8.3)
 
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/vue-table@8.21.3(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      vue: 3.5.33(typescript@6.0.3)
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.29.0

From 7f2e455f6ee7f22b8c99b707c0ca952eb3e6ec06 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 22 Jun 2026 09:47:03 -0300
Subject: [PATCH 2/4] [ENG-46087] chore: update component-pipeline rules and
 storybook/eslint tooling

- Add the compound-api rule; expand the dependencies rule (the @tanstack/vue-table
  exception) and the component-scaffold skill for the Table/Paginator pipeline.
- Refresh the spec template, eslint config, and Storybook main config.
---
 .claude/rules/compound-api.md              | 108 +++++++++++++++++++++
 .claude/rules/dependencies.md              |  11 ++-
 .claude/skills/component-scaffold/SKILL.md |  49 ++++++++--
 .specs/_template.md                        |  53 +++++++---
 apps/storybook/.storybook/main.js          |  19 +++-
 eslint.config.js                           |   3 +
 6 files changed, 218 insertions(+), 25 deletions(-)
 create mode 100644 .claude/rules/compound-api.md

diff --git a/.claude/rules/compound-api.md b/.claude/rules/compound-api.md
new file mode 100644
index 00000000..d08e27bb
--- /dev/null
+++ b/.claude/rules/compound-api.md
@@ -0,0 +1,108 @@
+# Rule: compound API — composition first, props for data, names from anatomy
+
+Composition (`structure: composition`) components in the webkit layer expose a **compound API**: every public sub-component is importable on its own **and** attached to the root for dot-notation (`<Table.Row>`, `<Paginator.Button>`). This rule fixes how that API is shaped, named, and typed so every composition component reads the same way.
+
+It rests on three decisions, in priority order:
+
+1. **Anatomy is elements, not props.** The structural parts of a component (where things go) are sub-components the consumer composes by hand. Props are for **bulk data** (the data-driven `data` + `columns` model) and **scalar configuration** (`maxHeight`, `paginated`, `pageSize`) — never for things that have the shape of a slot.
+2. **Shared state flows through `provide`/`inject`,** surfaced as **context-aware sub-components** so the consumer wires nothing. `<Table.Search>` reads and drives the table's global filter through the injected context; it takes no `model-value` / `@update`.
+3. **Names come from the component's own anatomy,** not from a convention copied between components. `<Table.SortButton>`, not `<Table.Trigger>`.
+
+## The compound API shape
+
+Each composition component ships an **`index.ts`** next to the root `.vue`. The root is the default export with the sub-components attached via `Object.assign`. Because it is a `.ts` file, `vue-tsc` generates the adjacent `index.d.ts` at build time — so `<Table.Row>` is fully typed.
+
+```ts
+// index.ts — one source of truth (runtime + the type vue-tsc derives from it).
+import Table from './table.vue'
+import TableRow from './table-row/table-row.vue'
+import TableCell from './table-cell/table-cell.vue'
+// ...one import per public sub-component
+
+export default Object.assign(Table, {
+  Row: TableRow,
+  Cell: TableCell
+  // ...
+})
+```
+
+`Object.assign` returns `typeof Table & { Row: ..., Cell: ... }`, so the generated `index.d.ts` types `<Table.Row>` / `<Table.Cell>` with no manual annotation. **Do not hand-write `index.d.ts`** — `.d.ts` is gitignored (a build artifact); a hand-written one is never committed, and `vue-tsc` cannot derive types from a plain `index.js` (the package does not enable `allowJs`). The index must be `.ts`.
+
+Both forms stay available to the consumer:
+
+```vue
+<script setup>
+import Table from '@aziontech/webkit/data/table'        // compound — leads the docs
+import TableRow from '@aziontech/webkit/data/table-row'  // standalone — for tree-shaking
+</script>
+
+<template>
+  <Table>
+    <Table.Header><Table.Row><Table.HeadCell>Name</Table.HeadCell></Table.Row></Table.Header>
+  </Table>
+</template>
+```
+
+The dot-notation **must** use a PascalCase root binding (`Table`). `table` (lowercase) collides with the native `<table>` element and will not resolve to the component.
+
+## Wiring rules (package.json + exports)
+
+- **Root local `package.json`** points at the `.ts` source (types at the generated `.d.ts`):
+  ```json
+  { "main": "./index.ts", "module": "./index.ts", "types": "./index.d.ts", "browser": { "./sfc": "./index.ts" }, "sideEffects": ["*.vue"] }
+  ```
+- **Root export** in `packages/webkit/package.json#exports` points the component's public path at `index.ts` (not the root `.vue`):
+  ```json
+  "./data/table": "./src/components/data/table/index.ts"
+  ```
+- **Sub-component exports stay flat and unchanged** — one entry per public sub-component pointing at its `.vue` (`"./data/table-row": ".../table-row/table-row.vue"`).
+- **The package ships source and is consumed as source** (the exports map points at `./src/...`, and `.vue` files already import `.ts` such as `injection-key.ts`). A `.ts` index is therefore safe — the consumer's build transpiles it the same way it transpiles every `.vue` and the shared `injection-key.ts`. `.d.ts` files are gitignored; `build:dts` regenerates them.
+
+## Naming — anatomy, not generic convention
+
+The members of the compound mirror **that component's** real anatomy. Do not copy a part name from another component because it exists there.
+
+| Concern | Correct | Wrong |
+|---|---|---|
+| A part that is structural | `Header`, `Body`, `Row`, `Cell` | — |
+| A control that toggles state but opens nothing | `SortButton` (says what it does) | `Trigger` (it opens no `Content`) |
+| A part that opens a paired overlay with `open`/`closed` + `aria-expanded` | `Trigger` + `Content` | naming it after the table/list it sits in |
+
+`Trigger` / `Content` / `Portal` belong to **overlay / disclosure** components (dropdown, dialog, popover) — anything with `data-state="open|closed"`. A component with no open/close state has **no** `Trigger`. When a non-overlay component needs an overlay (row-action menu, filter popover), it **composes** the overlay component; the trigger comes from that overlay, not from the host's compound.
+
+## Elements vs props — the anti-pattern
+
+Anything slot-shaped stays a slot/sub-component; do not collapse it into a config array.
+
+```vue
+<!-- ✅ Compose real elements -->
+<template #toolbar>
+  <IconButton icon="pi pi-filter" />
+  <Table.Search placeholder="Search" />
+</template>
+
+<!-- ❌ Config-array for UI — inextensible on the first customization -->
+<Table :toolbar-actions="[{ icon: 'pi pi-filter' }, { type: 'search' }]" />
+```
+
+Repeated **data** is the one thing that earns props (`:data` + `:columns`) — hand-authoring N rows as elements is the wrong trade. That data-driven mode renders through the same sub-components (our markup / tokens / a11y); it does not bypass them.
+
+## When a sub-component earns its existence
+
+Interactivity alone does not justify a sub-component. A clickable row is `@click` fallthrough (or a `row-click` event in data-driven mode); a clickable cell is a `clickable` prop + composed content. A part becomes a sub-component only when it owns enough of its **own** markup, a11y, or state to stand alone (`SortButton`: glyph + three sort states + focus ring + touch target).
+
+## Hard prohibitions
+
+- Do not export composition sub-components without also attaching them to the root compound (`index.ts` via `Object.assign`).
+- Do not make the index a plain `index.js` — `vue-tsc` cannot derive types from it (no `allowJs`), so `<Root.Part>` ends up untyped. It must be `index.ts`.
+- Do not hand-write `index.d.ts` — it is gitignored and regenerated by `build:dts` from `index.ts`. Point the root `types` at the generated `index.d.ts`.
+- Do not invent a `Trigger` (or any overlay part name) on a component that has no `data-state="open|closed"`.
+- Do not turn a slot-shaped concern into a prop (config arrays of UI). Anatomy is elements; props are data + scalar config.
+- Do not require the consumer to wire shared state by hand when a context-aware sub-component can read it from `inject`.
+
+## Enforcement
+
+- `scaffolder` emits `index.ts` for every `structure: composition` component and points the local `package.json` `main`/`module` at `index.ts`, `types` at the generated `index.d.ts` (see [`.claude/skills/component-scaffold/SKILL.md`](../skills/component-scaffold/SKILL.md)).
+- The spec's `## Usage` block (composition) **leads with the compound dot-notation** form; the standalone imports are documented as the tree-shaking alternative. See [`.specs/_template.md`](../../.specs/_template.md).
+- `validate-references.mjs` blocks any phantom `@aziontech/webkit/*` import; the standalone sub-component paths must exist in `packages/webkit/package.json#exports`.
+- Sub-agent prompts inject this rule alongside [`no-invention.md`](./no-invention.md), [`styling.md`](./styling.md), [`dependencies.md`](./dependencies.md), and [`migration.md`](./migration.md). Any deviation surfaces as `BLOCKED:` and stops the run.
diff --git a/.claude/rules/dependencies.md b/.claude/rules/dependencies.md
index bb0cb88a..7622b983 100644
--- a/.claude/rules/dependencies.md
+++ b/.claude/rules/dependencies.md
@@ -23,6 +23,7 @@ The webkit layer **must not** depend on external libraries for positioning, anch
 - **`@vueuse/core`** — small reactive utilities (e.g. `useElementVisibility`). **Not** `@vueuse/motion`.
 - **PrimeVue** — only as wrapped via `core/primevue/*`. New components prefer the webkit layer with no PrimeVue dependency.
 - **VeeValidate** — only inside `core/form/*` per existing pattern.
+- **`@tanstack/vue-table`** — headless table state engine (sorting, pagination, row selection, column models) **only** inside the single `data/table` component's data-driven mode (`data` + `columns`); `data/data-table` is an alias of `data/table`. Granted via the **Exceptions** process below. This is `@tanstack/vue-table` / `@tanstack/table-core` (headless logic) — **not** `@tanstack/virtual` (scroll virtualization), which remains forbidden in the table above.
 
 ## How to anchor / position without a lib
 
@@ -70,4 +71,12 @@ BLOCKED: forbidden dependency <name>. Use CSS + tokens per .claude/rules/depende
 
 ## Exceptions
 
-There are none today. If a future component genuinely cannot be built without an external lib (e.g. an embedded code editor like Monaco), it requires (a) a written rationale in the spec's **Purpose** section, (b) explicit human approval, and (c) an entry in this file's **Allowed** section.
+If a future component genuinely cannot be built without an external lib (e.g. an embedded code editor like Monaco), it requires (a) a written rationale in the spec's **Purpose** section, (b) explicit human approval, and (c) an entry in this file's **Allowed** section.
+
+### Granted exceptions
+
+| Lib | Scope | Rationale | Approved |
+|---|---|---|---|
+| `@tanstack/vue-table` (`@tanstack/table-core`) | `data/table` only (data-driven mode) | A correct, accessible, headless table state engine (sorting / pagination / row selection / column visibility, client- and server-side) is large surface to own in-house and is a pure-logic library — it ships **no** markup, styles, positioning, or animation, so it does not fight DESIGN.md. Rendering stays 100% in our own `data/table` sub-components (our tokens, our a11y). Rationale recorded in `.specs/table.md` § Purpose (added when the data-driven mode lands). | Human-approved 2026-06-15 |
+
+> The exception is **narrow**: `@tanstack/vue-table` is permitted only as the state engine behind the single `data/table` component. Do not import it in other components, and do not pull in `@tanstack/virtual` or any other `@tanstack/*` package without a new exception row.
diff --git a/.claude/skills/component-scaffold/SKILL.md b/.claude/skills/component-scaffold/SKILL.md
index 09e55276..8a101322 100644
--- a/.claude/skills/component-scaffold/SKILL.md
+++ b/.claude/skills/component-scaffold/SKILL.md
@@ -15,7 +15,8 @@ Convert an approved `.specs/<name>.md` into:
 - `packages/webkit/src/components/webkit/<category>/<name>/package.json` for the root component.
 - (Composition only) **One folder per sub-component** under the root component directory — `<name>/<name>-<part>/<name>-<part>.vue` plus a sibling `<name>/<name>-<part>/package.json`. The full file name is preserved (`dialog-trigger.vue`, not `index.vue`) so error traces and editor breadcrumbs are unambiguous.
 - (Composition only) `packages/webkit/src/components/webkit/<category>/<name>/injection-key.ts` at the root level (shared by every sub-component).
-- New entry/entries in `packages/webkit/package.json#exports` — one per public component (root + each public sub-component). The public path keeps the short, flat form (`./overlay/dialog-trigger`) regardless of the folder nesting.
+- (Composition only) `packages/webkit/src/components/webkit/<category>/<name>/index.ts` — the **compound API** that attaches every sub-component to the root (`<Root.Part>`) via `Object.assign`; because it is a `.ts` file, `vue-tsc` generates the adjacent `index.d.ts` (do not hand-write it — `.d.ts` is gitignored). See [`.claude/rules/compound-api.md`](../../rules/compound-api.md).
+- New entry/entries in `packages/webkit/package.json#exports` — one per public component (root + each public sub-component). The public path keeps the short, flat form (`./overlay/dialog-trigger`) regardless of the folder nesting. For composition, the **root** export points at `index.ts`, not the root `.vue`.
 
 Nothing else. The story, the Code Connect file, and the validation pass live in other skills.
 
@@ -24,7 +25,8 @@ Nothing else. The story, the Code Connect file, and the validation pass live in
 ```
 packages/webkit/src/components/webkit/overlay/dialog/
 ├── dialog.vue                          # root
-├── package.json                        # root package
+├── index.ts                            # compound (Object.assign → Dialog.Trigger, ...); vue-tsc emits index.d.ts
+├── package.json                        # root package (main/module → ./index.ts, types → ./index.d.ts)
 ├── injection-key.ts                    # shared InjectionKey<DialogContext>
 ├── dialog-trigger/
 │   ├── dialog-trigger.vue
@@ -67,7 +69,7 @@ packages/webkit/src/components/webkit/actions/button/
 
 - The full text of `.specs/<name>.md` (verbatim).
 - The Constraints block (verbatim).
-- [`.claude/rules/no-invention.md`](../../rules/no-invention.md), [`.claude/docs/COMPONENT_REQUIREMENTS.md`](../../docs/COMPONENT_REQUIREMENTS.md), [`.claude/docs/COMPONENT_REQUIREMENTS.md`](../../docs/COMPONENT_REQUIREMENTS.md), [`.claude/docs/DESIGN.md`](../../docs/DESIGN.md).
+- [`.claude/rules/no-invention.md`](../../rules/no-invention.md), [`.claude/rules/compound-api.md`](../../rules/compound-api.md) (composition only), [`.claude/docs/COMPONENT_REQUIREMENTS.md`](../../docs/COMPONENT_REQUIREMENTS.md), [`.claude/docs/DESIGN.md`](../../docs/DESIGN.md).
 - The canonical files for cross-reference (read-only):
   - `packages/webkit/src/components/webkit/actions/button/button.vue`
   - `packages/webkit/src/components/webkit/actions/icon-button/icon-button.vue`
@@ -190,8 +192,26 @@ packages/webkit/src/components/webkit/actions/button/
 
    Root `.vue` imports it via `import { DialogInjectionKey } from './injection-key'`. Sub-components import it via `import { DialogInjectionKey } from '../injection-key'`.
 
+4b. **(Composition only) Write the compound `index.ts`** at the root level (sibling of `<name>.vue`). The root is the default export with every public sub-component attached via `Object.assign`. Member names mirror the spec's Sub-components section — strip the `<name>-` prefix and PascalCase (`dialog-trigger` → `Trigger`). Use a generic name only when the spec does (`SortButton`, not `Trigger`, when the part opens no `Content`). See [`.claude/rules/compound-api.md`](../../rules/compound-api.md).
+
+   ```ts
+   // index.ts — one source of truth; vue-tsc derives index.d.ts from it.
+   import Dialog from './dialog.vue'
+   import DialogTrigger from './dialog-trigger/dialog-trigger.vue'
+   import DialogContent from './dialog-content/dialog-content.vue'
+
+   export default Object.assign(Dialog, {
+     Trigger: DialogTrigger,
+     Content: DialogContent
+   })
+   ```
+
+   **The index is `.ts`, not `.js`** — `vue-tsc` cannot derive declarations from a plain `.js` (no `allowJs`), so `<Dialog.Trigger>` would be untyped. **Do not hand-write `index.d.ts`** — it is gitignored and regenerated by `build:dts`. The package is consumed as source (the exports map points at `./src/...`, and `.vue` files already import `.ts` like `injection-key.ts`), so the consumer transpiles `index.ts` the same way.
+
 5. **Write `package.json`** for the **root** component:
 
+   **Monolithic root** points at the `.vue`:
+
    ```json
    {
      "name": "@aziontech/webkit-<category>-<name>",
@@ -203,6 +223,19 @@ packages/webkit/src/components/webkit/actions/button/
    }
    ```
 
+   **Composition root** points at the compound `index.ts` (types at the generated `index.d.ts`), so the consumer gets `<Root.Part>` typed:
+
+   ```json
+   {
+     "name": "@aziontech/webkit-<category>-<name>",
+     "main": "./index.ts",
+     "module": "./index.ts",
+     "types": "./index.d.ts",
+     "browser": { "./sfc": "./index.ts" },
+     "sideEffects": ["*.vue"]
+   }
+   ```
+
    **(Composition only) Also write one `package.json` per sub-component folder** (sibling of the sub-component's `.vue`):
 
    ```json
@@ -218,8 +251,10 @@ packages/webkit/src/components/webkit/actions/button/
 
 6. **Update `packages/webkit/package.json#exports`** — add one entry per public component (root + each public sub-component) preserving alphabetical order inside the category. The **public export path stays flat** (`./<category>/<name>-<part>`) so consumers don't see the folder nesting; only the right-hand side changes:
 
+   The **composition root** points at `index.ts` (the compound); monolithic roots point at `<name>.vue`:
+
    ```json
-   "./<category>/<name>": "./src/components/webkit/<category>/<name>/<name>.vue",
+   "./<category>/<name>": "./src/components/webkit/<category>/<name>/index.ts",
    "./<category>/<name>-trigger": "./src/components/webkit/<category>/<name>/<name>-trigger/<name>-trigger.vue",
    "./<category>/<name>-content": "./src/components/webkit/<category>/<name>/<name>-content/<name>-content.vue"
    ```
@@ -227,7 +262,7 @@ packages/webkit/src/components/webkit/actions/button/
    Concrete example for a new `popover` composition component:
 
    ```json
-   "./overlay/popover": "./src/components/webkit/overlay/popover/popover.vue",
+   "./overlay/popover": "./src/components/webkit/overlay/popover/index.ts",
    "./overlay/popover-trigger": "./src/components/webkit/overlay/popover/popover-trigger/popover-trigger.vue",
    "./overlay/popover-content": "./src/components/webkit/overlay/popover/popover-content/popover-content.vue"
    ```
@@ -241,6 +276,7 @@ packages/webkit/src/components/webkit/actions/button/
 ## Rules
 
 - Every prop, event, slot, and sub-component MUST come from the spec — no inventions. (`validate-spec-compliance.mjs` enforces this on Write; it will reject the run if you stray.)
+- (Composition only) Emit the compound `index.ts` (vue-tsc generates `index.d.ts`; never hand-write it) and point the root `package.json` `main`/`module` → `index.ts`, `types` → `index.d.ts`, and the root export → `index.ts`; member names mirror the component's anatomy. Never invent overlay part names (`Trigger`/`Content`) on a component with no open/closed state. See [`.claude/rules/compound-api.md`](../../rules/compound-api.md).
 - Use the canonicals (`button.vue`, `card-pricing.vue`) as the **shape** reference — but substitute spec content, never copy spec content from a canonical.
 - All visual tokens come from [`.claude/docs/DESIGN.md`](../../docs/DESIGN.md). No HEX, no Tailwind palette, no raw typography.
 - TypeScript only (`<script setup lang="ts">`); no `any`; no `@ts-ignore`; no `class` in `defineProps`.
@@ -282,7 +318,8 @@ packages/webkit/src/components/webkit/actions/button/
 - [ ] Root `package.json` written.
 - [ ] Composition: every sub-component is **its own folder** under the component root — `<name>/<name>-<part>/<name>-<part>.vue` + `<name>/<name>-<part>/package.json`.
 - [ ] Composition: `injection-key.ts` written at the root level (sibling of `<name>.vue`), not inside any sub-component folder. Root imports it via `./injection-key`; sub-components via `../injection-key`.
-- [ ] New entries added to `packages/webkit/package.json#exports`. Public paths stay flat (`./<category>/<name>-<part>`); right-hand paths reflect the folder nesting.
+- [ ] Composition: `index.ts` written at the root level (sibling of `<name>.vue`), attaching every sub-component to the root via `Object.assign` (no hand-written `index.d.ts` — vue-tsc generates it); root `package.json` points `main`/`module` → `./index.ts` and `types` → `./index.d.ts`. Member names mirror the spec's anatomy (no invented `Trigger`/`Content` on a non-overlay component).
+- [ ] New entries added to `packages/webkit/package.json#exports`. Public paths stay flat (`./<category>/<name>-<part>`); right-hand paths reflect the folder nesting. The composition root export points at `index.ts`.
 - [ ] No HEX / Tailwind palette / raw typography / `any` / `@ts-ignore`.
 - [ ] `defineOptions.name` is PascalCase and matches the directory.
 - [ ] `data-testid` fallback equals `'<category>-<name>'` on the root and `'<category>-<name>__<part>'` on each sub-component.
diff --git a/.specs/_template.md b/.specs/_template.md
index 75600f1c..2c925b8a 100644
--- a/.specs/_template.md
+++ b/.specs/_template.md
@@ -43,34 +43,46 @@ import MyComponent from '@aziontech/webkit/<category>/<name>'
 ```
 
 <!-- Composition example (structure: composition):
+     LEAD with the compound dot-notation form — one import of the root, every
+     sub-component reached as `<Root.Part>`. The standalone imports remain
+     available (and are the tree-shaking path) but the docs lead with compound.
+     The root binding MUST be PascalCase (`Dialog`); a lowercase root would
+     collide with a native element and not resolve. See
+     `.claude/rules/compound-api.md`.
 
 ```vue
 <script setup>
 import Dialog from '@aziontech/webkit/overlay/dialog'
-import DialogTrigger from '@aziontech/webkit/overlay/dialog-trigger'
-import DialogContent from '@aziontech/webkit/overlay/dialog-content'
-import DialogTitle from '@aziontech/webkit/overlay/dialog-title'
-import DialogDescription from '@aziontech/webkit/overlay/dialog-description'
-import DialogClose from '@aziontech/webkit/overlay/dialog-close'
 </script>
 
 <template>
   <Dialog>
-    <DialogTrigger>Open</DialogTrigger>
-    <DialogContent>
-      <DialogTitle>Confirm action</DialogTitle>
-      <DialogDescription>This cannot be undone.</DialogDescription>
-      <DialogClose>Cancel</DialogClose>
-    </DialogContent>
+    <Dialog.Trigger>Open</Dialog.Trigger>
+    <Dialog.Content>
+      <Dialog.Title>Confirm action</Dialog.Title>
+      <Dialog.Description>This cannot be undone.</Dialog.Description>
+      <Dialog.Close>Cancel</Dialog.Close>
+    </Dialog.Content>
   </Dialog>
 </template>
 ```
+
+Tree-shaking alternative — the same sub-components as standalone imports:
+
+```vue
+<script setup>
+import Dialog from '@aziontech/webkit/overlay/dialog'
+import DialogTrigger from '@aziontech/webkit/overlay/dialog-trigger'
+import DialogContent from '@aziontech/webkit/overlay/dialog-content'
+</script>
+```
 -->
 
 ## Sub-components
 
 <!-- Omit this section when structure: monolithic. -->
 <!-- For structure: composition, list every public sub-component AND the folder layout the scaffolder must emit. Each sub-component lives in its own folder under the root component, one folder per part. The file name keeps the full prefix (e.g. `dialog-trigger.vue`, never `index.vue`) so traces and editor breadcrumbs stay unambiguous. -->
+<!-- Composition components ship a COMPOUND API: an `index.ts` that uses `Object.assign` to attach every sub-component to the root (vue-tsc generates the adjacent `index.d.ts`, so `<Root.Part>` is typed; never hand-write the `.d.ts` — it is gitignored). Consumers reach `<Root.Part>` with one import, while the standalone sub-component imports remain for tree-shaking. Member names mirror THIS component's anatomy (`SortButton`, not a generic `Trigger`); `Trigger`/`Content` are for overlay/disclosure components only. See `.claude/rules/compound-api.md`. -->
 
 - `<name>-trigger/<name>-trigger.vue` — purpose
 - `<name>-portal/<name>-portal.vue` — purpose
@@ -84,7 +96,8 @@ import DialogClose from '@aziontech/webkit/overlay/dialog-close'
 
   packages/webkit/src/components/webkit/<category>/<name>/
   ├── <name>.vue
-  ├── package.json
+  ├── index.ts                    (compound: Object.assign attaches every sub-component; vue-tsc emits index.d.ts)
+  ├── package.json                (main/module → ./index.ts, types → ./index.d.ts)
   ├── injection-key.ts            (shared by every sub-component; one directory up from each sub-component)
   ├── <name>-trigger/
   │   ├── <name>-trigger.vue
@@ -94,8 +107,19 @@ import DialogClose from '@aziontech/webkit/overlay/dialog-close'
   │   └── package.json
   └── ...
 
-  Public exports in packages/webkit/package.json#exports stay flat
-  (`./<category>/<name>-trigger`) regardless of the folder nesting. -->
+  The root export (`./<category>/<name>`) points at `index.ts`, NOT the root
+  `.vue`. Sub-component exports stay flat (`./<category>/<name>-trigger`) and
+  point at their `.vue` regardless of the folder nesting. -->
+
+<!-- Compound API file (composition only), beside `<name>.vue` — one `.ts`; vue-tsc derives index.d.ts:
+
+```ts
+// index.ts
+import Root from './<name>.vue'
+import RootPart from './<name>-part/<name>-part.vue'
+export default Object.assign(Root, { Part: RootPart })
+```
+-->
 
 
 ## Props
@@ -221,6 +245,7 @@ Canonical layout — matches `apps/storybook/src/stories/webkit/actions/button/B
 - Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
 - Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
 - Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export and the root `package.json` main/module point at `index.ts`, `types` at `index.d.ts`. Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
 - Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
 - Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
 - Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
index 76937cbc..e779db04 100644
--- a/apps/storybook/.storybook/main.js
+++ b/apps/storybook/.storybook/main.js
@@ -33,11 +33,22 @@ const config = {
     }
   },
   viteFinal: async (config) => {
-    // Second @vitejs/plugin-vue for monorepo SFCs under packages/webkit (outside Storybook root).
-    // Pitfall: never put HTML-like tags (`<a>`, `<template>`, …) in script JSDoc — the second pass
-    // re-parses compiled output and throws "Element is missing end tag". See .claude/rules/styling.md.
+    // @vitejs/plugin-vue compiles the monorepo SFCs under packages/webkit (the framework only
+    // ships template-compilation, not the vue plugin). It MUST run before Storybook's docgen
+    // plugin: docgen appends `_sfc_main.__docgenInfo = …`, which only survives if the SFC has
+    // already compiled to JS. Pushed after docgen, the append lands in raw SFC source and the
+    // compiler discards it — leaving every subcomponent prop tab in autodocs empty.
+    // Pitfall: never put HTML-like tags (`<a>`, `<template>`, …) in script JSDoc — docgen
+    // re-parses the SFC and throws "Element is missing end tag". See .claude/rules/styling.md.
     config.plugins = config.plugins || []
-    config.plugins.push(vue())
+    const docgenIdx = config.plugins.findIndex(
+      (p) => p && (p.name === 'storybook:vue-docgen-plugin' || p.name === 'storybook:vue-component-meta-plugin')
+    )
+    if (docgenIdx === -1) {
+      config.plugins.push(vue())
+    } else {
+      config.plugins.splice(docgenIdx, 0, vue())
+    }
 
     // Enable dependency pre-bundling for faster rebuilds
     config.optimizeDeps = {
diff --git a/eslint.config.js b/eslint.config.js
index 1fba866f..79336da5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -35,7 +35,10 @@ export default [
         clearInterval: 'readonly',
         ResizeObserver: 'readonly',
         HTMLElement: 'readonly',
+        HTMLSelectElement: 'readonly',
+        HTMLInputElement: 'readonly',
         MouseEvent: 'readonly',
+        Event: 'readonly',
         Node: 'readonly',
         // Node globals
         process: 'readonly',

From 8722c83f5a5c1ac0696c499947392b8fae4ac0c5 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 22 Jun 2026 20:31:08 -0300
Subject: [PATCH 3/4] [ENG-46087] feat(webkit): Table
 border/principal/empty-state + Table/Paginator story refinements

- table: add `border` prop (default false); `principal` column flag + Table.Cell/HeadCell `principal` prop (first non-action column defaults to grow 2); empty-state block in the #empty slot (plain block, no row hover, no CTAs) reusing IllustrationLayers
- table stories: data-driven zero-logic stories, card-style Composition example, Empty story, explicit docs source code, generic <=10-row dataset, border control
- paginator stories: compound dot-notation form (Paginator.Button/Info/PageSize) + explicit source code
- specs: table.md updated (border, principal, empty-state), checksum refreshed
- fix: point @aziontech/theme at the workspace package (workspace:*) so install no longer 404s
---
 .specs/table.md                               |  20 +-
 .../stories/webkit/data/Paginator.stories.js  | 119 +++-
 .../src/stories/webkit/data/Table.stories.js  | 673 ++++++++----------
 packages/webkit/package.json                  |   2 +-
 .../data/table/table-cell/table-cell.vue      |  11 +-
 .../table/table-head-cell/table-head-cell.vue |  11 +-
 .../src/components/data/table/table.vue       |  55 +-
 pnpm-lock.yaml                                |  16 +-
 8 files changed, 466 insertions(+), 441 deletions(-)

diff --git a/.specs/table.md b/.specs/table.md
index 13632dc2..910b09a1 100644
--- a/.specs/table.md
+++ b/.specs/table.md
@@ -7,9 +7,9 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=2053-7649
   node_id: 2053:7649
-checksum: 926ddec17d9574a0c62b18cf4cf11177861db7f0cdcf562e5bca303f7c56f9c2
+checksum: 06fd0628e9c0618e3f63f01c1b0bef0b67fce6cbfee31dc6ecd40dd5d19bda72
 created: 2026-06-16
-last_updated: 2026-06-19
+last_updated: 2026-06-22
 ---
 
 # Table — Component Spec
@@ -123,8 +123,8 @@ const columns = [
 - `table-footer/table-footer.vue` — `role="rowgroup"` footer band (hosts the Paginator); muted text.
 - `table-caption/table-caption.vue` — accessible caption / title line; `text-label-sm` muted.
 - `table-row/table-row.vue` — `role="row"`, flex container. Props `selected?: boolean`, `frozen?: boolean`. Forwards native listeners (e.g. `@click`) to its root via attribute fallthrough. Bottom divider `var(--border-width-default)` / `var(--border-default)`; hover `var(--bg-canvas)`; selected `var(--bg-selected)`. The row publishes its resolved background as the `--table-row-bg` custom property so frozen cells (and their edge fade) track the row hover/selected color instead of drifting against it.
-- `table-head-cell/table-head-cell.vue` — `role="columnheader"`, height 44px. Props `kind?: 'default' | 'checkbox' | 'action' | 'slot'` (`checkbox`/`action` are 40px fixed-width so the header aligns with the body's checkbox/action cells), `sortable?: boolean`, `sortDirection?: 'none' | 'ascending' | 'descending'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3` (flex weight; first column uses `2`), `frozen?: 'start' | 'end'`. Emits `sort: [direction: 'ascending' | 'descending']`. Renders `table-sort-button` when `sortable`. When `resizable`, renders a drag-to-resize handle on the right edge (`resizing` reflects the active drag; `resizeHandler` is the pointer handler supplied by the data-driven root).
-- `table-cell/table-cell.vue` — `role="cell"`, min height 48px. Props `kind?: 'default' | 'checkbox' | 'action'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3`, `frozen?: 'start' | 'end'`, `clickable?: boolean` (underlines the cell text). Cell text never wraps (single line, truncates) — there is no wrap option. A `grow` column carries a fixed, content-independent flex basis (`flex: <grow> 0 5rem`) identical to its header cell, so the column resolves to the same width in the header and in every body row; when the table overflows it shrinks to that minimum and the viewport scrolls horizontally — instead of each row sizing the column to its own content, which misaligned the header from the body. A `width` column overrides the basis with a fixed pixel width. Content (avatar, tag, icon, description, copy, "+99") is composed by the consumer via the default slot using existing primitives.
+- `table-head-cell/table-head-cell.vue` — `role="columnheader"`, height 44px. Props `kind?: 'default' | 'checkbox' | 'action' | 'slot'` (`checkbox`/`action` are 40px fixed-width so the header aligns with the body's checkbox/action cells), `sortable?: boolean`, `sortDirection?: 'none' | 'ascending' | 'descending'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3` (flex weight), `principal?: boolean` (defaults the weight to `grow: 2` when `grow` is unset — the principal/emphasized column), `frozen?: 'start' | 'end'`. Emits `sort: [direction: 'ascending' | 'descending']`. Renders `table-sort-button` when `sortable`. When `resizable`, renders a drag-to-resize handle on the right edge (`resizing` reflects the active drag; `resizeHandler` is the pointer handler supplied by the data-driven root).
+- `table-cell/table-cell.vue` — `role="cell"`, min height 48px. Props `kind?: 'default' | 'checkbox' | 'action'`, `align?: 'start' | 'center' | 'end'`, `grow?: 1 | 2 | 3`, `principal?: boolean` (defaults the weight to `grow: 2` when `grow` is unset — the principal/emphasized column), `frozen?: 'start' | 'end'`, `clickable?: boolean` (underlines the cell text). Cell text never wraps (single line, truncates) — there is no wrap option. A `grow` column carries a fixed, content-independent flex basis (`flex: <grow> 0 5rem`) identical to its header cell, so the column resolves to the same width in the header and in every body row; when the table overflows it shrinks to that minimum and the viewport scrolls horizontally — instead of each row sizing the column to its own content, which misaligned the header from the body. A `width` column overrides the basis with a fixed pixel width. Content (avatar, tag, icon, description, copy, "+99") is composed by the consumer via the default slot using existing primitives.
 - `table-sort-button/table-sort-button.vue` — sort control used inside `table-head-cell`, rendered as the webkit `IconButton` (`kind="transparent"`, `size="small"` → 28×28) so size, padding, and alignment match the design system. Props `direction?: 'none' | 'ascending' | 'descending'`, `hidden?: boolean`. Emits `toggle: [direction: 'ascending' | 'descending']`. Glyphs via `pi pi-sort-alt` (none) / `pi pi-sort-amount-up` (ascending) / `pi pi-sort-amount-down` (descending).
 - `table-toolbar/table-toolbar.vue` — flex container (end-aligned) for toolbar actions placed in the `toolbar` slot; injects the table context for its testId.
 - `table-search/table-search.vue` — context-aware search input. Reads and drives the TanStack `globalFilter` through the injected table context, so it needs no wiring. Prop `placeholder?: string` (default `'Search'`).
@@ -154,8 +154,9 @@ const columns = [
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `maxHeight` | `string` | `''` | no | Max height (CSS length). The viewport scrolls dynamically: horizontal scroll appears automatically when columns overflow the width; vertical scroll appears only when `maxHeight` is set smaller than the content (under the sticky header). |
+| `border` | `boolean` | `false` | no | Draw the outer card border around the table. Off by default (the table is typically framed by a surrounding surface); set `border` / `:border="…"` to draw the `var(--border-default)` outline. The internal row dividers are unaffected. |
 | `data` | `Record<string, unknown>[]` | `[]` | no | Data-driven mode: row records. |
-| `columns` | `TableColumn[]` | `[]` | no | Data-driven mode: column definitions (`{ id?, accessorKey?, header?, enableSorting?, grow?, frozen?, width?, align?, kind?, resizable? }`; `width` (px) sets a fixed pixel column (also needed when a frozen column precedes another frozen column on the same edge, so sticky offsets can be summed); a `grow` column without `width` keeps a shared fixed basis so the header and body stay aligned and the cell never wraps. A column with no `grow` defaults to weight `2` for the first column and `1` for the rest, so the columns fill the available space proportionally. A `kind: 'action'` column is automatically pinned to the trailing (right) edge — staying reachable while the rest scrolls horizontally — and is never resizable. **`resizable: true`** opts a column into a live mouse/touch drag-to-resize handle on its header (native pointer events; the `@tanstack/vue-table` exception covers sorting/pagination/selection/visibility, not sizing). On the first drag of any divider every flexible column freezes at its current rendered width; from then on dragging changes **only that column** and the table grows (horizontal scroll) — the others are untouched. The drag floor is the column's own content width (header label + visible body cells), so a column never shrinks past its content. Frozen and action columns ignore `resizable`. When non-empty, the table renders itself via TanStack. |
+| `columns` | `TableColumn[]` | `[]` | no | Data-driven mode: column definitions (`{ id?, accessorKey?, header?, enableSorting?, grow?, principal?, frozen?, width?, align?, kind?, resizable? }`; `width` (px) sets a fixed pixel column (also needed when a frozen column precedes another frozen column on the same edge, so sticky offsets can be summed); a `grow` column without `width` keeps a shared fixed basis so the header and body stay aligned and the cell never wraps. A column with no `grow` defaults to weight `2` for the **principal** column and `1` for the rest, so the columns fill the available space proportionally. The principal column is the one flagged `principal: true`, or — when none is flagged — the first non-action column. A `kind: 'action'` column is automatically pinned to the trailing (right) edge — staying reachable while the rest scrolls horizontally — and is never resizable. **`resizable: true`** opts a column into a live mouse/touch drag-to-resize handle on its header (native pointer events; the `@tanstack/vue-table` exception covers sorting/pagination/selection/visibility, not sizing). On the first drag of any divider every flexible column freezes at its current rendered width; from then on dragging changes **only that column** and the table grows (horizontal scroll) — the others are untouched. The drag floor is the column's own content width (header label + visible body cells), so a column never shrinks past its content. Frozen and action columns ignore `resizable`. When non-empty, the table renders itself via TanStack. |
 | `rowKey` | `string` | `'id'` | no | Field used as the stable row id (for selection). |
 | `enableSorting` | `boolean` | `false` | no | Enable sorting globally; per-column `enableSorting` overrides. |
 | `enableRowSelection` | `boolean` | `false` | no | Add a leading selection-checkbox column. |
@@ -198,7 +199,7 @@ const columns = [
 | `title` | — | Title text shown at the start of the toolbar band, fixed above the scroll viewport (both modes). |
 | `toolbar` | `{ table }` | Action band (search, filter trigger, refresh, export, column-selector) above the scroll viewport, end-aligned beside the title. `table` is the TanStack instance in data-driven mode, `undefined` in composition mode. |
 | `filters` | `{ table }` | Active-filter chips row below the toolbar (both modes); same `table` scope as `toolbar`. |
-| `empty` | — | Data-driven mode: shown when there are no rows. |
+| `empty` | — | Data-driven mode: shown when there are no rows. Defaults to an empty-state block (illustration + title + description) following Figma; override the slot for custom copy/actions. |
 
 Per-column slots (data-driven mode) are name-computed at runtime, one per column id, so they are documented here rather than as enumerable `defineSlots` rows: `cell-<columnId>` (scope `{ row, value }`) renders custom body-cell content; `header-<columnId>` (scope `{ column }`) renders custom header content.
 
@@ -266,17 +267,18 @@ Per-column slots (data-driven mode) are name-computed at runtime, one per column
 
 This component has no `kind`/`size` on its root, so the canonical Types/Sizes stories do not apply. Instead there is one story per scenario (the component's value is the behaviors, not root variants) plus a Full reference; each wires its events to the Actions panel.
 
-All stories use the data-driven API (`<Table :data :columns>` via the TanStack engine, the granted `@tanstack/vue-table` exception) with per-column `cell-<id>` slots and a shared row-action menu. Per the toolbar policy, **only Full Example renders the `#toolbar` / `#filters` band** — every other story omits it so the table opens straight onto its compact column-header row.
+Most stories use the data-driven API (`<Table :data :columns>` via the TanStack engine, the granted `@tanstack/vue-table` exception) with per-column `cell-<id>` slots and a shared row-action menu; one story (Composition) instead hand-composes the compound dot-notation form (`<Table.Header>` / `<Table.Row>` / `<Table.HeadCell>` / `<Table.Body>` / `<Table.Cell>`) to document the composition writing style the `## Usage` block leads with. Every story uses a small, generic dataset (≤10 anonymous rows, no real names/emails). Per the toolbar policy, **only Full Example renders the `#toolbar` / `#filters` band** — every other story omits it so the table opens straight onto its compact column-header row.
 
+- Composition — the compound dot-notation form built by hand (`<Table.Header>` / `<Table.Row>` / `<Table.HeadCell>` / `<Table.Body>` / `<Table.Cell>`, no `data`/`columns`); justified because the composition writing style is the primary documented API and needs a worked example separate from the data-driven mode.
 - With Checkboxes — selection scenario; `enable-row-selection` adds the leading checkbox column with a select-all header (all / none / indeterminate) and per-row selection via `v-model:row-selection`; justified because the selection surface (`kind="checkbox"` cell + select-all) is a distinct behavior.
 - Compact Header — a denser header via `header-variant="compact"` (reduced header-row height and padding), with no toolbar band so the table opens straight onto that header row; justified because the compact header density is a distinct presentation.
-- No Border — the outer card border removed via a consumer `class` override (`class="!border-0"`) flowing onto the root through attribute fallthrough; justified because consumer class override of the surface framing is a distinct integration concern.
+- Bordered — the outer card border drawn via the `border` prop (`<Table border>`); justified because the opt-in surface border (off by default) is a distinct presentation toggle.
 - Selected Row — a pre-selected row (the `var(--bg-selected)` surface + `aria-selected`) seeded through `v-model:row-selection`, with `select-on-row-click` toggling selection on inert row clicks; justified because the selected-row state and row-click selection are distinct behaviors.
 - Fixed Layout with Column Sizes — every column declares an explicit pixel `width` (fixed layout, columns keep their declared size and scroll horizontally past the surface); justified because explicit column sizing is distinct from the grow-to-fill default.
 - Resizable Columns — a simple table whose columns opt into drag-to-resize via per-column `resizable: true`; dragging a header divider resizes only that column (the others freeze) and the table grows; justified because the per-column resize affordance is a distinct behavior.
 - Sticky Column — freeze scenario; a frozen start column (Name) and a frozen actions (end) column inside a horizontally scrollable container, with the CSS-only edge fade; justified because the freeze system is the primary differentiator of this component.
 - Compact Header with Sticky Column — the compact header density (`header-variant="compact"`) combined with frozen start/end columns inside a horizontally scrollable container; justified because combining the compact header with frozen columns is a distinct composite scenario.
-- Full Example — the complete data table over a larger dataset (multiple paginator pages): the only story with the toolbar band — a composed `#toolbar="{ table }"` (filter / context-aware search / refresh / export / column-selector) with a removable `#filters="{ table }"` chip (search drives `table.setGlobalFilter`; the chip clears it) — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, and a paginator. Its docs embed an inline-SVG reference preview of the assembled table; justified because the assembled page is the canonical real-world usage.
+- Full Example — the complete data table over the same generic ≤10-row dataset, paginated with a small `page-size` so the paginator spans a couple of pages: the only story with the toolbar band — a composed `#toolbar="{ table }"` (filter / context-aware search / refresh / export / column-selector) with a removable `#filters="{ table }"` chip (search drives `table.setGlobalFilter`; the chip clears it) — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, the `border` prop, and a paginator; justified because the assembled page is the canonical real-world usage.
 
 ## Constraints — DO NOT
 
diff --git a/apps/storybook/src/stories/webkit/data/Paginator.stories.js b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
index 38ae8598..b3224b8f 100644
--- a/apps/storybook/src/stories/webkit/data/Paginator.stories.js
+++ b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
@@ -1,39 +1,79 @@
-import PaginationButton from '@aziontech/webkit/data/pagination-button'
 import Paginator from '@aziontech/webkit/data/paginator'
-import PaginatorInfo from '@aziontech/webkit/data/paginator-info'
-import PaginatorPageSize from '@aziontech/webkit/data/paginator-page-size'
 import { ref, watch } from 'vue'
 
-const paginatorComponents = {
-  Paginator,
-  PaginationButton,
-  PaginatorInfo,
-  PaginatorPageSize
-}
+// Compound API — one import of the root; every part is reached via dot-notation
+// (`<Paginator.Button>`, `<Paginator.Info>`, `<Paginator.PageSize>`). The
+// standalone imports (`@aziontech/webkit/data/pagination-button`, …) remain the
+// tree-shaking path; the stories lead with the compound form per compound-api.md.
+const paginatorComponents = { Paginator }
 
 const usage = [
   '```vue',
   '<Paginator>',
   '  <template #info>',
-  '    <PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>',
+  '    <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>',
   '  </template>',
-  '  <PaginationButton kind="previous" disabled>Previous</PaginationButton>',
-  '  <PaginationButton kind="number" selected>1</PaginationButton>',
-  '  <PaginationButton kind="number">2</PaginationButton>',
-  '  <PaginationButton kind="more" />',
-  '  <PaginationButton kind="next">Next</PaginationButton>',
+  '  <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>',
+  '  <Paginator.Button kind="number" selected>1</Paginator.Button>',
+  '  <Paginator.Button kind="number">2</Paginator.Button>',
+  '  <Paginator.Button kind="more" />',
+  '  <Paginator.Button kind="next">Next</Paginator.Button>',
   '  <template #controls>',
-  '    <PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />',
+  '    <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />',
   '  </template>',
   '</Paginator>',
   '```'
 ].join('\n')
 
+// --- "Show code" source ----------------------------------------------------
+// Storybook's default dynamic source for a custom-template story renders the
+// internal markup (or the render function), not the authored `<Paginator>` usage.
+// Each story ships an explicit `docs.source.code` so "Show code" shows the real
+// component code in the compound dot-notation form.
+
+const DEFAULT_SOURCE = `<Paginator>
+  <template #info>
+    <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>
+  </template>
+
+  <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
+  <Paginator.Button kind="number" selected>1</Paginator.Button>
+  <Paginator.Button kind="number">2</Paginator.Button>
+  <Paginator.Button kind="number">3</Paginator.Button>
+  <Paginator.Button kind="more" />
+  <Paginator.Button kind="next">Next</Paginator.Button>
+
+  <template #controls>
+    <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />
+  </template>
+</Paginator>`
+
+const BUTTONS_SOURCE = `<!-- kinds + states -->
+<Paginator.Button kind="previous">Previous</Paginator.Button>
+<Paginator.Button kind="number">1</Paginator.Button>
+<Paginator.Button kind="number" selected>2</Paginator.Button>
+<Paginator.Button kind="more" />
+<Paginator.Button kind="next">Next</Paginator.Button>
+
+<!-- disabled -->
+<Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
+<Paginator.Button kind="number" disabled>1</Paginator.Button>
+<Paginator.Button kind="next" disabled>Next</Paginator.Button>`
+
+const DATA_DRIVEN_SOURCE = `<Paginator
+  v-model:page="page"
+  v-model:page-size="pageSize"
+  :total="200"
+  :page-size-options="[10, 25, 50, 100]"
+  :sibling-count="1"
+  @page-change="loadPage"
+/>`
+
 /** @type {import('@storybook/vue3').Meta<typeof Paginator>} */
 const meta = {
   title: 'Webkit/Data/Paginator',
   component: Paginator,
-  subcomponents: { PaginationButton, PaginatorInfo },
+  subcomponents: { PaginationButton: Paginator.Button, PaginatorInfo: Paginator.Info },
   tags: ['autodocs'],
   parameters: {
     layout: 'padded',
@@ -128,7 +168,7 @@ const meta = {
     },
     info: {
       control: false,
-      description: 'Left region: page-info text (typically PaginatorInfo).',
+      description: 'Left region: page-info text (typically Paginator.Info).',
       table: { type: { summary: 'VNode' }, category: 'slots' }
     },
     default: {
@@ -138,7 +178,7 @@ const meta = {
     },
     controls: {
       control: false,
-      description: 'Right region: rows-per-page selector (e.g. Dropdown).',
+      description: 'Right region: rows-per-page selector (e.g. Paginator.PageSize).',
       table: { type: { summary: 'VNode' }, category: 'slots' }
     }
   },
@@ -159,25 +199,26 @@ export const Default = {
     template: `
       <Paginator v-bind="args">
         <template #info>
-          <PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>
+          <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>
         </template>
-        <PaginationButton kind="previous" disabled>Previous</PaginationButton>
-        <PaginationButton kind="number" selected>1</PaginationButton>
-        <PaginationButton kind="number">2</PaginationButton>
-        <PaginationButton kind="number">3</PaginationButton>
-        <PaginationButton kind="more" />
-        <PaginationButton kind="next">Next</PaginationButton>
+        <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
+        <Paginator.Button kind="number" selected>1</Paginator.Button>
+        <Paginator.Button kind="number">2</Paginator.Button>
+        <Paginator.Button kind="number">3</Paginator.Button>
+        <Paginator.Button kind="more" />
+        <Paginator.Button kind="next">Next</Paginator.Button>
         <template #controls>
-          <PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />
+          <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />
         </template>
       </Paginator>
     `
   }),
   parameters: {
     docs: {
+      source: { code: DEFAULT_SOURCE },
       description: {
         story:
-          'Full paginator: page-info text, Previous/numbers/overflow/Next, and a rows-per-page selector.'
+          'The compound **composition** form: the full paginator assembled by hand from the dot-notation sub-components — page-info text (`Paginator.Info`), Previous / numbers / overflow / Next (`Paginator.Button`), and a rows-per-page selector (`Paginator.PageSize`).'
       }
     }
   }
@@ -190,25 +231,26 @@ export const Buttons = {
     template: `
       <div class="flex flex-col gap-[var(--spacing-4)]">
         <div class="flex items-center gap-[var(--spacing-2)]">
-          <PaginationButton kind="previous">Previous</PaginationButton>
-          <PaginationButton kind="number">1</PaginationButton>
-          <PaginationButton kind="number" selected>2</PaginationButton>
-          <PaginationButton kind="more" />
-          <PaginationButton kind="next">Next</PaginationButton>
+          <Paginator.Button kind="previous">Previous</Paginator.Button>
+          <Paginator.Button kind="number">1</Paginator.Button>
+          <Paginator.Button kind="number" selected>2</Paginator.Button>
+          <Paginator.Button kind="more" />
+          <Paginator.Button kind="next">Next</Paginator.Button>
         </div>
         <div class="flex items-center gap-[var(--spacing-2)]">
-          <PaginationButton kind="previous" disabled>Previous</PaginationButton>
-          <PaginationButton kind="number" disabled>1</PaginationButton>
-          <PaginationButton kind="next" disabled>Next</PaginationButton>
+          <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
+          <Paginator.Button kind="number" disabled>1</Paginator.Button>
+          <Paginator.Button kind="next" disabled>Next</Paginator.Button>
         </div>
       </div>
     `
   }),
   parameters: {
     docs: {
+      source: { code: BUTTONS_SOURCE },
       description: {
         story:
-          'PaginationButton kinds (previous / next / number / more) and states: default, selected (current page), and disabled.'
+          '`Paginator.Button` kinds (previous / next / number / more) and states: default, selected (current page), and disabled.'
       }
     }
   }
@@ -217,7 +259,7 @@ export const Buttons = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Paginator>} */
 export const DataDriven = {
   render: (args) => ({
-    components: { Paginator },
+    components: paginatorComponents,
     setup() {
       const page = ref(args.page ?? 1)
       const pageSize = ref(args.pageSize ?? 10)
@@ -250,6 +292,7 @@ export const DataDriven = {
   },
   parameters: {
     docs: {
+      source: { code: DATA_DRIVEN_SOURCE },
       description: {
         story:
           'Data-driven mode: pass `total` and bind `v-model:page` / `v-model:page-size`. The Paginator renders its own info text, windowed page numbers, overflow ellipsis, and the rows-per-page selector, emitting `update:page` / `update:pageSize` / `page-change`.'
diff --git a/apps/storybook/src/stories/webkit/data/Table.stories.js b/apps/storybook/src/stories/webkit/data/Table.stories.js
index b2c46624..7a6e112f 100644
--- a/apps/storybook/src/stories/webkit/data/Table.stories.js
+++ b/apps/storybook/src/stories/webkit/data/Table.stories.js
@@ -25,192 +25,50 @@ const components = {
   DropdownMenuFromModel
 }
 
-// --- Static, non-reactive fixtures -----------------------------------------
-// Defined once at module scope (never wrapped in ref/reactive) so the rows
-// carry no per-row reactivity overhead and are shared across every render.
-
-const applications = Object.freeze([
-  {
-    id: '1773684562',
-    name: 'webkit-storybook',
-    status: 'Active',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Jun 18, 2026, 06:31:37 PM'
-  },
-  {
-    id: '1780526808',
-    name: 'teste app',
-    status: 'Active',
-    editor: 'guilherme.santana+v4@azion.com',
-    modified: 'Jun 3, 2026, 07:35:44 PM'
-  },
-  {
-    id: '1778769112',
-    name: 'teste-do-ng-new-template',
-    status: 'Active',
-    editor: 'paulo.ferreira+v4@azion.com',
-    modified: 'May 14, 2026, 11:46:14 AM'
-  },
-  {
-    id: '1772542164',
-    name: 'icons-gallery',
-    status: 'Active',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Apr 30, 2026, 02:24:06 PM'
-  },
-  {
-    id: '1775518977',
-    name: 'azion-console-kit-storybook',
-    status: 'Active',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Apr 13, 2026, 03:28:51 PM'
-  },
-  {
-    id: '1779034218',
-    name: 'edge-functions-demo',
-    status: 'Active',
-    editor: 'herbert.julio+v4@azion.com',
-    modified: 'Apr 2, 2026, 09:12:08 AM'
-  },
-  {
-    id: '1771902645',
-    name: 'api-gateway-prod',
-    status: 'Active',
-    editor: 'maria.lima+v4@azion.com',
-    modified: 'Mar 27, 2026, 05:48:19 PM'
-  },
-  {
-    id: '1776510338',
-    name: 'static-site-blog',
-    status: 'Inactive',
-    editor: 'lucas.alves+v4@azion.com',
-    modified: 'Mar 19, 2026, 11:03:55 AM'
-  },
-  {
-    id: '1770448901',
-    name: 'image-optimizer',
-    status: 'Active',
-    editor: 'guilherme.santana+v4@azion.com',
-    modified: 'Mar 8, 2026, 02:37:41 PM'
-  },
-  {
-    id: '1778221764',
-    name: 'waf-rules-staging',
-    status: 'Degraded',
-    editor: 'paulo.ferreira+v4@azion.com',
-    modified: 'Feb 28, 2026, 07:54:12 PM'
-  },
-  {
-    id: '1772990057',
-    name: 'cache-purge-tool',
-    status: 'Active',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Feb 21, 2026, 10:26:30 AM'
-  },
-  {
-    id: '1774663180',
-    name: 'dns-manager',
-    status: 'Active',
-    editor: 'herbert.julio+v4@azion.com',
-    modified: 'Feb 12, 2026, 04:09:47 PM'
-  },
-  {
-    id: '1771135492',
-    name: 'load-balancer-test',
-    status: 'Inactive',
-    editor: 'maria.lima+v4@azion.com',
-    modified: 'Feb 3, 2026, 08:41:05 AM'
-  },
-  {
-    id: '1779558613',
-    name: 'video-streaming',
-    status: 'Active',
-    editor: 'lucas.alves+v4@azion.com',
-    modified: 'Jan 27, 2026, 01:18:53 PM'
-  },
-  {
-    id: '1773320926',
-    name: 'auth-service',
-    status: 'Active',
-    editor: 'guilherme.santana+v4@azion.com',
-    modified: 'Jan 19, 2026, 06:02:34 PM'
-  },
-  {
-    id: '1776847209',
-    name: 'analytics-dashboard',
-    status: 'Degraded',
-    editor: 'paulo.ferreira+v4@azion.com',
-    modified: 'Jan 9, 2026, 09:47:21 AM'
-  },
-  {
-    id: '1770773542',
-    name: 'docs-portal',
-    status: 'Active',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Dec 30, 2025, 03:33:16 PM'
-  },
-  {
-    id: '1778004885',
-    name: 'marketplace-app',
-    status: 'Active',
-    editor: 'herbert.julio+v4@azion.com',
-    modified: 'Dec 18, 2025, 11:55:48 AM'
-  },
-  {
-    id: '1772457118',
-    name: 'live-ingest-demo',
-    status: 'Inactive',
-    editor: 'maria.lima+v4@azion.com',
-    modified: 'Dec 7, 2025, 05:24:09 PM'
-  },
-  {
-    id: '1775190431',
-    name: 'edge-sql-playground',
-    status: 'Active',
-    editor: 'lucas.alves+v4@azion.com',
-    modified: 'Nov 26, 2025, 02:11:37 PM'
-  },
-  {
-    id: '1779713764',
-    name: 'network-lists-admin',
-    status: 'Active',
-    editor: 'guilherme.santana+v4@azion.com',
-    modified: 'Nov 14, 2025, 08:39:50 AM'
-  },
-  {
-    id: '1773846097',
-    name: 'origin-shield-test',
-    status: 'Active',
-    editor: 'paulo.ferreira+v4@azion.com',
-    modified: 'Nov 3, 2025, 04:57:22 PM'
-  },
-  {
-    id: '1776239350',
-    name: 'realtime-metrics',
-    status: 'Degraded',
-    editor: 'robson.junior+v4@azion.com',
-    modified: 'Oct 22, 2025, 10:48:14 AM'
-  },
-  {
-    id: '1771568683',
-    name: 'certificate-manager',
-    status: 'Active',
-    editor: 'herbert.julio+v4@azion.com',
-    modified: 'Oct 11, 2025, 01:29:06 PM'
-  },
-  {
-    id: '1778392016',
-    name: 'data-stream-pipeline',
-    status: 'Active',
-    editor: 'maria.lima+v4@azion.com',
-    modified: 'Sep 30, 2025, 07:15:43 PM'
-  }
-])
+// --- Generic fixtures ------------------------------------------------------
+// A small, anonymous dataset (10 rows, no real names/emails). Defined once at
+// module scope and frozen so the rows carry no per-row reactivity and are shared
+// across every render. Every column the stories use is present on each row, so a
+// single dataset feeds the simple, fixed-width, and wide/sticky scenarios alike.
+
+const STATUSES = ['Active', 'Inactive', 'Degraded']
+const PROTOCOLS = ['HTTP & HTTPS', 'HTTP', 'HTTPS', 'gRPC']
+const NAMES = [
+  'Alpha',
+  'Bravo',
+  'Charlie',
+  'Delta',
+  'Echo',
+  'Foxtrot',
+  'Golf',
+  'Hotel',
+  'India',
+  'Juliet'
+]
+
+const rows = Object.freeze(
+  NAMES.map((word, index) => ({
+    id: String(1001 + index),
+    name: `Workload ${word}`,
+    status: STATUSES[index % STATUSES.length],
+    editor: `user${index + 1}@example.com`,
+    modified: `Jan ${index + 1}, 2026, 09:00 AM`,
+    protocol: PROTOCOLS[index % PROTOCOLS.length],
+    domains: (index % 5) + 1,
+    origins: (index % 3) + 1,
+    created: `Dec ${index + 1}, 2025, 10:00 AM`
+  }))
+)
+
+// A compact 5-row slice for the hand-composed Composition story.
+const compositionRows = rows.slice(0, 5)
 
 // No explicit `width` — columns distribute across the full container via their
 // `grow` flex weight, so the table fills the surface with no horizontal scroll.
+// The first non-action column is the principal column (defaults to `grow: 2`),
+// so `name` needs no explicit `grow`.
 const columns = [
-  { accessorKey: 'name', header: 'Name', grow: 2 },
+  { accessorKey: 'name', header: 'Name' },
   { accessorKey: 'id', header: 'ID', enableSorting: false },
   { accessorKey: 'status', header: 'Status' },
   { accessorKey: 'editor', header: 'Last Editor', enableSorting: false, grow: 2 },
@@ -229,50 +87,11 @@ const sizedColumns = [
   { id: 'actions', header: '', kind: 'action', enableSorting: false }
 ]
 
-// Wide variant: the same rows extended with extra fields so the table has more
-// columns than fit the surface. Derived deterministically (no per-row reactivity).
-const protocols = ['HTTP & HTTPS', 'HTTP', 'HTTPS', 'gRPC']
-const createdPool = [
-  'Jan 14, 2026, 10:22:00 AM',
-  'Nov 28, 2025, 03:41:18 PM',
-  'Oct 5, 2025, 09:15:44 AM',
-  'Sep 12, 2025, 06:50:09 PM',
-  'Aug 1, 2025, 11:30:27 AM',
-  'Jul 19, 2025, 02:08:53 PM',
-  'Jun 6, 2025, 04:44:36 PM',
-  'May 23, 2025, 08:17:12 AM'
-]
-
-const applicationsWide = Object.freeze(
-  applications.map((app, index) => ({
-    ...app,
-    protocol: protocols[index % protocols.length],
-    domains: (index % 5) + 1,
-    origins: (index % 3) + 1,
-    created: createdPool[index % createdPool.length]
-  }))
-)
-
-// Larger dataset for the Full Example: the wide rows replicated to ~48 entries
-// so the paginator spans several pages. Ids stay unique (base id + index) and
-// later cycles get a numeric suffix on the name.
-const applicationsLarge = Object.freeze(
-  Array.from({ length: 48 }, (_, index) => {
-    const base = applicationsWide[index % applicationsWide.length]
-    const cycle = Math.floor(index / applicationsWide.length)
-    return {
-      ...base,
-      id: String(Number(base.id) + index),
-      name: cycle === 0 ? base.name : `${base.name}-${cycle}`
-    }
-  })
-)
-
-// Every column carries an explicit `width` so the row widths sum past the
-// surface (horizontal scroll). Name is pinned to the start edge and the actions
-// menu to the end edge — both stay put while the middle columns scroll under them.
+// Wide variant: extra columns (Protocol, Domains, Origins, Created) push the row
+// widths past the surface (horizontal scroll). Name is pinned to the start edge
+// and the actions menu to the end edge — both stay put while the middle scrolls.
 const wideColumns = [
-  { accessorKey: 'name', header: 'Name', grow: 2, frozen: 'start', width: 260 },
+  { accessorKey: 'name', header: 'Name', frozen: 'start', width: 260 },
   { accessorKey: 'id', header: 'ID', enableSorting: false, width: 170 },
   { accessorKey: 'status', header: 'Status', width: 140 },
   { accessorKey: 'protocol', header: 'Protocol', enableSorting: false, width: 170 },
@@ -303,14 +122,14 @@ const statusSeverity = (status) =>
   status === 'Active' ? 'success' : status === 'Degraded' ? 'warning' : 'danger'
 
 // --- Shared template fragments ---------------------------------------------
-// The per-cell slots are identical across every story (the Name link, the
-// Status Tag, and the trailing row-action menu), so they live in one constant
+// The per-cell slots are identical across every data-driven story (the Name link,
+// the Status Tag, and the trailing row-action menu), so they live in one constant
 // interpolated into each template instead of being copy-pasted per story.
 
 const CELL_SLOTS = `
         <template #cell-name="{ row, value }">
           <a
-            :href="'/applications/' + row.id"
+            :href="'/workloads/' + row.id"
             class="cursor-pointer truncate text-[var(--text-default)] no-underline hover:underline active:underline"
             @click="(event) => onLink(event, row)"
           >{{ value }}</a>
@@ -380,18 +199,111 @@ const makeOnLink = (args) => (event, row) => {
   args.onCellClick(row)
 }
 
-// Render factory: every story is the same data-driven <Table> wired to the
-// controls; only the data set, the column set, the pre-seeded selection, extra
-// root attributes, and (Full only) the toolbar differ.
+// --- "Show code" source ----------------------------------------------------
+// Storybook's default dynamic source for a custom-template story renders the
+// internal markup (or the render function), not the authored `<Table>` usage.
+// Each story therefore ships an explicit `docs.source.code` built from its
+// resolved args, so "Show code" shows the real component code. The args are
+// known at module load (meta defaults + per-story overrides), so the snippet is
+// computed up front rather than from a runtime transform.
+
+const baseArgs = {
+  maxHeight: '',
+  border: false,
+  paginated: true,
+  pageSize: 5,
+  enableSorting: true,
+  enableRowSelection: false,
+  selectOnRowClick: false,
+  headerVariant: 'default'
+}
+
+// Clean, readable equivalents of CELL_SLOTS / FULL_TOOLBAR for the code snippet.
+const SOURCE_CELL_SLOTS = `  <template #cell-name="{ row, value }">
+    <a :href="'/workloads/' + row.id">{{ value }}</a>
+  </template>
+  <template #cell-status="{ value }">
+    <Tag :severity="statusSeverity(value)">{{ value }}</Tag>
+  </template>
+  <template #cell-actions="{ row }">
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuFromModel :nodes="rowActionNodes" @select="onRowAction" />
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  </template>`
+
+const SOURCE_TOOLBAR = `  <template #toolbar>
+    <IconButton icon="pi pi-filter" aria-label="Filter" kind="transparent" size="small" />
+    <Table.Search placeholder="Search keywords..." />
+  </template>
+  <template #filters="{ table }">
+    <Chip
+      v-if="table.getState().globalFilter"
+      :label="'Search: ' + table.getState().globalFilter"
+      removable
+      @remove="() => table.setGlobalFilter('')"
+    />
+  </template>`
+
+const dataDrivenSource = (args, { columnsName = 'columns', toolbar = false } = {}) => {
+  const open = ['<Table', '  :data="rows"', `  :columns="${columnsName}"`, '  row-key="id"']
+  if (args.enableSorting) open.push('  enable-sorting')
+  if (args.enableRowSelection) open.push('  enable-row-selection')
+  if (args.selectOnRowClick) open.push('  select-on-row-click')
+  if (args.paginated) open.push('  paginated')
+  if (args.paginated && args.pageSize !== 10) open.push(`  :page-size="${args.pageSize}"`)
+  if (args.headerVariant && args.headerVariant !== 'default') {
+    open.push(`  header-variant="${args.headerVariant}"`)
+  }
+  if (args.maxHeight) open.push(`  max-height="${args.maxHeight}"`)
+  if (args.border) open.push('  border')
+  if (args.enableRowSelection) open.push('  v-model:row-selection="rowSelection"')
+  open.push('  v-model:sorting="sorting"')
+  open.push('  @row-click="onRowClick"')
+  open.push('>')
+  const inner = [toolbar ? SOURCE_TOOLBAR : '', SOURCE_CELL_SLOTS].filter(Boolean).join('\n')
+  return `${open.join('\n')}\n${inner}\n</Table>`
+}
+
+const COMPOSITION_SOURCE = `<!-- Composition gives full control of each cell — here, a card-style row -->
+<Table border>
+  <Table.Body>
+    <Table.Row v-for="item in items" :key="item.id">
+      <Table.Cell>
+        <div class="flex w-full items-center gap-[var(--spacing-3)] py-[var(--spacing-3)]">
+          <span class="flex h-10 w-10 items-center justify-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)]">
+            <i class="pi pi-box text-[var(--text-muted)]" />
+          </span>
+          <div class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-1)]">
+            <span class="truncate text-[var(--text-default)]">{{ item.name }}</span>
+            <span class="truncate text-body-xs text-[var(--text-muted)]">{{ item.editor }}</span>
+          </div>
+          <Tag :severity="severity(item.status)">{{ item.status }}</Tag>
+          <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>`
+
+// Render factory (data-driven): every story is the same data-driven <Table> wired
+// to the controls; only the data set, the column set, the pre-seeded selection,
+// and (Full only) the toolbar differ.
 const makeStory =
-  ({ rows, columns: cols, selection = {}, attrs = '', toolbar = '' }) =>
+  ({ rows: data, columns: cols, selection = {}, toolbar = '' }) =>
   (args) => ({
     components,
     setup() {
       const sorting = ref([])
       const rowSelection = ref({ ...selection })
       const onLink = makeOnLink(args)
-      return { args, rows, cols, rowActionNodes, sorting, rowSelection, statusSeverity, onLink }
+      return { args, rows: data, cols, rowActionNodes, sorting, rowSelection, statusSeverity, onLink }
     },
     template: `
       <Table
@@ -399,6 +311,7 @@ const makeStory =
         :columns="cols"
         row-key="id"
         :max-height="args.maxHeight"
+        :border="args.border"
         :paginated="args.paginated"
         :page-size="args.pageSize"
         :enable-sorting="args.enableSorting"
@@ -411,7 +324,6 @@ const makeStory =
         @update:sorting="args.onUpdateSorting"
         @update:row-selection="args.onUpdateRowSelection"
         @update:pagination="args.onUpdatePagination"
-        ${attrs}
       >
         ${toolbar}${CELL_SLOTS}
       </Table>
@@ -421,14 +333,44 @@ const makeStory =
 // --- Docs ------------------------------------------------------------------
 
 const docs = [
-  '## Table',
-  '',
   'A data-driven table built on the headless TanStack engine and rendered entirely',
-  'through our own primitives (markup, design tokens, a11y). Pass `data` + `columns`',
-  'and the table renders rows, sorting, selection, pagination, and frozen columns for',
-  'you; customise any cell with a `cell-<columnId>` slot.',
+  'through our own primitives (markup, design tokens, a11y). It ships two writing',
+  'styles: a **compound composition** form (`<Table.Header>` / `<Table.Row>` / …) you',
+  'compose by hand, and a **data-driven** form (`data` + `columns`) where the engine',
+  'renders rows, sorting, selection, pagination, and frozen columns for you.',
+  '',
+  '### Composition mode',
   '',
-  '### Basic usage',
+  'One import of the root; every part is reached via dot-notation. The root binding',
+  'must be PascalCase (`Table`) — `table` lowercase collides with the native element.',
+  '',
+  '```vue',
+  '<script setup>',
+  "import Table from '@aziontech/webkit/data/table'",
+  '</script>',
+  '',
+  '<template>',
+  '  <Table border>',
+  '    <Table.Header frozen>',
+  '      <Table.Row>',
+  '        <Table.HeadCell principal sortable>Name</Table.HeadCell>',
+  '        <Table.HeadCell>Status</Table.HeadCell>',
+  '      </Table.Row>',
+  '    </Table.Header>',
+  '    <Table.Body>',
+  '      <Table.Row>',
+  '        <Table.Cell principal>acme-prod</Table.Cell>',
+  '        <Table.Cell>Active</Table.Cell>',
+  '      </Table.Row>',
+  '    </Table.Body>',
+  '  </Table>',
+  '</template>',
+  '```',
+  '',
+  'Each sub-component is also a standalone import (`@aziontech/webkit/data/table-row`, …)',
+  '— the tree-shaking path when only a few parts are used.',
+  '',
+  '### Data-driven mode',
   '',
   '```vue',
   '<script setup>',
@@ -468,104 +410,14 @@ const docs = [
   'for sortable headers, and `paginated` to render a Paginator in the footer. State is exposed',
   'through v-model (`sorting`, `row-selection`, `pagination`, `global-filter`).',
   '',
-  '### Toolbar (optional)',
+  '### Border & toolbar',
   '',
-  'The `toolbar` / `filters` slots add an action band above the viewport, scoped with the',
-  'TanStack `table` instance — a context-aware `Table.Search` drives the global filter and a',
-  'removable `Chip` clears it (see **Full Example**). Omit the slots for a compact,',
-  'header-only table.'
+  'The table is **borderless by default** (it usually sits inside a surface that frames it); set',
+  'the `border` prop to draw the outer card border. The optional `toolbar` / `filters` slots add',
+  'an action band above the viewport, scoped with the TanStack `table` instance — a context-aware',
+  '`Table.Search` drives the global filter and a removable `Chip` clears it (see **Full Example**).'
 ].join('\n')
 
-// Inline SVG mock of the assembled table, embedded in the Full Example docs as a
-// reference preview (dark theme, matching the design tokens visually).
-const FULL_EXAMPLE_PREVIEW_SVG = `
-<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="384" viewBox="0 0 1180 384" font-family="-apple-system,Segoe UI,Roboto,sans-serif">
-  <rect x="6" y="6" width="1168" height="372" rx="10" fill="#1b1b1e" stroke="#34343a"/>
-  <rect x="22" y="20" width="40" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
-  <path d="M32 28h20l-7 8v8l-6 3v-11z" fill="none" stroke="#9a9aa2" stroke-width="1.6" stroke-linejoin="round"/>
-  <rect x="72" y="20" width="300" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
-  <circle cx="90" cy="34" r="5" fill="none" stroke="#7a7a82" stroke-width="1.6"/>
-  <line x1="94" y1="38" x2="98" y2="42" stroke="#7a7a82" stroke-width="1.6"/>
-  <text x="108" y="39" fill="#6c6c74" font-size="13">Search keywords...</text>
-  <rect x="1050" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
-  <path d="M1059 36a8 8 0 1 0 2-6" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
-  <path d="M1061 24v6h6" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
-  <rect x="1090" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
-  <path d="M1107 26v12m-5-5l5 5l5-5M1101 44h12" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
-  <rect x="1130" y="20" width="34" height="30" rx="7" fill="#232327" stroke="#3a3a40"/>
-  <path d="M1140 27v12M1147 27v12M1136 27h16" fill="none" stroke="#9a9aa2" stroke-width="1.6"/>
-  <line x1="6" y1="64" x2="1174" y2="64" stroke="#2c2c32"/>
-  <rect x="22" y="76" width="150" height="26" rx="13" fill="#2a2a30"/>
-  <text x="34" y="93" fill="#d3d3d8" font-size="12.5">Name is: test</text>
-  <circle cx="160" cy="89" r="7" fill="#3a3a42"/>
-  <path d="M157 86l6 6M163 86l-6 6" stroke="#c9c9d0" stroke-width="1.3"/>
-  <line x1="6" y1="116" x2="1174" y2="116" stroke="#2c2c32"/>
-  <rect x="26" y="129" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
-  <text x="60" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Name</text>
-  <text x="320" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">ID</text>
-  <text x="470" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Status</text>
-  <text x="600" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Last Editor</text>
-  <text x="880" y="141" fill="#8b8b92" font-size="12.5" font-weight="600">Last Modified</text>
-  <line x1="6" y1="153" x2="1174" y2="153" stroke="#2c2c32"/>
-  <g>
-    <rect x="26" y="173" width="16" height="16" rx="4" fill="#1f6feb"/>
-    <path d="M30 181l3 3l5-6" fill="none" stroke="#fff" stroke-width="1.6"/>
-    <text x="60" y="186" fill="#e7e7ea" font-size="13">webkit-storybook</text>
-    <text x="320" y="186" fill="#9a9aa2" font-size="13">1773684562</text>
-    <rect x="470" y="173" width="62" height="22" rx="11" fill="#123524"/>
-    <text x="483" y="188" fill="#52d07f" font-size="12">Active</text>
-    <text x="600" y="186" fill="#9a9aa2" font-size="13">robson.junior@azion.com</text>
-    <text x="880" y="186" fill="#9a9aa2" font-size="13">Jun 18, 2026, 06:31:37 PM</text>
-    <circle cx="1147" cy="178" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="184" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="190" r="1.6" fill="#9a9aa2"/>
-    <line x1="6" y1="207" x2="1174" y2="207" stroke="#26262b"/>
-  </g>
-  <g>
-    <rect x="26" y="227" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
-    <text x="60" y="240" fill="#e7e7ea" font-size="13">teste app</text>
-    <text x="320" y="240" fill="#9a9aa2" font-size="13">1780526808</text>
-    <rect x="470" y="227" width="62" height="22" rx="11" fill="#123524"/>
-    <text x="483" y="242" fill="#52d07f" font-size="12">Active</text>
-    <text x="600" y="240" fill="#9a9aa2" font-size="13">guilherme.santana@azion.com</text>
-    <text x="880" y="240" fill="#9a9aa2" font-size="13">Jun 3, 2026, 07:35:44 PM</text>
-    <circle cx="1147" cy="232" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="238" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="244" r="1.6" fill="#9a9aa2"/>
-    <line x1="6" y1="261" x2="1174" y2="261" stroke="#26262b"/>
-  </g>
-  <g>
-    <rect x="26" y="281" width="16" height="16" rx="4" fill="none" stroke="#5a5a62" stroke-width="1.6"/>
-    <text x="60" y="294" fill="#e7e7ea" font-size="13">static-site-blog</text>
-    <text x="320" y="294" fill="#9a9aa2" font-size="13">1776510338</text>
-    <rect x="470" y="281" width="70" height="22" rx="11" fill="#3a1a1c"/>
-    <text x="483" y="296" fill="#f0656f" font-size="12">Inactive</text>
-    <text x="600" y="294" fill="#9a9aa2" font-size="13">lucas.alves@azion.com</text>
-    <text x="880" y="294" fill="#9a9aa2" font-size="13">Mar 19, 2026, 11:03:55 AM</text>
-    <circle cx="1147" cy="286" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="292" r="1.6" fill="#9a9aa2"/><circle cx="1147" cy="298" r="1.6" fill="#9a9aa2"/>
-  </g>
-  <line x1="6" y1="320" x2="1174" y2="320" stroke="#2c2c32"/>
-  <text x="470" y="356" fill="#8b8b92" font-size="12.5">Showing 1 to 10 of 48 entries</text>
-  <g fill="none" stroke="#6a6a72" stroke-width="1.5">
-    <path d="M724 346l-4 4l4 4M732 346l-4 4l4 4"/>
-    <path d="M756 346l-4 4l4 4"/>
-  </g>
-  <rect x="776" y="340" width="24" height="22" rx="6" fill="#1f6feb"/>
-  <text x="784" y="356" fill="#fff" font-size="12.5">1</text>
-  <text x="812" y="356" fill="#9a9aa2" font-size="12.5">2</text>
-  <text x="838" y="356" fill="#9a9aa2" font-size="12.5">3</text>
-  <text x="864" y="356" fill="#9a9aa2" font-size="12.5">4</text>
-  <g fill="none" stroke="#6a6a72" stroke-width="1.5">
-    <path d="M892 346l4 4l-4 4"/>
-    <path d="M916 346l4 4l-4 4M924 346l4 4l-4 4"/>
-  </g>
-  <rect x="1004" y="340" width="58" height="24" rx="6" fill="#232327" stroke="#3a3a40"/>
-  <text x="1014" y="356" fill="#c9c9d0" font-size="12.5">10</text>
-  <path d="M1048 350l4 4l4-4" fill="none" stroke="#9a9aa2" stroke-width="1.5"/>
-  <rect x="1130" y="340" width="34" height="24" rx="6" fill="#232327" stroke="#3a3a40"/>
-  <text x="1143" y="356" fill="#c9c9d0" font-size="12.5">1</text>
-</svg>
-`
-
-const fullExamplePreview =
-  'data:image/svg+xml;utf8,' + encodeURIComponent(FULL_EXAMPLE_PREVIEW_SVG.trim())
-
 /** @type {import('@storybook/vue3').Meta<typeof Table>} */
 const meta = {
   title: 'Webkit/Data/Table',
@@ -593,6 +445,11 @@ const meta = {
         'Max height (CSS length). Vertical scroll engages only when set smaller than the content; horizontal scroll is always automatic.',
       table: { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'props' }
     },
+    border: {
+      control: 'boolean',
+      description: 'Draw the outer card border around the table (off by default).',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'props' }
+    },
     paginated: {
       control: 'boolean',
       description: 'Render a Paginator in the footer and slice the rows by page.',
@@ -635,28 +492,70 @@ const meta = {
     onUpdateRowSelection: { action: 'update:rowSelection', table: { category: 'events' } },
     onUpdatePagination: { action: 'update:pagination', table: { category: 'events' } }
   },
-  args: {
-    maxHeight: '',
-    paginated: true,
-    pageSize: 10,
-    enableSorting: true,
-    enableRowSelection: false,
-    selectOnRowClick: false,
-    headerVariant: 'default'
-  }
+  args: { ...baseArgs }
 }
 
 export default meta
 
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const Composition = {
+  name: 'Composition',
+  render: (args) => ({
+    components,
+    // Static rows — composition is hand-authored; iterating a small fixture is
+    // usage, not feature logic.
+    setup: () => ({ args, items: compositionRows, statusSeverity }),
+    template: `
+      <Table :border="args.border">
+        <Table.Body>
+          <Table.Row
+            v-for="item in items"
+            :key="item.id"
+          >
+            <Table.Cell>
+              <div class="flex w-full items-center gap-[var(--spacing-3)] py-[var(--spacing-3)]">
+                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)]">
+                  <i class="pi pi-box text-[var(--text-muted)]" />
+                </span>
+                <div class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-1)]">
+                  <span class="truncate text-[var(--text-default)]">{{ item.name }}</span>
+                  <span class="truncate text-body-xs text-[var(--text-muted)]">{{ item.editor }}</span>
+                </div>
+                <Tag :severity="statusSeverity(item.status)">{{ item.status }}</Tag>
+                <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    `
+  }),
+  args: {
+    border: true
+  },
+  parameters: {
+    docs: {
+      source: { code: COMPOSITION_SOURCE },
+      description: {
+        story:
+          'Why composition exists: full control of every cell. Here each `<Table.Row>` holds a single `<Table.Cell>` rendered as a **card-style row** — an icon, a stacked name + editor, a status `Tag`, and a row-action button — instead of fixed columns. Compose whatever you need inside the cell. For ordinary columnar data, prefer the data-driven API (`:data` + `:columns`), which renders through these same sub-components and wires sorting / selection / pagination for you.'
+      }
+    }
+  }
+}
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const WithCheckboxes = {
   name: 'With Checkboxes',
-  render: makeStory({ rows: applications, columns }),
+  render: makeStory({ rows, columns }),
   args: {
     enableRowSelection: true
   },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource({ ...baseArgs, enableRowSelection: true })
+      },
       description: {
         story:
           'A leading selection column (`enable-row-selection`): each row gets a checkbox and the header gets a select-all box that reflects the all/none/indeterminate state. Selection is exposed via `v-model:row-selection`; changes log to the Actions panel.'
@@ -668,13 +567,16 @@ export const WithCheckboxes = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const CompactHeader = {
   name: 'Compact Header',
-  render: makeStory({ rows: applications, columns }),
+  render: makeStory({ rows, columns }),
   args: {
     paginated: false,
     headerVariant: 'compact'
   },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource({ ...baseArgs, paginated: false, headerVariant: 'compact' })
+      },
       description: {
         story:
           'A denser header via `header-variant="compact"` (forwarded to `Table.Header`): the column-header row uses a reduced height and padding. No toolbar band, so the table opens straight onto that header row.'
@@ -684,14 +586,20 @@ export const CompactHeader = {
 }
 
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
-export const NoBorder = {
-  name: 'No Border',
-  render: makeStory({ rows: applications, columns, attrs: 'class="!border-0"' }),
+export const Bordered = {
+  name: 'Bordered',
+  render: makeStory({ rows, columns }),
+  args: {
+    border: true
+  },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource({ ...baseArgs, border: true })
+      },
       description: {
         story:
-          'The outer card border removed by passing a utility class (`class="!border-0"`) — it flows onto the root via attribute fallthrough. Useful when the table sits inside a surface that already provides its own framing. The internal row dividers remain.'
+          'The outer card border drawn via the `border` prop. The table is **borderless by default** (it usually sits inside a surface that already frames it); set `border` (or `:border="…"`) to draw the `var(--border-default)` outline. The internal row dividers are unaffected either way.'
       }
     }
   }
@@ -701,9 +609,9 @@ export const NoBorder = {
 export const SelectedRow = {
   name: 'Selected Row',
   render: makeStory({
-    rows: applications,
+    rows,
     columns,
-    selection: { [applications[1].id]: true }
+    selection: { [rows[1].id]: true }
   }),
   args: {
     enableRowSelection: true,
@@ -711,6 +619,13 @@ export const SelectedRow = {
   },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource({
+          ...baseArgs,
+          enableRowSelection: true,
+          selectOnRowClick: true
+        })
+      },
       description: {
         story:
           'A row in the selected state: the second row is pre-selected via `v-model:row-selection`, rendering the `var(--bg-selected)` surface and `aria-selected`. With `select-on-row-click`, clicking anywhere on an inert part of a row toggles its selection.'
@@ -722,9 +637,10 @@ export const SelectedRow = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const FixedLayoutWithColumnSizes = {
   name: 'Fixed Layout with Column Sizes',
-  render: makeStory({ rows: applications, columns: sizedColumns }),
+  render: makeStory({ rows, columns: sizedColumns }),
   parameters: {
     docs: {
+      source: { code: dataDrivenSource({ ...baseArgs }) },
       description: {
         story:
           'Every column declares an explicit pixel `width`, so the layout is fixed: columns keep their declared size instead of distributing to fill the surface, and the viewport scrolls horizontally if the widths sum past it.'
@@ -736,9 +652,10 @@ export const FixedLayoutWithColumnSizes = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const ResizableColumns = {
   name: 'Resizable Columns',
-  render: makeStory({ rows: applications, columns: resizableColumns }),
+  render: makeStory({ rows, columns: resizableColumns }),
   parameters: {
     docs: {
+      source: { code: dataDrivenSource({ ...baseArgs }) },
       description: {
         story:
           'A simple table whose columns opt into drag-to-resize via per-column `resizable: true`. Drag a header divider: only that column resizes (the others freeze at their current width) and the table grows with horizontal scroll. A column can shrink only down to its own content width. Frozen and action columns ignore `resizable`.'
@@ -750,9 +667,10 @@ export const ResizableColumns = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const StickyColumn = {
   name: 'Sticky Column',
-  render: makeStory({ rows: applicationsWide, columns: wideColumns }),
+  render: makeStory({ rows, columns: wideColumns }),
   parameters: {
     docs: {
+      source: { code: dataDrivenSource({ ...baseArgs }) },
       description: {
         story:
           'Extra columns (Protocol, Domains, Origins, Created) push the rows past the surface. The **Name** column is pinned to the start edge (`frozen: "start"`) and the **actions** menu to the end edge (`frozen: "end"`): both stay put while the middle columns scroll horizontally underneath, with a CSS-only edge fade dissolving the scrolling content under each pinned column.'
@@ -764,13 +682,16 @@ export const StickyColumn = {
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const CompactHeaderWithStickyColumn = {
   name: 'Compact Header with Sticky Column',
-  render: makeStory({ rows: applicationsWide, columns: wideColumns }),
+  render: makeStory({ rows, columns: wideColumns }),
   args: {
     paginated: false,
     headerVariant: 'compact'
   },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource({ ...baseArgs, paginated: false, headerVariant: 'compact' })
+      },
       description: {
         story:
           'A compact header (`header-variant="compact"`) combined with the freeze system: the frozen **Name** / **actions** columns stay pinned while the middle columns scroll horizontally, and the denser header is sticky within the scroll viewport. No toolbar or paginator.'
@@ -783,21 +704,53 @@ export const CompactHeaderWithStickyColumn = {
 export const FullExample = {
   name: 'Full Example',
   render: makeStory({
-    rows: applicationsLarge,
+    rows,
     columns: fullColumns,
     toolbar: FULL_TOOLBAR
   }),
   args: {
+    border: true,
     enableRowSelection: true,
     selectOnRowClick: false
   },
   parameters: {
     docs: {
+      source: {
+        code: dataDrivenSource(
+          { ...baseArgs, border: true, enableRowSelection: true },
+          { toolbar: true }
+        )
+      },
+      description: {
+        story:
+          'The complete data table over the generic ≤10-row dataset, paginated with a small `page-size` so the paginator spans a couple of pages: the only story with the toolbar band — a composed toolbar (filter / context-aware search / refresh / export / column-selector) wired through the scoped `#toolbar="{ table }"` / `#filters="{ table }"` slots — the search drives `table.setGlobalFilter` and the removable chip clears it — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, the `border` prop, and a paginator.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const Empty = {
+  name: 'Empty',
+  render: makeStory({ rows: [], columns }),
+  args: {
+    border: true,
+    paginated: false
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<!-- No rows -> the default empty state renders in the #empty slot -->
+<Table :data="[]" :columns="columns" border>
+  <!-- Override the default to supply your own copy + actions: -->
+  <template #empty>
+    <!-- illustration / title / description / Create button / docs link -->
+  </template>
+</Table>`
+      },
       description: {
         story:
-          'The complete data table over a larger dataset (48 rows across several pages): a composed toolbar (filter / context-aware search / refresh / export / column-selector) wired through the scoped `#toolbar="{ table }"` / `#filters="{ table }"` slots — the search drives `table.setGlobalFilter` and the removable chip clears it — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, and a paginator.\n\nReference preview:\n\n![Full data table example](' +
-          fullExamplePreview +
-          ')'
+          'When `data` is empty, the table renders a default empty state in the `#empty` slot — an illustration, a title, and a short description, following Figma. Override the `#empty` slot to supply your own copy and call-to-action (e.g. a Create button or a documentation link).'
       }
     }
   }
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 5b97fea1..7d1ad538 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -37,7 +37,7 @@
     "tailwind-merge": "^3.6.0",
     "vee-validate": "^4.15.1",
     "vue-tsc": "^3.2.5",
-    "@aziontech/theme": "^2.3.2"
+    "@aziontech/theme": "workspace:*"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.4.5",
diff --git a/packages/webkit/src/components/data/table/table-cell/table-cell.vue b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
index 663e44d0..2a9f3584 100644
--- a/packages/webkit/src/components/data/table/table-cell/table-cell.vue
+++ b/packages/webkit/src/components/data/table/table-cell/table-cell.vue
@@ -18,8 +18,10 @@
     kind?: TableCellKind
     /** Text alignment. */
     align?: TableCellAlign
-    /** Flex weight; the emphasized first column uses 2. */
+    /** Flex weight; the principal column uses 2 (see `principal`). */
     grow?: TableCellGrow
+    /** Marks the principal column — defaults its weight to `grow: 2` when `grow` is not set. */
+    principal?: boolean
     /** Pins the column to the start or end edge of the scroll container. */
     frozen?: TableCellFrozen
     /** Underlines the cell text to signal it links somewhere. */
@@ -29,7 +31,8 @@
   const props = withDefaults(defineProps<Props>(), {
     kind: 'default',
     align: 'start',
-    grow: 1,
+    grow: undefined,
+    principal: false,
     frozen: undefined,
     clickable: false
   })
@@ -47,7 +50,9 @@
       (ctx ? `${ctx.testId}__cell` : 'data-table__cell')
   )
 
-  const growAttr = computed<number | null>(() => (props.kind === 'default' ? props.grow : null))
+  const growAttr = computed<number | null>(() =>
+    props.kind === 'default' ? (props.grow ?? (props.principal ? 2 : 1)) : null
+  )
 
   const cellRef = ref<HTMLElement | null>(null)
 
diff --git a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
index 7575ed21..f8b60409 100644
--- a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
+++ b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue
@@ -24,8 +24,10 @@
     sortDirection?: SortDirection
     /** Text alignment. */
     align?: TableHeadCellAlign
-    /** Flex weight; the emphasized first column uses 2. */
+    /** Flex weight; the principal column uses 2 (see `principal`). */
     grow?: TableHeadCellGrow
+    /** Marks the principal column — defaults its weight to `grow: 2` when `grow` is not set. */
+    principal?: boolean
     /** Pins the column to the start or end edge of the scroll container. */
     frozen?: TableHeadCellFrozen
     /** Renders a drag-to-resize handle on the right edge. */
@@ -41,7 +43,8 @@
     sortable: false,
     sortDirection: 'none',
     align: 'start',
-    grow: 1,
+    grow: undefined,
+    principal: false,
     frozen: undefined,
     resizable: false,
     resizing: false,
@@ -69,7 +72,9 @@
   )
 
   const growAttr = computed<number | null>(() =>
-    props.kind === 'checkbox' || props.kind === 'action' ? null : props.grow
+    props.kind === 'checkbox' || props.kind === 'action'
+      ? null
+      : (props.grow ?? (props.principal ? 2 : 1))
   )
 
   const ariaSort = computed<SortDirection | undefined>(() =>
diff --git a/packages/webkit/src/components/data/table/table.vue b/packages/webkit/src/components/data/table/table.vue
index a70edd96..cc7aacf4 100644
--- a/packages/webkit/src/components/data/table/table.vue
+++ b/packages/webkit/src/components/data/table/table.vue
@@ -15,6 +15,7 @@
   } from '@tanstack/vue-table'
   import { computed, provide, ref, useAttrs, useSlots, watch } from 'vue'
 
+  import EmptyIllustration from '../../../svg/illustration-layers/illustration-layers.vue'
   import Checkbox from '../../inputs/checkbox/checkbox.vue'
   import ScrollArea from '../../layout/scroll-area/scroll-area.vue'
   import PaginationButton from '../paginator/pagination-button/pagination-button.vue'
@@ -41,8 +42,10 @@
     header?: string
     /** Allow sorting on this column. */
     enableSorting?: boolean
-    /** Flex weight; the emphasized first column uses 2. */
+    /** Flex weight; the principal column uses 2 (see `principal`). */
     grow?: 1 | 2 | 3
+    /** Mark this as the principal column — it defaults to `grow: 2`. When no column sets it, the first non-checkbox column is principal. */
+    principal?: boolean
     /** Pin this column to the start or end edge. */
     frozen?: 'start' | 'end'
     /** Fixed width (px) — needed for a frozen column that precedes another frozen column on the same edge, so sticky offsets can be summed. */
@@ -66,6 +69,8 @@
     defineProps<{
       /** Max height (CSS length). Vertical scroll engages only when set smaller than the content; horizontal scroll is always automatic. */
       maxHeight?: string
+      /** Draw the outer card border around the table (off by default; the table is typically framed by a surrounding surface). */
+      border?: boolean
       /** Data-driven mode: row records. */
       data?: RowRecord[]
       /** Data-driven mode: column definitions. When set, the table renders itself via TanStack. */
@@ -107,6 +112,7 @@
     }>(),
     {
       maxHeight: '',
+      border: false,
       data: () => [],
       columns: () => [],
       rowKey: 'id',
@@ -220,6 +226,15 @@
     return typeof updater === 'function' ? (updater as (old: T) => T)(current) : updater
   }
 
+  // The principal column defaults to `grow: 2`. A column may opt in via
+  // `principal: true`; otherwise the first non-action column is principal
+  // (the checkbox column is separate, so this is the first data column).
+  const principalIndex = computed<number>(() => {
+    const flagged = props.columns.findIndex((col) => col.principal)
+    if (flagged !== -1) return flagged
+    return props.columns.findIndex((col) => col.kind !== 'action')
+  })
+
   const tableColumns = computed<ColumnDef<RowRecord>[]>(() =>
     props.columns.map((col, index) => ({
       id: col.id ?? col.accessorKey ?? col.header ?? '',
@@ -228,10 +243,10 @@
       enableSorting: col.enableSorting ?? props.enableSorting,
       size: col.width,
       meta: {
-        // Default flex weight: the first (emphasized) column gets 2, the rest 1,
-        // so the columns fill the available space proportionally unless a column
-        // sets its own `grow`. Action columns ignore weight (fixed 40px).
-        grow: col.grow ?? (index === 0 ? 2 : 1),
+        // Default flex weight: the principal column gets 2, the rest 1, so the
+        // columns fill the available space proportionally unless a column sets
+        // its own `grow`. Action columns ignore weight (fixed 40px).
+        grow: col.grow ?? (index === principalIndex.value ? 2 : 1),
         frozen: col.frozen,
         align: col.align,
         kind: col.kind,
@@ -578,8 +593,9 @@
     v-bind="$attrs"
     role="table"
     :data-testid="testId"
+    :data-border="border || null"
     :style="viewportHeightVar"
-    class="flex w-full flex-col overflow-hidden rounded-[var(--shape-elements)] border-[length:var(--border-width-default)] border-solid border-[var(--border-default)] bg-[var(--bg-surface)] text-[var(--text-default)] text-body-sm"
+    class="flex w-full flex-col overflow-hidden rounded-[var(--shape-elements)] bg-[var(--bg-surface)] text-[var(--text-default)] text-body-sm data-[border]:border-[length:var(--border-width-default)] data-[border]:border-solid data-[border]:border-[var(--border-default)]"
   >
     <div
       v-if="$slots['title'] || $slots['toolbar'] || $slots['filters']"
@@ -679,7 +695,7 @@
             </TableRow>
           </TableHeader>
 
-          <TableBody>
+          <TableBody v-if="rows.length > 0">
             <TableRow
               v-for="row in rows"
               :key="row.id"
@@ -721,13 +737,26 @@
                 >
               </TableCell>
             </TableRow>
-
-            <TableRow v-if="rows.length === 0">
-              <TableCell>
-                <slot name="empty">No data</slot>
-              </TableCell>
-            </TableRow>
           </TableBody>
+
+          <!-- Empty state — a plain block, NOT a row: it has no hover/selection
+               affordance because it is not selectable data. -->
+          <div
+            v-if="rows.length === 0"
+            role="presentation"
+            :data-testid="`${testId}__empty`"
+            class="flex w-full flex-col items-center justify-center gap-[var(--spacing-6)] px-[var(--spacing-8)] py-[var(--spacing-12)] text-center"
+          >
+            <slot name="empty">
+              <EmptyIllustration class="!mb-0" />
+              <div class="flex flex-col gap-[var(--spacing-2)]">
+                <p class="text-heading-sm text-[var(--text-default)]">No results yet</p>
+                <p class="text-body-sm text-[var(--text-muted)]">
+                  Get started by creating your first resource.
+                </p>
+              </div>
+            </slot>
+          </div>
         </template>
 
         <slot v-else />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfa6c67b..04c86e2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -343,8 +343,8 @@ importers:
   packages/webkit:
     dependencies:
       '@aziontech/theme':
-        specifier: ^2.3.2
-        version: 2.3.2(typescript@6.0.3)(yaml@2.8.3)
+        specifier: workspace:*
+        version: link:../theme
       '@tanstack/vue-table':
         specifier: ^8.21.3
         version: 8.21.3(vue@3.5.33(typescript@6.0.3))
@@ -413,9 +413,6 @@ packages:
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
-  '@aziontech/theme@2.3.2':
-    resolution: {integrity: sha512-mH2bK3Rnwmq/LoemQelT8K0yIsuSGJ5ShGa2KYI/7dDK7VRB0kvdH0Qb12yfiKkNg8oFSyhgcD4WshacbNid5w==}
-
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -7419,15 +7416,6 @@ snapshots:
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
 
-  '@aziontech/theme@2.3.2(typescript@6.0.3)(yaml@2.8.3)':
-    dependencies:
-      tailwindcss: 3.4.19(yaml@2.8.3)
-      vue-tsc: 3.2.7(typescript@6.0.3)
-    transitivePeerDependencies:
-      - tsx
-      - typescript
-      - yaml
-
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5

From 743c1e73276ea831efc834bd7ead8ecc59f7bf68 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Wed, 24 Jun 2026 10:37:14 -0300
Subject: [PATCH 4/4] docs(webkit): copy-paste-ready Show code for
 Table/Paginator stories

- Wrap each Table story's source.code in a complete SFC (imports + data +
  columns + handlers + template) so Show code reproduces the rendered table.
- Replace the card-style Composition story with a Default data-driven table
  (border) plus a plain composition example; drop the redundant Bordered story.
- Register the compound sub-components under their dot-notation names so the
  runtime story templates resolve <Table.Header> etc. (also fixes the latent
  <Table.Search> resolution in Full Example's toolbar).
- Remove the now-redundant Usage blocks from the Table and Paginator
  component descriptions.
---
 .../stories/webkit/data/Paginator.stories.js  |  21 +-
 .../src/stories/webkit/data/Table.stories.js  | 358 +++++++++++-------
 2 files changed, 214 insertions(+), 165 deletions(-)

diff --git a/apps/storybook/src/stories/webkit/data/Paginator.stories.js b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
index b3224b8f..636ee8ca 100644
--- a/apps/storybook/src/stories/webkit/data/Paginator.stories.js
+++ b/apps/storybook/src/stories/webkit/data/Paginator.stories.js
@@ -7,24 +7,6 @@ import { ref, watch } from 'vue'
 // tree-shaking path; the stories lead with the compound form per compound-api.md.
 const paginatorComponents = { Paginator }
 
-const usage = [
-  '```vue',
-  '<Paginator>',
-  '  <template #info>',
-  '    <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>',
-  '  </template>',
-  '  <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>',
-  '  <Paginator.Button kind="number" selected>1</Paginator.Button>',
-  '  <Paginator.Button kind="number">2</Paginator.Button>',
-  '  <Paginator.Button kind="more" />',
-  '  <Paginator.Button kind="next">Next</Paginator.Button>',
-  '  <template #controls>',
-  '    <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />',
-  '  </template>',
-  '</Paginator>',
-  '```'
-].join('\n')
-
 // --- "Show code" source ----------------------------------------------------
 // Storybook's default dynamic source for a custom-template story renders the
 // internal markup (or the render function), not the authored `<Paginator>` usage.
@@ -89,8 +71,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'Pagination controls — a three-region landmark (page-info text, navigation buttons, rows-per-page selector). No data engine; wire current page and page-size through your own state.\n\n' +
-          usage
+          'Pagination controls — a three-region landmark (page-info text, navigation buttons, rows-per-page selector). No data engine; wire current page and page-size through your own state.'
       }
     }
   },
diff --git a/apps/storybook/src/stories/webkit/data/Table.stories.js b/apps/storybook/src/stories/webkit/data/Table.stories.js
index 7a6e112f..12d38eb8 100644
--- a/apps/storybook/src/stories/webkit/data/Table.stories.js
+++ b/apps/storybook/src/stories/webkit/data/Table.stories.js
@@ -1,5 +1,11 @@
 import Chip from '@aziontech/webkit/chip'
 import Table from '@aziontech/webkit/data/table'
+import TableBody from '@aziontech/webkit/data/table-body'
+import TableCell from '@aziontech/webkit/data/table-cell'
+import TableHeadCell from '@aziontech/webkit/data/table-head-cell'
+import TableHeader from '@aziontech/webkit/data/table-header'
+import TableRow from '@aziontech/webkit/data/table-row'
+import TableSearch from '@aziontech/webkit/data/table-search'
 import IconButton from '@aziontech/webkit/icon-button'
 import DropdownMenu from '@aziontech/webkit/overlay/dropdown-menu'
 import DropdownMenuContent from '@aziontech/webkit/overlay/dropdown-menu-content'
@@ -22,7 +28,19 @@ const components = {
   DropdownMenuTrigger,
   DropdownMenuPortal,
   DropdownMenuContent,
-  DropdownMenuFromModel
+  DropdownMenuFromModel,
+  // Compound sub-components registered under their dot-notation names so they
+  // resolve in Storybook's runtime-compiled string templates: Vue compiles
+  // `<Table.Header>` to `resolveComponent("Table.Header")`, an exact-name lookup
+  // (a bare `Table` registration does not satisfy it). In a real SFC the dotted
+  // tag resolves off the imported `Table` binding, so consumer code needs only
+  // `import Table` — these extra registrations are a Storybook-runtime concern.
+  'Table.Header': TableHeader,
+  'Table.Body': TableBody,
+  'Table.Row': TableRow,
+  'Table.HeadCell': TableHeadCell,
+  'Table.Cell': TableCell,
+  'Table.Search': TableSearch
 }
 
 // --- Generic fixtures ------------------------------------------------------
@@ -60,9 +78,6 @@ const rows = Object.freeze(
   }))
 )
 
-// A compact 5-row slice for the hand-composed Composition story.
-const compositionRows = rows.slice(0, 5)
-
 // No explicit `width` — columns distribute across the full container via their
 // `grow` flex weight, so the table fills the surface with no horizontal scroll.
 // The first non-action column is the principal column (defaults to `grow: 2`),
@@ -104,10 +119,8 @@ const wideColumns = [
 ]
 
 // Per-column resize is opt-in via `resizable: true`. The simple set with every
-// column resizable powers the Resizable Columns story; the wide set with every
-// column resizable powers Full Example (frozen Name + action ignore the flag).
+// column resizable powers the Resizable Columns story.
 const resizableColumns = columns.map((col) => ({ ...col, resizable: true }))
-const fullColumns = wideColumns.map((col) => ({ ...col, resizable: true }))
 
 // One shared, immutable action list — built once, reused by every row's menu.
 const rowActionNodes = [
@@ -202,10 +215,10 @@ const makeOnLink = (args) => (event, row) => {
 // --- "Show code" source ----------------------------------------------------
 // Storybook's default dynamic source for a custom-template story renders the
 // internal markup (or the render function), not the authored `<Table>` usage.
-// Each story therefore ships an explicit `docs.source.code` built from its
-// resolved args, so "Show code" shows the real component code. The args are
-// known at module load (meta defaults + per-story overrides), so the snippet is
-// computed up front rather than from a runtime transform.
+// Each story therefore ships an explicit `docs.source.code` holding a complete,
+// copy-pasteable SFC — the imports it needs, the `rows`/`columns` data, the cell
+// handlers, and the `<template>` — built from its resolved args at module load
+// (meta defaults + per-story overrides) rather than from a runtime transform.
 
 const baseArgs = {
   maxHeight: '',
@@ -271,26 +284,137 @@ const dataDrivenSource = (args, { columnsName = 'columns', toolbar = false } = {
   return `${open.join('\n')}\n${inner}\n</Table>`
 }
 
-const COMPOSITION_SOURCE = `<!-- Composition gives full control of each cell — here, a card-style row -->
-<Table border>
+// Indent every non-empty line by `spaces`, so a fragment nests under a parent.
+const indent = (text, spaces = 2) =>
+  text
+    .split('\n')
+    .map((line) => (line ? ' '.repeat(spaces) + line : line))
+    .join('\n')
+
+// Assemble a complete, copy-pasteable SFC. `</script>` is kept as a discrete
+// string (never inside a template literal) per the SFC-parser pitfall in
+// .claude/rules/styling.md.
+const sfc = (imports, script, template) =>
+  [
+    '<script setup>',
+    imports,
+    '',
+    script,
+    '</script>',
+    '',
+    '<template>',
+    indent(template),
+    '</template>'
+  ].join('\n')
+
+// Serialize a column array to a readable `const columns = [...]` JS literal, so
+// each snippet shows the exact column config it renders (width / frozen / …).
+const serializeColumns = (cols) => {
+  const body = cols
+    .map((col) => {
+      const entries = Object.entries(col).map(
+        ([key, value]) => `${key}: ${typeof value === 'string' ? `'${value}'` : value}`
+      )
+      return `  { ${entries.join(', ')} }`
+    })
+    .join(',\n')
+  return `const columns = [\n${body}\n]`
+}
+
+// A small, complete sample dataset (every field any column reads).
+const SOURCE_ROWS = `const rows = [
+  { id: '1001', name: 'Workload Alpha', status: 'Active', editor: 'user1@example.com', modified: 'Jan 1, 2026, 09:00 AM', protocol: 'HTTP & HTTPS', domains: 2, origins: 1, created: 'Dec 1, 2025, 10:00 AM' },
+  { id: '1002', name: 'Workload Bravo', status: 'Inactive', editor: 'user2@example.com', modified: 'Jan 2, 2026, 09:00 AM', protocol: 'HTTP', domains: 1, origins: 2, created: 'Dec 2, 2025, 10:00 AM' },
+  { id: '1003', name: 'Workload Charlie', status: 'Degraded', editor: 'user3@example.com', modified: 'Jan 3, 2026, 09:00 AM', protocol: 'gRPC', domains: 3, origins: 1, created: 'Dec 3, 2025, 10:00 AM' }
+]`
+
+const SOURCE_ACTION_NODES = `const rowActionNodes = [
+  dropdownMenuItem('View details', { value: 'view', icon: 'pi pi-eye' }),
+  dropdownMenuItem('Edit', { value: 'edit', icon: 'pi pi-pencil' }),
+  dropdownMenuItem('Duplicate', { value: 'duplicate', icon: 'pi pi-copy' }),
+  dropdownMenuSeparator(),
+  dropdownMenuItem('Delete', { value: 'delete', icon: 'pi pi-trash' })
+]`
+
+const SOURCE_STATUS_SEVERITY = `const statusSeverity = (status) =>
+  status === 'Active' ? 'success' : status === 'Degraded' ? 'warning' : 'danger'`
+
+// A data-driven story's resolved args -> a complete SFC: the imports it needs,
+// the data + columns + handlers, and the `<template>` (the same open tag the
+// live render uses, via dataDrivenSource).
+const dataDrivenSnippet = (args, { cols, toolbar = false } = {}) => {
+  const imports = [
+    "import { ref } from 'vue'",
+    "import Table from '@aziontech/webkit/data/table'",
+    "import Tag from '@aziontech/webkit/tag'",
+    "import IconButton from '@aziontech/webkit/icon-button'",
+    ...(toolbar ? ["import Chip from '@aziontech/webkit/chip'"] : []),
+    "import DropdownMenu from '@aziontech/webkit/overlay/dropdown-menu'",
+    "import DropdownMenuTrigger from '@aziontech/webkit/overlay/dropdown-menu-trigger'",
+    "import DropdownMenuPortal from '@aziontech/webkit/overlay/dropdown-menu-portal'",
+    "import DropdownMenuContent from '@aziontech/webkit/overlay/dropdown-menu-content'",
+    "import DropdownMenuFromModel from '@aziontech/webkit/overlay/dropdown-menu-from-model'",
+    "import { dropdownMenuItem, dropdownMenuSeparator } from '@aziontech/webkit/overlay/dropdown-menu-factory'"
+  ].join('\n')
+
+  const script = [
+    SOURCE_ROWS,
+    '',
+    serializeColumns(cols),
+    '',
+    'const sorting = ref([])',
+    ...(args.enableRowSelection ? ['const rowSelection = ref({})'] : []),
+    '',
+    SOURCE_ACTION_NODES,
+    '',
+    SOURCE_STATUS_SEVERITY,
+    '',
+    'const onRowClick = (row) => {}',
+    'const onRowAction = ({ action }) => {}'
+  ].join('\n')
+
+  return sfc(imports, script, dataDrivenSource(args, { toolbar }))
+}
+
+const COMPOSITION_SOURCE = sfc(
+  "import Table from '@aziontech/webkit/data/table'",
+  `const items = [
+  { id: '1001', name: 'Workload Alpha', status: 'Active', editor: 'user1@example.com' },
+  { id: '1002', name: 'Workload Bravo', status: 'Inactive', editor: 'user2@example.com' },
+  { id: '1003', name: 'Workload Charlie', status: 'Degraded', editor: 'user3@example.com' }
+]`,
+  `<Table border>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeadCell principal>Name</Table.HeadCell>
+      <Table.HeadCell>Status</Table.HeadCell>
+      <Table.HeadCell>Last Editor</Table.HeadCell>
+    </Table.Row>
+  </Table.Header>
   <Table.Body>
     <Table.Row v-for="item in items" :key="item.id">
-      <Table.Cell>
-        <div class="flex w-full items-center gap-[var(--spacing-3)] py-[var(--spacing-3)]">
-          <span class="flex h-10 w-10 items-center justify-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)]">
-            <i class="pi pi-box text-[var(--text-muted)]" />
-          </span>
-          <div class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-1)]">
-            <span class="truncate text-[var(--text-default)]">{{ item.name }}</span>
-            <span class="truncate text-body-xs text-[var(--text-muted)]">{{ item.editor }}</span>
-          </div>
-          <Tag :severity="severity(item.status)">{{ item.status }}</Tag>
-          <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
-        </div>
-      </Table.Cell>
+      <Table.Cell principal><span class="min-w-0 flex-1 truncate">{{ item.name }}</span></Table.Cell>
+      <Table.Cell><span class="min-w-0 flex-1 truncate">{{ item.status }}</span></Table.Cell>
+      <Table.Cell><span class="min-w-0 flex-1 truncate">{{ item.editor }}</span></Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table>`
+)
+
+const EMPTY_SOURCE = sfc(
+  "import Table from '@aziontech/webkit/data/table'",
+  `const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'status', header: 'Status' }
+]`,
+  `<!-- No rows -> the default empty state renders in the #empty slot -->
+<Table :data="[]" :columns="columns" border>
+  <!-- Override the default to supply your own copy + actions: -->
+  <template #empty>
+    <!-- illustration / title / description / Create button / docs link -->
+  </template>
+</Table>`
+)
 
 // Render factory (data-driven): every story is the same data-driven <Table> wired
 // to the controls; only the data set, the column set, the pre-seeded selection,
@@ -303,7 +427,16 @@ const makeStory =
       const sorting = ref([])
       const rowSelection = ref({ ...selection })
       const onLink = makeOnLink(args)
-      return { args, rows: data, cols, rowActionNodes, sorting, rowSelection, statusSeverity, onLink }
+      return {
+        args,
+        rows: data,
+        cols,
+        rowActionNodes,
+        sorting,
+        rowSelection,
+        statusSeverity,
+        onLink
+      }
     },
     template: `
       <Table
@@ -344,56 +477,9 @@ const docs = [
   'One import of the root; every part is reached via dot-notation. The root binding',
   'must be PascalCase (`Table`) — `table` lowercase collides with the native element.',
   '',
-  '```vue',
-  '<script setup>',
-  "import Table from '@aziontech/webkit/data/table'",
-  '</script>',
-  '',
-  '<template>',
-  '  <Table border>',
-  '    <Table.Header frozen>',
-  '      <Table.Row>',
-  '        <Table.HeadCell principal sortable>Name</Table.HeadCell>',
-  '        <Table.HeadCell>Status</Table.HeadCell>',
-  '      </Table.Row>',
-  '    </Table.Header>',
-  '    <Table.Body>',
-  '      <Table.Row>',
-  '        <Table.Cell principal>acme-prod</Table.Cell>',
-  '        <Table.Cell>Active</Table.Cell>',
-  '      </Table.Row>',
-  '    </Table.Body>',
-  '  </Table>',
-  '</template>',
-  '```',
-  '',
   'Each sub-component is also a standalone import (`@aziontech/webkit/data/table-row`, …)',
   '— the tree-shaking path when only a few parts are used.',
   '',
-  '### Data-driven mode',
-  '',
-  '```vue',
-  '<script setup>',
-  "import { ref } from 'vue'",
-  "import Table from '@aziontech/webkit/data/table'",
-  "import Tag from '@aziontech/webkit/tag'",
-  '',
-  "const data = ref([{ id: '1', name: 'acme-prod', status: 'Active' }])",
-  'const columns = [',
-  "  { accessorKey: 'name', header: 'Name', grow: 2 },",
-  "  { accessorKey: 'status', header: 'Status' },",
-  "  { id: 'actions', header: '', kind: 'action' }",
-  ']',
-  '</script>',
-  '',
-  '<template>',
-  '  <Table :data="data" :columns="columns" row-key="id" enable-sorting paginated>',
-  '    <template #cell-status="{ value }"><Tag>{{ value }}</Tag></template>',
-  '    <template #cell-actions="{ row }"><!-- row menu --></template>',
-  '  </Table>',
-  '</template>',
-  '```',
-  '',
   '### Column options',
   '',
   'Each column entry accepts:',
@@ -408,14 +494,7 @@ const docs = [
   '',
   'Add `enable-row-selection` for a leading checkbox column (with select-all), `enable-sorting`',
   'for sortable headers, and `paginated` to render a Paginator in the footer. State is exposed',
-  'through v-model (`sorting`, `row-selection`, `pagination`, `global-filter`).',
-  '',
-  '### Border & toolbar',
-  '',
-  'The table is **borderless by default** (it usually sits inside a surface that frames it); set',
-  'the `border` prop to draw the outer card border. The optional `toolbar` / `filters` slots add',
-  'an action band above the viewport, scoped with the TanStack `table` instance — a context-aware',
-  '`Table.Search` drives the global filter and a removable `Chip` clears it (see **Full Example**).'
+  'through v-model (`sorting`, `row-selection`, `pagination`, `global-filter`).'
 ].join('\n')
 
 /** @type {import('@storybook/vue3').Meta<typeof Table>} */
@@ -497,34 +576,44 @@ const meta = {
 
 export default meta
 
+/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
+export const Default = {
+  name: 'Default',
+  render: makeStory({ rows, columns }),
+  args: {
+    border: true
+  },
+  parameters: {
+    docs: {
+      source: { code: dataDrivenSnippet({ ...baseArgs, border: true }, { cols: columns }) },
+      description: {
+        story:
+          'A standard data-driven table: pass `:data` and `:columns` and the engine renders sortable headers, status `Tag`s, per-row action menus, and pagination. The outer card border is drawn via the `border` prop — the table is borderless by default (it usually sits inside a surface that already frames it), so set `border` to draw the `var(--border-default)` outline; the internal row dividers are unaffected either way.'
+      }
+    }
+  }
+}
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const Composition = {
   name: 'Composition',
   render: (args) => ({
     components,
-    // Static rows — composition is hand-authored; iterating a small fixture is
-    // usage, not feature logic.
-    setup: () => ({ args, items: compositionRows, statusSeverity }),
+    setup: () => ({ args, items: rows.slice(0, 5) }),
     template: `
       <Table :border="args.border">
+        <Table.Header>
+          <Table.Row>
+            <Table.HeadCell principal>Name</Table.HeadCell>
+            <Table.HeadCell>Status</Table.HeadCell>
+            <Table.HeadCell>Last Editor</Table.HeadCell>
+          </Table.Row>
+        </Table.Header>
         <Table.Body>
-          <Table.Row
-            v-for="item in items"
-            :key="item.id"
-          >
-            <Table.Cell>
-              <div class="flex w-full items-center gap-[var(--spacing-3)] py-[var(--spacing-3)]">
-                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--shape-elements)] bg-[var(--bg-canvas)]">
-                  <i class="pi pi-box text-[var(--text-muted)]" />
-                </span>
-                <div class="flex min-w-0 flex-1 flex-col gap-[var(--spacing-1)]">
-                  <span class="truncate text-[var(--text-default)]">{{ item.name }}</span>
-                  <span class="truncate text-body-xs text-[var(--text-muted)]">{{ item.editor }}</span>
-                </div>
-                <Tag :severity="statusSeverity(item.status)">{{ item.status }}</Tag>
-                <IconButton icon="pi pi-ellipsis-v" aria-label="Row actions" kind="transparent" size="small" />
-              </div>
-            </Table.Cell>
+          <Table.Row v-for="item in items" :key="item.id">
+            <Table.Cell principal><span class="min-w-0 flex-1 truncate">{{ item.name }}</span></Table.Cell>
+            <Table.Cell><span class="min-w-0 flex-1 truncate">{{ item.status }}</span></Table.Cell>
+            <Table.Cell><span class="min-w-0 flex-1 truncate">{{ item.editor }}</span></Table.Cell>
           </Table.Row>
         </Table.Body>
       </Table>
@@ -538,7 +627,7 @@ export const Composition = {
       source: { code: COMPOSITION_SOURCE },
       description: {
         story:
-          'Why composition exists: full control of every cell. Here each `<Table.Row>` holds a single `<Table.Cell>` rendered as a **card-style row** — an icon, a stacked name + editor, a status `Tag`, and a row-action button — instead of fixed columns. Compose whatever you need inside the cell. For ordinary columnar data, prefer the data-driven API (`:data` + `:columns`), which renders through these same sub-components and wires sorting / selection / pagination for you.'
+          'The compound API: build the table by hand from `<Table.Header>` / `<Table.Row>` / `<Table.HeadCell>` / `<Table.Cell>`. The result is an ordinary table — the same as the data-driven API — but you control every cell. Reach for it when a cell needs custom content; otherwise prefer `:data` + `:columns`.'
       }
     }
   }
@@ -554,7 +643,7 @@ export const WithCheckboxes = {
   parameters: {
     docs: {
       source: {
-        code: dataDrivenSource({ ...baseArgs, enableRowSelection: true })
+        code: dataDrivenSnippet({ ...baseArgs, enableRowSelection: true }, { cols: columns })
       },
       description: {
         story:
@@ -575,7 +664,10 @@ export const CompactHeader = {
   parameters: {
     docs: {
       source: {
-        code: dataDrivenSource({ ...baseArgs, paginated: false, headerVariant: 'compact' })
+        code: dataDrivenSnippet(
+          { ...baseArgs, paginated: false, headerVariant: 'compact' },
+          { cols: columns }
+        )
       },
       description: {
         story:
@@ -585,26 +677,6 @@ export const CompactHeader = {
   }
 }
 
-/** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
-export const Bordered = {
-  name: 'Bordered',
-  render: makeStory({ rows, columns }),
-  args: {
-    border: true
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: dataDrivenSource({ ...baseArgs, border: true })
-      },
-      description: {
-        story:
-          'The outer card border drawn via the `border` prop. The table is **borderless by default** (it usually sits inside a surface that already frames it); set `border` (or `:border="…"`) to draw the `var(--border-default)` outline. The internal row dividers are unaffected either way.'
-      }
-    }
-  }
-}
-
 /** @type {import('@storybook/vue3').StoryObj<typeof Table>} */
 export const SelectedRow = {
   name: 'Selected Row',
@@ -620,11 +692,10 @@ export const SelectedRow = {
   parameters: {
     docs: {
       source: {
-        code: dataDrivenSource({
-          ...baseArgs,
-          enableRowSelection: true,
-          selectOnRowClick: true
-        })
+        code: dataDrivenSnippet(
+          { ...baseArgs, enableRowSelection: true, selectOnRowClick: true },
+          { cols: columns }
+        )
       },
       description: {
         story:
@@ -640,7 +711,7 @@ export const FixedLayoutWithColumnSizes = {
   render: makeStory({ rows, columns: sizedColumns }),
   parameters: {
     docs: {
-      source: { code: dataDrivenSource({ ...baseArgs }) },
+      source: { code: dataDrivenSnippet({ ...baseArgs }, { cols: sizedColumns }) },
       description: {
         story:
           'Every column declares an explicit pixel `width`, so the layout is fixed: columns keep their declared size instead of distributing to fill the surface, and the viewport scrolls horizontally if the widths sum past it.'
@@ -655,7 +726,7 @@ export const ResizableColumns = {
   render: makeStory({ rows, columns: resizableColumns }),
   parameters: {
     docs: {
-      source: { code: dataDrivenSource({ ...baseArgs }) },
+      source: { code: dataDrivenSnippet({ ...baseArgs }, { cols: resizableColumns }) },
       description: {
         story:
           'A simple table whose columns opt into drag-to-resize via per-column `resizable: true`. Drag a header divider: only that column resizes (the others freeze at their current width) and the table grows with horizontal scroll. A column can shrink only down to its own content width. Frozen and action columns ignore `resizable`.'
@@ -670,7 +741,7 @@ export const StickyColumn = {
   render: makeStory({ rows, columns: wideColumns }),
   parameters: {
     docs: {
-      source: { code: dataDrivenSource({ ...baseArgs }) },
+      source: { code: dataDrivenSnippet({ ...baseArgs }, { cols: wideColumns }) },
       description: {
         story:
           'Extra columns (Protocol, Domains, Origins, Created) push the rows past the surface. The **Name** column is pinned to the start edge (`frozen: "start"`) and the **actions** menu to the end edge (`frozen: "end"`): both stay put while the middle columns scroll horizontally underneath, with a CSS-only edge fade dissolving the scrolling content under each pinned column.'
@@ -690,7 +761,10 @@ export const CompactHeaderWithStickyColumn = {
   parameters: {
     docs: {
       source: {
-        code: dataDrivenSource({ ...baseArgs, paginated: false, headerVariant: 'compact' })
+        code: dataDrivenSnippet(
+          { ...baseArgs, paginated: false, headerVariant: 'compact' },
+          { cols: wideColumns }
+        )
       },
       description: {
         story:
@@ -705,7 +779,7 @@ export const FullExample = {
   name: 'Full Example',
   render: makeStory({
     rows,
-    columns: fullColumns,
+    columns,
     toolbar: FULL_TOOLBAR
   }),
   args: {
@@ -716,14 +790,14 @@ export const FullExample = {
   parameters: {
     docs: {
       source: {
-        code: dataDrivenSource(
+        code: dataDrivenSnippet(
           { ...baseArgs, border: true, enableRowSelection: true },
-          { toolbar: true }
+          { cols: columns, toolbar: true }
         )
       },
       description: {
         story:
-          'The complete data table over the generic ≤10-row dataset, paginated with a small `page-size` so the paginator spans a couple of pages: the only story with the toolbar band — a composed toolbar (filter / context-aware search / refresh / export / column-selector) wired through the scoped `#toolbar="{ table }"` / `#filters="{ table }"` slots — the search drives `table.setGlobalFilter` and the removable chip clears it — plus select-all + sortable headers, status Tags, per-row actions, frozen Name + actions columns, every other column `resizable`, the `border` prop, and a paginator.'
+          'The complete data table over the generic ≤10-row dataset, paginated with a small `page-size` so the paginator spans a couple of pages: the only story with the toolbar band — a composed toolbar (filter / context-aware search / refresh / export / column-selector) wired through the scoped `#toolbar="{ table }"` / `#filters="{ table }"` slots — the search drives `table.setGlobalFilter` and the removable chip clears it — plus select-all + sortable headers, status Tags, per-row action menus, the `border` prop, and a paginator, over the same clean column layout as the other data-driven stories.'
       }
     }
   }
@@ -740,13 +814,7 @@ export const Empty = {
   parameters: {
     docs: {
       source: {
-        code: `<!-- No rows -> the default empty state renders in the #empty slot -->
-<Table :data="[]" :columns="columns" border>
-  <!-- Override the default to supply your own copy + actions: -->
-  <template #empty>
-    <!-- illustration / title / description / Create button / docs link -->
-  </template>
-</Table>`
+        code: EMPTY_SOURCE
       },
       description: {
         story: