diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md
index dd4f7bc..0eef551 100644
--- a/.ai/agents/frontend-developer.md
+++ b/.ai/agents/frontend-developer.md
@@ -189,24 +189,21 @@ import { Page } from '@cratis/components/Common';
 import { AddProject } from './Registration/AddProject';
 import { Listing } from './Listing/Listing';
 import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
+import { Button } from 'primereact/button';
 import * as mdIcons from 'react-icons/md';
 
 export const Projects = () => {
     const [AddProjectDialog, showAddProjectDialog] = useDialog(AddProject);
 
-    const menuItems: MenuItem[] = [
-        {
-            label: 'Add Project',
-            icon: mdIcons.MdAdd,
-            command: async () => { await showAddProjectDialog(); }
-        }
-    ];
-
+    // For a query-backed list page, prefer `DataPage` with `<DataPage.MenuItems>`
+    // (it owns the action bar). PrimeReact 11 removed the standalone `Menubar`;
+    // for a custom toolbar, compose `Button`s (content is children in v11).
     return (
         <Page title="Projects">
-            <Menubar model={menuItems} />
+            <Button variant="text" onClick={() => showAddProjectDialog()}>
+                <mdIcons.MdAdd />
+                <span>Add Project</span>
+            </Button>
             <Listing />
             <AddProjectDialog />
         </Page>
diff --git a/.ai/rules/components.md b/.ai/rules/components.md
index 135ba4f..a9716e0 100644
--- a/.ai/rules/components.md
+++ b/.ai/rules/components.md
@@ -21,11 +21,37 @@ Reach PrimeReact almost exclusively through Cratis Components wrappers. Import f
 | Dropdown | `Dropdown` | `@cratis/components/Dropdown` |
 | Command dialog | `CommandDialog` / `StepperCommandDialog` | `@cratis/components/CommandDialog` |
 | Data/confirmation dialog | `Dialog` / `ConfirmationDialog` / `BusyIndicatorDialog` | `@cratis/components/Dialogs` |
-| Command form fields | `InputTextField`, … | `@cratis/components/CommandForm` |
+| Command form fields | `InputTextField`, `PasswordField`, `ToggleSwitchField`, `RatingField`, … | `@cratis/components/CommandForm` |
+| Notifications (toasts) | `Toaster` / `toast` / `toastCommandResult` | `@cratis/components/Notifications` |
+| Status & display | `Tag` / `Badge` / `Chip` / `Skeleton` / `Avatar` / `ProgressBar` | `@cratis/components/Display` |
 | Canvas tool palette | `Toolbar` | `@cratis/components/Toolbar` |
 
 Use `Dropdown` from `@cratis/components/Dropdown` (not raw `primereact/dropdown`) — it appends to the document body and stacks correctly above overlays, avoiding the z-index issues raw PrimeReact dropdowns have inside dialogs.
 
+### Notifications — feedback for commands run outside a dialog
+
+`CommandDialog` handles success/error feedback itself. For a command executed
+**programmatically** (`command.execute()` outside a dialog), mount one
+`<Toaster />` near the app root and surface the result with `toastCommandResult`
+(both from `@cratis/components/Notifications`) — it maps the granular
+`ICommandResult` flags to the right toast (success, not-authorized, validation
+with per-field messages, exceptions — never stack traces):
+
+```tsx
+const result = await command.execute();
+if (toastCommandResult(result, { successTitle: 'Author registered' })) refresh();
+```
+
+For ad-hoc notifications, call the imperative `toast.success/info/warn/error(...)`
+— each takes an **options object**, not a bare string: `toast.info({ title: 'Saved', description: '…' })`.
+
+### Column filtering & display components
+
+`<Column>` supports `filter` (a per-column filter menu with match modes) and
+`DataPage` / the data tables show a global search box when `globalFilterFields`
+is set. Use the `Display` components (`Tag`, `Badge`, `Skeleton`, …) for status
+indicators and loading states in tables and detail views.
+
 ### `DataPage` — query list pages
 
 `DataPage` (from `@cratis/components/DataPage`) owns the data table's subscription, paging, selection, action menubar, and details split — **do not pre-fetch rows and pass an `items` array**. Required props: `title`, `query` (`Constructor<TQuery>`; snapshot and observable queries are auto-detected), `emptyMessage`, and `children`. Other props: `queryArguments`, `dataKey` (pass whenever the read model has an identity), `selection` / `onSelectionChange`, `globalFilterFields` / `defaultFilters` / `clientFiltering`, `detailsComponent` (`React.FC<IDetailsComponentProps<T>>` = `{ item, onRefresh? }`), `onRefresh`, and PrimeReact pass-through `tablePt`/`tableClassName`/`menubarPt`/`menubarClassName`.
@@ -33,8 +59,7 @@ Use `Dropdown` from `@cratis/components/Dropdown` (not raw `primereact/dropdown`
 Columns and toolbar actions are compositional children:
 
 ```tsx
-import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { DataPage, MenuItem, Column } from '@cratis/components/DataPage';
 
 <DataPage title="Accounts" query={AllAccounts} emptyMessage="No accounts yet.">
     <DataPage.Columns>
diff --git a/.ai/rules/dialogs.md b/.ai/rules/dialogs.md
index bf1bf20..a1cb906 100644
--- a/.ai/rules/dialogs.md
+++ b/.ai/rules/dialogs.md
@@ -75,7 +75,7 @@ It receives the current command values and **must return them** (mutated or not)
 
 ### CommandForm fields
 
-Use built-in `CommandForm` fields (from `@cratis/components/CommandForm`) for every user-input value — a raw PrimeReact control inside a command dialog bypasses `CommandFormFieldWrapper`, so validation never re-runs and the submit button stays **permanently disabled**. Catalog: `InputTextField`, `NumberField`, `DropdownField`, `CheckboxField`, `TextAreaField`, `CalendarField`, `RadioButtonField`, `RadioGroupField`, `ChipsField`, `MultiSelectField`, `ColorPickerField`, `SliderField`.
+Use built-in `CommandForm` fields (from `@cratis/components/CommandForm`) for every user-input value — a raw PrimeReact control inside a command dialog bypasses `CommandFormFieldWrapper`, so validation never re-runs and the submit button stays **permanently disabled**. Catalog: `InputTextField`, `PasswordField`, `NumberField`, `DropdownField`, `CheckboxField`, `ToggleSwitchField`, `TextAreaField`, `CalendarField`, `RadioButtonField`, `RadioGroupField`, `ChipsField`, `MultiSelectField`, `ColorPickerField`, `SliderField`, `RatingField`.
 
 - The `value={c => c.name}` **accessor lambda doubles as the binding and type-checked field selection** — renaming a command property surfaces a compile error at every binding.
 - **`RadioGroupField<T>`** renders a whole group from data (`options`/`optionLabel`/`optionValue`, `layout='horizontal'|'vertical'`); **`RadioButtonField<T>`** is one component per option (each takes a `buttonValue`). Both infer the value type from the accessor — no `as string` casts.
@@ -223,4 +223,4 @@ Use `buttons={null}` for dialogs that contain their own internal actions (e.g. a
 | `width` | `string` | Dialog width (e.g. `'50vw'`) — replaces PrimeReact `style={{ width }}` |
 | `resizable` | `boolean` | Default `false` |
 
-PrimeReact-specific props (`style`, `contentStyle`, `modal`, `dismissableMask`, `draggable`, `footer`, `onHide`) are **not** available — do not use them.
+`style`, `contentStyle`, and `dismissable` **are** supported. The other v10 PrimeReact Dialog props (`modal`, `dismissableMask`, `draggable`, `footer`, `onHide`) are **not** available — do not use them. (`resizable` is accepted for compatibility but is a no-op in PrimeReact 11.)
diff --git a/.ai/rules/react.md b/.ai/rules/react.md
index 9574aa8..915c8d1 100644
--- a/.ai/rules/react.md
+++ b/.ai/rules/react.md
@@ -153,6 +153,8 @@ if (result.hasExceptions) { toast.error('Something went wrong'); console.error(r
 // happy path — refresh queries, close, etc.
 ```
 
+`toastCommandResult(result, opts)` from `@cratis/components/Notifications` collapses this whole branch into one call (with a `<Toaster />` mounted) — success/not-authorized/validation/exception → the right toast, no stack traces shown.
+
 ### Command helpers
 
 - **`useCommandInstance(Command)`** — read the live reactive command instance for dependent fields (read it; never mutate — mutations go through field bindings).
diff --git a/.ai/skills/cratis-react-page/SKILL.md b/.ai/skills/cratis-react-page/SKILL.md
index aff9163..c26268d 100644
--- a/.ai/skills/cratis-react-page/SKILL.md
+++ b/.ai/skills/cratis-react-page/SKILL.md
@@ -14,7 +14,7 @@ Import `DataPage` (and its `Column`/`MenuItem` helpers) from the **subpath**, no
 
 ```tsx
 import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { CommandDialog } from '@cratis/components/CommandDialog';
 import { useDialog, DialogProps } from '@cratis/arc.react/dialogs';
 ```
@@ -27,7 +27,7 @@ import { useDialog, DialogProps } from '@cratis/arc.react/dialogs';
 
 ```tsx
 import { DataPage } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { AllAccounts } from './AllAccounts';
 
 export const AccountsPage = () => (
@@ -68,7 +68,7 @@ export const CreateAccountDialog = ({ closeDialog }: DialogProps) => (
 
 ```tsx
 import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { useDialog } from '@cratis/arc.react/dialogs';
 import { CreateAccountDialog } from './CreateAccountDialog';
 
diff --git a/.ai/skills/new-vertical-slice/references/PATTERNS.md b/.ai/skills/new-vertical-slice/references/PATTERNS.md
index b8b68bf..c6e132e 100644
--- a/.ai/skills/new-vertical-slice/references/PATTERNS.md
+++ b/.ai/skills/new-vertical-slice/references/PATTERNS.md
@@ -244,7 +244,7 @@ public record StockDecreased(ISBN Isbn, BookStock StockBeforeDecrease);
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { DataTable } from 'primereact/datatable';
 import { AllProjects } from './AllProjects';
 
@@ -318,8 +318,7 @@ export const AddProject = ({ closeDialog }: DialogProps) => {
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
+import { Button } from 'primereact/button';
 import * as mdIcons from 'react-icons/md';
 import { Page } from '@cratis/components/Common';
 import { AddProject } from './Registration/AddProject';
@@ -328,17 +327,15 @@ import { Listing } from './Listing/Listing';
 export const Projects = () => {
     const [AddProjectDialog, showAddProjectDialog] = useDialog(AddProject);
 
-    const menuItems: MenuItem[] = [
-        {
-            label: 'Add Project',
-            icon: mdIcons.MdAdd,
-            command: async () => { await showAddProjectDialog(); }
-        }
-    ];
-
+    // PrimeReact 11 removed the standalone Menubar; for a query-backed list
+    // page prefer `DataPage` + `<DataPage.MenuItems>`, or compose `Button`s
+    // (content is children in v11) for a custom toolbar.
     return (
         <Page title="Projects">
-            <Menubar model={menuItems} />
+            <Button variant="text" onClick={() => showAddProjectDialog()}>
+                <mdIcons.MdAdd />
+                <span>Add Project</span>
+            </Button>
             <Listing />
             <AddProjectDialog />
         </Page>
diff --git a/.ai/skills/stepper-command-dialog/SKILL.md b/.ai/skills/stepper-command-dialog/SKILL.md
index 5cca013..3c8f1be 100644
--- a/.ai/skills/stepper-command-dialog/SKILL.md
+++ b/.ai/skills/stepper-command-dialog/SKILL.md
@@ -36,7 +36,7 @@ Run a Release `dotnet build` to generate the `CreateProject` TypeScript proxy be
 
 ```tsx
 import { StepperCommandDialog } from '@cratis/components/CommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '@cratis/components/CommandDialog';
 import { InputTextField, TextAreaField, NumberField } from '@cratis/components/CommandForm/fields';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
 import { CreateProject } from '../api/Projects/CreateProject';
diff --git a/Documentation/CommandForm/password-field.md b/Documentation/CommandForm/password-field.md
new file mode 100644
index 0000000..1f3913a
--- /dev/null
+++ b/Documentation/CommandForm/password-field.md
@@ -0,0 +1,31 @@
+# PasswordField
+
+`PasswordField` provides a masked text entry backed by the PrimeReact `InputPassword` component, bound to a `string` property on a command.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { PasswordField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={SetPassword} visible={visible} onCancel={() => setVisible(false)}>
+    <PasswordField<SetPassword> value={c => c.password} placeholder="At least 8 characters" />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `placeholder` | `string` | — | Placeholder text shown when the field is empty. |
+| `className` | `string` | — | Extra CSS class combined with the default `w-full`. |
+| `pt` | `InputPasswordProps['pt']` | — | PrimeReact pass-through configuration for the underlying `InputPassword`. |
+| `ptOptions` | `InputPasswordProps['ptOptions']` | — | PrimeReact pass-through options. |
+| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `InputPassword`. |
+
+## Behavior
+
+- Default value is an empty string.
+- The input masks its content; the underlying `InputPassword` provides the show/hide affordance.
+- Validation state is reflected via the PrimeReact `invalid` flag.
diff --git a/Documentation/CommandForm/rating-field.md b/Documentation/CommandForm/rating-field.md
new file mode 100644
index 0000000..945d78d
--- /dev/null
+++ b/Documentation/CommandForm/rating-field.md
@@ -0,0 +1,32 @@
+# RatingField
+
+`RatingField` provides a star-rating input backed by the PrimeReact `Rating` component, bound to a `number` property on a command.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { RatingField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={SubmitReview} visible={visible} onCancel={() => setVisible(false)}>
+    <RatingField<SubmitReview> value={c => c.rating} stars={5} />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `stars` | `number` | `5` | Number of stars to display. |
+| `starAriaLabel` | `(starValue: number) => string` | `` n => `${n} star(s)` `` | Builds the accessible name for each star. Override to localize. |
+| `className` | `string` | — | Extra CSS class name. |
+| `pt` | `RatingRootProps['pt']` | — | PrimeReact pass-through configuration. |
+| `ptOptions` | `RatingRootProps['ptOptions']` | — | PrimeReact pass-through options. |
+| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `Rating`. |
+
+## Behavior
+
+- Default value is `0` (no rating selected).
+- The bound value is the selected star count (`1`–`stars`).
+- Validation state is reflected via the PrimeReact `invalid` flag.
diff --git a/Documentation/CommandForm/toc.yml b/Documentation/CommandForm/toc.yml
index 5e7cefb..208bc81 100644
--- a/Documentation/CommandForm/toc.yml
+++ b/Documentation/CommandForm/toc.yml
@@ -16,11 +16,17 @@
   href: multi-select-field.md
 - name: NumberField
   href: number-field.md
+- name: PasswordField
+  href: password-field.md
 - name: RadioButtonField
   href: radio-button-field.md
 - name: RadioGroupField
   href: radio-group-field.md
+- name: RatingField
+  href: rating-field.md
 - name: SliderField
   href: slider-field.md
 - name: TextAreaField
   href: text-area-field.md
+- name: ToggleSwitchField
+  href: toggle-switch-field.md
diff --git a/Documentation/CommandForm/toggle-switch-field.md b/Documentation/CommandForm/toggle-switch-field.md
new file mode 100644
index 0000000..c3841b8
--- /dev/null
+++ b/Documentation/CommandForm/toggle-switch-field.md
@@ -0,0 +1,31 @@
+# ToggleSwitchField
+
+`ToggleSwitchField` provides an on/off switch backed by the PrimeReact `ToggleSwitch` component, bound to a `boolean` property on a command. It is the switch-styled counterpart of [CheckboxField](./checkbox-field.md).
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { ToggleSwitchField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={UpdateProfile} visible={visible} onCancel={() => setVisible(false)}>
+    <ToggleSwitchField<UpdateProfile> value={c => c.notificationsEnabled} label="Enable notifications" />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `label` | `string` | — | Text displayed next to the switch. It is the switch's accessible name — override it to localize. |
+| `className` | `string` | — | Extra CSS class forwarded to the underlying `ToggleSwitch`. |
+| `pt` | `ToggleSwitchRootProps['pt']` | — | PrimeReact pass-through configuration. |
+| `ptOptions` | `ToggleSwitchRootProps['ptOptions']` | — | PrimeReact pass-through options. |
+| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `ToggleSwitch`. |
+
+## Behavior
+
+- Default value is `false`.
+- The switch is wrapped in a `<label>`, so the visible text is its accessible name and clicking the text toggles it.
+- Validation state is reflected via the PrimeReact `invalid` flag.
diff --git a/Documentation/CommandStepper/index.md b/Documentation/CommandStepper/index.md
index c6b5129..4f40c5b 100644
--- a/Documentation/CommandStepper/index.md
+++ b/Documentation/CommandStepper/index.md
@@ -18,7 +18,7 @@ Use it when you want to:
 
 ```tsx
 import { CommandStepper } from '@cratis/components/CommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '@cratis/components/CommandDialog';
 import { InputTextField } from '@cratis/components/CommandForm/fields';
 import { CreateProject } from '../api/projects/CreateProject';
 
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index 7191c2c..ec10e21 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -4,7 +4,7 @@ Single setup point for Cratis Components. Wraps PrimeReact's `PrimeReactProvider
 
 ## Purpose
 
-- Hosts the PrimeReact `pt` / `unstyled` / `ptOptions` / `inputStyle` / `ripple` / `appendTo` / `zIndex` / `locale` configuration for every Cratis wrapper below it in the tree.
+- Hosts the PrimeReact `pt` / `unstyled` / `ptOptions` / `inputVariant` / `ripple` / `theme` / `zIndex` / `locale` configuration for every Cratis wrapper below it in the tree.
 - Deep-merges Cratis-wide defaults with the consumer's value, so future Cratis defaults can land without breaking consumer overrides.
 - Re-exported from the package root so the recommended setup is one import:
 
@@ -29,7 +29,7 @@ export const App = () => (
 
 ## Configuring `pt` / `unstyled` globally
 
-The `value` prop accepts the full PrimeReact `APIOptions` shape. The most commonly used members are `unstyled`, `pt`, `ptOptions`, `inputStyle`, `ripple`, and `appendTo`:
+The `value` prop accepts PrimeReact 11's `Partial<PrimeReactProps>` shape. The most commonly used members are `unstyled`, `pt`, `ptOptions`, `inputVariant`, `ripple`, and `theme`:
 
 ```tsx
 import { CratisComponentsProvider } from '@cratis/components';
@@ -48,7 +48,7 @@ The `value` is deep-merged with the Cratis defaults (currently empty) so consume
 
 ### `value`
 
-`Partial<APIOptions>` — Cratis-wide and PrimeReact pass-through configuration. Merged on top of the library's defaults and made available to every Cratis component below in the tree.
+`Partial<PrimeReactProps>` — Cratis-wide and PrimeReact pass-through configuration. Merged on top of the library's defaults and made available to every Cratis component below in the tree.
 
 The most useful members:
 
@@ -57,10 +57,11 @@ The most useful members:
 | `unstyled` | When `true`, disables every PrimeReact base style. Combine with `pt` (or per-component CSS / Tailwind) to fully restyle. |
 | `pt` | Per-component pass-through configuration. Keys are PrimeReact component names (`button`, `dialog`, `inputtext`, …); values are slot configuration objects. |
 | `ptOptions` | Controls merge vs. replace behavior for `pt`. Default is `{ mergeSections: true }` which merges per-instance `pt` with the global preset. |
-| `inputStyle` | `'outlined'` or `'filled'` — switches the default input rendering across the whole app. |
+| `inputVariant` | `'outlined'` or `'filled'` — switches the default input rendering across the whole app. |
+| `theme` | `{ preset, options }` — opt into a styled `@primeuix/themes` preset (e.g. `import Aura from '@primeuix/themes/aura'`). Applying a preset requires a PrimeUI `license` key; the license-free paths are the unstyled core and the Cratis baseline theme. |
+| `license` | Your PrimeUI license key, passed straight through to PrimeReact. Required for the styled `@primeuix/themes` presets — see [Styling](../Styling/index.md). |
 | `ripple` | Enables PrimeReact's ripple animation on supported components. |
-| `appendTo` | Where overlays mount (`document.body`, `'self'`, or a DOM ref). The Cratis `Dropdown` defaults to `document.body` independently of this setting. |
-| `zIndex` | Per-overlay-type z-index baseline (`{ modal: 1100, overlay: 1000, … }`). |
+| `zIndex` | Per-overlay-type z-index baseline (`{ modal: 1100, overlay: 1000, menu: 1000, tooltip: 1100 }`). |
 | `locale` | PrimeReact locale string. |
 
 The full type is re-exported as `CratisComponentsConfig`.
@@ -74,7 +75,7 @@ The full type is re-exported as `CratisComponentsConfig`.
 `CratisComponentsProvider` is optional. If you'd rather mount PrimeReact's own provider directly, that works too — every Cratis wrapper reads the same context:
 
 ```tsx
-import { PrimeReactProvider } from 'primereact/api';
+import { PrimeReactProvider } from '@primereact/core';
 
 export const App = () => (
     <PrimeReactProvider value={{ unstyled: true, pt: globalPt }}>
@@ -100,7 +101,7 @@ const merged = mergeCratisComponentsConfig({ unstyled: true, pt: myPt });
 |---|---|
 | `CratisComponentsProvider`     | The React component. |
 | `CratisComponentsProviderProps` | Props type. |
-| `CratisComponentsConfig`        | Alias for `Partial<APIOptions>`. |
+| `CratisComponentsConfig`        | Alias for `Partial<PrimeReactProps>`. |
 | `cratisDefaults`                | The Cratis-wide defaults that ship today (currently `{}`). |
 | `mergeCratisComponentsConfig`   | Pure deep-merge helper used inside the provider. |
 
diff --git a/Documentation/DataPage/index.md b/Documentation/DataPage/index.md
index 44f48bd..d556c1d 100644
--- a/Documentation/DataPage/index.md
+++ b/Documentation/DataPage/index.md
@@ -21,7 +21,7 @@ Declare the columns and menu actions with the compound `DataPage.Columns` and `D
 
 ```tsx
 import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { FaPlus, FaPencil } from 'react-icons/fa';
 import { AllAuthors } from './queries';   // generated query proxy
 
@@ -52,7 +52,7 @@ Pass a `detailsComponent` and `DataPage` adds a resizable split: the table on th
 
 ```tsx
 import { DataPage } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { AllAuthorsWithBooks } from './queries';
 
 const AuthorDetails = ({ item }) => (
@@ -94,8 +94,7 @@ Selection is managed for you; to drive it yourself, pass `selection` and `onSele
 - `selection`: Currently selected item
 - `onSelectionChange`: Callback when the selection changes
 - `globalFilterFields`: Fields to include in global search
-- `defaultFilters`: Initial filter state (see [DataTableFilterMeta](https://primereact.org/datatable/))
-- `clientFiltering`: Enable client-side filtering (default: `false`)
+- `defaultFilters`: Initial filter state, a `DataTableFilterMeta` (a `{ value, matchMode }` constraint per field)
 - `onRefresh`: Callback triggered to signal a data refresh — forwarded to the `detailsComponent`
 - `detailsComponent`: Component to render in the resizable details panel when a row is selected
 
diff --git a/Documentation/DataPage/menu-items.md b/Documentation/DataPage/menu-items.md
index 59b4be3..81ca8be 100644
--- a/Documentation/DataPage/menu-items.md
+++ b/Documentation/DataPage/menu-items.md
@@ -8,7 +8,7 @@ The `MenuItems` component defines the action menu for a DataPage.
 
 ```tsx
 import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { FaPlus, FaPencil, FaTrash } from 'react-icons/fa';
 
 <DataPage title="Products" query={ProductsQuery} emptyMessage="No products">
diff --git a/Documentation/DataTables/data-table-for-observable-query.md b/Documentation/DataTables/data-table-for-observable-query.md
index fd7fb11..105b89a 100644
--- a/Documentation/DataTables/data-table-for-observable-query.md
+++ b/Documentation/DataTables/data-table-for-observable-query.md
@@ -19,7 +19,7 @@ DataTableForObservableQuery displays data from observable queries that automatic
 
 ```typescript
 import { DataTableForObservableQuery } from '@cratis/components/DataTables';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataTables';
 import { MyObservableQuery } from './queries';
 
 function MyTable() {
@@ -52,8 +52,8 @@ Same as DataTableForQuery, but the query must extend `IObservableQueryFor`.
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
 - `globalFilterFields`: Fields to search in global filter
-- `defaultFilters`: Initial filter configuration
-- `clientFiltering`: Enable client-side filtering (default: `false`)
+- `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
+- `paginatorClassName` / `paginatorAriaLabels`: styling and localization for the paginator
 - `children`: Column definitions
 
 ## Observable Behavior
diff --git a/Documentation/DataTables/data-table-for-query.md b/Documentation/DataTables/data-table-for-query.md
index bb5a9a1..483ae39 100644
--- a/Documentation/DataTables/data-table-for-query.md
+++ b/Documentation/DataTables/data-table-for-query.md
@@ -19,7 +19,7 @@ DataTableForQuery provides a data table specifically designed for `IQueryFor` qu
 
 ```typescript
 import { DataTableForQuery } from '@cratis/components/DataTables';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataTables';
 import { MyQuery } from './queries';
 
 function MyTable() {
@@ -51,37 +51,22 @@ function MyTable() {
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
 - `globalFilterFields`: Fields to search in global filter
-- `defaultFilters`: Initial filter configuration
-- `clientFiltering`: Enable client-side filtering (default: false)
+- `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
+- `paginatorClassName` / `paginatorAriaLabels`: styling and localization for the paginator
 - `children`: Column definitions
 
 ## Pagination
 
 DataTableForQuery automatically handles pagination with a default page size of 20 items. Pagination controls are displayed at the bottom of the table.
 
-## Server-Side Filtering
+## Filtering
 
-Default mode - filters are applied on the server:
+Add `filter` to a `<Column>` for a per-column filter menu, and/or `globalFilterFields` for a global search box. Filtering is applied client-side to the loaded page; seed the initial state with `defaultFilters`:
 
 ```typescript
 <DataTableForQuery
     query={MyQuery}
     globalFilterFields={['name', 'email']}
-    emptyMessage="No results"
->
-    <Column field="name" header="Name" />
-    <Column field="email" header="Email" />
-</DataTableForQuery>
-```
-
-## Client-Side Filtering
-
-Enable client-side filtering for smaller datasets:
-
-```typescript
-<DataTableForQuery
-    query={MyQuery}
-    clientFiltering={true}
     defaultFilters={{
         name: { value: '', matchMode: 'contains' }
     }}
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index 8719c04..c3fc45a 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -70,7 +70,7 @@ const MyComponent = () => {
 - `width`: Dialog width
 - `style`: Custom dialog style forwarded to PrimeReact `Dialog`
 - `contentStyle`: Custom content area style forwarded to PrimeReact `Dialog`
-- `resizable`: Enables resize
+- `resizable`: Accepted but a no-op in PrimeReact 11 — the headless dialog has no built-in resize handle. Existing code that passes it keeps compiling; it simply has no effect.
 - `isValid`: Enables or disables confirm actions
 - `isBusy`: When `true`, disables all buttons and shows a loading spinner on the primary action button
 - `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels
diff --git a/Documentation/Display/index.md b/Documentation/Display/index.md
new file mode 100644
index 0000000..716b001
--- /dev/null
+++ b/Documentation/Display/index.md
@@ -0,0 +1,114 @@
+# Display
+
+The `Display` components are small, presentational primitives for status and feedback — tags, badges, chips, avatars, progress, and loading skeletons. Import them from `@cratis/components/Display`.
+
+Use them for status indicators in tables and detail views, counts on icons, removable filter tokens, user avatars, progress feedback, and placeholder shapes while data loads.
+
+## Tag
+
+A small colored status label. Prefer a `Tag` with a `severity` over hand-colored text — it is theme-aware and meets contrast in light and dark.
+
+```tsx
+import { Tag } from '@cratis/components/Display';
+
+<Tag severity="success" value="In stock" />
+<Tag severity="danger" value="Out of stock" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `ReactNode` | The label shown inside the tag (or pass `children`). |
+| `severity` | `'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast'` | Severity tone (drives the color). |
+| `rounded` | `boolean` | Fully rounds the tag. |
+| `icon` | `ReactNode` | An icon rendered before the label. |
+| `className` | `string` | Extra CSS class. |
+
+## Badge
+
+A small count or status marker, typically overlaid on an icon or button.
+
+```tsx
+import { Badge } from '@cratis/components/Display';
+
+<Badge value="8" severity="info" />
+<Badge value="NEW" severity="success" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `ReactNode` | The value shown inside the badge (or pass `children`). |
+| `severity` | `'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast'` | Severity tone. |
+| `size` | `'normal' \| 'large' \| 'xlarge'` | Badge size. |
+| `className` | `string` | Extra CSS class. |
+
+## Chip
+
+A labeled, optionally-removable token. Use for filter pills and selected values.
+
+```tsx
+import { Chip } from '@cratis/components/Display';
+
+<Chip label="Design" />
+<Chip label="Removable" removable onRemove={() => remove('design')} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | The chip label. |
+| `icon` | `ReactNode` | An icon rendered before the label. |
+| `removable` | `boolean` | Shows a remove control. |
+| `onRemove` | `() => void` | Invoked when the remove control is activated. |
+| `removeAriaLabel` | `string` | Accessible name for the remove control. Override to localize. Defaults to `'Remove'`. |
+| `className` | `string` | Extra CSS class. |
+
+## Avatar
+
+A user/entity avatar showing an image, initials, or an icon fallback.
+
+```tsx
+import { Avatar } from '@cratis/components/Display';
+
+<Avatar image="/users/jane.png" />
+<Avatar label="JD" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `image` | `string` | Image URL. When present, the image is shown. |
+| `label` | `string` | Initials/text fallback when no image is available. |
+| `icon` | `ReactNode` | Icon fallback when no image or label is available. |
+| `size` | `'normal' \| 'large' \| 'xlarge'` | Avatar size. |
+
+## ProgressBar
+
+A horizontal progress indicator, determinate or indeterminate.
+
+```tsx
+import { ProgressBar } from '@cratis/components/Display';
+
+<ProgressBar value={65} />
+<ProgressBar mode="indeterminate" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `number` | Completion value, `0`–`100`. Ignored in `indeterminate` mode. |
+| `mode` | `'determinate' \| 'indeterminate'` | `determinate` (default) shows `value`; `indeterminate` shows a looping animation. |
+| `showValue` | `boolean` | Whether to render the percentage label. Defaults to `true` (determinate only). |
+
+## Skeleton
+
+A placeholder shape shown while content loads.
+
+```tsx
+import { Skeleton } from '@cratis/components/Display';
+
+<Skeleton width="12rem" height="1rem" />
+<Skeleton width="3rem" height="3rem" circle />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `width` | `string` | Any CSS length. Defaults to `'100%'`. |
+| `height` | `string` | Any CSS length. Defaults to `'1rem'`. |
+| `circle` | `boolean` | Renders a circle (equal width/height, fully rounded). |
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index a50f24c..b633fc5 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -8,11 +8,9 @@ Dropdown provides a select component that correctly appears above dialogs and ot
 
 ## Key Features
 
-- Full PrimeReact Dropdown functionality
-- Automatic z-index management
-- Works inside dialogs
-- Appends to document body by default
-- All PrimeReact Dropdown props supported
+- Single or multiple selection (set `multiple`)
+- Renders through PrimeReact 11's overlay manager, so it stacks correctly above dialogs — no manual z-index
+- A small, curated prop surface (below) plus `pt` / `ptOptions` / `unstyled` for full styling control
 
 ## Quick Start
 
@@ -41,23 +39,33 @@ function MyForm() {
 
 ## Props
 
-All PrimeReact Dropdown props are supported. See [PrimeReact Dropdown Documentation](https://primereact.org/dropdown/) for complete list.
-
-### Common Props
+`Dropdown` exposes a wrapper-owned surface — the common single/multi select props every Cratis form needs — rather than leaking PrimeReact's entire Select API. For anything beyond this, use `pt` / `ptOptions` / `unstyled`.
 
 ```typescript
-interface DropdownProps {
-    value?: unknown;
-    options: Array<{ label: string; value: unknown }>;
-    onChange?: (e: { value: unknown }) => void;
+interface DropdownProps<T = unknown> {
+    value?: T;
+    options?: unknown[];
+    optionLabel?: string;                       // property used as the visible label
+    optionValue?: string;                       // property used as the underlying value
     placeholder?: string;
-    disabled?: boolean;
-    filter?: boolean;
-    filterPlaceholder?: string;
+    filter?: boolean;                           // filter input inside the popup
+    multiple?: boolean;                         // multi-select
     showClear?: boolean;
-    optionLabel?: string;
-    optionValue?: string;
-    // ... all other PrimeReact Dropdown props
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange?: (event: DropdownChangeEvent<T>) => void;   // event.value is typed as T
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    // identity / accessibility / styling forwarded to the Select root:
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    name?: string;
+    tabIndex?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    pt?: SelectRootProps['pt'];
+    ptOptions?: SelectRootProps['ptOptions'];
+    unstyled?: boolean;
 }
 ```
 
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
new file mode 100644
index 0000000..619cd0a
--- /dev/null
+++ b/Documentation/Notifications/index.md
@@ -0,0 +1,69 @@
+# Notifications
+
+`CommandDialog` shows success and error feedback for you. But when you run a command **programmatically** — `command.execute()` outside a dialog — nothing tells the user what happened. The `Notifications` components fill that gap with app-wide toasts. Import them from `@cratis/components/Notifications`.
+
+## Mount one Toaster
+
+Mount a single `Toaster` near your app root. Every toast — from anywhere in the tree, even outside React — appears here and auto-dismisses.
+
+```tsx
+import { Toaster } from '@cratis/components/Notifications';
+
+<Toaster position="top-right" />
+```
+
+Or let the provider mount it for you:
+
+```tsx
+<CratisComponentsProvider toaster>
+    <App />
+</CratisComponentsProvider>
+```
+
+| `Toaster` prop | Type | Description |
+|------|------|-------------|
+| `position` | `ToasterPosition` | Corner/edge the toasts stack from. Defaults to `'top-right'`. |
+| `limit` | `number` | Maximum toasts shown at once. Defaults to `3`. |
+| `timeout` | `number` | Auto-dismiss timeout in milliseconds. Defaults to `6000`. |
+| `dismissAriaLabel` | `string` | Accessible name for each toast's dismiss button. Override to localize. Defaults to `'Dismiss'`. |
+
+## Surface a command result with `toastCommandResult`
+
+When you execute a command outside a dialog you have to branch on the granular `ICommandResult` flags — authorized? valid? did it throw? `toastCommandResult` does that branching for you and shows the right toast: a success toast, a warning when not authorized, an error listing the per-field validation messages, or a generic error when the handler threw (stack traces are never shown to users).
+
+```tsx
+import { toastCommandResult } from '@cratis/components/Notifications';
+
+const result = await command.execute();
+if (toastCommandResult(result, { successTitle: 'Author registered' })) {
+    refresh();
+}
+```
+
+It returns `true` on success, so you can gate follow-up work (close a panel, refresh a query) on the same call.
+
+| `toastCommandResult` option | Type | Description |
+|------|------|-------------|
+| `successTitle` | `string` | Title for the success toast. Defaults to `'Success'`. |
+| `successDescription` | `string` | Description for the success toast. |
+| `unauthorizedTitle` | `string` | Title when rejected by authorization. Defaults to `'Not authorized'`. |
+| `validationTitle` | `string` | Title when validation failed. Defaults to `'Validation failed'`. |
+| `exceptionTitle` | `string` | Title when the handler threw. Defaults to `'Something went wrong'`. |
+| `showSuccess` | `boolean` | When `false`, no toast is shown on success. Defaults to `true`. |
+
+Every title is overridable — pass translated strings to localize.
+
+## Ad-hoc toasts with `toast`
+
+For notifications unrelated to a command, call the imperative `toast`. Each method takes an **options object**, not a bare string.
+
+```tsx
+import { toast } from '@cratis/components/Notifications';
+
+toast.success({ title: 'Saved', description: 'Your changes were saved.' });
+toast.info({ title: 'Heads up' });
+toast.warn({ title: 'Check your input' });
+toast.error({ title: 'Failed', description: 'Please try again.' });
+```
+
+`toast.dismiss(id?)` closes a toast (or all of them), and `toast.promise(...)` tracks a promise through pending/success/error states.
diff --git a/Documentation/StepperCommandDialog/advanced-features.md b/Documentation/StepperCommandDialog/advanced-features.md
index 8d44ea3..1a41dfa 100644
--- a/Documentation/StepperCommandDialog/advanced-features.md
+++ b/Documentation/StepperCommandDialog/advanced-features.md
@@ -8,7 +8,7 @@ All advanced features described here apply to every step in the wizard, because
 
 ```typescript
 import { StepperCommandDialog } from '@cratis/components/CommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '@cratis/components/CommandDialog';
 import { ValidationResult } from '@cratis/arc/validation';
 
 type CreateProjectResponse = {
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index b369880..8bb213b 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -24,7 +24,7 @@ The `StepperCommandDialog` component provides a multi-step wizard dialog interfa
 
 ```typescript
 import { StepperCommandDialog } from '@cratis/components/CommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '@cratis/components/CommandDialog';
 import { InputTextField, TextAreaField, NumberField } from '@cratis/components/CommandForm/fields';
 import { CommandResult } from '@cratis/arc/commands';
 import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
@@ -187,7 +187,7 @@ Cancel is always available via the X button in the dialog header. The Submit but
 
 ## Step Structure
 
-Each step is defined by a `StepperPanel` from `primereact/stepperpanel`. The `header` prop sets the step title shown in the stepper navigation:
+Each step is defined by a `StepperPanel` from `@cratis/components/CommandDialog`. The `header` prop sets the step title shown in the stepper navigation:
 
 ```tsx
 <StepperPanel header="Contact Details">
diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
new file mode 100644
index 0000000..b9ba912
--- /dev/null
+++ b/Documentation/Styling/baseline-theme.md
@@ -0,0 +1,53 @@
+# Use the Cratis baseline theme (no license)
+
+PrimeReact 11 is unstyled-first, and its styled `@primeuix/themes` presets need a PrimeUI license. If you want a polished default look **without a license**, ship the components unstyled and import the **Cratis baseline theme** — a token-based stylesheet that skins every component from the `--cratis-*` layer.
+
+## Setup
+
+Two things: run the provider unstyled, and import the theme plus add the `cratis-theme` class to an ancestor.
+
+```tsx
+import 'primeicons/primeicons.css';
+import '@cratis/components/theme';   // the baseline theme
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider value={{ unstyled: true }}>
+        <div className="cratis-theme">   {/* on <body>, your app root, or a subtree */}
+            <YourApp />
+        </div>
+    </CratisComponentsProvider>
+);
+```
+
+The rules are scoped under `.cratis-theme`, so you can theme the whole document or just a subtree.
+
+## Dark mode
+
+Add the `cratis-dark` class to an ancestor for the dark palette:
+
+```tsx
+<body className="cratis-dark">
+    <div className="cratis-theme">…</div>
+</body>
+```
+
+## Layering under a preset
+
+The baseline theme defers to a `@primeuix/themes` preset's `--p-*` tokens when one is present, so you can also run it underneath a licensed preset — the preset drives the palette and the baseline theme fills the gaps.
+
+## Overriding
+
+Every rule is overridable with your own CSS or `pt`. The baseline theme styles the unstyled primitives through their `[data-scope]` attributes, so target those (or your own `className`, or the `--cratis-*` tokens):
+
+```css
+.cratis-theme [data-scope='button'] { border-radius: 999px; }   /* pill buttons */
+.dangerous { background: var(--cratis-red-500); color: white; }
+```
+
+The baseline theme also maps the `--color-*` token family that `@cratis/arc.react` reads, so Arc's form-field chrome (labels, borders, validation errors) is themed alongside the PrimeReact components.
+
+## When this is the wrong fit
+
+- You want one of PrimeReact's prebuilt design systems (Aura, Lara, …) — [use a preset](./themed.md) instead (needs a PrimeUI license).
+- You have a strict design system to honor — go [fully unstyled](./unstyled.md) with your own `pt`.
diff --git a/Documentation/Styling/custom-palette.md b/Documentation/Styling/custom-palette.md
index c9453bc..c936524 100644
--- a/Documentation/Styling/custom-palette.md
+++ b/Documentation/Styling/custom-palette.md
@@ -1,97 +1,100 @@
-# Use a custom palette on top of a PrimeReact theme
+# Use a custom palette on top of a theme
 
-You want PrimeReact's chrome — its dialog frames, button shapes, focus rings, input borders — but in your own colors. You don't want to write a PrimeReact theme from scratch.
+You want a theme's chrome — its dialog frames, button shapes, focus rings, input borders — but in your own colors. You don't want to write a theme from scratch.
 
-This setup keeps a PrimeReact theme as the **structural baseline** and overrides PrimeReact's own CSS variables on `:root` to repaint the whole UI. The `--cratis-*` tokens follow along through `tokens.css`'s cascade, so Cratis-scoped surfaces stay in sync. You can also override the Cratis tokens independently when you want Cratis surfaces to differ from PrimeReact widgets.
+This setup keeps a theme as the **structural baseline** and repaints it with your palette. Which knob you turn depends on which theme you started from:
 
-> **PrimeReact version note.** The examples below override PrimeReact **v10** theme variables (`--surface-*`, `--primary-color`, …). On **PrimeReact v11**, customize the palette through `@primeuix/themes` instead — define a preset with `definePreset` (or override the `--p-*` design tokens). Either way you don't touch the `--cratis-*` layer: it resolves the v11 design token first and falls back to the v10 variable, so Cratis-scoped surfaces follow your palette on both majors.
+- **[Cratis baseline theme](baseline-theme.md)** (license-free) — override the `--cratis-*` tokens in CSS.
+- **[`@primeuix/themes` preset](themed.md)** (license) — customize the preset's design tokens with `definePreset`.
 
-## Setup
+Either way the `--cratis-*` layer follows your palette, so Cratis-scoped surfaces stay in sync.
+
+## With the Cratis baseline theme (CSS token overrides)
+
+The baseline theme paints everything from the `--cratis-*` tokens. Override them under `.cratis-theme` (loaded after the theme so your values win):
 
 ```tsx
-// 1. PrimeReact theme provides the structure.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
-import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
-// 2. Your palette overrides — must come after the theme so they win.
-import './palette.override.css';
+import '@cratis/components/theme';
+import './palette.override.css';   // after the theme so it wins
 ```
 
-## With plain CSS
-
-Override PrimeReact's variables — these are what its widgets read directly:
-
 ```css
 /* palette.override.css */
-:root {
+.cratis-theme {
     /* Surfaces */
-    --surface-0:        #1e293b;
-    --surface-100:      #1e293b;
-    --surface-ground:   #020617;
-    --surface-section:  #0f172a;
-    --surface-card:     #1e293b;
-    --surface-overlay:  #1e293b;
-    --surface-hover:    #334155;
-    --surface-border:   #334155;
+    --cratis-surface-0:       #1e293b;
+    --cratis-surface-100:     #1e293b;
+    --cratis-surface-section: #0f172a;
+    --cratis-surface-card:    #1e293b;
+    --cratis-surface-overlay: #1e293b;
+    --cratis-surface-hover:   #334155;
+    --cratis-surface-border:  #334155;
 
     /* Text */
-    --text-color:           #f8fafc;
-    --text-color-secondary: #94a3b8;
+    --cratis-text-color:           #f8fafc;
+    --cratis-text-color-secondary: #94a3b8;
 
     /* Brand */
-    --primary-color:      #38bdf8;
-    --primary-color-text: #0b1220;
+    --cratis-primary-color:      #38bdf8;
+    --cratis-primary-color-text: #0b1220;
 
     /* Selection */
-    --highlight-bg:         #1e40af;
-    --highlight-text-color: #ffffff;
+    --cratis-highlight-bg:         #1e40af;
+    --cratis-highlight-text-color: #ffffff;
 
     /* Geometry */
-    --border-radius: 10px;
+    --cratis-border-radius: 10px;
+}
 
-    /* --cratis-* tokens default to var(--surface-*) etc. via tokens.css, so
-       the overrides above flow through automatically. Set these explicitly
-       only if you want Cratis-scoped surfaces tinted differently. */
-    --cratis-red-500:   #ef4444;
-    --cratis-green-500: #22c55e;
+/* Dark palette is applied when `cratis-dark` is on the same ancestor. */
+.cratis-theme.cratis-dark {
+    --cratis-surface-card: #0b1220;
+    --cratis-text-color:   #e2e8f0;
 }
 ```
 
-## With TailwindCSS
-
-Tailwind's `@layer base` is the idiomatic spot — declare the palette once and Tailwind handles cascade and dark mode:
+## With a `@primeuix/themes` preset (`definePreset`)
+
+Presets are customized in TypeScript, not CSS: derive a new preset from a base one with `definePreset` and hand it to the provider. Design-token references like `{sky.500}` point at the preset's built-in primitive palette:
+
+```ts
+// brand-preset.ts
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+
+export const BrandPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{sky.50}',   100: '{sky.100}', 200: '{sky.200}',
+            300: '{sky.300}', 400: '{sky.400}', 500: '{sky.500}',
+            600: '{sky.600}', 700: '{sky.700}', 800: '{sky.800}',
+            900: '{sky.900}', 950: '{sky.950}',
+        },
+    },
+});
+```
 
-```css
-/* app.css */
-@import "tailwindcss";
-@import "primereact/resources/themes/lara-dark-blue/theme.css";
-@import "@cratis/components/styles";
-
-@layer base {
-    :root {
-        --surface-card:    theme('colors.slate.800');
-        --surface-border:  theme('colors.slate.700');
-        --text-color:      theme('colors.slate.50');
-        --primary-color:   theme('colors.sky.400');
-        --cratis-red-500:  theme('colors.red.500');
-    }
-
-    .dark {
-        --surface-card: theme('colors.slate.900');
-        --text-color:   theme('colors.slate.100');
-    }
-}
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+import { BrandPreset } from './brand-preset';
+
+export const App = () => (
+    <CratisComponentsProvider value={{ theme: { preset: BrandPreset }, license: 'YOUR-PRIMEUI-KEY' }}>
+        <YourApp />
+    </CratisComponentsProvider>
+);
 ```
 
 ## Scoped overrides
 
-PrimeReact variables cascade like any other CSS variable, so an ancestor scope works for region-specific looks:
+The `--cratis-*` tokens cascade like any other CSS variable, so an ancestor scope works for region-specific looks with the baseline theme:
 
 ```css
 .dark-zone {
-    --surface-card:  #0b1220;
-    --text-color:    #f8fafc;
-    --primary-color: #60a5fa;
+    --cratis-surface-card:  #0b1220;
+    --cratis-text-color:    #f8fafc;
+    --cratis-primary-color: #60a5fa;
 }
 ```
 
@@ -110,22 +113,22 @@ PrimeReact variables cascade like any other CSS variable, so an ancestor scope w
 Put each palette behind a class on the root element and toggle the class with your theme switcher:
 
 ```css
-:root.theme-light {
-    --surface-card: #ffffff;
-    --text-color:   #0f172a;
+.cratis-theme.theme-light {
+    --cratis-surface-card: #ffffff;
+    --cratis-text-color:   #0f172a;
     /* … */
 }
 
-:root.theme-dark {
-    --surface-card: #1e293b;
-    --text-color:   #f8fafc;
+.cratis-theme.theme-dark {
+    --cratis-surface-card: #1e293b;
+    --cratis-text-color:   #f8fafc;
     /* … */
 }
 
-:root.theme-brand {
-    --surface-card: #1f1147;
-    --text-color:   #ede9fe;
-    --primary-color: #a78bfa;
+.cratis-theme.theme-brand {
+    --cratis-surface-card:  #1f1147;
+    --cratis-text-color:    #ede9fe;
+    --cratis-primary-color: #a78bfa;
     /* … */
 }
 ```
@@ -134,12 +137,14 @@ Put each palette behind a class on the root element and toggle the class with yo
 document.documentElement.classList.add('theme-dark');
 ```
 
+The baseline theme's own `cratis-dark` class is the simplest light/dark switch when you only need those two — add it alongside `cratis-theme` for dark, remove it for light.
+
 ## What `--cratis-*` tokens are for in this setup
 
 Two override surfaces are available, with different reach:
 
-- **PrimeReact variables** (`--surface-card`, `--text-color`, `--primary-color`, …) — read by PrimeReact widgets directly. Override these to repaint the whole UI (PrimeReact widgets *and* Cratis-scoped surfaces, because Cratis tokens cascade to PrimeReact's via `tokens.css`).
-- **`--cratis-*` tokens** — read only by Cratis-scoped surfaces (validation errors, FormElement addon, breadcrumb borders, etc.). Override these when you want Cratis surfaces to differ from PrimeReact widgets, *without* repainting PrimeReact widgets.
+- **The theme's palette** (`--cratis-*` for the baseline theme, or the preset's `--p-*` design tokens) — read by the widgets. Override these to repaint the whole UI.
+- **`--cratis-*` tokens on a Cratis-only scope** — read by Cratis-scoped surfaces (validation errors, the FormElement addon, breadcrumb borders, etc.). Override these when you want Cratis surfaces to differ from the surrounding widgets.
 
 See [Cratis token reference](cratis-tokens.md) for the full Cratis token list, and [Pass-through cheat sheet](pass-through.md) when you want even tighter per-component control.
 
diff --git a/Documentation/Styling/getting-started.md b/Documentation/Styling/getting-started.md
index 00bd529..c8e483f 100644
--- a/Documentation/Styling/getting-started.md
+++ b/Documentation/Styling/getting-started.md
@@ -4,24 +4,19 @@ Every styling option shares the same one-line setup. The differences come from w
 
 ## Install
 
-Install `@cratis/components` along with the required PrimeReact peer dependencies. You only need to add them to your own `package.json` once; npm/yarn won't pull them in transitively:
+Install `@cratis/components`. PrimeReact and its icons ship as **bundled dependencies**, so they install automatically — there is nothing extra to add:
 
 ```bash
-npm install @cratis/components primereact primeicons
+npm install @cratis/components
 # or
-yarn add @cratis/components primereact primeicons
+yarn add @cratis/components
 ```
 
-The optional peers (`pixi.js`, `framer-motion`, `allotment`) are only required when you use the corresponding component:
-
-| Component | Optional peer |
-|---|---|
-| `PivotViewer` | `pixi.js` (canvas) and `framer-motion` (animated panels) |
-| `DataPage` resizable layout | `allotment` |
+The heavier extras (`pixi.js` for `PivotViewer`, `framer-motion` for animated panels, `allotment` for the `DataPage` resizable layout) are bundled as regular dependencies too, so they come down with the package and modern bundlers tree-shake away the ones you never import. The real peers — `react`/`react-dom` 19+, `@cratis/arc*`, `reflect-metadata`, and `tsyringe` — already come with your Arc frontend.
 
 ## Wire the provider
 
-Mount [`CratisComponentsProvider`](../Common/cratis-components-provider.md) once at the root of your tree. The provider is a thin wrapper around PrimeReact's own `PrimeReactProvider` and is where you configure `unstyled`, `pt`, `ptOptions`, `inputStyle`, `ripple`, `appendTo`, and the rest of PrimeReact's API options:
+Mount [`CratisComponentsProvider`](../Common/cratis-components-provider.md) once at the root of your tree. The provider is a thin wrapper around PrimeReact's own `PrimeReactProvider` and is where you configure `unstyled`, `pt`, `ptOptions`, `inputVariant`, `ripple`, `theme`, and the rest of PrimeReact 11's props — all through its single `value` prop:
 
 ```tsx
 import '@cratis/components/styles';
@@ -50,12 +45,13 @@ With nothing else, you've imported:
 - The `--cratis-*` token layer (so Cratis-scoped surfaces have a stable variable surface to read from)
 - The provider that hosts `pt` / `unstyled` / locale / overlay z-index settings
 
-That's enough for the wrappers to render structurally, but PrimeReact widgets need **either** a theme or `unstyled: true` + a `pt` preset to look like anything other than raw browser primitives. Choose the setup that matches how much visual control you need:
+That's enough for the wrappers to render structurally, but PrimeReact 11 is **unstyled-first**: widgets need a look applied before they resemble anything other than raw browser primitives. Choose the setup that matches how much visual control you need:
 
-- [Use a PrimeReact theme](themed.md) — load a theme stylesheet and start tweaking
-- [Use a custom palette on top of a PrimeReact theme](custom-palette.md) — keep the theme's structure and supply your colors
-- [Use fully unstyled mode](unstyled.md) — disable PrimeReact styling and bring every visual yourself
+- [Use the Cratis baseline theme](baseline-theme.md) — the license-free default look
+- [Use a PrimeReact theme](themed.md) — a styled `@primeuix/themes` preset (needs a PrimeUI license key)
+- [Use a custom palette on top of a theme](custom-palette.md) — keep the theme's structure and supply your colors
+- [Use fully unstyled mode](unstyled.md) — bring every visual yourself through `pt` / CSS
 
 ## Using `PrimeReactProvider` directly
 
-`CratisComponentsProvider` is optional. If you'd rather mount `PrimeReactProvider` from `primereact/api` directly, that works too — every Cratis wrapper reads the same context. The Cratis provider exists to give Cratis a single place to layer in defaults later without breaking consumers, and to keep the setup discoverable. See [CratisComponentsProvider](../Common/cratis-components-provider.md) for the full prop reference.
+`CratisComponentsProvider` is optional. If you'd rather mount `PrimeReactProvider` from `@primereact/core` directly, that works too — every Cratis wrapper reads the same context. The Cratis provider exists to give Cratis a single place to layer in defaults later without breaking consumers, and to keep the setup discoverable. See [CratisComponentsProvider](../Common/cratis-components-provider.md) for the full prop reference.
diff --git a/Documentation/Styling/index.md b/Documentation/Styling/index.md
index b015d75..8afb916 100644
--- a/Documentation/Styling/index.md
+++ b/Documentation/Styling/index.md
@@ -1,33 +1,39 @@
 # Styling
 
-Cratis Components is built on top of PrimeReact and stays out of your way when it comes to styling. You can use the look that PrimeReact gives you out of the box, keep PrimeReact's structure while applying your own palette, or take complete control and provide every visual yourself — all without forking the library or fighting it.
+Cratis Components is built on top of PrimeReact 11 and stays out of your way when it comes to styling. PrimeReact 11 is **unstyled-first** — it ships no widget chrome by default — so you decide the look: apply a ready-made theme, keep a theme's structure while painting your own palette, or take complete control and provide every visual yourself — all without forking the library or fighting it.
 
-There are three supported styling options. They are not mutually exclusive: every component still exposes the same building blocks, so you can combine them per-component or per-region of your app.
+The supported styling setups are not mutually exclusive: every component still exposes the same building blocks, so you can combine them per-component or per-region of your app.
 
 ## TL;DR — choose a styling setup
 
 | Setup | When | Effort | What you write |
 |---|---|---|---|
-| [**Use a PrimeReact theme**](themed.md) | You want components to look good immediately and tweak from there. | Lowest | Theme CSS import + provider |
-| [**Use a custom palette on top of a PrimeReact theme**](custom-palette.md) | You want PrimeReact's structure but your own colors. | Low | A PrimeReact theme + CSS variable overrides |
-| [**Use fully unstyled mode**](unstyled.md) | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
+| [**Cratis baseline theme**](baseline-theme.md) | You want a polished default look with **no license**. | Lowest | `import '@cratis/components/theme'` + `class="cratis-theme"` |
+| [**A `@primeuix/themes` preset**](themed.md) | You want one of PrimeReact's design systems and have a PrimeUI license key. | Low | A preset via `value={{ theme: { preset } }}` (+ a `license` key) |
+| [**A custom palette on top of a theme**](custom-palette.md) | You want a theme's structure but your own colors. | Low | A theme + `--cratis-*` (or preset) token overrides |
+| [**Fully unstyled mode**](unstyled.md) | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
 
-All three setups use the same one-line setup described in [Getting Started](getting-started.md). You can change direction later because the same provider, tokens, and `pt` hooks stay available.
+Every setup shares the same one-line install described in [Getting Started](getting-started.md). You can change direction later because the same provider, tokens, and `pt` hooks stay available.
 
-## Why the first two options still load a PrimeReact theme
+## Why the themed options need a theme
 
-In PrimeReact 10 every widget's *structural* CSS — padding, borders, dialog frame, focus rings, button shapes — ships **inside the theme file**. There is no separate primitives stylesheet. So a setup without any PrimeReact theme has no widget chrome at all and components render as the raw HTML primitives the browser supplies by default. PrimeReact 11's styled mode (`@primeuix/themes`) works the same way — the active preset supplies the chrome — so the reasoning here is unchanged across versions.
+Every setup except fully-unstyled starts from a theme, because PrimeReact 11 is unstyled-first: on its own it ships **no** widget chrome — no padding, borders, dialog frame, focus rings, or button shapes. That chrome comes from one of two license-relevant sources:
 
-The `--cratis-*` token layer is an additive Cratis-scoped tint for surfaces the wrappers in this package own — validation error text, the FormElement addon background, breadcrumb borders — and **is not, by itself, sufficient to skin PrimeReact widgets**. Override PrimeReact's variables when you want the whole UI in your palette. Use `unstyled: true` and a `pt` preset when you want to replace PrimeReact's visuals entirely.
+- the **Cratis baseline theme** (`import '@cratis/components/theme'` + `class="cratis-theme"`) — a token-based default look that needs **no license**.
+- a `@primeuix/themes` **preset** — its design tokens (`--p-*`) paint the widgets. Applying a preset requires a **PrimeUI license key** (a free community tier or a paid one).
 
-The token layer is **version-spanning**: each `--cratis-*` token resolves the PrimeReact v11 design token (`@primeuix/themes`) first and falls back to the v10 theme variable, so the same build of this package is themed correctly whether your app is on PrimeReact 10 or 11. (Note: this covers the *theming* surface only — full PrimeReact 11 component/`pt`-slot compatibility is tracked separately.)
+Without either — and without your own `pt` / CSS — components render as the raw HTML primitives the browser supplies by default. (The v10 `primereact/resources/themes/*/theme.css` stylesheets no longer exist.)
+
+The `--cratis-*` token layer is an additive Cratis-scoped tint for surfaces the wrappers in this package own — validation error text, the FormElement addon background, breadcrumb borders — and **is not, by itself, sufficient to skin PrimeReact widgets**. Customize the active preset (via `@primeuix/themes` `definePreset`) when you want the whole UI in your palette. Use `unstyled: true` and a `pt` preset when you want to replace PrimeReact's visuals entirely.
+
+Each `--cratis-*` token resolves the active `@primeuix/themes` design token (`--p-*`), and the baseline theme supplies concrete fallback colors when no preset is present — so Cratis-scoped surfaces stay in sync with whichever theme you apply.
 
 ## Mental model
 
 Every component you import from `@cratis/components` is a thin wrapper around a PrimeReact component plus a few Cratis additions (validation hooks, command-form integration, …). Styling flows in three layers:
 
-1. **PrimeReact theme tokens** — on v10 the theme variables `--surface-card`, `--text-color`, `--primary-color`, …; on v11 the `@primeuix/themes` design tokens (`--p-*`, customized via `definePreset`). Read directly by PrimeReact widgets. Override these to repaint the whole UI.
-2. **Cratis tokens** — `--cratis-surface-card`, `--cratis-text-color`, `--cratis-primary-color`, … Read only by Cratis-scoped surfaces. In `tokens.css` each resolves the PrimeReact v11 design token (e.g. `--p-content-border-color`) first and falls back to the v10 theme variable (e.g. `--surface-border`), so they stay in sync with the loaded PrimeReact theme on either major. Override these when you want a Cratis surface tinted differently from the surrounding PrimeReact widgets.
+1. **PrimeReact design tokens** — the `@primeuix/themes` design tokens (`--p-*`), customized via `definePreset`. Read directly by PrimeReact widgets. Customize the preset to repaint the whole UI. (With the license-free baseline theme instead of a preset, this layer is the palette that `@cratis/components/theme` supplies.)
+2. **Cratis tokens** — `--cratis-surface-card`, `--cratis-text-color`, `--cratis-primary-color`, … Read only by Cratis-scoped surfaces. In `tokens.css` each resolves the active `@primeuix/themes` design token (e.g. `--p-content-border-color`), with the baseline theme providing concrete fallbacks — so they stay in sync with whichever theme is applied. Override these when you want a Cratis surface tinted differently from the surrounding PrimeReact widgets.
 3. **PrimeReact `pt` (pass-through)** — A per-component prop that lets you attach CSS class names (or inline styles) to every slot inside a PrimeReact widget. The strongest customization knob; works hand-in-hand with `unstyled` mode.
 
 The [Cratis token reference](cratis-tokens.md) lists every token and the surface it tints. The [pass-through cheat sheet](pass-through.md) lists every Cratis wrapper and which pt props it exposes.
@@ -35,8 +41,9 @@ The [Cratis token reference](cratis-tokens.md) lists every token and the surface
 ## See also
 
 - [Getting Started](getting-started.md) — the one-line setup every option shares
-- [Use a PrimeReact theme](themed.md)
-- [Use a custom palette on top of a PrimeReact theme](custom-palette.md)
+- [Use the Cratis baseline theme](baseline-theme.md) — the license-free default look
+- [Use a PrimeReact theme](themed.md) — a `@primeuix/themes` preset (needs a license)
+- [Use a custom palette on top of a theme](custom-palette.md)
 - [Use fully unstyled mode](unstyled.md)
 - [Cratis token reference](cratis-tokens.md)
 - [Pass-through (pt) cheat sheet](pass-through.md)
diff --git a/Documentation/Styling/mixing-paths.md b/Documentation/Styling/mixing-paths.md
index b8e998c..1cd5ad5 100644
--- a/Documentation/Styling/mixing-paths.md
+++ b/Documentation/Styling/mixing-paths.md
@@ -4,11 +4,11 @@ The three styling options compose. You don't have to choose one for the whole ap
 
 ## Themed app with one unstyled island
 
-Keep the PrimeReact theme as your global baseline and opt one specific component out with the per-instance `unstyled` prop:
+Keep a styled `@primeuix/themes` preset as your global baseline and opt one specific component out with the per-instance `unstyled` prop:
 
 ```tsx
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
 import '@cratis/components/styles';
+import Aura from '@primeuix/themes/aura';
 import { CratisComponentsProvider } from '@cratis/components';
 import { Dialog } from '@cratis/components/Dialogs';
 
@@ -19,10 +19,10 @@ const brandDialogPt = {
 };
 
 export const App = () => (
-    <CratisComponentsProvider>
+    <CratisComponentsProvider value={{ theme: { preset: Aura }, license: 'YOUR-PRIMEUI-KEY' }}>
         <YourApp />
 
-        {/* This one Dialog opts out of the theme and uses its own brand visuals. */}
+        {/* This one Dialog opts out of the preset and uses its own brand visuals. */}
         <Dialog title="Brand callout" unstyled pt={brandDialogPt}>
             …
         </Dialog>
@@ -32,11 +32,11 @@ export const App = () => (
 
 ## Unstyled app with one themed island
 
-Run the app fully unstyled and restore PrimeReact's defaults inside a single subtree by nesting a second `CratisComponentsProvider`:
+Run the app fully unstyled and give a single subtree the license-free Cratis baseline look. The baseline theme's rules are scoped under `.cratis-theme`, so wrapping one element in the class themes just that subtree:
 
 ```tsx
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
 import '@cratis/components/styles';
+import '@cratis/components/theme';
 import { CratisComponentsProvider } from '@cratis/components';
 import { globalPt } from './pt-preset';
 
@@ -44,52 +44,50 @@ export const App = () => (
     <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
         <YourApp />
 
-        {/* Inside this subtree, components use PrimeReact's theme defaults. */}
-        <CratisComponentsProvider value={{ unstyled: false }}>
-            <PrimeReactThemedSubtree />
-        </CratisComponentsProvider>
+        {/* Inside this subtree, components pick up the Cratis baseline theme. */}
+        <div className="cratis-theme">
+            <BaselineThemedSubtree />
+        </div>
     </CratisComponentsProvider>
 );
 ```
 
 ## App-wide dark mode
 
-Put each palette behind a class on the root element and toggle the class with your theme switcher. PrimeReact widgets and Cratis surfaces both follow because the `--cratis-*` tokens cascade from PrimeReact variables by default:
-
-```css
-:root.theme-light {
-    --surface-card: #ffffff;
-    --surface-border: #e2e8f0;
-    --text-color:   #0f172a;
-    --primary-color: #2563eb;
-}
-
-:root.theme-dark {
-    --surface-card: #1e293b;
-    --surface-border: #334155;
-    --text-color:   #f8fafc;
-    --primary-color: #38bdf8;
-}
-```
+With the Cratis baseline theme, dark mode is a single class: add `cratis-dark` alongside `cratis-theme` for the dark palette, remove it for light. The widgets and Cratis-scoped surfaces both follow because the baseline theme drives everything from the `--cratis-*` tokens:
 
 ```tsx
 const ThemeToggle = () => {
-    const toggle = () => {
-        const root = document.documentElement;
-        root.classList.toggle('theme-dark');
-        root.classList.toggle('theme-light');
-    };
+    const toggle = () => document.body.classList.toggle('cratis-dark');
     return <button onClick={toggle}>Toggle theme</button>;
 };
 ```
 
+Need more than two palettes, or your own colors? Override the `--cratis-*` tokens under scoped classes instead:
+
+```css
+.cratis-theme.theme-light {
+    --cratis-surface-card:   #ffffff;
+    --cratis-surface-border: #e2e8f0;
+    --cratis-text-color:     #0f172a;
+    --cratis-primary-color:  #2563eb;
+}
+
+.cratis-theme.theme-dark {
+    --cratis-surface-card:   #1e293b;
+    --cratis-surface-border: #334155;
+    --cratis-text-color:     #f8fafc;
+    --cratis-primary-color:  #38bdf8;
+}
+```
+
 Combine with `prefers-color-scheme` for the initial mode:
 
 ```css
 @media (prefers-color-scheme: dark) {
-    :root:not(.theme-light):not(.theme-dark) {
-        --surface-card: #1e293b;
-        --text-color: #f8fafc;
+    .cratis-theme:not(.theme-light):not(.theme-dark) {
+        --cratis-surface-card: #1e293b;
+        --cratis-text-color:   #f8fafc;
     }
 }
 ```
@@ -113,16 +111,7 @@ Token overrides cascade, so any ancestor scope works for tinting Cratis-scoped s
 </div>
 ```
 
-If you want PrimeReact widgets in the region to follow too, override the PrimeReact variables in the same scope:
-
-```css
-.brand-zone {
-    --surface-card:  #1f1147;
-    --text-color:    #ede9fe;
-    --primary-color: #a78bfa;
-    /* …and the --cratis-* siblings above */
-}
-```
+With the baseline theme these `--cratis-*` overrides already reach the widgets in the region — the theme reads the same tokens. (On a `@primeuix/themes` preset, region-scoped widget colors come from `definePreset` instead; the `--cratis-*` overrides still retint the Cratis-scoped surfaces.)
 
 ## Per-component visual override inside unstyled mode
 
@@ -148,7 +137,7 @@ import './custom-table.css';
 
 - **Provider value updates re-render**: changing `value` on `CratisComponentsProvider` rebuilds the merged config. Use a stable reference (e.g. `useMemo` or a module-level constant) to avoid spurious re-renders.
 - **`pt` merging is deep**: PrimeReact merges global `pt` with per-instance `pt` by default. Set `ptOptions={{ mergeSections: false }}` on the wrapper if you need a hard replace.
-- **Cratis tokens are scoped**: overriding a `--cratis-*` token only changes Cratis surfaces. To repaint PrimeReact widgets too, override the PrimeReact variable. See [Cratis token reference](cratis-tokens.md).
+- **Where `--cratis-*` reaches depends on the theme**: with the Cratis baseline theme the widgets read those tokens, so an override repaints both. On a `@primeuix/themes` preset the widgets read `--p-*` design tokens, so `--cratis-*` overrides only retint the Cratis-scoped surfaces — repaint the widgets with `definePreset`. See [Cratis token reference](cratis-tokens.md).
 
 ## See also
 
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index cf422b5..6249d36 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -8,22 +8,22 @@ Every Cratis wrapper forwards PrimeReact's `pt`, `ptOptions`, and `unstyled` pro
 
 The wrapper renders exactly one PrimeReact widget and forwards `pt` / `ptOptions` / `unstyled` / `className` straight to it. The pt slot names are PrimeReact's own — see the underlying component's documentation.
 
-| Wrapper | Underlying widget | pt slot reference |
+| Wrapper | Underlying widget (PrimeReact 11) | pt slot reference |
 |---|---|---|
 | `Dialog`            | `primereact/dialog` Dialog          | PrimeReact Dialog `pt` |
-| `Dropdown`          | `primereact/dropdown` Dropdown      | PrimeReact Dropdown `pt` |
+| `Dropdown`          | `primereact/select` Select          | PrimeReact Select `pt` |
 | `InputTextField`    | `primereact/inputtext` InputText    | PrimeReact InputText `pt` |
-| `TextAreaField`     | `primereact/inputtextarea` InputTextarea | PrimeReact InputTextarea `pt` |
+| `TextAreaField`     | `primereact/textarea` Textarea      | PrimeReact Textarea `pt` |
 | `NumberField`       | `primereact/inputnumber` InputNumber | PrimeReact InputNumber `pt` |
-| `DropdownField`     | `primereact/dropdown` Dropdown      | PrimeReact Dropdown `pt` |
+| `DropdownField`     | `primereact/select` Select          | PrimeReact Select `pt` |
 | `RadioGroupField`   | `primereact/radiobutton` RadioButton (one per option) | PrimeReact RadioButton `pt` |
 | `RadioButtonField`  | `primereact/radiobutton` RadioButton | PrimeReact RadioButton `pt` |
-| `CalendarField`     | `primereact/calendar` Calendar      | PrimeReact Calendar `pt` |
+| `CalendarField`     | `primereact/datepicker` DatePicker  | PrimeReact DatePicker `pt` |
 | `CheckboxField`     | `primereact/checkbox` Checkbox      | PrimeReact Checkbox `pt` |
 | `SliderField`       | `primereact/slider` Slider          | PrimeReact Slider `pt` |
-| `ChipsField`        | `primereact/chips` Chips            | PrimeReact Chips `pt` |
-| `MultiSelectField`  | `primereact/multiselect` MultiSelect | PrimeReact MultiSelect `pt` |
-| `ColorPickerField`  | `primereact/colorpicker` ColorPicker | PrimeReact ColorPicker `pt` |
+| `ChipsField`        | `primereact/inputtags` InputTags    | PrimeReact InputTags `pt` |
+| `MultiSelectField`  | `primereact/select` Select (multiple mode) | PrimeReact Select `pt` |
+| `ColorPickerField`  | `primereact/inputcolor` InputColor  | PrimeReact InputColor `pt` |
 | `EventsView`        | `primereact/timeline` Timeline      | PrimeReact Timeline `pt` |
 
 Example:
@@ -70,14 +70,14 @@ The wrapper composes more than one PrimeReact widget and exposes a sibling set o
 | Prop | Targets |
 |---|---|
 | `pt` / `ptOptions` / `unstyled` / `className` | The inner DataTable. |
-| `paginatorPt` / `paginatorPtOptions` / `paginatorUnstyled` | The inner Paginator. |
+| `paginatorClassName` / `paginatorAriaLabels` | The paginator (a Cratis button control — styled by class name, not `pt`). |
 
-`DataPage` composes a DataTable **and** a Menubar:
+`DataPage` composes a DataTable **and** an action toolbar:
 
 | Prop | Targets |
 |---|---|
 | `tablePt` / `tablePtOptions` / `tableUnstyled` / `tableClassName` | The inner DataTable. |
-| `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` | The action Menubar. |
+| `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` | The action toolbar's buttons (PrimeReact 11 replaced the v10 Menubar with a button toolbar). |
 
 ```tsx
 <DataPage<AllAuthors, Author, never>
@@ -97,9 +97,9 @@ These wrappers render many PrimeReact widgets internally (`InputText`, `InputNum
 
 | Wrapper | What it accepts | How to restyle internals |
 |---|---|---|
-| `ObjectContentEditor`   | `className` | Global `pt` on `CratisComponentsProvider` covering `inputtext`, `inputnumber`, `checkbox`, `calendar`, `inputtextarea`. |
+| `ObjectContentEditor`   | `className` | Global `pt` on `CratisComponentsProvider` covering `inputtext`, `inputnumber`, `checkbox`, `textarea`. |
 | `ObjectNavigationalBar` | `className` | Global `pt` covering `button`; `--cratis-surface-border` for the bottom border. |
-| `SchemaEditor`          | `className` | Global `pt` covering `menubar`, `button`, `datatable`, `dropdown`, `inputtext`. |
+| `SchemaEditor`          | `className` | Global `pt` covering `button`, `inputtext`, `select`, `datatable`. |
 
 Example with a global preset:
 
@@ -124,8 +124,10 @@ A `pt` preset on `CratisComponentsProvider` flows into **every** PrimeReact widg
 To replace a slot's preset entirely on a single instance, opt out of merging:
 
 ```tsx
-<Button label="Special" pt={{ root: { className: 'special-btn' } }}
-        ptOptions={{ mergeSections: false }} />
+<Button pt={{ root: { className: 'special-btn' } }}
+        ptOptions={{ mergeSections: false }}>
+    Special
+</Button>
 ```
 
 ## Components that do NOT accept per-instance `pt`
diff --git a/Documentation/Styling/themed.md b/Documentation/Styling/themed.md
index 4db41ca..e78e6f8 100644
--- a/Documentation/Styling/themed.md
+++ b/Documentation/Styling/themed.md
@@ -1,31 +1,30 @@
 # Use a PrimeReact theme
 
-You want components to look reasonable out of the box and only intervene when needed. Use this setup for prototypes, internal tools, or any app where one of the prebuilt PrimeReact themes is a good fit.
+You want components to look reasonable out of the box using one of PrimeReact's own design systems. PrimeReact 11 is unstyled-first, so a *theme* comes from a **`@primeuix/themes` preset** — Aura, Lara, Nora, or Material — applied through the provider.
+
+> **Licensing.** Applying a `@primeuix/themes` preset needs a **PrimeUI license key** (a free community tier or a paid one). If you want a polished look with **no license**, use the [Cratis baseline theme](baseline-theme.md) instead.
 
 ## Setup
 
-Load any PrimeReact theme stylesheet alongside Cratis Components. PrimeReact's own widgets paint themselves from the theme, and the `--cratis-*` tokens cascade to the matching theme variables so Cratis-scoped surfaces follow along:
+Install `@primeuix/themes`, pick a preset, and pass it — together with your license key — through the provider's single `value` prop. The preset paints PrimeReact's own widgets, and the `--cratis-*` tokens follow the preset so Cratis-scoped surfaces stay in sync:
 
 ```tsx
-// 1. Theme first, then Cratis styles so any --cratis-* override wins.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
-import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
-
+import Aura from '@primeuix/themes/aura';
 import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
-    <CratisComponentsProvider>
+    <CratisComponentsProvider value={{ theme: { preset: Aura }, license: 'YOUR-PRIMEUI-KEY' }}>
         <YourApp />
     </CratisComponentsProvider>
 );
 ```
 
-Available themes ship inside the `primereact/resources/themes/` directory — Lara, Soho, Viva, Vela, Bootstrap, Material, Tailwind, and others, each in light/dark and a handful of accent colors. Pick whichever matches your app.
+Presets ship in the `@primeuix/themes` package — Aura, Lara, Nora, and Material — each customizable with `definePreset`. Without a license key, PrimeReact logs a warning and shows an "Invalid PrimeUI License" banner in development **and** production.
 
 ## Override one component with CSS
 
-When you want to tweak a single widget without redesigning anything, plain CSS works on top of the theme. Target PrimeReact's own class names for global overrides:
+When you want to tweak a single widget without redesigning anything, plain CSS works on top of the preset. A `@primeuix/themes` preset's widgets carry PrimeReact's own `.p-*` class names, so a global rule reaches them:
 
 ```css
 /* yourApp.css */
@@ -44,7 +43,7 @@ When you want to tweak a single widget without redesigning anything, plain CSS w
 ```
 
 ```tsx
-<Button label="Delete" className="dangerous-button" />
+<Button className="dangerous-button">Delete</Button>
 ```
 
 ## Override one component with Tailwind
@@ -64,7 +63,7 @@ For multi-slot composites like `StepperCommandDialog` or `DataPage`, the `classN
 
 ## Tint a specific Cratis surface
 
-Validation error text, the FormElement addon, breadcrumb bottom borders, and other Cratis-specific surfaces read from `--cratis-*` tokens (not from PrimeReact's variables). Override the relevant token to retint just those surfaces while leaving the PrimeReact theme untouched:
+Validation error text, the FormElement addon, breadcrumb bottom borders, and other Cratis-specific surfaces read from `--cratis-*` tokens (not from PrimeReact's design tokens). Override the relevant token to retint just those surfaces while leaving the preset untouched:
 
 ```css
 :root {
@@ -100,5 +99,6 @@ When CSS overrides aren't enough — for example, when you need to attach a clas
 
 This setup stops being a good fit when:
 
-- The PrimeReact theme is "almost" but not your brand — use [a custom palette on top of a PrimeReact theme](custom-palette.md) and override the PrimeReact variables on `:root`.
+- You don't want a PrimeUI license — use the license-free [Cratis baseline theme](baseline-theme.md).
+- The preset is "almost" but not your brand — use [a custom palette on top of a theme](custom-palette.md) and customize the preset's design tokens.
 - You're integrating into a design system that defines its own button, dialog, and input visuals — use [fully unstyled mode](unstyled.md) and bring every visual yourself.
diff --git a/Documentation/Styling/toc.yml b/Documentation/Styling/toc.yml
index 52c4493..6731ce8 100644
--- a/Documentation/Styling/toc.yml
+++ b/Documentation/Styling/toc.yml
@@ -2,7 +2,9 @@
   href: index.md
 - name: Getting Started
   href: getting-started.md
-- name: Use a PrimeReact theme
+- name: Use the Cratis baseline theme (no license)
+  href: baseline-theme.md
+- name: Use a PrimeReact theme (preset, needs a license)
   href: themed.md
 - name: Use a custom palette on top of a PrimeReact theme
   href: custom-palette.md
diff --git a/Documentation/coming-from-primereact.md b/Documentation/coming-from-primereact.md
index 9e06cee..869bfce 100644
--- a/Documentation/coming-from-primereact.md
+++ b/Documentation/coming-from-primereact.md
@@ -11,10 +11,10 @@ In a PrimeReact app, the screen often owns request creation, loading state, dial
 
 ## A command form
 
-You have a dialog with a field and a save button. By hand, that's local state, a loading flag, a fetch, and footer buttons:
+You have a dialog with a field and a save button. By hand, that's local state, a saving flag, a fetch, and footer buttons you wire yourself:
 
 ```tsx
-// PrimeReact, local state
+// Manual: local state, a saving flag, a fetch, and hand-wired footer buttons
 const [name, setName] = useState('');
 const [saving, setSaving] = useState(false);
 
@@ -28,10 +28,10 @@ const save = async () => {
     setSaving(false);
 };
 
-<Dialog header="Add author" visible={visible} onHide={hide} footer={
+<Dialog title="Add author" onCancel={hide} buttons={
     <>
-        <Button label="Cancel" onClick={hide} />
-        <Button label="Add" loading={saving} onClick={save} />
+        <Button onClick={hide}>Cancel</Button>
+        <Button disabled={saving} onClick={save}>Add</Button>
     </>
 }>
     <InputText value={name} onChange={e => setName(e.target.value)} />
@@ -106,13 +106,13 @@ Selection, the resizable split, and disabling menu items until a row is selected
 | `DataTable value={...}` + `useEffect` fetch | `DataTableForObservableQuery query={...}` (live) or `DataTableForQuery` |
 | Split panes + selection + detail wiring | `DataPage` with `detailsComponent` |
 | A multi-step wizard you build yourself | `StepperCommandDialog` |
-| A PrimeReact theme | the same theme, plus `--cratis-*` tokens for repainting |
+| A PrimeReact theme | the Cratis baseline theme or a `@primeuix/themes` preset, plus `--cratis-*` tokens for repainting |
 
 ## What stays the same
 
-- It's still PrimeReact underneath. `Column`, `Button`, icons, and your chosen theme all work as you know them.
+- It's still PrimeReact underneath — `Column`, `Button`, and icons all work as you know them. (One PrimeReact 11 change to keep in mind: `Button` renders its content as **children**, not a `label`/`icon` prop.)
 - You keep using plain PrimeReact for purely presentational widgets that aren't tied to a command or query — the two coexist happily on the same screen.
-- Your styling knowledge carries over; Components renders PrimeReact in unstyled mode and reads colors and spacing from tokens you control. See [Styling](/components/styling/).
+- Your styling knowledge carries over; PrimeReact 11 is unstyled-first, so Components reads colors and spacing from the theme and tokens you control — the license-free Cratis baseline theme, a `@primeuix/themes` preset, or your own `pt`. See [Styling](/components/styling/).
 
 ## What changes (and why it's less code)
 
diff --git a/Documentation/displaying-data.md b/Documentation/displaying-data.md
index a29eeff..1d63b1a 100644
--- a/Documentation/displaying-data.md
+++ b/Documentation/displaying-data.md
@@ -13,7 +13,7 @@ If your query is observable, `DataTableForObservableQuery` subscribes for you an
 
 ```tsx
 import { DataTableForObservableQuery } from '@cratis/components/DataTables';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataTables';
 import { AllAuthors } from './Author';   // generated observable query proxy
 
 export const Authors = () => (
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index 421e863..5be3bc9 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -20,13 +20,13 @@ You can build that straight on PrimeReact — instantiate the command, track its
 
 <Steps>
 
-1. **Install the package and its PrimeReact peers.**
+1. **Install the package.**
 
    ```bash title="Install Components"
-   npm install @cratis/components primereact primeicons
+   npm install @cratis/components
    ```
 
-   A few components pull extra peers only when you use them — `pixi.js` for `PivotViewer`, `framer-motion` for animated panels, `allotment` for `DataPage`. Skip them until you reach for those.
+   PrimeReact and its icons (`primereact`, `primeicons`), plus `pixi.js` (`PivotViewer`), `framer-motion` (animated panels), and `allotment` (`DataPage`), are **bundled dependencies** — they install automatically with the package, so there's nothing extra to add. The real peers — `react`/`react-dom` 19+, `@cratis/arc*`, `reflect-metadata`, and `tsyringe` — already come with the Arc frontend from the prerequisites.
 
 2. **Import the styles once**, at your app's entry point:
 
@@ -53,7 +53,7 @@ You can build that straight on PrimeReact — instantiate the command, track its
 
 ## What the provider sets up
 
-That one wrapper does more than it looks. Components renders PrimeReact in **unstyled mode** with a pass-through preset, configures locale, ripple, and overlay z-index, and routes every component's look through the `--cratis-*` tokens you just imported. The upshot: everything below it renders structurally right away, and it takes its visual identity from tokens you control — not from styles baked into the library.
+That one wrapper does more than it looks. Components renders PrimeReact **unstyled-first** (PrimeReact 11's default) and is the single place you layer on a `pt` preset, locale, ripple, overlay z-index, or a styled theme — routing every component's look through the `--cratis-*` tokens you just imported. The upshot: everything below it renders structurally right away, and it takes its visual identity from tokens and the styling setup you control — not from styles baked into the library.
 
 ```mermaid
 flowchart LR
@@ -84,11 +84,11 @@ No `isExecuting` flag, no button wiring, no duplicate validation logic — and b
 
 ## Choose how it looks
 
-The components render structurally the moment the provider is mounted; their *look* is a separate, deliberate choice. Pick one setup on the [Styling](/components/styling/) page:
+The components render structurally the moment the provider is mounted; their *look* is a separate, deliberate choice. PrimeReact 11 is unstyled-first, so pick one setup on the [Styling](/components/styling/) page:
 
-- a ready-made PrimeReact theme,
-- a theme repainted with a custom `--cratis-*` palette, or
-- fully unstyled, with your own pass-through preset.
+- the license-free **Cratis baseline theme** (`import '@cratis/components/theme'` + `class="cratis-theme"`),
+- a styled `@primeuix/themes` **preset** via `value={{ theme: { preset } }}` (needs a PrimeUI license key), or
+- fully unstyled, with your own `pt` / CSS.
 
 ## Recap
 
diff --git a/Documentation/list-screen-with-actions.md b/Documentation/list-screen-with-actions.md
index 7f83e07..c1a79ef 100644
--- a/Documentation/list-screen-with-actions.md
+++ b/Documentation/list-screen-with-actions.md
@@ -15,7 +15,7 @@ sidebar:
 
 ```tsx
 import { DataPage, MenuItem } from '@cratis/components/DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '@cratis/components/DataPage';
 import { useDialog } from '@cratis/arc.react/dialogs';
 import { AllAuthors } from './Author';        // observable query proxy
 import { AddAuthor } from './AddAuthor';       // CommandDialog from the form recipe
diff --git a/Documentation/migration.md b/Documentation/migration.md
index b45e3ce..279d47d 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -1,450 +1,96 @@
-# Migration guide — upgrading from earlier `@cratis/components`
+# Migration — PrimeReact 10 → 11
 
-This release is the first to document the supported styling setups described in the [Styling section](Styling/index.md): use a PrimeReact theme, keep the theme structure but apply your own palette, or run fully unstyled with a `pt` preset. It is also the first release to ship `CratisComponentsProvider`, the `--cratis-*` token layer, and full `pt` / `unstyled` forwarding on every wrapper. The dominant breaking signal is that PrimeReact and friends move from runtime `dependencies` to `peerDependencies`.
+`@cratis/components` moved from PrimeReact 10 to **PrimeReact 11**. Most wrapper APIs are unchanged, so many apps upgrade with only the find-and-replace below. This guide lists every change a consuming app might feel.
 
-This page tells you what to change in your app, what to be aware of visually, and what new capabilities you can opt in to once the upgrade lands.
+The short version: the package is now **ESM-only**; a handful of `primereact/*` imports moved to `@cratis/components/*`; and styled themes are applied via a `@primeuix/themes` preset (or the new Cratis baseline theme) instead of a `resources/themes/*.css` import. Read the [Licensing](#licensing) note at the end.
 
-## Quick checklist
+## ESM-only packaging
 
-If you do these three things, your app will install and render correctly after the upgrade:
+PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build.
 
-1. **Add `primereact` and `primeicons` to your own `package.json`**:
+- If your app already bundles with Vite or modern tooling (the Cratis default), no change is needed.
+- If something in your pipeline `require()`d the package, switch it to `import`.
 
-   ```bash
-   npm install primereact primeicons
-   # or
-   yarn add primereact primeicons
-   ```
+## Import moves (removed `primereact/*` paths)
 
-2. **If you use the optional components, add their peer too**:
+PrimeReact 11 removed several modules. Replace them with the Cratis-owned equivalents — the authoring model is unchanged:
 
-   | Component | Optional peer |
-   |---|---|
-   | `PivotViewer` | `pixi.js` (canvas) and `framer-motion` (animated panels) |
-   | `DataPage` resizable layout | `allotment` |
-
-3. **Skim the [Visual changes](#visual-changes) section below** to spot anywhere the new rendering would surprise you.
-
-Everything else in this release is additive — your existing component calls continue to work without code changes.
-
-## Breaking changes
-
-### 1. `primereact` and `primeicons` are now peer dependencies
-
-In earlier releases these were direct `dependencies` of `@cratis/components`, so `npm install @cratis/components` was enough to pull them in transitively.
-
-In this release they are `peerDependencies`. You must declare them in your own `package.json`. If you don't, the install will emit a peer-dependency warning and the bundler will fail to resolve `primereact/dialog`, `primereact/button`, etc. at build time.
-
-This change avoids the duplicate-installation pitfall: consumers who already had `primereact` in their app were previously ending up with two copies — their own plus the one inside `@cratis/components` — and PrimeReact's React context fragmented across them, so `unstyled` / `pt` on one provider didn't reach widgets rendered through the other.
-
-```jsonc
-// your-app/package.json
-{
-  "dependencies": {
-    "@cratis/components": "^X.Y.Z",
-    "primereact":         "^10.9.0",
-    "primeicons":         "^7.0.0"
-    // …
-  }
-}
-```
-
-The `@cratis/arc*` packages, `@cratis/fundamentals`, `react`, and `react-dom` are also peer dependencies, but you almost certainly already have them (`@cratis/fundamentals` comes in transitively with `@cratis/arc`).
-
-### 2. The optional dependencies are now optional peer dependencies
-
-`pixi.js`, `framer-motion`, and `allotment` moved to peer dependencies with `peerDependenciesMeta.optional = true`. They were previously bundled as direct dependencies of `@cratis/components`, which meant **every** consumer downloaded ~5 MB of WebGL canvas code (`pixi.js`) even if they never used `PivotViewer`.
-
-| You use… | …so add to your install |
+| Was (PrimeReact 10) | Now |
 |---|---|
-| `PivotViewer` | `pixi.js` and `framer-motion` |
-| `DataPage` with resizable layout | `allotment` |
-
-If you don't use these components, you don't need to do anything — provided your bundler tree-shakes. `PivotViewer` and `DataPage` are re-exported from the package root (`@cratis/components`) and statically import their optional peers, so a modern bundler (Vite, Rollup, esbuild, webpack 5) drops them when unused — the package marks its JS side-effect-free apart from CSS. If you import from the root with a bundler that does **not** tree-shake, install the optional peers too, or import the components you use from their subpaths (`@cratis/components/Dialogs`, `@cratis/components/CommandForm`, …) so the heavy components are never pulled into the graph.
-
-### 3. `react-router-dom` and `usehooks-ts` are no longer dependencies
-
-Both were listed as runtime dependencies but never imported by anything inside `@cratis/components`, so they have been dropped. If your app uses `react-router-dom` directly (very likely), you should already have it in your own `package.json` — nothing changes for you.
-
-If you were somehow relying on the transitive copy of either, add it to your own deps:
-
-```bash
-yarn add react-router-dom
-```
-
-### 4. `@cratis/arc.vite` is no longer a peer dependency
-
-It was only ever used by the package's own dev `vite.config.ts`, so it moved to `devDependencies`. If you previously installed it solely to satisfy the peer requirement, you can drop it — nothing in the shipped library imports it.
-
-## Visual changes
-
-The styling work removes a few couplings to PrimeReact theme internals. These changes are intentional and almost always invisible, but there are a handful of places where rendering may shift.
-
-### `FormElement` addon is now Cratis-bespoke
-
-Earlier releases rendered the icon addon using PrimeReact's `p-inputgroup` / `p-inputgroup-addon` classes, so the addon picked up PrimeReact's theme-driven background and border.
-
-This release renders the addon with structural CSS using the [`--cratis-*` tokens](Styling/cratis-tokens.md):
-
-```text
-.cratis-form-element            // row
-.cratis-form-element__addon     // leading icon slot
-```
-
-The shape and intent are identical. The exact background, border, and radius now come from `--cratis-surface-100`, `--cratis-surface-border`, and `--cratis-border-radius` rather than from the loaded PrimeReact theme. When you [use a PrimeReact theme](Styling/themed.md) or [apply a custom palette on top of one](Styling/custom-palette.md), the values still cascade from the PrimeReact theme by default, so the visual is essentially the same. In [fully unstyled mode](Styling/unstyled.md) the addon **still renders** instead of disappearing — a strict improvement.
-
-If you were relying on the exact PrimeReact `p-inputgroup-addon` look, the [FormElement reference](Common/form-element.md#styling) shows how to override the tokens or attach your own class via `pt` to restore it.
-
-### `ObjectNavigationalBar` and `SchemaEditor` bottom border now actually renders
-
-Earlier releases used `border-bottom-1 surface-border` — utility class names from **PrimeFlex**, a separate PrimeReact package that this library never depended on. If your app didn't already have PrimeFlex loaded, the classes were silent no-ops and the breadcrumb bar / schema editor toolbar had no visible bottom border.
-
-This release uses structural CSS that reads from `--cratis-surface-border`, so the border actually appears regardless of whether PrimeFlex is installed.
-
-If your app *did* have PrimeFlex installed, the border was already visible and looks essentially the same after upgrade. If your app *didn't* have PrimeFlex installed, you'll see a new horizontal line under the breadcrumbs and the schema editor menubar where there wasn't one before.
-
-This is arguably a bug fix — the original code was always meant to draw the border — but if you preferred the borderless look, override the token to `transparent`:
-
-```css
-:root {
-    /* Just for the navigational surfaces — PrimeReact's --surface-border stays untouched. */
-    --cratis-surface-border: transparent;
-}
-```
-
-### `RadioGroupField` vertical layout now stacks correctly
-
-`RadioGroupField` defaults to `layout="vertical"`, which is meant to stack the options in a column. Earlier releases expressed that with `flex-column` / `align-items-center` — again **PrimeFlex** class names the library never shipped — so the classes no-op'd and the options laid out in a **row** instead. The horizontal layout used valid Tailwind classes and worked correctly.
-
-This release uses the library's own Tailwind utilities (`flex-col` / `items-center`), so a default (vertical) `RadioGroupField` now renders as a true vertical stack, and the control/label of every `CheckboxField`, `RadioButtonField`, and `RadioGroupField` option is vertically centered.
-
-This is a bug fix — vertical was always the intended default — but if you had compensated for the broken row layout (for example by setting `layout="vertical"` and relying on the row rendering, or by adding your own wrapping styles), revisit those call sites after upgrading. To keep the old row layout, set `layout="horizontal"` explicitly.
-
-### Other PrimeReact class hooks removed
-
-The library no longer uses these hard-coded PrimeReact class names internally:
-
-| Old class hook | Replacement |
-|---|---|
-| `p-button-text p-button-sm` | PrimeReact `Button` props: `text` and `size="small"`. |
-| `p-button-text p-button-danger p-button-sm` | PrimeReact `Button` props: `text`, `severity="danger"`, `size="small"`. |
-| `<small className="p-error">` | Inline `<small>` styled with `--cratis-red-500`. |
-| `border-bottom-1 surface-border` | See [section above](#objectnavigationalbar-and-schemaeditor-bottom-border-now-actually-renders). |
-| `p-inputgroup` / `p-inputgroup-addon` | See [section above](#formelement-addon-is-now-cratis-bespoke). |
-
-When a PrimeReact theme is loaded, the Button `text` / `size` / `severity` props produce the same styling as the old class hooks — there's no visible change.
-
-## Subpath import changes
-
-### `@cratis/components/CommandStepper` now resolves
-
-Earlier releases declared a `./CommandStepper` subpath in the exports map, but it pointed at `dist/{esm,cjs}/CommandStepper/index.js`, which did not exist. The file lives at `dist/{esm,cjs}/CommandDialog/CommandStepper.js` because the source resides in `CommandDialog/`.
-
-Any consumer who tried `import { CommandStepper } from '@cratis/components/CommandStepper'` would have hit a module-resolution error. After this release, that import works.
-
-### `@cratis/components/EventModeling` was never real — it's now removed from the docs
-
-Earlier README listed `@cratis/components/EventModeling` in the available subpath exports. The path did not exist in the package's `exports` map and never did. If you tried to import from it, the import always failed. The README has been corrected.
-
-### `@cratis/components/CommandForm/fields` now resolves under CommonJS
-
-This subpath's CJS target was never emitted by the build, so `require('@cratis/components/CommandForm/fields')` failed (ESM `import` worked). Because the subpath is equivalent to `@cratis/components/CommandForm` — which already re-exports every field — its `exports` entry now points at that same barrel, so both `import` and `require` resolve. Existing imports from either path keep working unchanged.
-
-### New subpath exports
-
-Three component-folder subpaths that already had built indexes but were missing from the `exports` map have been added:
-
-```ts
-import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor';
-import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar';
-import { SchemaEditor } from '@cratis/components/SchemaEditor';
-```
-
-A new stylesheet subpath is also available — useful if you bring your own Tailwind setup and only want the `--cratis-*` token layer:
-
-```ts
-import '@cratis/components/tokens';
-```
-
-The recommended `@cratis/components/styles` (Tailwind utilities + tokens) continues to work and is unchanged.
-
-## Recommended migrations
-
-These are optional. Nothing in your app breaks if you skip them — but adopting them will make your code more idiomatic and unlock the new customization surface.
-
-### 1. Wrap your app in `CratisComponentsProvider`
+| `import { Column } from 'primereact/column'` | `import { Column } from '@cratis/components/DataPage'` (or `@cratis/components/DataTables`) |
+| `import { StepperPanel } from 'primereact/stepperpanel'` | `import { StepperPanel } from '@cratis/components/CommandDialog'` |
+| `import { Menubar } from 'primereact/menubar'` | use `<DataPage.MenuItems>` for list-page actions, or a `Button` toolbar |
+| `import { Dropdown } from 'primereact/dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
+| `import { PrimeReactProvider } from 'primereact/api'` | `import { PrimeReactProvider } from '@primereact/core'` |
 
-If you previously mounted `PrimeReactProvider` from `primereact/api` directly, you can keep doing that — every Cratis wrapper still reads the same context. The Cratis provider adds nothing today but reserves a single place for Cratis-wide defaults later.
+`<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">` work exactly as before.
 
-```tsx
-// Before — still works
-import { PrimeReactProvider } from 'primereact/api';
+PrimeReact 11's `Button` also renders its content as **children** — the v10 `label`/`icon` props are gone:
 
-export const App = () => (
-    <PrimeReactProvider value={{ /* … */ }}>
-        <YourApp />
-    </PrimeReactProvider>
-);
+```diff
+- <Button label="Save" icon="pi pi-check" onClick={save} />
++ <Button onClick={save}><i className="pi pi-check" /> Save</Button>
 ```
 
-```tsx
-// After — recommended
-import { CratisComponentsProvider } from '@cratis/components';
+## Data-table selection event
 
-export const App = () => (
-    <CratisComponentsProvider value={{ /* same APIOptions */ }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-See [CratisComponentsProvider](Common/cratis-components-provider.md) for the full prop reference.
-
-### 2. Switch styling overrides to `--cratis-*` tokens where possible
+The removed `DataTableSelectionSingleChangeEvent` is replaced by `DataTableSelectionChangeEvent<T>`. The `event.value` (the selected row) is unchanged, so only the type import changes:
 
-If you previously sprinkled CSS overrides across components (`.p-button { … }`, ad-hoc class names, etc.) to customize Cratis-specific surfaces — validation error color, the FormElement addon, breadcrumb borders — you can now consolidate those into a single `--cratis-*` override block:
-
-```css
-/* Before — multiple ad-hoc rules */
-.p-error { color: #f97316; }
-.my-form-addon { background: #1e293b; border-color: #334155; }
-.my-breadcrumb-bar { border-bottom: 1px solid #334155; }
+```diff
+- import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+- onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelected(e.value as Product)}
++ import type { DataTableSelectionChangeEvent } from '@cratis/components/DataTables';
++ onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelected(e.value ?? undefined)}
 ```
 
-```css
-/* After — three token overrides */
-:root {
-    --cratis-red-500:        #f97316;  /* drives p-error replacement automatically */
-    --cratis-surface-100:    #1e293b;  /* FormElement addon background */
-    --cratis-surface-border: #334155;  /* FormElement addon border, NavigationalBar border */
-}
-```
+Per-column filter menus (`<Column filter>`), a global search box, and a paginator range report are all available with no API change beyond `filter`.
 
-See [Cratis token reference](Styling/cratis-tokens.md) for the per-token surface mapping.
+## Theming — no more `resources/themes/*.css`
 
-### 3. Replace per-component className overrides with `pt`
+PrimeReact 11 removed the v10 theme stylesheets and is unstyled-first. Pick one of the [styling setups](Styling/index.md):
 
-Many wrappers now forward PrimeReact's `pt` (pass-through) prop, which lets you attach class names to individual slots inside a widget. For one-off styling, `pt` is more targeted and less likely to collide with future PrimeReact theme updates than overriding `.p-button` globally:
+- **Unstyled-first (default, no license):** ship structure plus the `--cratis-*` token layer and bring your own visuals via `pt` / CSS / Tailwind. Your existing `--cratis-*` overrides keep working.
+- **[Cratis baseline theme](Styling/baseline-theme.md) (no license):** `import '@cratis/components/theme'` plus `class="cratis-theme"` for a polished default look built entirely on the Cratis tokens.
+- **A styled `@primeuix/themes` preset (license-gated — see below):**
 
-```tsx
-// Before — class collision risk; affects all Buttons in the subtree
-<style>{`.confirm-section .p-button { background: #f97316; }`}</style>
-<div className="confirm-section">
-    <Dialog title="Confirm">…</Dialog>
-</div>
+```diff
+- import 'primereact/resources/themes/lara-dark-blue/theme.css';
++ import Aura from '@primeuix/themes/aura';
+  // …
+- <CratisComponentsProvider>
++ <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
 ```
 
-```tsx
-// After — scoped to this one Dialog, targets a single slot
-<Dialog
-    title="Confirm"
-    pt={{
-        header: { className: 'bg-orange-500' },
-        content: { className: 'p-6' },
-    }}
->
-    …
-</Dialog>
-```
-
-See [Pass-through cheat sheet](Styling/pass-through.md) for every wrapper's available slots and the per-component patterns (single-widget vs. multi-slot composite vs. large composite).
+Styling options are passed through the provider's single `value` prop — `value={{ theme: { preset } }}`, `value={{ unstyled: true }}`, `value={{ license: '…' }}` — never as direct props on `CratisComponentsProvider`.
 
-### 4. Adopt subpath imports for tree-shaking
+## Dialog and Stepper
 
-If you only use a few components, prefer subpath imports so unused parts of the package tree-shake out:
+Existing `Dialog` / `CommandDialog` / `StepperCommandDialog` APIs are unchanged. `Dialog` gains an additive `dismissable` prop; `resizable` is accepted but has no effect (PrimeReact 11's headless dialog has no built-in resize handle). `CommandStepper` / `StepperCommandDialog` keep their public props, including `orientation`, `headerPosition`, and `start` / `end`.
 
-```ts
-// Before — the package root re-exports every component as a namespace,
-// so importing from it pulls the whole package into your bundle
-import { Dialogs, DataPage, CommandForm } from '@cratis/components';
-
-// used as Dialogs.Dialog, DataPage.DataPage, CommandForm.InputTextField
-```
+## Reduced capabilities (forced by PrimeReact 11)
 
-```ts
-// After — per-component subpaths let the bundler drop everything you don't use
-import { Dialog } from '@cratis/components/Dialogs';
-import { DataPage } from '@cratis/components/DataPage';
-import { InputTextField } from '@cratis/components/CommandForm';
-```
-
-The root import is convenient when you use most of the package, but it defeats tree-shaking — reach for the subpaths in code that pulls in only a handful of components.
-
-## New optional capabilities
-
-These are additions, not migrations — nothing in your code needs to change to use them. They become available once you upgrade.
-
-### Per-component `pt` / `ptOptions` / `unstyled` / `className`
-
-Every Cratis wrapper now forwards PrimeReact's pass-through and unstyled props to the underlying widget. Pass them per-instance to restyle one component, or set a global preset on `CratisComponentsProvider` to apply across the whole app:
-
-```tsx
-<CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-    <YourApp />
-</CratisComponentsProvider>
-```
+A few v10 features have no PrimeReact 11 equivalent. The props are kept so your code still compiles, but they no longer do anything — remove them or adopt the alternative:
 
-The [Pass-through cheat sheet](Styling/pass-through.md) lists each wrapper's slot surface.
-
-### Per-slot props on composites
-
-Wrappers that compose more than one PrimeReact widget expose explicit per-slot props so you can target each slot independently:
-
-| Composite | Per-slot props |
+| Prop | What changed |
 |---|---|
-| `StepperCommandDialog` | `pt` / `unstyled` (Stepper) + `dialogPt` / `dialogPtOptions` / `dialogUnstyled` / `dialogClassName` (Dialog). |
-| `DataPage` | `tablePt` / `tablePtOptions` / `tableUnstyled` / `tableClassName` + `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName`. |
-| `DataTableForQuery` / `DataTableForObservableQuery` | `pt` / `unstyled` / `className` (DataTable) + `paginatorPt` / `paginatorPtOptions` / `paginatorUnstyled` (Paginator). |
-
-### `className` on composite editors
-
-`ObjectContentEditor`, `ObjectNavigationalBar`, and `SchemaEditor` now accept a `className` prop on the root for layout / positioning. Internal widget restyling continues to go through the global `pt` preset on `CratisComponentsProvider`.
-
-### `--cratis-*` token layer
-
-A scoped Cratis token layer is now part of every install. Each token resolves the PrimeReact v11 design token (`@primeuix/themes`) first and falls back to the matching v10 theme variable, so theme-based setups continue to look the way they always did on either PrimeReact major. Override `--cratis-*` only when you want a Cratis-scoped surface tinted independently of the surrounding PrimeReact widgets — see [Cratis token reference](Styling/cratis-tokens.md).
-
-### PrimeReact 10 and 11 — one build, both majors
-
-The `--cratis-*` token layer is version-spanning by design. Every token is declared as `var(--p-<v11-token>, var(--<v10-variable>))`, so:
-
-- On **PrimeReact 10**, the `--p-*` design tokens are undefined and the legacy `--surface-*` / `--primary-*` / `--text-color` values win.
-- On **PrimeReact 11**, the `@primeuix/themes` `--p-*` tokens resolve and win.
-
-The same build of `@cratis/components` is therefore themed correctly on both majors, and a PrimeReact 10 → 11 upgrade in your app needs **no change** to how Cratis components pick up your theme. PrimeReact 11 is not a rename of 10 — it uses a different token vocabulary — so where v11 has no direct equivalent for a v10 concept (`surface-ground` / `surface-section` / `surface-overlay`, the composite `focus-ring`), the closest durable v11 semantic token is used; the inline notes in `tokens.css` record each mapping.
-
-> **Scope:** this makes the **theming** surface forward-compatible — the most pervasive part of a PrimeReact upgrade. It does **not** make the library fully PrimeReact 11-compatible: v11 also changes component prop APIs and `pt` slot names, so per-slot `pt` presets will need revisiting when the `primereact` peer range is widened to allow v11. That work is tracked separately; the `primereact` peer is still `^10.9.0` today.
-
-### Storybook styling toolbar
-
-`yarn dev` from `Source/` opens Storybook with a five-mode **Styling** toolbar (paintbrush icon) that demonstrates the supported styling setups — useful for previewing how each one looks before committing to it in your app.
-
-## Migration recipes — before / after
-
-A handful of common patterns shown as before/after diffs.
-
-### Set up styling once at the root
-
-```tsx
-// Before
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
-import 'primeicons/primeicons.css';
-import '@cratis/components/styles';
-import { PrimeReactProvider } from 'primereact/api';
-
-export const App = () => (
-    <PrimeReactProvider value={{ ripple: true }}>
-        <YourApp />
-    </PrimeReactProvider>
-);
-```
-
-```tsx
-// After
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
-import 'primeicons/primeicons.css';
-import '@cratis/components/styles';
-import { CratisComponentsProvider } from '@cratis/components';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ ripple: true }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-### Restyle one Dialog instance
-
-```tsx
-// Before — global CSS rule
-// styles.css
-// .confirm-dialog .p-dialog-header { background: #1e40af; color: white; }
-
-<Dialog title="Confirm" className="confirm-dialog">…</Dialog>
-```
-
-```tsx
-// After — per-instance pt
-<Dialog
-    title="Confirm"
-    pt={{ header: { className: 'bg-blue-700 text-white' } }}
->
-    …
-</Dialog>
-```
-
-### Restyle the inner DataTable in DataPage
-
-```tsx
-// Before — only the outer wrapper had a className escape hatch
-<DataPage title="Authors" query={AllAuthors}>
-    <DataPage.MenuItems>…</DataPage.MenuItems>
-    <DataPage.Columns>…</DataPage.Columns>
-</DataPage>
-// Couldn't reach the inner DataTable without forking.
-```
-
-```tsx
-// After — per-slot pt
-<DataPage
-    title="Authors"
-    query={AllAuthors}
-    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
-    menubarPt={{ root: { className: 'bg-slate-900' } }}
->
-    <DataPage.MenuItems>…</DataPage.MenuItems>
-    <DataPage.Columns>…</DataPage.Columns>
-</DataPage>
-```
-
-### Switch to a fully-unstyled design system
-
-```tsx
-// Before — there was no supported setup for this. You either lived with PrimeReact theming
-// or wrote a custom PrimeReact theme.
-
-// After — flip the provider into unstyled mode and supply a pt preset.
-<CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-    <YourApp />
-</CratisComponentsProvider>
-```
-
-See [Use fully unstyled mode](Styling/unstyled.md) for complete worked examples in both plain CSS and TailwindCSS.
-
-## Troubleshooting
-
-### "Cannot find module 'primereact/dialog'" after upgrade
-
-You haven't added `primereact` to your own `package.json`. Run:
-
-```bash
-yarn add primereact primeicons
-```
-
-### Peer-dependency warnings on install
-
-Same root cause — the install is telling you which peer is missing. The required peers are `primereact` and `primeicons`; the optional ones (`pixi.js`, `framer-motion`, `allotment`) only matter if you use the corresponding component.
-
-### Sparse / missing visuals after upgrade
-
-You've already loaded a PrimeReact theme (you're not using fully unstyled mode). Most likely one of:
-
-- You're using `FormElement` and the addon now looks slightly different — see [FormElement addon is now Cratis-bespoke](#formelement-addon-is-now-cratis-bespoke).
-- You're seeing the bottom border under `ObjectNavigationalBar` or `SchemaEditor`'s menubar where you didn't see it before — see [the section on that](#objectnavigationalbar-and-schemaeditor-bottom-border-now-actually-renders).
+| `Dialog` `resizable` | v11's headless dialog has no resize handle — no effect. |
+| `ChipsField` `separator` | v11 `InputTags` commits one tag per Enter; pasted input is no longer auto-split into chips. |
+| `MultiSelectField` `display` / `maxSelectedLabels` | v11 `Select` renders the selection through its value slot; the v10 comma/chip modes and label-collapse are gone. |
+| `DataTableForQuery` / `DataTableForObservableQuery` / `DataPage` `clientFiltering` | Deprecated — filtering is always applied client-side to the loaded page; the toggle has no effect. |
 
-If components look fully unstyled (no padding, no borders, no dialog frame), you forgot to load a PrimeReact theme. See [Use a PrimeReact theme](Styling/themed.md).
+Some wrappers also narrowed their surface (they no longer leak PrimeReact's full API): `Column` keeps `field` / `header` / `body` / `sortable` / `filter` (v10 extras like `editor`, `frozen`, `footer`, `colSpan`, `expander` are dropped); `Dropdown` exposes a curated single/multi select surface plus `pt` / `ptOptions` / `unstyled`; and the `DataPage` action toolbar replaces the v10 Menubar, so `menubarPt` now targets the toolbar's buttons and the paginator is styled via `paginatorClassName` (+ `paginatorAriaLabels`), not `pt`.
 
-### "Module not found: '@cratis/components/EventModeling'"
+## What's new (nothing to migrate — just available)
 
-This subpath never existed — the README claimed it did. There's no replacement to migrate to. If you were relying on this import, please open an issue describing what you were importing from it.
+- **[Notifications](Notifications/index.md)** — `Toaster`, the imperative `toast`, and `toastCommandResult(result)` to surface an Arc command result as a toast.
+- **[Display](Display/index.md)** — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`.
+- **CommandForm fields** — [PasswordField](CommandForm/password-field.md), [ToggleSwitchField](CommandForm/toggle-switch-field.md), [RatingField](CommandForm/rating-field.md).
 
-### Storybook static build (`yarn build-storybook`) fails
+## Licensing
 
-Pre-existing issue in the Storybook + lightningcss + Vite pipeline, not introduced by this release. The dev server (`yarn dev`) is unaffected and is the recommended consumer path.
+PrimeReact 11 changed its licensing:
 
-## See also
+- **Unstyled core + the Cratis token layer + `pt` are free** — no key needed.
+- **The styled `@primeuix/themes` presets are license-gated.** Applying a preset needs a **PrimeUI license key** (free community tier or paid); without one, PrimeReact shows an *"Invalid PrimeUI License"* banner in dev **and** prod. Supply your key through the provider's `value`: `value={{ license: '…' }}`.
 
-- [Styling Overview](Styling/index.md) — the theme, custom-palette, and fully unstyled setup options
-- [CratisComponentsProvider](Common/cratis-components-provider.md) — provider configuration
-- [Cratis token reference](Styling/cratis-tokens.md) — `--cratis-*` token catalogue
-- [Pass-through cheat sheet](Styling/pass-through.md) — per-component `pt` surface
+If you use unstyled-first or the Cratis baseline theme, you need no license. Only a bundled `@primeuix/themes` preset requires a (free or paid) PrimeUI key.
diff --git a/Documentation/multi-step-form.md b/Documentation/multi-step-form.md
index 6f06470..9ec3e67 100644
--- a/Documentation/multi-step-form.md
+++ b/Documentation/multi-step-form.md
@@ -13,7 +13,7 @@ sidebar:
 
 ```tsx
 import { StepperCommandDialog } from '@cratis/components/CommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '@cratis/components/CommandDialog';
 import { InputTextField, DropdownField } from '@cratis/components/CommandForm';
 import { RegisterMember } from './RegisterMember';   // generated proxy
 
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index 6b23e4b..f1cd874 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -40,6 +40,10 @@
   href: Filter/toc.yml
 - name: Dropdown
   href: Dropdown/index.md
+- name: Display
+  href: Display/index.md
+- name: Notifications
+  href: Notifications/index.md
 - name: Toolbar
   href: Toolbar/toc.yml
 - name: ObjectNavigationalBar
diff --git a/Documentation/tutorial/act-on-it.mdx b/Documentation/tutorial/act-on-it.mdx
index 906012a..9fafc6f 100644
--- a/Documentation/tutorial/act-on-it.mdx
+++ b/Documentation/tutorial/act-on-it.mdx
@@ -41,7 +41,7 @@ The table lists authors; now a librarian needs to *change* the list. Every chang
        const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
        return (
            <Page title="Authors" panel>
-               <Button label="Add author" icon="pi pi-plus" onClick={() => showAddAuthor()} />
+               <Button onClick={() => showAddAuthor()}><i className="pi pi-plus" /> Add author</Button>
                <DataTableForObservableQuery query={AllAuthors} emptyMessage="No authors yet">
                    <Column field="name" header="Name" sortable />
                </DataTableForObservableQuery>
diff --git a/Documentation/tutorial/list-and-detail.mdx b/Documentation/tutorial/list-and-detail.mdx
index d34d3dd..315fb8f 100644
--- a/Documentation/tutorial/list-and-detail.mdx
+++ b/Documentation/tutorial/list-and-detail.mdx
@@ -29,7 +29,7 @@ We'll point it at `AllAuthorsWithBooks` — the read model from the [Arc tutoria
 
    ```tsx title="Authors.tsx"
    import { DataPage, MenuItem } from '@cratis/components/DataPage';
-   import { Column } from 'primereact/column';
+   import { Column } from '@cratis/components/DataPage';
    import { useDialog } from '@cratis/arc.react/dialogs';
    import { AllAuthorsWithBooks } from './Authors/AuthorWithBooks';   // generated proxy
    import { AddAuthor } from './AddAuthor';
diff --git a/Documentation/tutorial/list-it.mdx b/Documentation/tutorial/list-it.mdx
index a14daea..618de07 100644
--- a/Documentation/tutorial/list-it.mdx
+++ b/Documentation/tutorial/list-it.mdx
@@ -14,7 +14,7 @@ A library screen starts with a list. We have an `AllAuthors` query from the back
    ```tsx title="Authors.tsx"
    import { Page } from '@cratis/components/Common';
    import { DataTableForObservableQuery } from '@cratis/components/DataTables';
-   import { Column } from 'primereact/column';
+   import { Column } from '@cratis/components/DataTables';
    import { AllAuthors } from './Authors/Author';   // generated observable query proxy
 
    export const Authors = () => (
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index 8d43d14..aad7a86 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -5,41 +5,63 @@ import { addons } from 'storybook/preview-api';
 import React from 'react';
 import 'primeicons/primeicons.css';
 import './preview.css';
-import darkThemeUrl from 'primereact/resources/themes/lara-dark-blue/theme.css?url';
-import lightThemeUrl from 'primereact/resources/themes/lara-light-blue/theme.css?url';
+import '../theme.css';
+import Aura from '@primeuix/themes/aura';
 import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
 import { tailwindPtPreset } from './pt-preset';
 
+// PrimeReact 11 is unstyled-first and token-based: the styled look comes from a
+// @primeuix/themes preset applied through the provider's `theme` config (which
+// injects the `--p-*` design tokens), and dark mode is toggled with a class the
+// preset's `darkModeSelector` targets. There are no theme CSS files to <link>
+// anymore (the v10 `primereact/resources/themes/lara-*` files were removed).
+const DARK_SELECTOR = 'cratis-dark';
+
+const styledTheme = { preset: Aura, options: { darkModeSelector: `.${DARK_SELECTOR}` } };
+
+// PrimeReact 11's styled layer (@primeuix/themes) is license-gated: without a valid
+// PrimeUI license key the components fall back to unstyled and a nag banner appears.
+// Set STORYBOOK_PRIMEUI_LICENSE to preview the styled (Aura) modes with your own key;
+// the license-free default below is the unstyled + Tailwind `pt` path.
+const PRIMEUI_LICENSE = import.meta.env?.STORYBOOK_PRIMEUI_LICENSE;
+const withLicense = (value) => (PRIMEUI_LICENSE ? { ...value, license: PRIMEUI_LICENSE } : value);
+
 const STYLING_MODES = {
-    'lara-dark': {
-        title: 'Path A — Lara Dark Blue',
-        themeUrl: darkThemeUrl,
-        bodyClass: null,
-        providerValue: {},
-    },
-    'lara-light': {
-        title: 'Path A — Lara Light Blue',
-        themeUrl: lightThemeUrl,
-        bodyClass: null,
-        providerValue: {},
-    },
-    'cratis-themed': {
-        title: 'Path B — Themed with custom palette',
-        themeUrl: darkThemeUrl,
-        bodyClass: 'cratis-themed',
-        providerValue: {},
+    'unstyled-pt': {
+        title: 'Path C — Unstyled + Tailwind pt (default)',
+        dark: true,
+        bodyClass: 'cratis-unstyled-pt',
+        providerValue: { unstyled: true, pt: tailwindPtPreset },
     },
     'unstyled-bare': {
         title: 'Path C — Unstyled (bare structure)',
-        themeUrl: null,
+        dark: true,
         bodyClass: 'cratis-unstyled-bare',
         providerValue: { unstyled: true },
     },
-    'unstyled-pt': {
-        title: 'Path C — Unstyled + Tailwind pt',
-        themeUrl: null,
-        bodyClass: 'cratis-unstyled-pt',
-        providerValue: { unstyled: true, pt: tailwindPtPreset },
+    'styled-dark': {
+        title: 'Path A — Styled (Aura Dark) — needs PrimeUI license',
+        dark: true,
+        bodyClass: null,
+        providerValue: withLicense({ ripple: true, theme: styledTheme }),
+    },
+    'styled-light': {
+        title: 'Path A — Styled (Aura Light) — needs PrimeUI license',
+        dark: false,
+        bodyClass: null,
+        providerValue: withLicense({ ripple: true, theme: styledTheme }),
+    },
+    'cratis-theme': {
+        title: 'Path B — Cratis baseline theme, dark (no license)',
+        dark: true,
+        bodyClass: 'cratis-theme',
+        providerValue: { unstyled: true },
+    },
+    'cratis-theme-light': {
+        title: 'Path B — Cratis baseline theme, light (no license)',
+        dark: false,
+        bodyClass: 'cratis-theme',
+        providerValue: { unstyled: true },
     },
 };
 
@@ -52,10 +74,10 @@ const ALL_BODY_CLASSES = Object.values(STYLING_MODES)
 let _docsSiteTheme = null;
 
 addons.getChannel().on('STORYBOOK_THEME_CHANGE', ({ theme }) => {
-    _docsSiteTheme = theme === 'light' ? 'lara-light' : 'lara-dark';
+    _docsSiteTheme = theme === 'light' ? 'styled-light' : 'styled-dark';
     const mode = STYLING_MODES[_docsSiteTheme];
     if (mode) {
-        applyThemeLink(mode.themeUrl);
+        applyDarkMode(mode.dark);
         applyBodyClass(mode.bodyClass);
     }
 });
@@ -64,7 +86,7 @@ export const globalTypes = {
     theme: {
         name: 'Styling',
         description: 'Which README styling path to render the story under',
-        defaultValue: 'lara-dark',
+        defaultValue: 'unstyled-pt',
         toolbar: {
             icon: 'paintbrush',
             items: Object.entries(STYLING_MODES).map(([value, mode]) => ({
@@ -76,25 +98,8 @@ export const globalTypes = {
     },
 };
 
-function applyThemeLink(href) {
-    let link = document.getElementById('primereact-theme');
-    if (href === null) {
-        if (link) {
-            link.remove();
-        }
-        return;
-    }
-    if (!link) {
-        link = document.createElement('link');
-        link.id = 'primereact-theme';
-        link.rel = 'stylesheet';
-        document.head.appendChild(link);
-    }
-    // Changed: use getAttribute instead of .href property to avoid triggering HMR
-    const currentHref = link.getAttribute('href');
-    if (currentHref !== href) {
-        link.setAttribute('href', href);
-    }
+function applyDarkMode(isDark) {
+    document.documentElement.classList.toggle(DARK_SELECTOR, !!isDark);
 }
 
 function applyBodyClass(className) {
@@ -106,15 +111,18 @@ function applyBodyClass(className) {
 
 export const decorators = [
     (Story, context) => {
-        const themeKey = _docsSiteTheme ?? context.globals.theme ?? 'lara-dark';
-        const mode = STYLING_MODES[themeKey] ?? STYLING_MODES['lara-dark'];
+        const themeKey = _docsSiteTheme ?? context.globals.theme ?? 'unstyled-pt';
+        const mode = STYLING_MODES[themeKey] ?? STYLING_MODES['unstyled-pt'];
 
-        applyThemeLink(mode.themeUrl);
+        applyDarkMode(mode.dark);
         applyBodyClass(mode.bodyClass);
 
+        // Key the provider by the selected mode so switching styling paths fully
+        // remounts it — this re-initializes the injected `@primeuix/themes` stylesheet
+        // instead of leaving a stale preset behind when moving to/from unstyled modes.
         return React.createElement(
             CratisComponentsProvider,
-            { value: mode.providerValue },
+            { key: themeKey, value: mode.providerValue },
             React.createElement(Story)
         );
     },
@@ -133,5 +141,3 @@ export const parameters = {
         ],
     },
 };
-
-
diff --git a/Source/.storybook/pt-preset.ts b/Source/.storybook/pt-preset.ts
index 56ee1b5..451e2af 100644
--- a/Source/.storybook/pt-preset.ts
+++ b/Source/.storybook/pt-preset.ts
@@ -8,7 +8,11 @@
  * built entirely from Tailwind utility classes.
  *
  * This file is Storybook-only and not part of the published package. Treat it
- * as a starting point you can fork into your own app.
+ * as a PrimeReact 11 starting point you can fork into your own app — the
+ * per-component keys match PrimeReact 11 (`select`, `textarea`, …) and the
+ * leaf slots below cover the common structure; a component's deeper headless
+ * slots (e.g. the compositional Select/DataTable parts) can be extended as
+ * needed, and any slot a component doesn't expose is simply ignored.
  */
 
 const surface = 'bg-slate-900 text-slate-50';
@@ -21,8 +25,9 @@ export const tailwindPtPreset = {
             className: [
                 'inline-flex items-center justify-center gap-2',
                 'px-4 py-2 rounded-lg font-medium',
-                'bg-sky-500 text-white',
-                'hover:bg-sky-400 active:bg-sky-600',
+                // sky-700 (not sky-500) so white label text clears WCAG AA (~6:1).
+                'bg-sky-700 text-white',
+                'hover:bg-sky-600 active:bg-sky-800',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
                 'transition-colors',
                 focusRing,
@@ -44,7 +49,7 @@ export const tailwindPtPreset = {
         },
     },
 
-    inputtextarea: {
+    textarea: {
         root: {
             className: [
                 'w-full px-3 py-2 rounded-md',
@@ -70,7 +75,7 @@ export const tailwindPtPreset = {
         },
     },
 
-    dropdown: {
+    select: {
         root: {
             className: [
                 'w-full inline-flex items-center justify-between gap-2',
@@ -80,15 +85,15 @@ export const tailwindPtPreset = {
                 focusRing,
             ].join(' '),
         },
-        input: { className: 'flex-1 truncate text-left' },
-        trigger: { className: 'shrink-0 text-slate-400' },
-        panel: {
+        value: { className: 'flex-1 truncate text-left' },
+        dropdown: { className: 'shrink-0 text-slate-400' },
+        popup: {
             className: [
                 'mt-1 rounded-md shadow-xl overflow-hidden',
                 surface, border,
             ].join(' '),
         },
-        item: {
+        option: {
             className: 'px-3 py-2 cursor-pointer hover:bg-slate-800',
         },
     },
@@ -165,13 +170,6 @@ export const tailwindPtPreset = {
         },
     },
 
-    menubar: {
-        root: {
-            className: 'flex items-center gap-1 px-3 py-2 bg-slate-800 border-b border-slate-700',
-        },
-        menuitem: { className: 'rounded' },
-        action: {
-            className: 'inline-flex items-center gap-2 px-3 py-1.5 rounded hover:bg-slate-700 cursor-pointer',
-        },
-    },
+    // PrimeReact 11 removed Menubar; the Cratis action bar is a Button toolbar
+    // styled through the `button` slot above, so no menubar preset is needed.
 } as const;
diff --git a/Source/CommandDialog/CommandStepper.css b/Source/CommandDialog/CommandStepper.css
index b42506c..1176d56 100644
--- a/Source/CommandDialog/CommandStepper.css
+++ b/Source/CommandDialog/CommandStepper.css
@@ -1,10 +1,6 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.p-stepper [data-pc-section="header"][data-p-active="false"] {
-    opacity: 0.5;
-}
-
 /* Make stepper and its panels fill available width */
 .cratis-command-stepper {
     display: flex;
@@ -13,12 +9,57 @@
     width: 100%;
 }
 
-.cratis-command-stepper .p-stepper {
+/* PrimeReact 11 stepper parts carry data-scope/data-part attributes rather
+   than the v10 .p-stepper* class names, so key structural rules off those. */
+.cratis-command-stepper [data-scope="stepper"][data-part="root"] {
     width: 100%;
 }
 
-.cratis-command-stepper .p-stepperpanel-content {
+.cratis-command-stepper [data-scope="stepper"][data-part="panel"] {
     width: 100%;
     box-sizing: border-box;
 }
 
+/* Dim the header of steps that are not currently active */
+.cratis-command-stepper [data-scope="stepper"][data-part="step"]:not([data-active]) [data-part="header"] {
+    opacity: 0.5;
+}
+
+/* Horizontal (default): the step list flows left-to-right. */
+.cratis-command-stepper--horizontal [data-scope="stepper"][data-part="list"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/* Vertical: the step list is a stacked column beside the panels. */
+.cratis-command-stepper--vertical [data-scope="stepper"][data-part="root"] {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1.5rem;
+}
+
+.cratis-command-stepper--vertical [data-scope="stepper"][data-part="list"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+
+.cratis-command-stepper--vertical [data-scope="stepper"][data-part="step"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.cratis-command-stepper--vertical [data-scope="stepper"][data-part="separator"] {
+    width: 2px;
+    min-height: 1.25rem;
+    margin-left: 0.9rem;
+}
+
+.cratis-command-stepper--vertical [data-scope="stepper"][data-part="panels"] {
+    flex: 1;
+    min-width: 0;
+}
diff --git a/Source/CommandDialog/CommandStepper.stories.tsx b/Source/CommandDialog/CommandStepper.stories.tsx
index f42729b..a7d66af 100644
--- a/Source/CommandDialog/CommandStepper.stories.tsx
+++ b/Source/CommandDialog/CommandStepper.stories.tsx
@@ -3,7 +3,7 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from './StepperPanel';
 import { CommandStepper } from './CommandStepper';
 import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';
@@ -244,6 +244,58 @@ export const InDialogFrameWithCenteredHeader: Story = {
     },
 };
 
+export const Vertical: Story = {
+    render: () => {
+        const [result, setResult] = useState('');
+
+        return (
+            <div style={{ width: '700px', padding: '1.5rem' }}>
+                <CommandStepper<CreateProjectCommand>
+                    command={CreateProjectCommand}
+                    autoServerValidate={false}
+                    validateOn="change"
+                    orientation="vertical"
+                    start={<h3 style={{ margin: '0 0 1rem' }}>Create Project</h3>}
+                    onSuccess={async () => setResult('Command submitted successfully')}
+                >
+                    <StepperPanel header="Basic Info">
+                        <InputTextField<CreateProjectCommand>
+                            value={c => c.name}
+                            title="Project Name"
+                            placeholder="Enter project name (min 2 chars)"
+                        />
+                        <InputTextField<CreateProjectCommand>
+                            value={c => c.email}
+                            title="Contact Email"
+                            placeholder="Enter contact email"
+                            type="email"
+                        />
+                    </StepperPanel>
+                    <StepperPanel header="Details">
+                        <TextAreaField<CreateProjectCommand>
+                            value={c => c.description}
+                            title="Description"
+                            placeholder="Describe the project (min 10 chars)"
+                            rows={4}
+                        />
+                        <NumberField<CreateProjectCommand>
+                            value={c => c.budget}
+                            title="Budget"
+                            placeholder="Enter budget (must be > 0)"
+                        />
+                    </StepperPanel>
+                </CommandStepper>
+
+                {result && (
+                    <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                        {result}
+                    </div>
+                )}
+            </div>
+        );
+    },
+};
+
 export const WithValidationIndicators: Story = {
     render: () => {
         const [result, setResult] = useState('');
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index 92d19b0..5cb880f 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -1,8 +1,9 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { Stepper as PrimeStepper, type StepperProps } from 'primereact/stepper';
+import React, { useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { Stepper } from 'primereact/stepper';
+import type { StepperRootProps } from '@primereact/types/primitive/stepper';
 import { Button } from 'primereact/button';
 import { ICommandResult } from '@cratis/arc/commands';
 import {
@@ -13,15 +14,67 @@ import {
     type CommandFormProps
 } from '@cratis/arc.react/commands';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
+import type { StepperPanelProps } from './StepperPanel';
 import './CommandStepper.css';
 
+// PrimeReact 11's Stepper annotates each step header as role="tab" and each panel
+// as role="tabpanel", with `aria-controls` pointing at element ids it never
+// renders — a dangling-reference + orphaned-tab pattern (the list is not a
+// role="tablist") that axe flags as critical. The headless stepper implements no
+// keyboard navigation bound to these roles (steps navigate by click on the native
+// <button>), so stripping the broken tab semantics is safe: it leaves natively
+// keyboard-accessible buttons and a plain content region. `undefined` in `pt`
+// removes the attribute the primitive would otherwise set.
+const stripBrokenTabRole = { root: { role: undefined, 'aria-controls': undefined } };
+
+/**
+ * Event passed to {@link StepperCustomizationProps.onChangeStep} when the user
+ * navigates to a different step.
+ */
+export interface StepperChangeEvent {
+    /** Zero-based index of the step being navigated to. */
+    index: number;
+}
+
+/** Orientation of a {@link CommandStepper} / {@link StepperCommandDialog}. */
+export type StepperOrientation = 'horizontal' | 'vertical';
+
+/** Where the step headers sit relative to the panels. */
+export type StepperHeaderPosition = 'top' | 'bottom';
+
 /**
- * Stepper-specific customization props forwarded directly to PrimeReact Stepper.
- * `activeStep` and `children` are managed by the component.
+ * Stepper-specific customization surface exposed by {@link CommandStepper} and
+ * {@link StepperCommandDialog}. This is a Cratis-owned type — it no longer
+ * leaks PrimeReact's `StepperProps` — so PrimeReact 11's compositional Stepper
+ * can be rebuilt underneath without changing the public API. PrimeReact 11's
+ * Stepper has no built-in `orientation` / `start` / `end` / `headerPosition`,
+ * so the wrapper re-implements them over the compositional parts.
  */
-export type StepperCustomizationProps = Pick<StepperProps,
-    'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'
->;
+export interface StepperCustomizationProps {
+    /**
+     * Whether the wizard is linear. In linear mode the step headers are not
+     * directly clickable — the user advances through the Previous / Next
+     * buttons. Set to `false` to let the user jump between steps by clicking
+     * their headers. Defaults to `true`.
+     */
+    linear?: boolean;
+    /** Lays the steps out horizontally (default) or stacked vertically. */
+    orientation?: StepperOrientation;
+    /** Places the step-header row above (default) or below the panels. */
+    headerPosition?: StepperHeaderPosition;
+    /** Content rendered before the stepper (e.g. a logo or title). */
+    start?: React.ReactNode;
+    /** Content rendered after the stepper. */
+    end?: React.ReactNode;
+    /** Invoked when the active step changes (via navigation or a header click). */
+    onChangeStep?: (event: StepperChangeEvent) => void;
+    /** PrimeReact pass-through configuration for the underlying Stepper parts. */
+    pt?: StepperRootProps['pt'];
+    /** PrimeReact pass-through options controlling merge vs. replace for {@link pt}. */
+    ptOptions?: StepperRootProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the Stepper. */
+    unstyled?: boolean;
+}
 
 export interface CommandStepperContentProps extends StepperCustomizationProps {
     /** The active step index. */
@@ -127,6 +180,9 @@ const processChildren = (nodes: React.ReactNode): React.ReactNode => {
     });
 };
 
+/** The value used to identify a step in PrimeReact 11's Stepper — its index as a string. */
+const stepValue = (index: number): string => String(index);
+
 export const CommandStepperContent = ({
     activeStep,
     visitedSteps,
@@ -144,27 +200,27 @@ export const CommandStepperContent = ({
     isSubmitting = false,
     isSubmitDisabled = false,
     onSubmit,
-    orientation = 'horizontal',
-    headerPosition,
     linear = true,
-    onChangeStep,
+    orientation = 'horizontal',
+    headerPosition = 'top',
     start,
     end,
+    onChangeStep,
     pt,
     ptOptions,
     unstyled,
 }: CommandStepperContentProps) => {
-    const stepCount = React.Children.count(children);
+    const panels = useMemo(
+        () => React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement<StepperPanelProps>[],
+        [children]
+    );
+    const stepCount = panels.length;
     const isLastStep = activeStep >= stepCount - 1;
     const isFirstStep = activeStep <= 0;
 
     const stepFieldNames = useMemo(
-        () => React.Children.toArray(children).map((step) => {
-            if (!React.isValidElement(step)) return [] as string[];
-            const stepProps = step.props as Record<string, unknown>;
-            return extractFieldNamesFromNode(stepProps.children as React.ReactNode);
-        }),
-        [children]
+        () => panels.map((panel) => extractFieldNamesFromNode(panel.props.children)),
+        [panels]
     );
 
     const stepErrors = useMemo(
@@ -179,59 +235,34 @@ export const CommandStepperContent = ({
     const isCurrentStepInvalid = stepErrors[activeStep] ?? false;
     const hasAnyStepErrors = stepErrors.some(hasError => hasError);
 
-    const stepperPt = useMemo(() => {
-        type StepContext = { context: { index: number } };
-        type NumberPtFn = (opts: StepContext) => Record<string, unknown>;
-
-        const userPt = pt as Record<string, unknown> | undefined;
-        const userStepperPanelPt = userPt?.stepperpanel as Record<string, unknown> | undefined;
-        const userNumberPt = userStepperPanelPt?.number;
-
-        return {
-            ...userPt,
-            stepperpanel: {
-                ...userStepperPanelPt,
-                number: (opts: StepContext) => {
-                    const existing: Record<string, unknown> =
-                        typeof userNumberPt === 'function'
-                            ? (userNumberPt as NumberPtFn)(opts)
-                            : (userNumberPt as Record<string, unknown> | undefined) ?? {};
-                    const idx = opts.context.index;
-                    const hasError = stepErrors[idx] ?? false;
-                    const isVisited = visitedSteps.has(idx);
-
-                    // Use straightforward color names here so unit tests that
-                    // inspect the computed `backgroundColor` can assert reliably.
-                    const bgColor = hasError
-                        ? 'red'
-                        : isVisited
-                            ? 'green'
-                            : null;
-
-                    if (!bgColor) return existing;
-                    const existingStyle = existing.style as Record<string, unknown> | undefined;
-                    return {
-                        ...existing,
-                        style: { ...existingStyle, backgroundColor: bgColor, color: 'var(--cratis-primary-color-text)' }
-                    };
-                }
-            }
-        };
-    }, [pt, stepErrors, visitedSteps]);
-
-    const handleChangeStep: StepperProps['onChangeStep'] = event => {
-        onChangeStep?.(event);
-        const index = (event as { index?: number }).index;
-        if (typeof index === 'number') {
-            if (index > activeStep && isCurrentStepInvalid) {
-                return;
-            }
+    // The per-step number indicator paints red when a visited step still has a
+    // field error and green once a step has been visited without errors — a
+    // traffic-light status marker that is intentionally theme-independent, so
+    // the literal color names are appropriate here (and let specs assert on the
+    // computed background reliably).
+    const numberStyle = (index: number): CSSProperties | undefined => {
+        const hasError = stepErrors[index] ?? false;
+        const isVisited = visitedSteps.has(index);
+        const backgroundColor = hasError ? 'red' : isVisited ? 'green' : undefined;
+        if (!backgroundColor) return undefined;
+        return { backgroundColor, color: 'var(--cratis-primary-color-text)' };
+    };
 
-            if (index > activeStep) {
-                onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
-            }
-            onActiveStepChange?.(index);
+    const handleValueChange: StepperRootProps['onValueChange'] = event => {
+        const raw = event.value;
+        const index = typeof raw === 'number' ? raw : parseInt(String(raw ?? ''), 10);
+        if (Number.isNaN(index)) return;
+
+        onChangeStep?.({ index });
+
+        if (index > activeStep && isCurrentStepInvalid) {
+            return;
+        }
+
+        if (index > activeStep) {
+            onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
         }
+        onActiveStepChange?.(index);
     };
 
     const handlePrevious = () => {
@@ -247,56 +278,78 @@ export const CommandStepperContent = ({
         onActiveStepChange?.(Math.min(stepCount - 1, activeStep + 1));
     };
 
+    const stepperList = (
+        <Stepper.List>
+            {panels.map((panel, index) => (
+                <Stepper.Step key={index} value={stepValue(index)}>
+                    <Stepper.Header pt={stripBrokenTabRole}>
+                        <Stepper.Number style={numberStyle(index)}>{index + 1}</Stepper.Number>
+                        <Stepper.Title>{panel.props.header}</Stepper.Title>
+                    </Stepper.Header>
+                    {index < stepCount - 1 && <Stepper.Separator />}
+                </Stepper.Step>
+            ))}
+        </Stepper.List>
+    );
+
+    const stepperPanels = (
+        <Stepper.Panels>
+            {panels.map((panel, index) => (
+                <Stepper.Panel key={index} value={stepValue(index)} pt={stripBrokenTabRole}>
+                    {processChildren(panel.props.children)}
+                </Stepper.Panel>
+            ))}
+        </Stepper.Panels>
+    );
+
     return (
-        <div className="cratis-command-stepper">
-            <PrimeStepper
-                activeStep={activeStep}
+        <div className={`cratis-command-stepper cratis-command-stepper--${orientation}`} data-orientation={orientation}>
+            {start}
+            <Stepper.Root
+                value={stepValue(activeStep)}
                 linear={linear}
-                orientation={orientation}
-                headerPosition={headerPosition}
-                onChangeStep={handleChangeStep}
-                start={start}
-                end={end}
-                pt={stepperPt as StepperProps['pt']}
+                onValueChange={handleValueChange}
+                data-orientation={orientation}
+                pt={pt}
                 ptOptions={ptOptions}
-                unstyled={unstyled}
-            >
-                {processChildren(children)}
-            </PrimeStepper>
+                unstyled={unstyled}>
+                {headerPosition === 'bottom'
+                    ? (<>{stepperPanels}{stepperList}</>)
+                    : (<>{stepperList}{stepperPanels}</>)}
+            </Stepper.Root>
+            {end}
 
             {showNavigation && (
                 <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }}>
                     {!isFirstStep && (
                         <Button
-                            label={previousLabel}
-                            icon="pi pi-arrow-left"
+                            variant="outlined"
                             onClick={handlePrevious}
                             disabled={isBusy}
-                            outlined
-                            style={{ width: 'auto' }}
-                        />
+                            style={{ width: 'auto' }}>
+                            <i className="pi pi-arrow-left" />
+                            <span>{previousLabel}</span>
+                        </Button>
                     )}
                     <div style={{ flex: 1 }} />
                     {!isLastStep && (
                         <Button
-                            label={nextLabel}
-                            icon="pi pi-arrow-right"
-                            iconPos="right"
                             onClick={handleNext}
                             disabled={isBusy || isSubmitting || isCurrentStepInvalid}
-                            style={{ width: 'auto' }}
-                        />
+                            style={{ width: 'auto' }}>
+                            <span>{nextLabel}</span>
+                            <i className="pi pi-arrow-right" />
+                        </Button>
                     )}
                     {isLastStep && showSubmit && (
                         <Button
-                            label={okLabel}
-                            icon="pi pi-check"
                             onClick={() => void onSubmit?.()}
-                            loading={isSubmitting}
                             disabled={isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors}
                             autoFocus
-                            style={{ width: 'auto' }}
-                        />
+                            style={{ width: 'auto' }}>
+                            <i className={isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-check'} />
+                            <span>{okLabel}</span>
+                        </Button>
                     )}
                 </div>
             )}
@@ -325,12 +378,12 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
     previousLabel,
     okLabel,
     isBusy,
+    linear,
     orientation,
     headerPosition,
-    linear,
-    onChangeStep,
     start,
     end,
+    onChangeStep,
     pt,
     ptOptions,
     unstyled,
@@ -390,12 +443,12 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
             isSubmitting={isSubmitting}
             isSubmitDisabled={!isCommandFormValid}
             onSubmit={handleSubmit}
+            linear={linear}
             orientation={orientation}
             headerPosition={headerPosition}
-            linear={linear}
-            onChangeStep={onChangeStep}
             start={start}
             end={end}
+            onChangeStep={onChangeStep}
             pt={pt}
             ptOptions={ptOptions}
             unstyled={unstyled}
@@ -444,8 +497,7 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
  * Stepper directly.
  *
  * ```tsx
- * import { CommandStepper } from '@cratis/components/CommandStepper';
- * import { StepperPanel } from 'primereact/stepperpanel';
+ * import { CommandStepper, StepperPanel } from '@cratis/components/CommandDialog';
  * import { RegisterAuthor } from './RegisterAuthor';   // proxy from C#
  *
  * export const RegisterAuthorPage = () => (
@@ -477,12 +529,12 @@ export const CommandStepper = <TCommand extends object = object, TResponse = obj
         previousLabel,
         okLabel,
         isBusy,
+        linear,
         orientation,
         headerPosition,
-        linear,
-        onChangeStep,
         start,
         end,
+        onChangeStep,
         pt,
         ptOptions,
         unstyled,
@@ -500,12 +552,12 @@ export const CommandStepper = <TCommand extends object = object, TResponse = obj
                 previousLabel={previousLabel}
                 okLabel={okLabel}
                 isBusy={isBusy}
+                linear={linear}
                 orientation={orientation}
                 headerPosition={headerPosition}
-                linear={linear}
-                onChangeStep={onChangeStep}
                 start={start}
                 end={end}
+                onChangeStep={onChangeStep}
                 pt={pt}
                 ptOptions={ptOptions}
                 unstyled={unstyled}
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index 84b28d9..3546a31 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -8,7 +8,7 @@ import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';
 import { InputTextField, NumberField, TextAreaField } from '../CommandForm/fields';
 import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from './StepperPanel';
 import '@cratis/arc/validation';
 
 const meta: Meta<typeof StepperCommandDialog> = {
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 3ac532e..ffa407a 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -1,25 +1,24 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import React, { useState, type CSSProperties } from 'react';
 import { ICommandResult } from '@cratis/arc/commands';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Dialog as PrimeDialog, type DialogProps as PrimeDialogProps } from 'primereact/dialog';
 import { Button } from 'primereact/button';
-import React, { useState } from 'react';
 import {
     CommandForm,
     useCommandFormContext,
     useCommandInstance,
     type CommandFormProps
 } from '@cratis/arc.react/commands';
-import type { CloseDialog, ConfirmCallback, CancelCallback } from '../Dialogs/Dialog';
+import { Dialog, type DialogProps, type CloseDialog, type ConfirmCallback, type CancelCallback } from '../Dialogs/Dialog';
 import { CommandStepperContent, type StepperCustomizationProps } from './CommandStepper';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
 
 /**
  * Props for {@link StepperCommandDialog}. Combines the command-form props,
- * the stepper customization props (`orientation`, `headerPosition`, `linear`,
- * `pt`, …), and dialog-specific props for the outer modal.
+ * the stepper customization props (`linear`, `pt`, …), and dialog-specific
+ * props for the outer modal.
  *
  * The Stepper customization props (`pt`/`ptOptions`/`unstyled`) target the
  * inner Stepper. To customize the outer Dialog use `dialogPt`, `dialogPtOptions`,
@@ -51,9 +50,9 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
     /** Dialog width. */
     width?: string;
     /** Custom CSS styles applied to the dialog. */
-    style?: PrimeDialogProps['style'];
+    style?: CSSProperties;
     /** Custom CSS styles applied to the dialog content area. */
-    contentStyle?: PrimeDialogProps['contentStyle'];
+    contentStyle?: CSSProperties;
     /** Whether the dialog can be resized. Defaults to `false`. */
     resizable?: boolean;
     /** Additional validity gate combined with command form validity. */
@@ -62,7 +61,7 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
     onClose?: CloseDialog;
     /** Confirm callback — called only after successful command execution. */
     onConfirm?: ConfirmCallback;
-    /** Cancel callback — invoked when the dialog X button is clicked. */
+    /** Cancel callback — invoked when the dialog is dismissed. */
     onCancel?: CancelCallback;
     /** Label for the submit button shown on the last step when valid. Defaults to `'Submit'`. */
     okLabel?: string;
@@ -71,20 +70,45 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
     /** Label for the previous step button. Defaults to `'Previous'`. */
     previousLabel?: string;
     /**
-     * Extra CSS class name forwarded to the underlying PrimeReact Dialog root.
+     * Extra CSS class name forwarded to the underlying Cratis Dialog root.
      * Use the inherited `pt`/`ptOptions`/`unstyled` props to customize the Stepper.
      */
     dialogClassName?: string;
     /** PrimeReact pass-through configuration applied to the outer Dialog. */
-    dialogPt?: PrimeDialogProps['pt'];
+    dialogPt?: DialogProps['pt'];
     /** PrimeReact pass-through options applied to the outer Dialog. */
-    dialogPtOptions?: PrimeDialogProps['ptOptions'];
+    dialogPtOptions?: DialogProps['ptOptions'];
     /** When true, disables every base PrimeReact style on the outer Dialog. */
     dialogUnstyled?: boolean;
     /** StepperPanel children defining each wizard step. */
     children?: React.ReactNode;
 }
 
+type StepperCommandDialogWrapperProps<TCommand extends object, TResponse = object> = {
+    title: string;
+    visible?: boolean;
+    width?: string;
+    style?: CSSProperties;
+    contentStyle?: CSSProperties;
+    resizable?: boolean;
+    isValid?: boolean;
+    onClose?: CloseDialog;
+    onConfirm?: ConfirmCallback;
+    onCancel?: CancelCallback;
+    onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
+    onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
+    onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    okLabel?: string;
+    nextLabel?: string;
+    previousLabel?: string;
+    dialogClassName?: string;
+    dialogPt?: DialogProps['pt'];
+    dialogPtOptions?: DialogProps['ptOptions'];
+    dialogUnstyled?: boolean;
+    children?: React.ReactNode;
+} & StepperCustomizationProps;
+
 const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object>({
     title,
     visible = true,
@@ -103,12 +127,12 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     okLabel = 'Submit',
     nextLabel = 'Next',
     previousLabel = 'Previous',
-    orientation = 'horizontal',
-    headerPosition,
     linear = true,
-    onChangeStep,
+    orientation,
+    headerPosition,
     start,
     end,
+    onChangeStep,
     pt,
     ptOptions,
     unstyled,
@@ -117,30 +141,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     dialogPtOptions,
     dialogUnstyled,
     children
-}: {
-    title: string;
-    visible?: boolean;
-    width?: string;
-    style?: PrimeDialogProps['style'];
-    contentStyle?: PrimeDialogProps['contentStyle'];
-    resizable?: boolean;
-    isValid?: boolean;
-    onClose?: CloseDialog;
-    onConfirm?: ConfirmCallback;
-    onCancel?: CancelCallback;
-    onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
-    onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
-    onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
-    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
-    okLabel?: string;
-    nextLabel?: string;
-    previousLabel?: string;
-    dialogClassName?: string;
-    dialogPt?: PrimeDialogProps['pt'];
-    dialogPtOptions?: PrimeDialogProps['ptOptions'];
-    dialogUnstyled?: boolean;
-    children?: React.ReactNode;
-} & StepperCustomizationProps) => {
+}: StepperCommandDialogWrapperProps<TCommand, TResponse>) => {
     const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext<TCommand>();
     const commandInstance = useCommandInstance<TCommand>();
     const [isBusy, setIsBusy] = useState(false);
@@ -159,35 +160,29 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
         contextCloseDialog = undefined;
     }
 
-    const stepCount = React.Children.count(children);
+    const stepCount = React.Children.toArray(children).filter(React.isValidElement).length;
     const isLastStep = activeStep === stepCount - 1;
     const isFirstStep = activeStep === 0;
     const isDialogValid = isValid !== false && isCommandFormValid;
     const isCurrentStepInvalid = stepErrors[activeStep] ?? false;
 
-    const handleClose = async (result: DialogResult) => {
-        let shouldCloseThroughContext = true;
-
-        if (result === DialogResult.Ok || result === DialogResult.Yes) {
-            if (onConfirm) {
-                const closeResult = await onConfirm();
-                shouldCloseThroughContext = closeResult === true;
-            } else if (onClose) {
-                const closeResult = await onClose(result);
-                shouldCloseThroughContext = closeResult !== false;
-            }
-        } else {
-            if (onCancel) {
-                const closeResult = await onCancel();
-                shouldCloseThroughContext = closeResult === true;
-            } else if (onClose) {
-                const closeResult = await onClose(result);
-                shouldCloseThroughContext = closeResult !== false;
-            }
+    // Cancel/dismiss closing is owned by the outer Cratis Dialog (it runs the
+    // user's onCancel/onClose and closes through the dialog host). This wrapper
+    // only owns the success-close path — the custom Submit button cannot go
+    // through the Dialog's own confirm button, so it closes through the context
+    // itself after running the confirm gate.
+    const closeAfterSuccess = async () => {
+        let shouldClose = true;
+        if (onConfirm) {
+            const closeResult = await onConfirm();
+            shouldClose = closeResult === true;
+        } else if (onClose) {
+            const closeResult = await onClose(DialogResult.Ok);
+            shouldClose = closeResult !== false;
         }
 
-        if (shouldCloseThroughContext) {
-            contextCloseDialog?.(result);
+        if (shouldClose) {
+            contextCloseDialog?.(DialogResult.Ok);
         }
     };
 
@@ -217,64 +212,59 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
         }
 
         await onSuccess?.(result.response as TResponse);
-
-        await handleClose(DialogResult.Ok);
+        await closeAfterSuccess();
     };
 
-    const headerElement = (
-        <div className="inline-flex items-center justify-center gap-2">
-            <span className="font-bold whitespace-nowrap">{title}</span>
-        </div>
-    );
-
     const footer = (
-        <div className="flex items-center w-full gap-3">
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }}>
             {!isFirstStep && (
                 <Button
-                    label={previousLabel}
-                    icon="pi pi-arrow-left"
-                    onClick={() => setActiveStep(s => s - 1)}
+                    variant="outlined"
+                    onClick={() => setActiveStep(step => step - 1)}
                     disabled={isBusy}
-                    outlined
-                />
+                    style={{ width: 'auto' }}>
+                    <i className="pi pi-arrow-left" />
+                    <span>{previousLabel}</span>
+                </Button>
             )}
-            <div className="flex-1" />
+            <div style={{ flex: 1 }} />
             {!isLastStep && (
                 <Button
-                    label={nextLabel}
-                    icon="pi pi-arrow-right"
-                    iconPos="right"
                     onClick={() => {
-                        setVisitedSteps(prev => new Set(prev).add(activeStep));
-                        setActiveStep(s => s + 1);
+                        setVisitedSteps(previous => new Set(previous).add(activeStep));
+                        setActiveStep(step => step + 1);
                     }}
                     disabled={isBusy || isCurrentStepInvalid}
-                />
+                    style={{ width: 'auto' }}>
+                    <span>{nextLabel}</span>
+                    <i className="pi pi-arrow-right" />
+                </Button>
             )}
             {isLastStep && isDialogValid && (
                 <Button
-                    label={okLabel}
-                    icon="pi pi-check"
                     onClick={handleSubmit}
-                    loading={isBusy}
                     disabled={isBusy}
                     autoFocus
-                />
+                    style={{ width: 'auto' }}>
+                    <i className={isBusy ? 'pi pi-spin pi-spinner' : 'pi pi-check'} />
+                    <span>{okLabel}</span>
+                </Button>
             )}
         </div>
     );
 
     return (
-        <PrimeDialog
-            header={headerElement}
-            modal
-            footer={footer}
-            onHide={() => handleClose(DialogResult.Cancelled)}
+        <Dialog
+            title={title}
             visible={visible}
-            style={{ width, ...style }}
+            width={width}
+            style={style}
             contentStyle={contentStyle}
             resizable={resizable}
-            closable
+            dismissable
+            buttons={footer}
+            onCancel={onCancel}
+            onClose={onClose}
             className={dialogClassName}
             pt={dialogPt}
             ptOptions={dialogPtOptions}
@@ -292,16 +282,16 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                 linear={linear}
                 orientation={orientation}
                 headerPosition={headerPosition}
-                onChangeStep={onChangeStep}
                 start={start}
                 end={end}
+                onChangeStep={onChangeStep}
                 pt={pt}
                 ptOptions={ptOptions}
                 unstyled={unstyled}
             >
                 {children}
             </CommandStepperContent>
-        </PrimeDialog>
+        </Dialog>
     );
 };
 
@@ -351,8 +341,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
  *
  * ```tsx
  * import { useDialog, DialogResult } from '@cratis/arc.react/dialogs';
- * import { StepperCommandDialog } from '@cratis/components/CommandDialog';
- * import { StepperPanel } from 'primereact/stepperpanel';
+ * import { StepperCommandDialog, StepperPanel } from '@cratis/components/CommandDialog';
  * import { RegisterOrder } from './RegisterOrder';   // proxy from C#
  *
  * const RegisterOrderDialog = () => {
@@ -409,12 +398,12 @@ const StepperCommandDialogComponent = <TCommand extends object = object, TRespon
         okLabel,
         nextLabel,
         previousLabel,
+        linear,
         orientation,
         headerPosition,
-        linear,
-        onChangeStep,
         start,
         end,
+        onChangeStep,
         pt,
         ptOptions,
         unstyled,
@@ -446,12 +435,12 @@ const StepperCommandDialogComponent = <TCommand extends object = object, TRespon
                 okLabel={okLabel}
                 nextLabel={nextLabel}
                 previousLabel={previousLabel}
+                linear={linear}
                 orientation={orientation}
                 headerPosition={headerPosition}
-                linear={linear}
-                onChangeStep={onChangeStep}
                 start={start}
                 end={end}
+                onChangeStep={onChangeStep}
                 pt={pt}
                 ptOptions={ptOptions}
                 unstyled={unstyled}
diff --git a/Source/CommandDialog/StepperPanel.tsx b/Source/CommandDialog/StepperPanel.tsx
new file mode 100644
index 0000000..a2c18b8
--- /dev/null
+++ b/Source/CommandDialog/StepperPanel.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+
+/**
+ * Props for {@link StepperPanel}.
+ */
+export interface StepperPanelProps {
+    /**
+     * Content shown in the step's header (the label next to the step number).
+     * Accepts a string or any node, so a custom/template header works as it did
+     * with PrimeReact 10's `StepperPanel`.
+     */
+    header?: React.ReactNode;
+    /** The command form fields that make up this step. */
+    children?: React.ReactNode;
+}
+
+/**
+ * Declares a single step of a {@link CommandStepper} / {@link StepperCommandDialog}
+ * wizard. Group the command form fields that belong to a step inside a
+ * `<StepperPanel header="…">`; the enclosing stepper reads each panel's
+ * `header` and `children` to build the underlying PrimeReact 11 Stepper
+ * structure (a `Stepper.Step` in the header list plus a matching
+ * `Stepper.Panel` in the content area).
+ *
+ * This is the Cratis-owned replacement for PrimeReact 10's
+ * `primereact/stepperpanel`, which no longer exists in PrimeReact 11. It is a
+ * pure marker: it is never rendered on its own — the parent stepper consumes
+ * its props — so it renders nothing when mounted directly.
+ *
+ * ```tsx
+ * import { StepperPanel } from '@cratis/components/CommandDialog';
+ *
+ * <StepperPanel header="Basics">
+ *     <InputTextField value={c => c.name} title="Name" />
+ * </StepperPanel>
+ * ```
+ *
+ * @param props - {@link StepperPanelProps}.
+ */
+export const StepperPanel = (_props: StepperPanelProps): React.ReactElement | null => null;
+StepperPanel.displayName = 'StepperPanel';
diff --git a/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
index 0abfe71..43229a0 100644
--- a/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
@@ -16,17 +16,26 @@ const { closeDialog, commandResult } = vi.hoisted(() => ({
     },
 }));
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean }) => {
-        if (props.icon === 'pi pi-check' && props.onClick) {
-            props.onClick();
+    // PrimeReact 11 Button renders children (the v10 label/icon props are gone); the
+    // confirm button carries autoFocus, which stands in for the click in this SSR render.
+    Button: (props: { autoFocus?: boolean; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
+        if (props.autoFocus && props.onClick) {
+            void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled }, props.label);
+        return React.createElement('button', { disabled: props.disabled }, props.children);
     },
 }));
 
diff --git a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
index a33da44..59b894f 100644
--- a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
@@ -6,14 +6,22 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children)
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { label?: string; disabled?: boolean }) =>
-        React.createElement('button', { disabled: props.disabled }, props.label)
+    // PrimeReact 11 Button renders children (the v10 label/icon props are gone).
+    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
+        React.createElement('button', { disabled: props.disabled }, props.children)
 }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
diff --git a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
index 1a4d349..3850022 100644
--- a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
@@ -6,14 +6,23 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { label?: string; disabled?: boolean; loading?: boolean }) =>
-        React.createElement('button', { disabled: props.disabled, 'data-loading': props.loading }, props.label),
+    // PrimeReact 11 Button renders children (the v10 label/icon/loading props are gone).
+    // A busy dialog now disables its confirm button rather than setting a loading flag.
+    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
+        React.createElement('button', { disabled: props.disabled }, props.children),
 }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
@@ -52,6 +61,7 @@ describe('when CommandDialog is in its initial state', () => {
     });
 
     it('should_not_have_buttons_disabled_due_to_busy', () => {
-        html.should.not.include('data-loading="true"');
+        // A busy dialog swaps the confirm icon for a spinner; a non-busy dialog shows none.
+        html.should.not.include('pi-spinner');
     });
 });
diff --git a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
index 62e44a1..39079c4 100644
--- a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
@@ -11,17 +11,26 @@ const { commandFormValidity, executeCommand, setCommandValues } = vi.hoisted(()
     setCommandValues: vi.fn()
 }));
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean }) => {
-        if (props.icon === 'pi pi-check' && props.onClick && props.disabled !== true) {
+    // PrimeReact 11 Button renders children (the v10 label/icon props are gone); the
+    // confirm button carries autoFocus, which stands in for the click in this SSR render.
+    Button: (props: { autoFocus?: boolean; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
+        if (props.autoFocus && props.onClick && props.disabled !== true) {
             void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled }, props.label);
+        return React.createElement('button', { disabled: props.disabled }, props.children);
     },
 }));
 
@@ -72,7 +81,9 @@ describe('when CommandDialog validity is gated', () => {
         })
     );
 
-    const getOkButton = (html: string) => html.match(/<button[^>]*>Ok<\/button>/)?.[0] ?? '';
+    // The PrimeReact 11 Button renders its content as children, so the Ok button's
+    // markup is `<button ...><i .../><span>Ok</span></button>` — find it by its label span.
+    const getOkButton = (html: string) => (html.match(/<button[\s\S]*?<\/button>/g) ?? []).find(button => button.includes('>Ok<')) ?? '';
 
     afterEach(() => {
         commandFormValidity.isValid = true;
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
index c069738..3fca06e 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
@@ -10,44 +10,35 @@ const { commandFormValidity, executeCommand } = vi.hoisted(() => ({
     executeCommand: vi.fn(async () => ({ isSuccess: true, isValid: true, validationResults: [] }))
 }));
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
+vi.mock('../../Dialogs/Dialog', () => ({
+    Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', null, props.buttons, props.children),
 }));
 
-vi.mock('primereact/stepper', () => ({
-    Stepper: (props: { children?: React.ReactNode; pt?: Record<string, unknown>; activeStep?: number }) => {
-        type StepCtx = { context: { index: number } };
-        type NumberPtFn = (opts: StepCtx) => { style?: { backgroundColor?: string } };
-        const ptStepperpanel = (props.pt as Record<string, unknown> | undefined)?.stepperpanel as Record<string, unknown> | undefined;
-        const numberPtFn = ptStepperpanel?.number as NumberPtFn | undefined;
-        const children = React.Children.map(props.children, (child, index) => {
-            if (!React.isValidElement(child)) return child;
-            const result = typeof numberPtFn === 'function' ? numberPtFn({ context: { index } }) : {};
-            const bg = result?.style?.backgroundColor ?? '';
-            return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-number-bg': bg });
-        });
-        return React.createElement('div', { 'data-testid': 'stepper', 'data-active-step': props.activeStep }, children);
-    },
-}));
-
-vi.mock('primereact/stepperpanel', () => {
-    const MockStepperPanel = (props: { header?: string; children?: React.ReactNode; 'data-number-bg'?: string }) =>
-        React.createElement('div', {
-            'data-testid': 'stepper-panel',
-            'data-header': props.header,
-            'data-number-bg': props['data-number-bg'] ?? '',
-        }, props.children);
-    MockStepperPanel.displayName = 'StepperPanel';
-    return { StepperPanel: MockStepperPanel };
+vi.mock('primereact/stepper', () => {
+    const part = (name: string) => {
+        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
+            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        Component.displayName = name;
+        return Component;
+    };
+    return {
+        Stepper: {
+            Root: part('root'), List: part('list'), Step: part('step'),
+            Header: part('header'), Number: part('number'), Title: part('title'),
+            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+        },
+    };
 });
 
+// The submit button is the only one carrying autoFocus — auto-activate it (when
+// enabled) so the spec can assert whether the command executes.
 vi.mock('primereact/button', () => ({
-    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean; loading?: boolean }) => {
-        if (props.icon === 'pi pi-check' && props.onClick && props.disabled !== true) {
+    Button: (props: { children?: React.ReactNode; onClick?: () => Promise<void> | void; disabled?: boolean; autoFocus?: boolean }) => {
+        if (props.autoFocus && props.onClick && props.disabled !== true) {
             void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled, 'data-loading': props.loading }, props.label);
+        return React.createElement('button', { disabled: props.disabled }, props.children);
     },
 }));
 
@@ -77,13 +68,13 @@ class TestCommand {
 }
 
 let StepperCommandDialog: typeof import('../StepperCommandDialog').StepperCommandDialog;
-let StepperPanel: typeof import('primereact/stepperpanel').StepperPanel;
+let StepperPanel: typeof import('../StepperPanel').StepperPanel;
 
 beforeEach(async () => {
     executeCommand.mockClear();
     vi.resetModules();
     StepperCommandDialog = (await import('../StepperCommandDialog')).StepperCommandDialog;
-    StepperPanel = (await import('primereact/stepperpanel')).StepperPanel;
+    StepperPanel = (await import('../StepperPanel')).StepperPanel;
 });
 
 afterEach(() => {
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
index 09453e3..07d656c 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
@@ -5,26 +5,37 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { StepperCommandDialog } from '../StepperCommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '../StepperPanel';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'dialog' }, props.footer, props.children),
+// StepperCommandDialog now composes the Cratis Dialog wrapper (not primereact/dialog
+// directly) — render its custom footer (`buttons`) and body.
+vi.mock('../../Dialogs/Dialog', () => ({
+    Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-vi.mock('primereact/stepper', () => ({
-    Stepper: (props: { children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'stepper' }, props.children),
-}));
-
-vi.mock('primereact/stepperpanel', () => ({
-    StepperPanel: (props: { header?: string; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'stepper-panel', 'data-header': props.header }, props.children),
-}));
+// PrimeReact 11's Stepper is a set of compositional parts — each just renders its
+// children so the footer/navigation behavior can be asserted.
+vi.mock('primereact/stepper', () => {
+    const part = (name: string) => {
+        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
+            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        Component.displayName = name;
+        return Component;
+    };
+    return {
+        Stepper: {
+            Root: part('root'), List: part('list'), Step: part('step'),
+            Header: part('header'), Number: part('number'), Title: part('title'),
+            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+        },
+    };
+});
 
+// PrimeReact 11's Button renders its content as children (no label/loading props).
 vi.mock('primereact/button', () => ({
-    Button: (props: { label?: string; disabled?: boolean; loading?: boolean; icon?: string }) =>
-        React.createElement('button', { disabled: props.disabled, 'data-loading': props.loading }, props.label),
+    Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
+        React.createElement('button', { disabled: props.disabled }, props.children),
 }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
@@ -69,8 +80,8 @@ describe('when StepperCommandDialog is in its initial state', () => {
         html = renderToStaticMarkup(element);
     });
 
-    it('should_not_have_buttons_disabled_due_to_busy', () => {
-        html.should.not.include('data-loading="true"');
+    it('should_not_have_buttons_in_a_busy_state', () => {
+        html.should.not.include('pi-spinner');
     });
 
     it('should_not_show_previous_button_on_first_step', () => {
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
index 4e33e70..c72789d 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
@@ -5,26 +5,32 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { StepperCommandDialog } from '../StepperCommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
+import { StepperPanel } from '../StepperPanel';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'dialog' }, props.footer, props.children),
+vi.mock('../../Dialogs/Dialog', () => ({
+    Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-vi.mock('primereact/stepper', () => ({
-    Stepper: (props: { children?: React.ReactNode; activeStep?: number }) =>
-        React.createElement('div', { 'data-testid': 'stepper', 'data-active-step': props.activeStep }, props.children),
-}));
-
-vi.mock('primereact/stepperpanel', () => ({
-    StepperPanel: (props: { header?: string; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'stepper-panel', 'data-header': props.header }, props.children),
-}));
+vi.mock('primereact/stepper', () => {
+    const part = (name: string) => {
+        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
+            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        Component.displayName = name;
+        return Component;
+    };
+    return {
+        Stepper: {
+            Root: part('root'), List: part('list'), Step: part('step'),
+            Header: part('header'), Number: part('number'), Title: part('title'),
+            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { label?: string; disabled?: boolean; loading?: boolean }) =>
-        React.createElement('button', { disabled: props.disabled, 'data-loading': props.loading }, props.label),
+    Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
+        React.createElement('button', { disabled: props.disabled }, props.children),
 }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
index 1bf0e1a..557d1e0 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
@@ -4,52 +4,34 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { StepperCommandDialog } from '../StepperCommandDialog';
-import { StepperPanel } from 'primereact/stepperpanel';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'dialog' }, props.footer, props.children),
+vi.mock('../../Dialogs/Dialog', () => ({
+    Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// Simulate PrimeReact's Stepper: invoke pt.stepperpanel.number for each child and
-// attach the resulting backgroundColor as data-number-bg so specs can assert on it.
-vi.mock('primereact/stepper', () => ({
-    Stepper: (props: { children?: React.ReactNode; pt?: Record<string, unknown>; activeStep?: number }) => {
-        type StepCtx = { context: { index: number } };
-        type NumberPtFn = (opts: StepCtx) => { style?: { backgroundColor?: string } };
-        const ptStepperpanel = (props.pt as Record<string, unknown> | undefined)?.stepperpanel as Record<string, unknown> | undefined;
-        const numberPtFn = ptStepperpanel?.number as NumberPtFn | undefined;
-        const children = React.Children.map(props.children, (child, index) => {
-            if (!React.isValidElement(child)) return child;
-            const result = typeof numberPtFn === 'function' ? numberPtFn({ context: { index } }) : {};
-            const bg = result?.style?.backgroundColor ?? '';
-            return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-number-bg': bg });
-        });
-        return React.createElement('div', { 'data-testid': 'stepper' }, children);
-    },
-}));
-
-// Set displayName so the indicator code path in processChildren is triggered.
-// Forward data-number-bg (injected by the Stepper mock above) so specs can assert on it.
-vi.mock('primereact/stepperpanel', () => {
-    const MockStepperPanel = (props: {
-        header?: string;
-        children?: React.ReactNode;
-        'data-number-bg'?: string;
-    }) =>
-        React.createElement('div', {
-            'data-testid': 'stepper-panel',
-            'data-header': props.header,
-            'data-number-bg': props['data-number-bg'] ?? '',
-        }, props.children);
-    MockStepperPanel.displayName = 'StepperPanel';
-    return { StepperPanel: MockStepperPanel };
+// PrimeReact 11's Stepper is compositional: each part renders its children, and
+// the Number part forwards its inline `style` so specs can assert the per-step
+// red/green indicator the wrapper applies directly to each step's number.
+vi.mock('primereact/stepper', () => {
+    const part = (name: string) => {
+        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
+            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        Component.displayName = name;
+        return Component;
+    };
+    return {
+        Stepper: {
+            Root: part('root'), List: part('list'), Step: part('step'),
+            Header: part('header'), Number: part('number'), Title: part('title'),
+            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+        },
+    };
 });
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { label?: string; disabled?: boolean; loading?: boolean }) =>
-        React.createElement('button', { disabled: props.disabled, 'data-loading': props.loading }, props.label),
+    Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
+        React.createElement('button', { disabled: props.disabled }, props.children),
 }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
@@ -87,10 +69,21 @@ class TestCommand {
     description: string = '';
 }
 
+// The project runs specs with `isolate: false`, so module state and mocks are
+// shared across files by execution order. Re-evaluate the component under this
+// file's own mocks so the getFieldError stub (which drives the error color) is
+// always the one in effect, regardless of which spec file ran first.
+let StepperCommandDialog: typeof import('../StepperCommandDialog').StepperCommandDialog;
+let StepperPanel: typeof import('../StepperPanel').StepperPanel;
+
 describe('when a step contains a field with a validation error', () => {
     let html: string;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+        vi.resetModules();
+        StepperCommandDialog = (await import('../StepperCommandDialog')).StepperCommandDialog;
+        StepperPanel = (await import('../StepperPanel')).StepperPanel;
+
         const element = React.createElement(
             StepperCommandDialog<TestCommand>,
             {
@@ -108,17 +101,15 @@ describe('when a step contains a field with a validation error', () => {
         html = renderToStaticMarkup(element);
     });
 
-    it('should_mark_the_invalid_step_with_error_class', () => {
-        // Step 1 has a field error — its number circle should have the red error background
-        const step1Match = html.match(/data-header="Step 1"[^>]*data-number-bg="([^"]*)"/);
-        const step1Bg = step1Match?.[1] ?? '';
-        step1Bg.should.include('red');
+    it('should_mark_the_invalid_step_number_with_the_error_color', () => {
+        // Step 1 (number "1") has a field error — its number circle should have the red error background
+        const step1Number = html.match(/<span data-part="number"[^>]*>1<\/span>|<div data-part="number"[^>]*>1<\/div>/);
+        (step1Number?.[0] ?? '').should.include('red');
     });
 
-    it('should_not_mark_the_valid_step_with_error_class', () => {
-        // Step 2 has no field errors — its number circle should not have the red error background
-        const step2Match = html.match(/data-header="Step 2"[^>]*data-number-bg="([^"]*)"/);
-        const step2Bg = step2Match?.[1] ?? '';
-        step2Bg.should.not.include('red');
+    it('should_not_mark_the_valid_step_number_with_the_error_color', () => {
+        // Step 2 (number "2") has no field errors — its number circle should not have the red error background
+        const step2Number = html.match(/<span data-part="number"[^>]*>2<\/span>|<div data-part="number"[^>]*>2<\/div>/);
+        (step2Number?.[0] ?? '').should.not.include('red');
     });
 });
diff --git a/Source/CommandDialog/index.ts b/Source/CommandDialog/index.ts
index f28c863..c94ddde 100644
--- a/Source/CommandDialog/index.ts
+++ b/Source/CommandDialog/index.ts
@@ -5,3 +5,4 @@ export * from './applyBeforeExecute';
 export * from './CommandDialog';
 export * from './CommandStepper';
 export * from './StepperCommandDialog';
+export * from './StepperPanel';
diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index 8275345..f400551 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -2,7 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { Calendar, type CalendarProps } from 'primereact/calendar';
+import { DatePickerInput } from '../../Common/DatePickerInput';
+import type { DatePickerRootProps } from '@primereact/types/primitive/datepicker';
 import React from 'react';
 
 /**
@@ -33,13 +34,13 @@ interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying Calendar. */
-    pt?: CalendarProps['pt'];
+    /** PrimeReact pass-through configuration applied to the underlying DatePicker. */
+    pt?: DatePickerRootProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying Calendar. */
-    ptOptions?: CalendarProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the underlying DatePicker. */
+    ptOptions?: DatePickerRootProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying Calendar. */
+    /** When true, disables every base PrimeReact style on the underlying DatePicker. */
     unstyled?: boolean;
 }
 
@@ -58,9 +59,9 @@ interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
  */
 export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
     (props) => (
-        <Calendar
+        <DatePickerInput
             value={props.value}
-            onChange={(e: { value: Date | null | undefined }) => props.onChange(e.value ?? null)}
+            onChange={props.onChange}
             onBlur={props.onBlur}
             invalid={props.invalid}
             placeholder={props.placeholder}
@@ -70,7 +71,7 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
             hourFormat={props.hourFormat}
             minDate={props.minDate}
             maxDate={props.maxDate}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
+            className={props.className}
             pt={props.pt}
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 71c1caa..3c44935 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Checkbox, type CheckboxProps } from 'primereact/checkbox';
+import { Checkbox } from 'primereact/checkbox';
+import type { CheckboxRootProps, CheckboxRootChangeEvent } from '@primereact/types/primitive/checkbox';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -16,10 +17,10 @@ interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying Checkbox. */
-    pt?: CheckboxProps['pt'];
+    pt?: CheckboxRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying Checkbox. */
-    ptOptions?: CheckboxProps['ptOptions'];
+    ptOptions?: CheckboxRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying Checkbox. */
     unstyled?: boolean;
@@ -36,22 +37,29 @@ interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
  */
 export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
     (props) => (
-        <div className="flex items-center">
-            <Checkbox
+        // PrimeReact 11's Checkbox is compositional (Root → Box → Indicator). A real
+        // <label> wraps the control so the visible text is its accessible name
+        // (implicit association) and doubles the click target. `onBlur` rides on the
+        // label because React blur bubbles (focusout), so the CommandForm's blur-timed
+        // validation still fires from the inner input.
+        <label className="flex items-center" onBlur={props.onBlur}>
+            <Checkbox.Root
                 checked={props.value}
-                onChange={props.onChange}
-                onBlur={props.onBlur}
+                onCheckedChange={props.onChange}
                 invalid={props.invalid}
                 className={props.className}
                 pt={props.pt}
                 ptOptions={props.ptOptions}
-                unstyled={props.unstyled}
-            />
-            {props.label && <label className="ml-2">{props.label}</label>}
-        </div>
+                unstyled={props.unstyled}>
+                <Checkbox.Box>
+                    <Checkbox.Indicator />
+                </Checkbox.Box>
+            </Checkbox.Root>
+            {props.label && <span className="ml-2">{props.label}</span>}
+        </label>
     ),
     {
         defaultValue: false,
-        extractValue: (e: { checked: boolean }) => e.checked
+        extractValue: (e: CheckboxRootChangeEvent) => e.checked
     }
 );
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 6ba3be4..1009f0d 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -2,7 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { Chips, type ChipsProps } from 'primereact/chips';
+import { InputTags } from 'primereact/inputtags';
+import type { InputTagsRootProps, InputTagsRootValueChangeEvent } from '@primereact/types/primitive/inputtags';
 import React from 'react';
 
 /**
@@ -15,7 +16,12 @@ interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
     /** Maximum number of chips allowed. */
     max?: number;
 
-    /** Character (or regex source) that splits typed input into multiple chips. */
+    /**
+     * Character (or regex source) that splits typed input into multiple chips.
+     *
+     * PrimeReact 11's `InputTags` commits one tag per Enter rather than exposing
+     * v10 Chips' `separator`; accepted for API compatibility, not applied.
+     */
     separator?: string;
 
     /** When true, the current input is committed as a chip on blur. */
@@ -24,16 +30,19 @@ interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
     /** When true, the same chip value may be added multiple times. */
     allowDuplicate?: boolean;
 
+    /** Accessible name for each chip's remove button. Override to localize. Defaults to `'Remove'`. */
+    removeAriaLabel?: string;
+
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying Chips. */
-    pt?: ChipsProps['pt'];
+    /** PrimeReact pass-through configuration applied to the underlying InputTags. */
+    pt?: InputTagsRootProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying Chips. */
-    ptOptions?: ChipsProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the underlying InputTags. */
+    ptOptions?: InputTagsRootProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying Chips. */
+    /** When true, disables every base PrimeReact style on the underlying InputTags. */
     unstyled?: boolean;
 }
 
@@ -49,21 +58,35 @@ interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
  */
 export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(
     (props) => (
-        <Chips
-            value={props.value}
-            onChange={(e: { value: string[] | null | undefined }) => props.onChange(e.value ?? [])}
-            onBlur={props.onBlur}
-            invalid={props.invalid}
-            placeholder={props.placeholder}
-            max={props.max}
-            separator={props.separator}
-            addOnBlur={props.addOnBlur}
-            allowDuplicate={props.allowDuplicate}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
-        />
+        // PrimeReact 11's InputTags is compositional with render-prop parts: Items
+        // renders one node per tag, Control renders the text-entry input. `onBlur`
+        // rides the wrapping div because React blur bubbles (focusout).
+        <div className={props.className ? `w-full ${props.className}` : 'w-full'} onBlur={props.onBlur}>
+            <InputTags.Root
+                value={props.value}
+                onValueChange={(e: InputTagsRootValueChangeEvent) => props.onChange(e.value ?? [])}
+                invalid={props.invalid}
+                max={props.max}
+                addOnBlur={props.addOnBlur}
+                allowDuplicate={props.allowDuplicate}
+                pt={props.pt}
+                ptOptions={props.ptOptions}
+                unstyled={props.unstyled}>
+                <InputTags.Items>
+                    {({ item, index, remove, itemProps }) => (
+                        <span key={index} {...itemProps} className="cratis-inputtags-item">
+                            <span>{item}</span>
+                            <button type="button" aria-label={props.removeAriaLabel ?? 'Remove'} onClick={remove}>
+                                <i className="pi pi-times-circle" />
+                            </button>
+                        </span>
+                    )}
+                </InputTags.Items>
+                <InputTags.Control>
+                    {({ controlProps }) => <input {...controlProps} placeholder={props.placeholder} />}
+                </InputTags.Control>
+            </InputTags.Root>
+        </div>
     ),
     {
         defaultValue: [],
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index 7cbda44..c7140c7 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -2,29 +2,46 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { ColorPicker, type ColorPickerProps } from 'primereact/colorpicker';
+import { InputColor } from 'primereact/inputcolor';
+import { parseColor } from '@primereact/headless/inputcolor';
+import type { InputColorRootProps, InputColorRootChangeEvent } from '@primereact/types/primitive/inputcolor';
 import React from 'react';
 
+/** Parse a bare hex string (no leading `#`) into a color, falling back on invalid input. */
+const toColor = (hex: string, fallback: string) => {
+    const candidate = typeof hex === 'string' && hex.length > 0 ? hex : fallback;
+    try {
+        return parseColor(`#${candidate}`);
+    } catch {
+        return parseColor(`#${fallback}`);
+    }
+};
+
 /**
  * Component-level props for {@link ColorPickerField}.
  */
 interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
-    /** When true, renders the color picker inline rather than as a popover. */
+    /**
+     * When true, renders the color picker inline rather than as a popover.
+     *
+     * PrimeReact 11's InputColor is composed inline (area + sliders + swatch); the
+     * v10 popover mode is not reproduced here. Accepted for API compatibility.
+     */
     inline?: boolean;
 
     /** Initial color shown when the bound property is empty. Defaults to `'000000'`. */
     defaultColor?: string;
 
-    /** Extra CSS class name forwarded to the underlying ColorPicker. */
+    /** Extra CSS class name forwarded to the underlying InputColor. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying ColorPicker. */
-    pt?: ColorPickerProps['pt'];
+    /** PrimeReact pass-through configuration applied to the underlying InputColor. */
+    pt?: InputColorRootProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying ColorPicker. */
-    ptOptions?: ColorPickerProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the underlying InputColor. */
+    ptOptions?: InputColorRootProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying ColorPicker. */
+    /** When true, disables every base PrimeReact style on the underlying InputColor. */
     unstyled?: boolean;
 }
 
@@ -41,26 +58,34 @@ interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
 export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProps>(
     (props) => {
         const defaultColor = props.defaultColor ?? '000000';
-        const value = typeof props.value === 'string' && props.value.length > 0 ? props.value : defaultColor;
-        // PrimeReact's ColorPicker is the one form component that exposes no `invalid` prop,
-        // so we apply the `p-invalid` state class directly. This is the exact class the
-        // `invalid` prop emits on the other fields, so the rendered DOM stays consistent —
-        // it picks up a theme's invalid styling and harmlessly no-ops in unstyled mode.
+        // InputColor exposes no `invalid` prop, so surface the invalid state as a class on the
+        // wrapper — the same `p-invalid` token the other fields emit; it no-ops when unstyled.
         const invalidClass = props.invalid ? 'p-invalid' : undefined;
         const className = [invalidClass, props.className].filter(Boolean).join(' ') || undefined;
 
         return (
-            <ColorPicker
-                value={value}
-                onChange={(e: { value: unknown }) => props.onChange(typeof e.value === 'string' ? e.value : '')}
-                onBlur={props.onBlur}
-                inline={props.inline}
-                defaultColor={defaultColor}
-                className={className}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}
-            />
+            // PrimeReact 11's InputColor is compositional (area + hue slider + swatch).
+            // `onBlur` rides the wrapping div because React blur bubbles (focusout).
+            <div className={className} onBlur={props.onBlur}>
+                <InputColor.Root
+                    value={toColor(props.value, defaultColor)}
+                    onValueChange={(e: InputColorRootChangeEvent) => props.onChange(e.value.toString('hex').replace('#', ''))}
+                    pt={props.pt}
+                    ptOptions={props.ptOptions}
+                    unstyled={props.unstyled}>
+                    <InputColor.Area>
+                        <InputColor.AreaBackground />
+                        <InputColor.AreaHandle />
+                    </InputColor.Area>
+                    <InputColor.Slider>
+                        <InputColor.SliderTrack />
+                        <InputColor.SliderHandle />
+                    </InputColor.Slider>
+                    <InputColor.Swatch>
+                        <InputColor.SwatchBackground />
+                    </InputColor.Swatch>
+                </InputColor.Root>
+            </div>
         );
     },
     {
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index 41aa19c..977958d 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Dropdown, type DropdownProps } from 'primereact/dropdown';
+import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 7686cae..c7fd481 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputText, type InputTextProps } from 'primereact/inputtext';
+import { InputText } from 'primereact/inputtext';
+import type { InputTextProps } from '@primereact/types/primitive/inputtext';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index 60e69f5..8d86763 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { MultiSelect, type MultiSelectProps } from 'primereact/multiselect';
+import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
 
 /**
@@ -21,10 +21,21 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string
     /** Placeholder text shown when nothing is selected. */
     placeholder?: string;
 
-    /** How the selection is displayed in the field: comma-separated or as chips. */
+    /**
+     * How the selection is displayed in the field: comma-separated or as chips.
+     *
+     * PrimeReact 11's `Select` (in `multiple` mode) renders the selection through
+     * its value slot rather than v10 MultiSelect's chip/comma modes, so this is
+     * currently accepted for API compatibility and does not change rendering.
+     */
     display?: 'comma' | 'chip';
 
-    /** Maximum number of selected labels to show before collapsing into a count. */
+    /**
+     * Maximum number of selected labels to show before collapsing into a count.
+     *
+     * Accepted for API compatibility; not applied under the PrimeReact 11
+     * `Select` value rendering.
+     */
     maxSelectedLabels?: number;
 
     /** When true, shows a filter input in the dropdown panel. */
@@ -36,13 +47,13 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying MultiSelect. */
-    pt?: MultiSelectProps['pt'];
+    /** PrimeReact pass-through configuration applied to the underlying Select. */
+    pt?: DropdownProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying MultiSelect. */
-    ptOptions?: MultiSelectProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the underlying Select. */
+    ptOptions?: DropdownProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying MultiSelect. */
+    /** When true, disables every base PrimeReact style on the underlying Select. */
     unstyled?: boolean;
 }
 
@@ -60,16 +71,15 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string
  */
 export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProps>(
     (props) => (
-        <MultiSelect
+        <Dropdown<Array<string | number>>
+            multiple
             value={props.value}
-            onChange={(e: { value: Array<string | number> | undefined }) => props.onChange(e.value ?? [])}
+            onChange={(e) => props.onChange(e.value ?? [])}
             onBlur={props.onBlur}
             options={props.options}
             optionValue={props.optionValue}
             optionLabel={props.optionLabel}
             placeholder={props.placeholder}
-            display={props.display}
-            maxSelectedLabels={props.maxSelectedLabels}
             filter={props.filter}
             showClear={props.showClear}
             invalid={props.invalid}
diff --git a/Source/CommandForm/fields/NewFields.stories.tsx b/Source/CommandForm/fields/NewFields.stories.tsx
new file mode 100644
index 0000000..5e3db82
--- /dev/null
+++ b/Source/CommandForm/fields/NewFields.stories.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CommandForm } from '@cratis/arc.react/commands';
+import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { PasswordField } from './PasswordField';
+import { ToggleSwitchField } from './ToggleSwitchField';
+import { RatingField } from './RatingField';
+import '@cratis/arc/validation';
+
+const meta: Meta = {
+    title: 'CommandForm/NewFields',
+};
+
+export default meta;
+type Story = StoryObj;
+
+class ProfileValidator extends CommandValidator {
+    constructor() {
+        super();
+        this.ruleFor((c: ProfileCommand) => c.password).notEmpty().minLength(6);
+    }
+}
+
+class ProfileCommand extends Command<object> {
+    readonly route: string = '/api/profile';
+    readonly validation: CommandValidator = new ProfileValidator();
+    readonly propertyDescriptors: PropertyDescriptor[] = [
+        new PropertyDescriptor('password', String),
+        new PropertyDescriptor('notifications', Boolean),
+        new PropertyDescriptor('rating', Number),
+    ];
+
+    password = '';
+    notifications = false;
+    rating = 0;
+
+    constructor() {
+        super(Object, false);
+    }
+
+    get requestParameters(): string[] {
+        return [];
+    }
+
+    get properties(): string[] {
+        return ['password', 'notifications', 'rating'];
+    }
+
+    override async validate(): Promise<CommandResult<object>> {
+        const errors = this.validation?.validate(this) ?? [];
+        return errors.length > 0 ? CommandResult.validationFailed(errors) : CommandResult.empty;
+    }
+
+    override async execute(): Promise<CommandResult<object>> {
+        const validation = await this.validate();
+        return validation.isSuccess ? CommandResult.empty : validation;
+    }
+}
+
+/** The new PasswordField, ToggleSwitchField, and RatingField bound to a command. */
+export const Overview: Story = {
+    render: () => (
+        <div style={{ width: '420px', padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+            <CommandForm<ProfileCommand> command={ProfileCommand} autoServerValidate={false} validateOn="change">
+                <div>
+                    <label>Password</label>
+                    <PasswordField<ProfileCommand> value={c => c.password} placeholder="At least 6 characters" />
+                </div>
+                <div>
+                    <ToggleSwitchField<ProfileCommand> value={c => c.notifications} label="Enable notifications" />
+                </div>
+                <div>
+                    <label>Rating</label>
+                    <RatingField<ProfileCommand> value={c => c.rating} stars={5} />
+                </div>
+            </CommandForm>
+        </div>
+    ),
+};
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 72f3fce..7e9d931 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputNumber, type InputNumberProps } from 'primereact/inputnumber';
+import { InputNumber } from 'primereact/inputnumber';
+import type { InputNumberRootProps, InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -25,10 +26,10 @@ interface NumberFieldComponentProps extends WrappedFieldProps<number> {
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying InputNumber. */
-    pt?: InputNumberProps['pt'];
+    pt?: InputNumberRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying InputNumber. */
-    ptOptions?: InputNumberProps['ptOptions'];
+    ptOptions?: InputNumberRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying InputNumber. */
     unstyled?: boolean;
@@ -46,20 +47,23 @@ interface NumberFieldComponentProps extends WrappedFieldProps<number> {
  */
 export const NumberField = asCommandFormField<NumberFieldComponentProps>(
     (props) => (
-        <InputNumber
-            value={props.value}
-            onValueChange={(e) => props.onChange(e.value ?? 0)}
-            onBlur={props.onBlur}
-            invalid={props.invalid}
-            placeholder={props.placeholder}
-            min={props.min}
-            max={props.max}
-            step={props.step}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
-        />
+        // PrimeReact 11's InputNumber is compositional (Root owns the numeric model,
+        // Input is the text field). `onBlur` rides on the wrapping div so the
+        // CommandForm's blur-timed validation still fires from the inner input.
+        <div onBlur={props.onBlur} className={props.className ? `w-full ${props.className}` : 'w-full'}>
+            <InputNumber.Root
+                value={props.value}
+                onValueChange={(e: InputNumberRootValueChangeEvent) => props.onChange(e.value ?? 0)}
+                invalid={props.invalid}
+                min={props.min}
+                max={props.max}
+                step={props.step}
+                pt={props.pt}
+                ptOptions={props.ptOptions}
+                unstyled={props.unstyled}>
+                <InputNumber.Input placeholder={props.placeholder} className="w-full" />
+            </InputNumber.Root>
+        </div>
     ),
     {
         defaultValue: 0,
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
new file mode 100644
index 0000000..a69d4eb
--- /dev/null
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { InputPassword } from 'primereact/inputpassword';
+import type { InputPasswordProps, InputPasswordValueChangeEvent } from '@primereact/types/primitive/inputpassword';
+import React from 'react';
+import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+
+/** Component-level props for {@link PasswordField}. */
+interface PasswordFieldComponentProps extends WrappedFieldProps<string> {
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Extra CSS class name combined with the default `w-full`. */
+    className?: string;
+    /** PrimeReact pass-through configuration applied to the underlying InputPassword. */
+    pt?: InputPasswordProps['pt'];
+    /** PrimeReact pass-through options applied to the underlying InputPassword. */
+    ptOptions?: InputPasswordProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the underlying InputPassword. */
+    unstyled?: boolean;
+}
+
+/**
+ * A masked password field bound to a `string` property on a Cratis Arc command,
+ * with a built-in show/hide toggle. See {@link InputTextField} for the full
+ * `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <PasswordField value={c => c.password} title="Password" />
+ * ```
+ */
+export const PasswordField = asCommandFormField<PasswordFieldComponentProps>(
+    (props) => (
+        <div onBlur={props.onBlur} className={props.className ? `w-full ${props.className}` : 'w-full'}>
+            <InputPassword
+                value={props.value}
+                onValueChange={props.onChange}
+                invalid={props.invalid}
+                placeholder={props.placeholder}
+                className="w-full"
+                pt={props.pt}
+                ptOptions={props.ptOptions}
+                unstyled={props.unstyled}
+            />
+        </div>
+    ),
+    {
+        defaultValue: '',
+        extractValue: (e: InputPasswordValueChangeEvent) => e.value
+    }
+);
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 91d96e9..2b87f14 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { RadioButton, RadioButtonChangeEvent, type RadioButtonProps } from 'primereact/radiobutton';
+import { RadioButton } from 'primereact/radiobutton';
+import type { RadioButtonRootProps, RadioButtonRootChangeEvent } from '@primereact/types/primitive/radiobutton';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -22,10 +23,10 @@ interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | numb
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying RadioButton. */
-    pt?: RadioButtonProps['pt'];
+    pt?: RadioButtonRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying RadioButton. */
-    ptOptions?: RadioButtonProps['ptOptions'];
+    ptOptions?: RadioButtonRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying RadioButton. */
     unstyled?: boolean;
@@ -43,20 +44,25 @@ interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | numb
  */
 export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProps>(
     (props) => (
-        <div className="flex items-center">
-            <RadioButton
+        // A real <label> wraps the control so the visible text is its accessible
+        // name (implicit association). `onBlur` rides on the label because React
+        // blur bubbles (focusout).
+        <label className="flex items-center" onBlur={props.onBlur}>
+            <RadioButton.Root
                 value={props.buttonValue}
                 checked={props.value === props.buttonValue}
-                onChange={(e: RadioButtonChangeEvent) => props.onChange(e.value)}
-                onBlur={props.onBlur}
+                onCheckedChange={(e: RadioButtonRootChangeEvent) => { if (e.checked) props.onChange(props.buttonValue); }}
                 invalid={props.invalid}
                 className={props.className}
                 pt={props.pt}
                 ptOptions={props.ptOptions}
-                unstyled={props.unstyled}
-            />
-            {props.label && <label className="ml-2">{props.label}</label>}
-        </div>
+                unstyled={props.unstyled}>
+                <RadioButton.Box>
+                    <RadioButton.Indicator />
+                </RadioButton.Box>
+            </RadioButton.Root>
+            {props.label && <span className="ml-2">{props.label}</span>}
+        </label>
     ),
     {
         defaultValue: '',
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 3190395..7fc8f37 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { RadioButton, RadioButtonChangeEvent, type RadioButtonProps } from 'primereact/radiobutton';
+import { RadioButton } from 'primereact/radiobutton';
+import type { RadioButtonRootProps, RadioButtonRootChangeEvent } from '@primereact/types/primitive/radiobutton';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -23,9 +24,9 @@ interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | numbe
     /** Extra CSS class name forwarded to the group container. */
     className?: string;
     /** PrimeReact pass-through configuration applied to every inner RadioButton. */
-    pt?: RadioButtonProps['pt'];
+    pt?: RadioButtonRootProps['pt'];
     /** PrimeReact pass-through options applied to every inner RadioButton. */
-    ptOptions?: RadioButtonProps['ptOptions'];
+    ptOptions?: RadioButtonRootProps['ptOptions'];
     /** When true, disables every base PrimeReact style on the inner RadioButtons. */
     unstyled?: boolean;
 }
@@ -59,19 +60,23 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                     const optValue = option[props.optionValue] as string | number;
                     const optLabel = option[props.optionLabel] as string;
                     return (
-                        <div key={String(optValue)} className="flex items-center">
-                            <RadioButton
+                        // A real <label> per option so the visible text is the radio's
+                        // accessible name. `onBlur` rides on the label (blur bubbles).
+                        <label key={String(optValue)} className="flex items-center" onBlur={props.onBlur}>
+                            <RadioButton.Root
                                 value={optValue}
                                 checked={props.value === optValue}
-                                onChange={(e: RadioButtonChangeEvent) => props.onChange(e.value)}
-                                onBlur={props.onBlur}
+                                onCheckedChange={(e: RadioButtonRootChangeEvent) => { if (e.checked) props.onChange(optValue); }}
                                 invalid={props.invalid}
                                 pt={props.pt}
                                 ptOptions={props.ptOptions}
-                                unstyled={props.unstyled}
-                            />
-                            <label className="ml-2">{optLabel}</label>
-                        </div>
+                                unstyled={props.unstyled}>
+                                <RadioButton.Box>
+                                    <RadioButton.Indicator />
+                                </RadioButton.Box>
+                            </RadioButton.Root>
+                            <span className="ml-2">{optLabel}</span>
+                        </label>
                     );
                 })}
             </div>
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
new file mode 100644
index 0000000..2b25495
--- /dev/null
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Rating } from 'primereact/rating';
+import type { RatingRootProps, RatingRootValueChangeEvent } from '@primereact/types/primitive/rating';
+import React from 'react';
+import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+
+/** Component-level props for {@link RatingField}. */
+interface RatingFieldComponentProps extends WrappedFieldProps<number> {
+    /** Number of stars. Defaults to `5`. */
+    stars?: number;
+    /** Builds the accessible name for each star. Override to localize. Defaults to `` `${n} star(s)` ``. */
+    starAriaLabel?: (starValue: number) => string;
+    /** Extra CSS class name. */
+    className?: string;
+    /** PrimeReact pass-through configuration applied to the underlying Rating. */
+    pt?: RatingRootProps['pt'];
+    /** PrimeReact pass-through options applied to the underlying Rating. */
+    ptOptions?: RatingRootProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the underlying Rating. */
+    unstyled?: boolean;
+}
+
+/**
+ * A star-rating field bound to a `number` property on a Cratis Arc command.
+ * See {@link InputTextField} for the full `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <RatingField value={c => c.rating} title="Rating" stars={5} />
+ * ```
+ */
+export const RatingField = asCommandFormField<RatingFieldComponentProps>(
+    (props) => (
+        <div onBlur={props.onBlur} className={props.className}>
+            <Rating.Root
+                value={props.value}
+                onValueChange={props.onChange}
+                invalid={props.invalid}
+                pt={props.pt}
+                ptOptions={props.ptOptions}
+                unstyled={props.unstyled}>
+                {Array.from({ length: props.stars ?? 5 }, (_, index) => (
+                    <Rating.Option
+                        key={index}
+                        value={index + 1}
+                        index={index}
+                        aria-label={(props.starAriaLabel ?? ((n) => `${n} ${n === 1 ? 'star' : 'stars'}`))(index + 1)}>
+                        <Rating.On><i className="pi pi-star-fill" /></Rating.On>
+                        <Rating.Off><i className="pi pi-star" /></Rating.Off>
+                    </Rating.Option>
+                ))}
+            </Rating.Root>
+        </div>
+    ),
+    {
+        defaultValue: 0,
+        extractValue: (e: RatingRootValueChangeEvent) => e.value
+    }
+);
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index cb27a47..ed404e9 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Slider, type SliderProps } from 'primereact/slider';
+import { Slider } from 'primereact/slider';
+import type { SliderRootProps, SliderRootChangeEvent } from '@primereact/types/primitive/slider';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -22,10 +23,10 @@ interface SliderFieldComponentProps extends WrappedFieldProps<number> {
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying Slider. */
-    pt?: SliderProps['pt'];
+    pt?: SliderRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying Slider. */
-    ptOptions?: SliderProps['ptOptions'];
+    ptOptions?: SliderRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying Slider. */
     unstyled?: boolean;
@@ -43,17 +44,21 @@ interface SliderFieldComponentProps extends WrappedFieldProps<number> {
 export const SliderField = asCommandFormField<SliderFieldComponentProps>(
     (props) => (
         <div className="w-full" onBlur={props.onBlur}>
-            <Slider
+            <Slider.Root
                 value={props.value}
-                onChange={(e) => props.onChange(e.value)}
+                onValueChange={(e: SliderRootChangeEvent) => props.onChange(Array.isArray(e.value) ? (e.value[0] ?? 0) : e.value)}
                 min={props.min ?? 0}
                 max={props.max ?? 100}
                 step={props.step ?? 1}
                 className={props.className ? `w-full ${props.className}` : 'w-full'}
                 pt={props.pt}
                 ptOptions={props.ptOptions}
-                unstyled={props.unstyled}
-            />
+                unstyled={props.unstyled}>
+                <Slider.Track>
+                    <Slider.Range />
+                </Slider.Track>
+                <Slider.Handle />
+            </Slider.Root>
             <div className="text-center mt-2">
                 <span className="font-semibold">{props.value}</span>
             </div>
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index c6168da..2759413 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputTextarea, type InputTextareaProps } from 'primereact/inputtextarea';
+import { Textarea } from 'primereact/textarea';
+import type { TextareaProps } from '@primereact/types/primitive/textarea';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 
@@ -21,13 +22,13 @@ interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying InputTextarea. */
-    pt?: InputTextareaProps['pt'];
+    /** PrimeReact pass-through configuration applied to the underlying Textarea. */
+    pt?: TextareaProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying InputTextarea. */
-    ptOptions?: InputTextareaProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the underlying Textarea. */
+    ptOptions?: TextareaProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying InputTextarea. */
+    /** When true, disables every base PrimeReact style on the underlying Textarea. */
     unstyled?: boolean;
 }
 
@@ -44,7 +45,7 @@ interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
  */
 export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
     (props) => (
-        <InputTextarea
+        <Textarea
             value={props.value}
             onChange={props.onChange}
             onBlur={props.onBlur}
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
new file mode 100644
index 0000000..613cc0a
--- /dev/null
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ToggleSwitch } from 'primereact/toggleswitch';
+import type { ToggleSwitchRootProps, ToggleSwitchRootChangeEvent } from '@primereact/types/primitive/toggleswitch';
+import React from 'react';
+import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+
+/** Component-level props for {@link ToggleSwitchField}. */
+interface ToggleSwitchFieldComponentProps extends WrappedFieldProps<boolean> {
+    /** Optional label displayed next to the switch. */
+    label?: string;
+    /** Extra CSS class name forwarded to the underlying ToggleSwitch. */
+    className?: string;
+    /** PrimeReact pass-through configuration applied to the underlying ToggleSwitch. */
+    pt?: ToggleSwitchRootProps['pt'];
+    /** PrimeReact pass-through options applied to the underlying ToggleSwitch. */
+    ptOptions?: ToggleSwitchRootProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the underlying ToggleSwitch. */
+    unstyled?: boolean;
+}
+
+/**
+ * A boolean on/off switch field bound to a `boolean` property on a Cratis Arc
+ * command — the toggle counterpart of {@link CheckboxField}. See
+ * {@link InputTextField} for the full `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <ToggleSwitchField value={c => c.notificationsEnabled} label="Notifications" />
+ * ```
+ */
+export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentProps>(
+    (props) => (
+        // A real <label> wrapping the switch: the underlying checkbox input is a
+        // descendant, so the visible text becomes its accessible name (implicit
+        // association) regardless of the composition's internal structure — and
+        // the text doubles the click target.
+        <label className="flex items-center" onBlur={props.onBlur}>
+            <ToggleSwitch.Root
+                checked={props.value}
+                onCheckedChange={props.onChange}
+                invalid={props.invalid}
+                className={props.className}
+                pt={props.pt}
+                ptOptions={props.ptOptions}
+                unstyled={props.unstyled}>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+            {props.label && <span className="ml-2">{props.label}</span>}
+        </label>
+    ),
+    {
+        defaultValue: false,
+        extractValue: (e: ToggleSwitchRootChangeEvent) => e.checked
+    }
+);
diff --git a/Source/CommandForm/fields/index.ts b/Source/CommandForm/fields/index.ts
index 6482418..55b6e9c 100644
--- a/Source/CommandForm/fields/index.ts
+++ b/Source/CommandForm/fields/index.ts
@@ -13,3 +13,6 @@ export * from './MultiSelectField';
 export * from './ChipsField';
 export * from './RadioButtonField';
 export * from './RadioGroupField';
+export * from './PasswordField';
+export * from './ToggleSwitchField';
+export * from './RatingField';
diff --git a/Source/Common/ActionMenubar.css b/Source/Common/ActionMenubar.css
new file mode 100644
index 0000000..fb6eb0e
--- /dev/null
+++ b/Source/Common/ActionMenubar.css
@@ -0,0 +1,9 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-action-menubar {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+}
diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
new file mode 100644
index 0000000..0bd5fea
--- /dev/null
+++ b/Source/Common/ActionMenubar.tsx
@@ -0,0 +1,77 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Button } from 'primereact/button';
+import type { ButtonProps } from '@primereact/types/primitive/button';
+import './ActionMenubar.css';
+
+/** A single action in an {@link ActionMenubar}. */
+export interface ActionMenuItem {
+    /** The visible label. */
+    label?: string;
+    /** An icon element rendered before the label. */
+    icon?: React.ReactNode;
+    /** Invoked when the item is activated. */
+    command?: () => void;
+    /** When true, the item is greyed out and not clickable. */
+    disabled?: boolean;
+    /** Extra class name for the item. */
+    className?: string;
+    /** Severity styling for the underlying button (e.g. `danger`). */
+    severity?: 'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
+    /** Fully custom render for this item; when present it replaces the default button. */
+    template?: (item: ActionMenuItem) => React.ReactNode;
+}
+
+/** Props for {@link ActionMenubar}. */
+export interface ActionMenubarProps {
+    /** The actions to render, left to right. */
+    model: ActionMenuItem[];
+    /** Extra class name for the toolbar container. */
+    className?: string;
+    /** Accessible label for the toolbar. */
+    'aria-label'?: string;
+    /** PrimeReact pass-through configuration applied to each action button. */
+    pt?: ButtonProps['pt'];
+    /** PrimeReact pass-through options applied to each action button. */
+    ptOptions?: ButtonProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the action buttons. */
+    unstyled?: boolean;
+}
+
+/**
+ * A horizontal bar of command actions. Replaces the PrimeReact 10 `Menubar`
+ * (removed in PrimeReact 11, and never a great fit for a bar of *actions*
+ * rather than navigation) with a simple button toolbar driven by the same
+ * `model` array shape. Each item is a text `Button` unless it supplies a
+ * `template`.
+ */
+export const ActionMenubar = ({ model, className, pt, ptOptions, unstyled, ...rest }: ActionMenubarProps) => (
+    <div
+        role="toolbar"
+        className={className ? `cratis-action-menubar ${className}` : 'cratis-action-menubar'}
+        {...rest}>
+        {model.map((item, index) => {
+            if (item.template) {
+                return <React.Fragment key={index}>{item.template(item)}</React.Fragment>;
+            }
+
+            return (
+                <Button
+                    key={index}
+                    variant="text"
+                    severity={item.severity}
+                    onClick={item.command}
+                    disabled={item.disabled}
+                    className={item.className}
+                    pt={pt}
+                    ptOptions={ptOptions}
+                    unstyled={unstyled}>
+                    {item.icon}
+                    {item.label && <span>{item.label}</span>}
+                </Button>
+            );
+        })}
+    </div>
+);
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index fe7efc7..8b54f00 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -2,16 +2,18 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, { useMemo } from 'react';
-import { PrimeReactProvider } from 'primereact/api';
-import type { APIOptions } from 'primereact/api';
+import { PrimeReactProvider } from '@primereact/core';
+import type { PrimeReactProps } from '@primereact/types/core';
 import { merge } from 'ts-deepmerge';
+import { Toaster, type ToasterProps } from '../Notifications';
 
 /**
- * Configuration accepted by {@link CratisComponentsProvider}. Mirrors PrimeReact's
- * {@link APIOptions} — the most commonly used members are `unstyled`, `pt`, `ptOptions`,
- * `inputStyle`, `ripple`, `appendTo`, `zIndex` and `locale`.
+ * Configuration accepted by {@link CratisComponentsProvider}. Mirrors PrimeReact 11's
+ * {@link PrimeReactProps} — the most commonly used members are `unstyled`, `pt`, `ptOptions`,
+ * `ripple`, `inputVariant`, `zIndex`, `locale`, and `theme` (`{ preset, options }` for the
+ * `@primeuix/themes` styled layer).
  */
-export type CratisComponentsConfig = Partial<APIOptions>;
+export type CratisComponentsConfig = Partial<PrimeReactProps>;
 
 export interface CratisComponentsProviderProps {
     /**
@@ -20,6 +22,13 @@ export interface CratisComponentsProviderProps {
      */
     value?: CratisComponentsConfig;
 
+    /**
+     * When set, mounts a {@link Toaster} inside the provider so the imperative
+     * `toast(...)` works app-wide with no extra setup. Pass `true` for the
+     * defaults, or a {@link ToasterProps} object to position/configure it.
+     */
+    toaster?: boolean | ToasterProps;
+
     children: React.ReactNode;
 }
 
@@ -41,21 +50,40 @@ export const mergeCratisComponentsConfig = (value: CratisComponentsConfig | unde
     merge(cratisDefaults, value ?? {}) as CratisComponentsConfig;
 
 /**
- * Single setup point for Cratis Components. Wraps {@link PrimeReactProvider} so the
- * library can layer Cratis-wide defaults on top of PrimeReact's pass-through and
- * unstyled mechanisms while still letting the consumer take complete control:
+ * Single setup point for Cratis Components. Wraps PrimeReact 11's
+ * {@link PrimeReactProvider} so the library can layer Cratis-wide defaults on top of
+ * PrimeReact's pass-through and unstyled mechanisms while still letting the consumer
+ * take complete control. PrimeReact 11 is unstyled-first, so this library ships no
+ * bundled theme — you choose the styling posture:
+ *
+ * Every option is passed through the single `value` prop (it is deep-merged onto
+ * PrimeReact's provider config):
+ *
+ * - **Unstyled (default posture):** pass nothing, or `value={{ unstyled: true }}`, and
+ *   style the structural markup yourself through the `--cratis-*` token layer, your own
+ *   CSS, Tailwind, or `pt` definitions.
+ * - **Styled:** pass `value={{ theme: { preset } }}` with a `@primeuix/themes` preset
+ *   (e.g. `import Aura from '@primeuix/themes/aura'`) to opt into a token-based styled look.
+ * - Pass `value={{ pt, ptOptions }}` to apply global per-component pass-through.
  *
- * - Pass `unstyled: true` to disable every PrimeReact base style. The wrappers in
- *   this package then render structurally only and pick up all visuals from your
- *   own CSS, Tailwind, or pt definitions.
- * - Pass `pt` / `ptOptions` to apply global per-component pass-through.
+ * **PrimeUI license.** PrimeReact 11 is no longer MIT — its provider verifies a PrimeUI
+ * license on mount and, without one, logs a warning and shows an "Invalid PrimeUI License"
+ * banner (in development *and* production). Supply your key via `value={{ license: '…' }}`
+ * (a free Community tier covers individuals, non-profits, non-commercial OSS, and small
+ * orgs; otherwise a Commercial license is required — see primeui.store). The key flows
+ * straight through to PrimeReact's provider.
  *
  * Consumers who want to talk to PrimeReact directly may still mount
  * {@link PrimeReactProvider} themselves — this component is an optional convenience,
  * not a requirement.
  */
-export const CratisComponentsProvider = ({ value, children }: CratisComponentsProviderProps) => {
+export const CratisComponentsProvider = ({ value, toaster, children }: CratisComponentsProviderProps) => {
     const merged = useMemo<CratisComponentsConfig>(() => mergeCratisComponentsConfig(value), [value]);
 
-    return <PrimeReactProvider value={merged}>{children}</PrimeReactProvider>;
+    return (
+        <PrimeReactProvider {...merged}>
+            {children}
+            {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
+        </PrimeReactProvider>
+    );
 };
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
new file mode 100644
index 0000000..cc0ca0b
--- /dev/null
+++ b/Source/Common/DatePickerInput.tsx
@@ -0,0 +1,122 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { type CSSProperties, type FocusEventHandler } from 'react';
+import { DatePicker } from 'primereact/datepicker';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
+
+/** Props for {@link DatePickerInput}. */
+export interface DatePickerInputProps {
+    /** The selected date, or `null` when nothing is selected. */
+    value: Date | null;
+    /** Invoked with the newly-selected date (or `null`). */
+    onChange: (value: Date | null) => void;
+    /** Invoked when focus leaves the control. */
+    onBlur?: FocusEventHandler<HTMLElement>;
+    /** Renders the control in an invalid (error) state. */
+    invalid?: boolean;
+    /** Placeholder text shown when no date is selected. */
+    placeholder?: string;
+    /** PrimeReact-style date format mask (e.g. `'yy-mm-dd'`). */
+    dateFormat?: string;
+    /** When true, renders a trailing calendar icon button. */
+    showIcon?: boolean;
+    /** When true, includes time selection alongside the date. */
+    showTime?: boolean;
+    /** Hour format used when {@link showTime} is true. */
+    hourFormat?: '12' | '24';
+    /** Earliest selectable date. */
+    minDate?: Date;
+    /** Latest selectable date. */
+    maxDate?: Date;
+    /** Extra CSS class name combined with the default `w-full`. */
+    className?: string;
+    /** Inline style for the wrapping element. */
+    style?: CSSProperties;
+    /** PrimeReact pass-through configuration applied to the underlying DatePicker. */
+    pt?: DatePickerRootProps['pt'];
+    /** PrimeReact pass-through options applied to the underlying DatePicker. */
+    ptOptions?: DatePickerRootProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the underlying DatePicker. */
+    unstyled?: boolean;
+}
+
+/**
+ * A wrapper-owned date (or date-time) picker with a simple `value` / `onChange`
+ * (`Date | null`) surface, assembling PrimeReact 11's compositional
+ * `DatePicker` (Root owns the date model, Input is the text field, and the
+ * popup Calendar/Table auto-render the grid). Shared by {@link CalendarField}
+ * (the command-bound field) and other editors that need a raw date input.
+ *
+ * `onBlur` rides the wrapping `<div>` because React blur bubbles (focusout).
+ */
+export const DatePickerInput = ({
+    value,
+    onChange,
+    onBlur,
+    invalid,
+    placeholder,
+    dateFormat,
+    showIcon,
+    showTime,
+    hourFormat,
+    minDate,
+    maxDate,
+    className,
+    style,
+    pt,
+    ptOptions,
+    unstyled,
+}: DatePickerInputProps) => (
+    <div className={className ? `w-full ${className}` : 'w-full'} style={style} onBlur={onBlur}>
+        <DatePicker.Root
+            value={value}
+            onValueChange={(e: DatePickerRootValueChangeEvent) => onChange(e.value instanceof Date ? e.value : null)}
+            invalid={invalid}
+            dateFormat={dateFormat}
+            showTime={showTime}
+            hourFormat={hourFormat}
+            minDate={minDate}
+            maxDate={maxDate}
+            pt={pt}
+            ptOptions={ptOptions}
+            unstyled={unstyled}>
+            <DatePicker.Input as={InputText} placeholder={placeholder} className="w-full" />
+            {showIcon && (
+                <DatePicker.Trigger>
+                    <i className="pi pi-calendar" />
+                </DatePicker.Trigger>
+            )}
+            <DatePicker.Portal>
+                <DatePicker.Positioner align="start">
+                    <DatePicker.Popup>
+                        <DatePicker.Calendar>
+                            <DatePicker.Header>
+                                <DatePicker.Prev as={Button} iconOnly variant="text" rounded severity="secondary" size="small">
+                                    <i className="pi pi-chevron-left" />
+                                </DatePicker.Prev>
+                                <DatePicker.Title>
+                                    <DatePicker.SelectMonth />
+                                    <DatePicker.SelectYear />
+                                    <DatePicker.Decade />
+                                </DatePicker.Title>
+                                <DatePicker.Next as={Button} iconOnly variant="text" rounded severity="secondary" size="small">
+                                    <i className="pi pi-chevron-right" />
+                                </DatePicker.Next>
+                            </DatePicker.Header>
+                            <DatePicker.Table>
+                                <DatePicker.TableHead />
+                                <DatePicker.TableBody />
+                                <DatePicker.TableBody view="month" />
+                                <DatePicker.TableBody view="year" />
+                            </DatePicker.Table>
+                        </DatePicker.Calendar>
+                        {showTime && <DatePicker.Time />}
+                    </DatePicker.Popup>
+                </DatePicker.Positioner>
+            </DatePicker.Portal>
+        </DatePicker.Root>
+    </div>
+);
diff --git a/Source/Common/Tooltip.css b/Source/Common/Tooltip.css
index 0f9d6a3..2d964f9 100644
--- a/Source/Common/Tooltip.css
+++ b/Source/Common/Tooltip.css
@@ -1,10 +1,21 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
+/* ── Tooltip trigger ─────────────────────────────────────────────────────── */
+.cratis-tooltip-trigger {
+    display: inline-flex;
+}
+
 /* ── Tooltip bubble ──────────────────────────────────────────────────────── */
-.tooltip-bubble {
+.cratis-tooltip-popup {
     background: var(--cratis-surface-100);
     color: var(--cratis-text-color);
     border: 1px solid var(--cratis-surface-border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    font-family: system-ui, sans-serif;
+    max-width: 24rem;
+    z-index: 1100;
 }
diff --git a/Source/Common/Tooltip.stories.tsx b/Source/Common/Tooltip.stories.tsx
new file mode 100644
index 0000000..84e1787
--- /dev/null
+++ b/Source/Common/Tooltip.stories.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+const meta = {
+    title: 'Common/Tooltip',
+    component: Tooltip,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: {
+        content: 'A helpful hint shown on hover',
+        position: 'top',
+        children: <span style={{ padding: '0.5rem 1rem', border: '1px solid var(--cratis-surface-border)', borderRadius: '0.25rem' }}>Hover me</span>,
+    },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Hover the trigger to reveal a portaled tooltip. */
+export const Playground: Story = {};
+
+/** One trigger per side to confirm portaled positioning. */
+export const Positions: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '2rem', padding: '4rem' }}>
+            {(['top', 'right', 'bottom', 'left'] as const).map(position => (
+                <Tooltip key={position} content={`Position: ${position}`} position={position}>
+                    <span style={{ padding: '0.5rem 1rem', border: '1px solid var(--cratis-surface-border)', borderRadius: '0.25rem' }}>
+                        {position}
+                    </span>
+                </Tooltip>
+            ))}
+        </div>
+    ),
+};
+
+/** With no content the child renders on its own — no tooltip attached. */
+export const NoContent: Story = {
+    render: () => (
+        <Tooltip content={undefined}>
+            <span>No tooltip here</span>
+        </Tooltip>
+    ),
+};
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 3bfa617..488c38c 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
+import { Tooltip as PrimeTooltip } from 'primereact/tooltip';
 import './Tooltip.css';
 
 /** Position of the tooltip relative to its trigger element. */
@@ -9,36 +10,59 @@ export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 
 /** Props for the {@link Tooltip} component. */
 export interface TooltipProps {
-    /** The text to display inside the tooltip. */
-    content: string;
+    /**
+     * The text to display inside the tooltip. When empty or omitted, the
+     * children render on their own with no tooltip attached — convenient for
+     * the common `content={condition ? text : undefined}` pattern.
+     */
+    content?: string;
     /** Where the tooltip appears relative to the trigger (default: 'top'). */
     position?: TooltipPosition;
-    /** The element that triggers the tooltip on hover. */
+    /**
+     * Extra class name(s) for the wrapping trigger element. The trigger is an
+     * inline-flex `<span>` by default; pass `w-full` (or similar) when the
+     * child needs to fill its container.
+     */
+    className?: string;
+    /** The element(s) that trigger the tooltip on hover. */
     children: React.ReactNode;
 }
 
-const POSITION_CLASSES: Record<TooltipPosition, string> = {
-    right:  'left-full ml-2 top-1/2 -translate-y-1/2',
-    left:   'right-full mr-2 top-1/2 -translate-y-1/2',
-    top:    'bottom-full mb-2 left-1/2 -translate-x-1/2',
-    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
-};
-
 /**
- * A CSS-only hover tooltip wrapper. Wraps any child element and displays
- * a styled floating label on hover without relying on native browser tooltips.
+ * A hover tooltip wrapper around PrimeReact 11's compositional Tooltip. Wraps
+ * any child element and shows a floating label on hover, portaled to the
+ * document body so it is never clipped by an overflow container (table cells,
+ * dropdowns, scroll regions) — the reason this wrapper exists rather than a
+ * plain CSS `position: absolute` bubble.
+ *
+ * The public API (`content`, `position`, `children`) is preserved from the
+ * previous CSS-only implementation, so existing call sites are unaffected.
+ * This replaces the removed PrimeReact 10 `data-pr-tooltip` directive: wrap the
+ * trigger element instead of tagging it with a `data-pr-tooltip` attribute.
+ *
+ * ```tsx
+ * <Tooltip content="Delete" position="top">
+ *     <i className="pi pi-trash" />
+ * </Tooltip>
+ * ```
  */
-export const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', children }) => (
-    <div className='relative group inline-flex'>
-        {children}
-        <div
-            role='tooltip'
-            className={`tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50
-                text-xs px-2 py-1 rounded
-                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`}
-            style={{ fontFamily: 'system-ui, sans-serif' }}
-        >
-            {content}
-        </div>
-    </div>
-);
+export const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', className, children }) => {
+    if (!content) {
+        return <>{children}</>;
+    }
+
+    return (
+        <PrimeTooltip.Root>
+            <PrimeTooltip.Trigger as="span" className={className ? `cratis-tooltip-trigger ${className}` : 'cratis-tooltip-trigger'}>
+                {children}
+            </PrimeTooltip.Trigger>
+            <PrimeTooltip.Portal>
+                <PrimeTooltip.Positioner side={position} sideOffset={8}>
+                    <PrimeTooltip.Popup className="cratis-tooltip-popup">
+                        {content}
+                    </PrimeTooltip.Popup>
+                </PrimeTooltip.Positioner>
+            </PrimeTooltip.Portal>
+        </PrimeTooltip.Root>
+    );
+};
diff --git a/Source/DataPage/DataPage.stories.tsx b/Source/DataPage/DataPage.stories.tsx
index 4c54200..d3c7c58 100644
--- a/Source/DataPage/DataPage.stories.tsx
+++ b/Source/DataPage/DataPage.stories.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DataPage, MenuItem } from './DataPage';
-import { Column } from 'primereact/column';
+import { Column } from '../DataTables/Column';
 import { QueryFor, QueryResult } from '@cratis/arc/queries';
 
 const meta: Meta<typeof DataPage> = {
@@ -168,9 +168,9 @@ export const WithClientFiltering: Story = {
             >
                 <DataPage.Columns>
                     <Column field="id" header="ID" sortable style={{ width: '10%' }} />
-                    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '30%' }} />
-                    <Column field="email" header="Email" sortable filter filterPlaceholder="Search" style={{ width: '35%' }} />
-                    <Column field="role" header="Role" sortable filter filterPlaceholder="Search" style={{ width: '25%' }} />
+                    <Column field="name" header="Name" sortable filter filterPlaceholder="Filter by name" style={{ width: '30%' }} />
+                    <Column field="email" header="Email" sortable filter filterPlaceholder="Filter by email" style={{ width: '35%' }} />
+                    <Column field="role" header="Role" sortable filter filterPlaceholder="Filter by role" style={{ width: '25%' }} />
                 </DataPage.Columns>
             </DataPage>
         </div>
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 3ce4226..87e4cd7 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -4,22 +4,32 @@
 import { ReactNode, useMemo } from 'react';
 import { Page } from '../Common/Page';
 import React from 'react';
-import { MenuItem as PrimeMenuItem } from 'primereact/menuitem';
-import { Menubar, type MenubarProps } from 'primereact/menubar';
+import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
+import type { ButtonProps } from '@primereact/types/primitive/button';
 import { IObservableQueryFor, IQueryFor, QueryFor } from '@cratis/arc/queries';
 import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
-import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
+import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
 import { DataTableForQuery } from '../DataTables/DataTableForQuery';
+import type { DataTableFilterMeta } from '../DataTables/DataTableFilterMeta';
+import type { DataTableSelectionChangeEvent } from '../DataTables/DataTableSelectionChangeEvent';
 import { Allotment } from 'allotment';
 import { Constructor } from '@cratis/fundamentals';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 /**
- * Props for {@link MenuItem}. Extends PrimeReact's `MenuItem` shape with one
- * Cratis-specific flag.
+ * Props for {@link MenuItem} — a single action in a {@link DataPage}'s
+ * action bar.
  */
-export interface MenuItemProps extends PrimeMenuItem {
+export interface MenuItemProps {
+    /** Icon component rendered before the label (e.g. a react-icons icon). */
+    icon?: React.ComponentType<{ className?: string }>;
+    /** The visible label. */
+    label?: string;
+    /** Invoked when the item is activated. */
+    command?: () => void;
+    /** When true, the item is greyed out regardless of selection. */
+    disabled?: boolean;
     /**
      * When true, the menu item is disabled while no row is selected in the
      * surrounding {@link DataPage}. Use it for context-sensitive actions like
@@ -31,9 +41,8 @@ export interface MenuItemProps extends PrimeMenuItem {
 /**
  * Declarative menu item for use inside `<DataPage.MenuItems>`. Renders nothing
  * directly; the surrounding {@link MenuItems} component reads its props and
- * forwards them to the action `Menubar`.
+ * forwards them to the action menubar.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const MenuItem = (_: MenuItemProps) => {
     return null;
 };
@@ -63,36 +72,34 @@ export interface ColumnProps {
  */
 export const MenuItems = ({ children }: MenuItemsProps) => {
     const context = useDataPageContext();
-
-    const isDisabled = useMemo(() => {
-        return !context.selectedItem;
-    }, [context.selectedItem]);
+    const isDisabled = !context.selectedItem;
 
     const items = useMemo(() => {
-        const menuItems: PrimeMenuItem[] = [];
+        const menuItems: ActionMenuItem[] = [];
         React.Children.forEach(children, (child) => {
-            if (React.isValidElement<MenuItemProps>(child) && child.type == MenuItem) {
+            if (React.isValidElement<MenuItemProps>(child) && child.type === MenuItem) {
                 const Icon = child.props.icon;
-                const menuItem = { ...child.props };
-                menuItem.icon = <Icon className='mr-2' />;
-                menuItem.disabled = isDisabled && child.props.disableOnUnselected;
-                menuItems.push(menuItem);
+                menuItems.push({
+                    label: child.props.label,
+                    command: child.props.command,
+                    icon: Icon ? <Icon className='mr-2' /> : undefined,
+                    disabled: (child.props.disabled ?? false) || (isDisabled && (child.props.disableOnUnselected ?? false)),
+                });
             }
         });
 
         return menuItems;
-    }, [children, context.selectedItem]);
+    }, [children, isDisabled]);
 
     return (
         <div className="px-4 py-2">
-            <Menubar
-                aria-label="Actions"
+            <ActionMenubar
+                aria-label={context.actionsAriaLabel ?? 'Actions'}
                 model={items}
                 className={context.menubarClassName}
                 pt={context.menubarPt}
                 ptOptions={context.menubarPtOptions}
-                unstyled={context.menubarUnstyled}
-            />
+                unstyled={context.menubarUnstyled} />
         </div>);
 };
 
@@ -159,7 +166,7 @@ export interface IDetailsComponentProps<TDataType> {
 
 interface IDataPageContext extends DataPageProps<any, any, any> {
     selectedItem: any;
-    onSelectionChanged: (e: DataTableSelectionSingleChangeEvent<any>) => void;
+    onSelectionChanged: (e: DataTableSelectionChangeEvent<any>) => void;
 }
 
 const DataPageContext = React.createContext<IDataPageContext | null>(null);
@@ -223,7 +230,7 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
     /**
      * Callback for when the selection changes
      */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<any>): void;
+    onSelectionChange?(event: DataTableSelectionChangeEvent<any>): void;
 
     /**
      * Fields to use for global filtering
@@ -236,7 +243,9 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
     defaultFilters?: DataTableFilterMeta;
 
     /**
-     * When true, filtering is performed client-side only
+     * @deprecated No longer toggles behavior. Filtering is always applied
+     * client-side to the loaded page; retained only for source compatibility and
+     * will be removed in a future release.
      */
     clientFiltering?: boolean;
 
@@ -251,27 +260,33 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
     tableClassName?: string;
 
     /** PrimeReact pass-through configuration applied to the inner DataTable. */
-    tablePt?: PrimeDataTableProps<TDataType[]>['pt'];
+    tablePt?: DataTableRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the inner DataTable. */
-    tablePtOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
+    tablePtOptions?: DataTableRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the inner DataTable. */
     tableUnstyled?: boolean;
 
     /**
-     * Extra CSS class name forwarded to the action Menubar root.
+     * Extra CSS class name forwarded to the action menubar root.
      */
     menubarClassName?: string;
 
-    /** PrimeReact pass-through configuration applied to the action Menubar. */
-    menubarPt?: MenubarProps['pt'];
+    /** PrimeReact pass-through configuration applied to the action menubar's buttons. */
+    menubarPt?: ButtonProps['pt'];
 
-    /** PrimeReact pass-through options applied to the action Menubar. */
-    menubarPtOptions?: MenubarProps['ptOptions'];
+    /** PrimeReact pass-through options applied to the action menubar's buttons. */
+    menubarPtOptions?: ButtonProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the action Menubar. */
+    /** When true, disables every base PrimeReact style on the action menubar's buttons. */
     menubarUnstyled?: boolean;
+
+    /**
+     * Accessible name for the action menubar (toolbar). Override to localize.
+     * Defaults to `'Actions'`.
+     */
+    actionsAriaLabel?: string;
 }
 
 /**
@@ -345,11 +360,13 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
  *
  * ## Styling
  *
- * The inner DataTable and Menubar each have their own per-slot props:
+ * The inner DataTable and action toolbar each have their own per-slot props:
  * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
- * `menubarPt` / `menubarUnstyled` / `menubarClassName` for the action
- * menubar. See the [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
- * for the full slot reference.
+ * `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` for
+ * the action toolbar's buttons (in PrimeReact 11 the v10 Menubar is replaced by
+ * a button toolbar, so `menubarPt` targets those buttons). See the
+ * [pass-through cheat sheet](../../Documentation/Styling/pass-through.md) for
+ * the full slot reference.
  *
  * @typeParam TQuery - The query class (proxy generated from a C# read model query).
  * @typeParam TDataType - The row type returned by the query.
@@ -359,7 +376,7 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
 const DataPage = <TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataPageProps<TQuery, TDataType, TArguments>) => {
     const [selectedItem, setSelectedItem] = React.useState(undefined);
 
-    const selectionChanged = (e: DataTableSelectionSingleChangeEvent<any>) => {
+    const selectionChanged = (e: DataTableSelectionChangeEvent<any>) => {
         setSelectedItem(e.value);
         if (props.onSelectionChange) {
             props.onSelectionChange(e);
diff --git a/Source/DataPage/index.ts b/Source/DataPage/index.ts
index a099876..2eca460 100644
--- a/Source/DataPage/index.ts
+++ b/Source/DataPage/index.ts
@@ -2,3 +2,4 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export * from './DataPage';
+export { Column, type ColumnProps } from '../DataTables/Column';
diff --git a/Source/DataTables/Column.tsx b/Source/DataTables/Column.tsx
new file mode 100644
index 0000000..5eaa725
--- /dev/null
+++ b/Source/DataTables/Column.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import type { ColumnFilterDataType } from './ColumnFilterMenu';
+
+/**
+ * Props for {@link Column}.
+ *
+ * @typeParam TData - The row type the column's `body` template receives.
+ */
+export interface ColumnProps<TData = unknown> {
+    /** The row property this column reads by default (when no `body` is given). */
+    field?: string;
+    /** The header content shown at the top of the column. */
+    header?: React.ReactNode;
+    /** A custom cell renderer; receives the row for this cell. */
+    body?: (rowData: TData) => React.ReactNode;
+    /** When true, the column header becomes a sort control. */
+    sortable?: boolean;
+    /** When true, the column header gains a filter-menu affordance. */
+    filter?: boolean;
+    /** The field the filter applies to, when it differs from {@link field}. */
+    filterField?: string;
+    /** Placeholder for the filter value input. */
+    filterPlaceholder?: string;
+    /** The value kind the filter edits (drives match modes + input). Defaults to `'text'`. */
+    dataType?: ColumnFilterDataType;
+    /** Whether the filter menu shows the match-mode selector. Defaults to `true`. */
+    showFilterMatchModes?: boolean;
+    /**
+     * Renders a selection control column (a radio for `single`, a checkbox for
+     * `multiple`) instead of a data column.
+     */
+    selectionMode?: 'single' | 'multiple';
+    /** Inline style for every body cell in the column. */
+    style?: React.CSSProperties;
+    /** Class name for every body cell in the column. */
+    className?: string;
+    /** Inline style for the column's header cell. */
+    headerStyle?: React.CSSProperties;
+    /** Class name for the column's header cell. */
+    headerClassName?: string;
+    /** Inline style applied on top of {@link style} for body cells. */
+    bodyStyle?: React.CSSProperties;
+    /** Class name applied on top of {@link className} for body cells. */
+    bodyClassName?: string;
+}
+
+/**
+ * Declares one column of a Cratis data table (`DataTableForQuery`,
+ * `DataTableForObservableQuery`, `DataPage.Columns`). This is the Cratis-owned
+ * replacement for the removed `primereact/column` — the same `<Column field
+ * header body sortable />` authoring model, mapped internally onto PrimeReact
+ * 11's headless DataTable header/body cells.
+ *
+ * It is a pure marker: the surrounding table reads its props to build the
+ * header and per-row cells, so it renders nothing when mounted on its own.
+ *
+ * ```tsx
+ * <DataTableForQuery query={AllAuthors} emptyMessage="No authors">
+ *     <Column field="name" header="Name" sortable />
+ *     <Column field="email" header="Email" />
+ * </DataTableForQuery>
+ * ```
+ */
+export const Column = <TData = unknown,>(_props: ColumnProps<TData>): React.ReactElement | null => null;
+Column.displayName = 'Column';
diff --git a/Source/DataTables/ColumnFilterMenu.css b/Source/DataTables/ColumnFilterMenu.css
new file mode 100644
index 0000000..cef9261
--- /dev/null
+++ b/Source/DataTables/ColumnFilterMenu.css
@@ -0,0 +1,41 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-filter-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border: none;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    cursor: pointer;
+    border-radius: 0.25rem;
+}
+
+.cratis-filter-trigger:hover {
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
+}
+
+.cratis-filter-trigger--active {
+    color: var(--cratis-primary-color);
+}
+
+.cratis-filter-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 14rem;
+    padding: 0.5rem;
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+
+.cratis-filter-menu-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
new file mode 100644
index 0000000..17ad387
--- /dev/null
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -0,0 +1,140 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { type SyntheticEvent } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Popover } from 'primereact/popover';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import type { InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
+import type { DataTableFilterExposes } from '@primereact/types/primitive/datatable';
+import { Button } from 'primereact/button';
+import { Dropdown } from '../Dropdown/Dropdown';
+import { DatePickerInput } from '../Common/DatePickerInput';
+import './ColumnFilterMenu.css';
+
+/** The value kind a {@link ColumnFilterMenu} edits, which drives the match modes and the input control. */
+export type ColumnFilterDataType = 'text' | 'numeric' | 'date' | 'boolean';
+
+/** Props for {@link ColumnFilterMenu}. */
+export interface ColumnFilterMenuProps {
+    /** The row field this menu filters. */
+    field: string;
+    /** The value kind — selects the match modes and the input control. Defaults to `'text'`. */
+    dataType?: ColumnFilterDataType;
+    /** Placeholder for the value input. */
+    placeholder?: string;
+    /** Whether to show the match-mode selector. Defaults to `true`. */
+    showMatchModes?: boolean;
+}
+
+const BOOLEAN_OPTIONS = [
+    { label: 'True', value: true },
+    { label: 'False', value: false },
+];
+
+/**
+ * The filter affordance for a single data-table column: a filter icon in the
+ * header that opens a popover menu with a match-mode selector, a value input
+ * (text / number / date / boolean), and Clear / Apply actions. Restores the
+ * PrimeReact 10 `filterDisplay="menu"` experience on PrimeReact 11's headless
+ * `DataTable.Filter` state machine — which manages the filter draft and the
+ * actual client-side row filtering, but renders none of the chrome — portaled
+ * through `primereact/popover`.
+ *
+ * Rendered by {@link DataTableCore} inside a `THeadCell` for any `<Column>`
+ * with `filter` set. Must live inside a `DataTable.Root` subtree.
+ */
+export const ColumnFilterMenu = ({ field, dataType = 'text', placeholder, showMatchModes = true }: ColumnFilterMenuProps) => (
+    <DataTable.Filter field={field} display="menu" dataType={dataType} showOperator={false} showAddButton={false}>
+        {(filter: DataTableFilterExposes) => {
+            const commit = (value: unknown, event?: SyntheticEvent) =>
+                filter.onChange(event ?? ({} as SyntheticEvent), value, filter.matchMode);
+
+            const valueInput = (() => {
+                switch (dataType) {
+                    case 'numeric':
+                        return (
+                            <InputNumber.Root
+                                value={(filter.value as number | null) ?? null}
+                                onValueChange={(e: InputNumberRootValueChangeEvent) => commit(e.value)}>
+                                <InputNumber.Input placeholder={placeholder} className="w-full" />
+                            </InputNumber.Root>
+                        );
+                    case 'date':
+                        return (
+                            <DatePickerInput
+                                value={filter.value ? new Date(filter.value as string | number | Date) : null}
+                                onChange={(date) => commit(date)}
+                                showIcon
+                            />
+                        );
+                    case 'boolean':
+                        return (
+                            <Dropdown
+                                value={filter.value}
+                                options={BOOLEAN_OPTIONS}
+                                optionLabel="label"
+                                optionValue="value"
+                                placeholder={placeholder}
+                                showClear
+                                onChange={(e) => commit(e.value)}
+                            />
+                        );
+                    default:
+                        return (
+                            <InputText
+                                value={(filter.value as string) ?? ''}
+                                placeholder={placeholder}
+                                className="w-full"
+                                onChange={(e) => commit(e.target.value, e)}
+                            />
+                        );
+                }
+            })();
+
+            return (
+                <Popover.Root
+                    open={filter.overlayVisible}
+                    onOpenChange={(event) => (event.value ? filter.onShowOverlay() : filter.onHideOverlay())}>
+                    <Popover.Trigger
+                        aria-label={`Filter by ${field}`}
+                        className={filter.isActive ? 'cratis-filter-trigger cratis-filter-trigger--active' : 'cratis-filter-trigger'}>
+                        <i className="pi pi-filter" />
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                        <Popover.Positioner>
+                            <Popover.Popup>
+                                <Popover.Content>
+                                    <div className="cratis-filter-menu">
+                                        {showMatchModes && (
+                                            <Dropdown
+                                                value={filter.matchMode}
+                                                options={filter.matchModeOptions}
+                                                optionLabel="label"
+                                                optionValue="value"
+                                                onChange={(e) => filter.onChange(
+                                                    (e.originalEvent as SyntheticEvent) ?? ({} as SyntheticEvent),
+                                                    filter.value,
+                                                    e.value as string)}
+                                            />
+                                        )}
+                                        {valueInput}
+                                        <div className="cratis-filter-menu-actions">
+                                            <Button variant="outlined" onClick={(e) => filter.onClear(e)}>
+                                                <span>Clear</span>
+                                            </Button>
+                                            <Button onClick={(e) => filter.onApply(e)}>
+                                                <span>Apply</span>
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </Popover.Content>
+                            </Popover.Popup>
+                        </Popover.Positioner>
+                    </Popover.Portal>
+                </Popover.Root>
+            );
+        }}
+    </DataTable.Filter>
+);
diff --git a/Source/DataTables/DataTableCore.css b/Source/DataTables/DataTableCore.css
new file mode 100644
index 0000000..9945ec1
--- /dev/null
+++ b/Source/DataTables/DataTableCore.css
@@ -0,0 +1,13 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-datatable-header-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.cratis-datatable-search {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+}
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
new file mode 100644
index 0000000..e6dc786
--- /dev/null
+++ b/Source/DataTables/DataTableCore.tsx
@@ -0,0 +1,256 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
+import { DataTable as PrimeDataTable } from 'primereact/datatable';
+import { InputText } from 'primereact/inputtext';
+import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
+import type { UseDataTableSelectionEvent, UseDataTableRowMouseEvent, UseDataTableFilterEvent } from '@primereact/types/headless/datatable';
+import type { ColumnProps } from './Column';
+import { ColumnFilterMenu } from './ColumnFilterMenu';
+import { selectionKeysForRow, rowFromSelectionKeys } from './selectionKeys';
+import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
+import type { DataTableFilterMeta } from './DataTableFilterMeta';
+import './DataTableCore.css';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Row-click event surfaced by {@link DataTableCore}.
+ *
+ * @typeParam TData - The row type.
+ */
+export interface DataTableRowClickEvent<TData> {
+    /** The clicked row. */
+    data: TData;
+    /** The row's index in the current page. */
+    index: number;
+}
+
+/**
+ * Props for {@link DataTableCore}.
+ *
+ * @typeParam TData - The row type.
+ */
+export interface DataTableCoreProps<TData extends object> {
+    /** The rows to render (already paged by the caller). */
+    data: TData[];
+    /** `<Column>` elements describing the columns. */
+    children?: ReactNode;
+    /** The row property uniquely identifying each row — required for selection. */
+    dataKey?: string;
+    /** Content shown when there are no rows. */
+    emptyMessage: ReactNode;
+    /** Enables single-row selection by clicking a row. */
+    selectionMode?: 'single';
+    /** Accessible name for each row's selection control. Override to localize. Defaults to `'Select row'`. */
+    selectionAriaLabel?: string;
+    /** The currently-selected row. */
+    selection?: TData | null;
+    /** Invoked when the selected row changes. */
+    onSelectionChange?: (event: DataTableSelectionChangeEvent<TData>) => void;
+    /** Invoked when a row is clicked. */
+    onRowClick?: (event: DataTableRowClickEvent<TData>) => void;
+    /** Computes an extra class name for each row. */
+    rowClassName?: (rowData: TData) => string;
+    /** The fields the global search term is matched against. When set, a search box is shown above the table. */
+    globalFilterFields?: string[];
+    /** Placeholder for the global search box. */
+    globalSearchPlaceholder?: string;
+    /** Initial per-column filter state. */
+    defaultFilters?: DataTableFilterMeta;
+    /** Invoked whenever the per-column filter state changes. */
+    onFilter?: (filters: DataTableFilterMeta) => void;
+    /** Renders the table body in a scroll region of {@link scrollHeight}. */
+    scrollable?: boolean;
+    /** The height of the scroll region when {@link scrollable} is set. */
+    scrollHeight?: string;
+    /** Extra class name for the table root. */
+    className?: string;
+    /** Inline style for the table root. */
+    style?: CSSProperties;
+    /** PrimeReact pass-through configuration for the underlying DataTable. */
+    pt?: DataTableRootProps['pt'];
+    /** PrimeReact pass-through options for the underlying DataTable. */
+    ptOptions?: DataTableRootProps['ptOptions'];
+    /** When true, disables every base PrimeReact style on the DataTable. */
+    unstyled?: boolean;
+}
+
+/** Reads the parsed column definitions from `<Column>` children. */
+const useColumns = (children: ReactNode): React.ReactElement<ColumnProps<any>>[] =>
+    useMemo(
+        () => React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement<ColumnProps<any>>[],
+        [children]
+    );
+
+const renderCellContent = (column: ColumnProps<any>, row: object): ReactNode => {
+    if (column.body) return column.body(row);
+    if (column.field) {
+        const value = (row as Record<string, unknown>)[column.field];
+        return value == null ? '' : String(value);
+    }
+    return null;
+};
+
+/**
+ * The shared, query-agnostic table used by {@link DataTableForQuery},
+ * {@link DataTableForObservableQuery}, and the schema editor. Rebuilds
+ * PrimeReact 10's monolithic `DataTable` on PrimeReact 11's headless
+ * compositional table: it reads `<Column>` children, renders the header and
+ * per-row body cells, and translates PrimeReact 11's key-based selection back
+ * to the row-object API callers expect.
+ *
+ * Paging is intentionally *not* handled here — the query wrappers own paging
+ * through Arc and feed one page of rows in via `data`, so this component only
+ * renders and sorts/filters the current page client-side.
+ *
+ * @typeParam TData - The row type.
+ */
+export const DataTableCore = <TData extends object>({
+    data,
+    children,
+    dataKey,
+    emptyMessage,
+    selectionMode,
+    selectionAriaLabel = 'Select row',
+    selection,
+    onSelectionChange,
+    onRowClick,
+    rowClassName,
+    globalFilterFields,
+    globalSearchPlaceholder = 'Search…',
+    defaultFilters,
+    onFilter,
+    scrollable,
+    scrollHeight,
+    className,
+    style,
+    pt,
+    ptOptions,
+    unstyled,
+}: DataTableCoreProps<TData>) => {
+    const columns = useColumns(children);
+    const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters ?? {});
+    const [globalFilter, setGlobalFilter] = useState<string>('');
+    const showGlobalSearch = !!globalFilterFields && globalFilterFields.length > 0;
+
+    const handleFilter = (event: UseDataTableFilterEvent) => {
+        // PrimeReact's headless filter meta is looser than the typed Cratis
+        // constraint the public API exposes; narrow at this one boundary.
+        const next = event.filters as unknown as DataTableFilterMeta;
+        setFilters(next);
+        onFilter?.(next);
+    };
+
+    const keyOf = (row: TData): string | undefined =>
+        dataKey ? String((row as Record<string, unknown>)[dataKey]) : undefined;
+
+    const selectionKeys = useMemo(() => selectionKeysForRow(selection, dataKey), [selection, dataKey]);
+
+    const handleSelectionChange = (event: UseDataTableSelectionEvent) => {
+        if (!onSelectionChange) return;
+        onSelectionChange({ value: rowFromSelectionKeys(event.value, data, dataKey), originalEvent: event.originalEvent });
+    };
+
+    const handleRowClick = onRowClick
+        ? (event: UseDataTableRowMouseEvent) => onRowClick({ data: event.data as TData, index: event.index })
+        : undefined;
+
+    return (
+        <PrimeDataTable.Root
+            data={data as object[]}
+            dataKey={dataKey}
+            removableSort
+            selectionMode={selectionMode ?? null}
+            selectionKeys={selectionKeys}
+            onSelectionChange={onSelectionChange ? handleSelectionChange : undefined}
+            onRowClick={handleRowClick}
+            filters={filters}
+            onFilter={handleFilter}
+            globalFilter={globalFilter || null}
+            globalFilterFields={globalFilterFields}
+            scrollable={scrollable}
+            scrollHeight={scrollHeight}
+            className={className}
+            style={style}
+            pt={pt}
+            ptOptions={ptOptions}
+            unstyled={unstyled}>
+            {showGlobalSearch && (
+                <div className="cratis-datatable-search">
+                    <InputText
+                        value={globalFilter}
+                        placeholder={globalSearchPlaceholder}
+                        className="w-full"
+                        onChange={(event) => setGlobalFilter(event.target.value)}
+                    />
+                </div>
+            )}
+            <PrimeDataTable.TableContainer>
+                <PrimeDataTable.Table>
+                    <PrimeDataTable.THead>
+                        <PrimeDataTable.THeadRow>
+                            {columns.map((column, index) => (
+                                <PrimeDataTable.THeadCell
+                                    key={index}
+                                    style={column.props.headerStyle ?? column.props.style}
+                                    className={column.props.headerClassName}>
+                                    <div className="cratis-datatable-header-cell">
+                                        {column.props.sortable && column.props.field ? (
+                                            // aria-sort belongs on the column header, not the sort button; PrimeReact 11's
+                                            // Sort part puts it on its role="button" element (invalid ARIA), so strip it here.
+                                            <PrimeDataTable.Sort field={column.props.field} pt={{ root: { 'aria-sort': undefined } }}>
+                                                {column.props.header}
+                                                <PrimeDataTable.SortIndicator match="asc"> ▲</PrimeDataTable.SortIndicator>
+                                                <PrimeDataTable.SortIndicator match="desc"> ▼</PrimeDataTable.SortIndicator>
+                                            </PrimeDataTable.Sort>
+                                        ) : (
+                                            <span>{column.props.header}</span>
+                                        )}
+                                        {column.props.filter && (column.props.filterField ?? column.props.field) && (
+                                            <ColumnFilterMenu
+                                                field={(column.props.filterField ?? column.props.field) as string}
+                                                dataType={column.props.dataType}
+                                                placeholder={column.props.filterPlaceholder}
+                                                showMatchModes={column.props.showFilterMatchModes}
+                                            />
+                                        )}
+                                    </div>
+                                </PrimeDataTable.THeadCell>
+                            ))}
+                        </PrimeDataTable.THeadRow>
+                    </PrimeDataTable.THead>
+                    <PrimeDataTable.TBody>
+                        {({ item, index }) => (
+                            <PrimeDataTable.Row index={index} className={rowClassName?.(item as TData)}>
+                                {columns.map((column, columnIndex) => (
+                                    <PrimeDataTable.Cell
+                                        key={columnIndex}
+                                        style={{ ...column.props.style, ...column.props.bodyStyle }}
+                                        className={column.props.bodyClassName ?? column.props.className}>
+                                        {column.props.selectionMode ? (
+                                            <input
+                                                type="radio"
+                                                readOnly
+                                                aria-label={selectionAriaLabel}
+                                                checked={!!selection && keyOf(item as TData) === keyOf(selection)}
+                                            />
+                                        ) : (
+                                            renderCellContent(column.props, item)
+                                        )}
+                                    </PrimeDataTable.Cell>
+                                ))}
+                            </PrimeDataTable.Row>
+                        )}
+                    </PrimeDataTable.TBody>
+                    <PrimeDataTable.EmptyTBody>
+                        <PrimeDataTable.Row>
+                            <PrimeDataTable.Cell colSpan={Math.max(columns.length, 1)}>{emptyMessage}</PrimeDataTable.Cell>
+                        </PrimeDataTable.Row>
+                    </PrimeDataTable.EmptyTBody>
+                </PrimeDataTable.Table>
+            </PrimeDataTable.TableContainer>
+        </PrimeDataTable.Root>
+    );
+};
diff --git a/Source/DataTables/DataTableFilterMeta.ts b/Source/DataTables/DataTableFilterMeta.ts
new file mode 100644
index 0000000..1b93710
--- /dev/null
+++ b/Source/DataTables/DataTableFilterMeta.ts
@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * One field's filter constraint: the value to match and the match mode
+ * (`'contains'`, `'equals'`, `'gt'`, …). `matchMode` is optional so callers can
+ * seed a value-only filter.
+ */
+export interface DataTableFilterConstraint {
+    /** The value to filter by. */
+    value: unknown;
+    /** How the value is compared. Defaults to the column's default match mode. */
+    matchMode?: string;
+}
+
+/**
+ * Filter state for a Cratis data table, keyed by field name. Replaces
+ * PrimeReact 10's `DataTableFilterMeta` (removed in PrimeReact 11) with a typed
+ * per-field constraint so `defaultFilters` autocompletes and type-checks.
+ */
+export type DataTableFilterMeta = Record<string, DataTableFilterConstraint>;
diff --git a/Source/DataTables/DataTableForObservableQuery.stories.tsx b/Source/DataTables/DataTableForObservableQuery.stories.tsx
index 3f15757..1048ef5 100644
--- a/Source/DataTables/DataTableForObservableQuery.stories.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.stories.tsx
@@ -4,9 +4,10 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DataTableForObservableQuery } from './DataTableForObservableQuery';
-import { Column } from 'primereact/column';
+import { Column } from './Column';
+import { Tag, type TagSeverity } from '../Display/Tag';
 import { ObservableQueryFor, QueryResult, ObservableQuerySubscription } from '@cratis/arc/queries';
-import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
 const meta: Meta<typeof DataTableForObservableQuery> = {
     title: 'DataTables/DataTableForObservableQuery',
@@ -63,29 +64,21 @@ class TasksQuery extends ObservableQueryFor<Task, object> {
     }
 }
 
-const getStatusColor = (status: string) => {
+// Status/priority render as theme-aware Tags with a severity, which stay
+// WCAG-legible on both light and dark surfaces (unlike fixed text colors).
+const getStatusSeverity = (status: string): TagSeverity => {
     switch (status) {
-        case 'done':
-            return 'text-green-600';
-        case 'in-progress':
-            return 'text-blue-600';
-        case 'todo':
-            return 'text-gray-600';
-        default:
-            return '';
+        case 'done': return 'success';
+        case 'in-progress': return 'info';
+        default: return 'secondary';
     }
 };
 
-const getPriorityColor = (priority: string) => {
+const getPrioritySeverity = (priority: string): TagSeverity => {
     switch (priority) {
-        case 'high':
-            return 'text-red-600 font-bold';
-        case 'medium':
-            return 'text-orange-600';
-        case 'low':
-            return 'text-gray-600';
-        default:
-            return '';
+        case 'high': return 'danger';
+        case 'medium': return 'warn';
+        default: return 'secondary';
     }
 };
 
@@ -105,9 +98,7 @@ export const Default: Story = {
                     sortable
                     style={{ width: '20%' }}
                     body={(rowData: Task) => (
-                        <span className={getStatusColor(rowData.status)}>
-                            {rowData.status}
-                        </span>
+                        <Tag severity={getStatusSeverity(rowData.status)} value={rowData.status} />
                     )}
                 />
                 <Column
@@ -116,9 +107,7 @@ export const Default: Story = {
                     sortable
                     style={{ width: '15%' }}
                     body={(rowData: Task) => (
-                        <span className={getPriorityColor(rowData.priority)}>
-                            {rowData.priority}
-                        </span>
+                        <Tag severity={getPrioritySeverity(rowData.priority)} value={rowData.priority} />
                     )}
                 />
                 <Column field="assignee" header="Assignee" sortable style={{ width: '20%' }} />
@@ -138,7 +127,7 @@ export const WithSelection: Story = {
                     emptyMessage="No tasks found"
                     dataKey="id"
                     selection={selectedTask}
-                    onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Task[]>) => setSelectedTask(e.value as Task)}
+                    onSelectionChange={(e: DataTableSelectionChangeEvent<Task>) => setSelectedTask(e.value ?? undefined)}
                 >
                     <Column selectionMode="single" headerStyle={{ width: '3rem' }} />
                     <Column field="id" header="ID" sortable style={{ width: '10%' }} />
@@ -149,9 +138,7 @@ export const WithSelection: Story = {
                         sortable
                         style={{ width: '20%' }}
                         body={(rowData: Task) => (
-                            <span className={getStatusColor(rowData.status)}>
-                                {rowData.status}
-                            </span>
+                            <Tag severity={getStatusSeverity(rowData.status)} value={rowData.status} />
                         )}
                     />
                     <Column field="assignee" header="Assignee" sortable style={{ width: '20%' }} />
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 5a9008d..40fac51 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -1,12 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
-import { Paginator, type PaginatorProps } from 'primereact/paginator';
+import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
 import { Constructor } from '@cratis/fundamentals';
 import { IObservableQueryFor, Paging } from '@cratis/arc/queries';
 import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
 import { ReactNode, useState, useRef, useEffect } from 'react';
+import { DataTableCore } from './DataTableCore';
+import { TablePaginator, type TablePaginatorProps } from './TablePaginator';
+import type { DataTableFilterMeta } from './DataTableFilterMeta';
+import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
 /**
  * Props for {@link DataTableForObservableQuery}.
@@ -17,7 +20,7 @@ import { ReactNode, useState, useRef, useEffect } from 'react';
  */
 export interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {
     /**
-     * Children to render
+     * Children to render — `<Column>` elements describing the visible columns.
      */
     children?: ReactNode;
 
@@ -49,7 +52,7 @@ export interface DataTableForObservableQueryProps<TQuery extends IObservableQuer
     /**
      * Callback for when the selection changes
      */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;
+    onSelectionChange?(event: DataTableSelectionChangeEvent<TDataType>): void;
 
     /**
      * Fields to use for global filtering
@@ -62,109 +65,75 @@ export interface DataTableForObservableQueryProps<TQuery extends IObservableQuer
     defaultFilters?: DataTableFilterMeta;
 
     /**
-     * Enable client-side filtering for the data table
+     * @deprecated No longer toggles behavior. Filtering (`<Column filter>` and the
+     * global search) is always applied client-side to the loaded page; this flag
+     * is retained only for source compatibility and will be removed in a future
+     * release.
      */
     clientFiltering?: boolean;
 
     /**
-     * Extra CSS class name forwarded to the underlying PrimeReact DataTable root.
+     * Extra CSS class name forwarded to the underlying DataTable root.
      */
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying DataTable. */
-    pt?: PrimeDataTableProps<TDataType[]>['pt'];
+    pt?: DataTableRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying DataTable. */
-    ptOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
+    ptOptions?: DataTableRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying DataTable. */
     unstyled?: boolean;
 
-    /** PrimeReact pass-through configuration applied to the inner Paginator. */
-    paginatorPt?: PaginatorProps['pt'];
+    /** Extra CSS class name forwarded to the paginator. */
+    paginatorClassName?: string;
 
-    /** PrimeReact pass-through options applied to the inner Paginator. */
-    paginatorPtOptions?: PaginatorProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the inner Paginator. */
-    paginatorUnstyled?: boolean;
+    /** Accessible names for the paginator controls. Override any to localize. */
+    paginatorAriaLabels?: TablePaginatorProps['ariaLabels'];
 }
 
 const paging = new Paging(0, 20);
 
 /**
- * A paged data table bound to a Cratis Arc **observable** query
+ * A paged data table bound to a real-time Cratis Arc observable query
  * (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
- * `useObservableQueryWithPaging` from `@cratis/arc.react/queries`, which
- * opens a WebSocket connection to the backend and re-renders the table
- * automatically whenever the underlying read model changes server-side.
- *
- * ## What `TQuery` is
- *
- * `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
- * generator from a C# read model's static observable query method (one
- * that returns `ISubject<TDataType>` on the backend). The proxy hooks the
- * WebSocket subscription up; you only deal with the resulting React data.
- *
- * ## What's unique
- *
- * - **Real-time updates**: server-side projection writes flow into the
- *   table within the same render cycle, with no manual polling or refresh
- *   button. The connection re-subscribes automatically when
- *   `queryArguments` change.
- * - **Resize-aware scrollable height**: the wrapper observes its container
- *   via `ResizeObserver` and adjusts the inner DataTable height to fit,
- *   so the table behaves correctly inside flex layouts (it never overflows
- *   beyond its parent or shrinks below 200px).
- * - **Lazy paging + optional client filtering**: same modes as
- *   {@link DataTableForQuery}, but the page is re-issued through the
- *   observable subscription when the user pages.
- *
- * Use {@link DataTableForQuery} for snapshot queries that don't need live
- * updates. Use {@link DataPage} for a higher-level layout that combines
- * this table with a menubar, selection, and a details pane.
+ * `useObservableQueryWithPaging`, so the table re-renders automatically as the
+ * underlying read model changes server-side. Rows render through the headless
+ * {@link DataTableCore} inside an internally-scrolling region that resizes to
+ * fill its container.
  *
  * ## Children
  *
- * Children are PrimeReact `<Column>` elements — same as
- * {@link DataTableForQuery}.
+ * Children are Cratis `<Column>` elements describing the visible columns.
  *
  * ```tsx
- * import { DataTableForObservableQuery } from '@cratis/components/DataTables';
- * import { Column } from 'primereact/column';
- * import { ActiveSessions } from './ActiveSessions';   // proxy from C#
+ * import { DataTableForObservableQuery, Column } from '@cratis/components/DataTables';
+ * import { AllTasks } from './AllTasks';     // observable proxy from C#
  *
- * <DataTableForObservableQuery
- *     query={ActiveSessions}
- *     emptyMessage="No active sessions">
- *     <Column field="userName"  header="User" />
- *     <Column field="startedAt" header="Started" />
+ * <DataTableForObservableQuery query={AllTasks} emptyMessage="No tasks">
+ *     <Column field="title" header="Title" sortable />
+ *     <Column field="assignee" header="Assignee" />
  * </DataTableForObservableQuery>
  * ```
  *
- * Rows appear and disappear in this table as users log in / log out
- * server-side — no manual refresh required.
- *
- * ## Styling
+ * Use {@link DataTableForQuery} for one-shot snapshot queries. Use
+ * {@link DataPage} for a higher-level layout that combines this table with
+ * an action menubar, selection, and a details pane.
  *
- * Identical to {@link DataTableForQuery}: `pt` / `ptOptions` / `unstyled` /
- * `className` target the inner DataTable; `paginatorPt` and friends target
- * the inner Paginator. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
- *
- * @typeParam TQuery - The observable query class (proxy generated from C# `IObservableQueryFor`).
+ * @typeParam TQuery - The query class (proxy generated from C# `IObservableQueryFor`).
  * @typeParam TDataType - The row type returned by the query.
  * @typeParam TArguments - The query's argument object type.
  * @param props - {@link DataTableForObservableQueryProps}.
  */
 export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);
     const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);
     const containerRef = useRef<HTMLDivElement>(null);
     const [tableHeight, setTableHeight] = useState<number>(600);
     const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-    const isClientFiltering = props.clientFiltering === true;
-    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    const totalItems = result.paging.totalItems;
+    const pageCount = result.paging.totalPages;
+    const showPaginator = totalItems > 0 && pageCount > 1;
 
     useEffect(() => {
         if (!containerRef.current) return;
@@ -178,7 +147,7 @@ export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<T
                 for (const entry of entries) {
                     const containerHeight = entry.contentRect.height;
                     if (containerHeight > 0) {
-                        const paginatorHeight = result.paging.totalItems > 0 ? 56 : 0;
+                        const paginatorHeight = showPaginator ? 56 : 0;
                         const calculatedHeight = containerHeight - paginatorHeight - 2;
                         const newHeight = Math.max(calculatedHeight, 200);
 
@@ -201,7 +170,7 @@ export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<T
             }
             resizeObserver.disconnect();
         };
-    }, [result.paging.totalItems]);
+    }, [showPaginator]);
 
     return (
         <div
@@ -215,45 +184,37 @@ export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<T
                 overflow: 'hidden'
             }}>
             <div style={{ height: `${tableHeight}px`, overflow: 'hidden' }}>
-                <DataTable
-                    value={result.data as unknown as object[]}
-                    lazy={!isClientFiltering}
-                    rows={paging.pageSize}
-                    totalRecords={totalRecords}
-                    scrollable
-                    scrollHeight='100%'
+                <DataTableCore<TDataType>
+                    data={result.data as unknown as TDataType[]}
+                    dataKey={props.dataKey}
+                    emptyMessage={props.emptyMessage}
                     selectionMode='single'
                     selection={props.selection}
                     onSelectionChange={props.onSelectionChange}
-                    dataKey={props.dataKey}
-                    filters={filters}
-                    filterDisplay='menu'
-                    onFilter={(e) => {
-                        setFilters(e.filters);
-                        if (isClientFiltering) {
-                            const filteredValue = e.filteredValue as unknown[] | undefined;
-                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
-                        }
-                    }}
                     globalFilterFields={props.globalFilterFields}
-                    emptyMessage={props.emptyMessage}
+                    defaultFilters={props.defaultFilters}
+                    scrollable
+                    scrollHeight='100%'
                     className={props.className}
+                    style={{ minWidth: '100%' }}
                     pt={props.pt}
                     ptOptions={props.ptOptions}
                     unstyled={props.unstyled}>
                     {props.children}
-                </DataTable>
+                </DataTableCore>
             </div>
-            {result.paging.totalItems > 0 && (
-                <div style={{ borderTop: '1px solid var(--cratis-surface-border)' }}>
-                    <Paginator
-                        first={result.paging.page * paging.pageSize}
-                        rows={paging.pageSize}
-                        totalRecords={result.paging.totalItems}
-                        onPageChange={(e) => setPage(e.page)}
-                        pt={props.paginatorPt}
-                        ptOptions={props.paginatorPtOptions}
-                        unstyled={props.paginatorUnstyled}
+
+            {showPaginator && (
+                <div style={{ borderTop: '1px solid var(--cratis-surface-border)', flexShrink: 0 }}>
+                    <TablePaginator
+                        page={result.paging.page}
+                        pageCount={pageCount}
+                        onPageChange={setPage}
+                        totalItems={totalItems}
+                        pageSize={paging.pageSize}
+                        className={props.paginatorClassName}
+
+                        ariaLabels={props.paginatorAriaLabels}
                     />
                 </div>
             )}
diff --git a/Source/DataTables/DataTableForQuery.stories.tsx b/Source/DataTables/DataTableForQuery.stories.tsx
index 85020ad..67813a2 100644
--- a/Source/DataTables/DataTableForQuery.stories.tsx
+++ b/Source/DataTables/DataTableForQuery.stories.tsx
@@ -4,9 +4,10 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DataTableForQuery } from './DataTableForQuery';
-import { Column } from 'primereact/column';
+import { Column } from './Column';
+import { Tag } from '../Display/Tag';
 import { QueryFor, QueryResult } from '@cratis/arc/queries';
-import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
 const meta: Meta<typeof DataTableForQuery> = {
     title: 'DataTables/DataTableForQuery',
@@ -69,10 +70,11 @@ export const Default: Story = {
                 query={ProductsQuery}
                 emptyMessage="No products found"
                 dataKey="id"
+                globalFilterFields={['name', 'category']}
             >
                 <Column field="id" header="ID" sortable style={{ width: '10%' }} />
-                <Column field="name" header="Product Name" sortable style={{ width: '30%' }} />
-                <Column field="category" header="Category" sortable style={{ width: '20%' }} />
+                <Column field="name" header="Product Name" sortable filter filterPlaceholder="Filter by name" style={{ width: '30%' }} />
+                <Column field="category" header="Category" sortable filter filterPlaceholder="Filter by category" style={{ width: '20%' }} />
                 <Column 
                     field="price" 
                     header="Price" 
@@ -86,9 +88,10 @@ export const Default: Story = {
                     sortable 
                     style={{ width: '20%' }}
                     body={(rowData: Product) => (
-                        <span className={rowData.inStock ? 'text-green-600' : 'text-red-600'}>
-                            {rowData.inStock ? 'Yes' : 'No'}
-                        </span>
+                        <Tag
+                            severity={rowData.inStock ? 'success' : 'danger'}
+                            value={rowData.inStock ? 'In stock' : 'Out of stock'}
+                        />
                     )}
                 />
             </DataTableForQuery>
@@ -107,7 +110,7 @@ export const WithSelection: Story = {
                     emptyMessage="No products found"
                     dataKey="id"
                     selection={selectedProduct}
-                    onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelectedProduct(e.value as Product)}
+                    onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelectedProduct(e.value ?? undefined)}
                 >
                     <Column selectionMode="single" headerStyle={{ width: '3rem' }} />
                     <Column field="id" header="ID" sortable style={{ width: '10%' }} />
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index 1ff309b..c8e2891 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -1,12 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
-import { Paginator, type PaginatorProps } from 'primereact/paginator';
+import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
 import { Constructor } from '@cratis/fundamentals';
 import { IQueryFor, Paging } from '@cratis/arc/queries';
 import { useQueryWithPaging } from '@cratis/arc.react/queries';
-import { ReactNode, useState, useRef } from 'react';
+import { ReactNode } from 'react';
+import { DataTableCore } from './DataTableCore';
+import { TablePaginator, type TablePaginatorProps } from './TablePaginator';
+import type { DataTableFilterMeta } from './DataTableFilterMeta';
+import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
 /**
  * Props for {@link DataTableForQuery}.
@@ -17,7 +20,7 @@ import { ReactNode, useState, useRef } from 'react';
  */
 export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {
     /**
-     * Children to render
+     * Children to render — `<Column>` elements describing the visible columns.
      */
     children?: ReactNode;
 
@@ -49,7 +52,7 @@ export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArg
     /**
      * Callback for when the selection changes
      */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;
+    onSelectionChange?(event: DataTableSelectionChangeEvent<TDataType>): void;
 
     /**
      * Fields to use for global filtering
@@ -62,32 +65,32 @@ export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArg
     defaultFilters?: DataTableFilterMeta;
 
     /**
-     * Enable client-side filtering for the data table
+     * @deprecated No longer toggles behavior. Filtering (`<Column filter>` and the
+     * global search) is always applied client-side to the loaded page; this flag
+     * is retained only for source compatibility and will be removed in a future
+     * release.
      */
     clientFiltering?: boolean;
 
     /**
-     * Extra CSS class name forwarded to the underlying PrimeReact DataTable root.
+     * Extra CSS class name forwarded to the underlying DataTable root.
      */
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying DataTable. */
-    pt?: PrimeDataTableProps<TDataType[]>['pt'];
+    pt?: DataTableRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying DataTable. */
-    ptOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
+    ptOptions?: DataTableRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying DataTable. */
     unstyled?: boolean;
 
-    /** PrimeReact pass-through configuration applied to the inner Paginator. */
-    paginatorPt?: PaginatorProps['pt'];
+    /** Extra CSS class name forwarded to the paginator. */
+    paginatorClassName?: string;
 
-    /** PrimeReact pass-through options applied to the inner Paginator. */
-    paginatorPtOptions?: PaginatorProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the inner Paginator. */
-    paginatorUnstyled?: boolean;
+    /** Accessible names for the paginator controls. Override any to localize. */
+    paginatorAriaLabels?: TablePaginatorProps['ariaLabels'];
 }
 
 const paging = new Paging(0, 20);
@@ -96,8 +99,8 @@ const paging = new Paging(0, 20);
  * A paged data table bound to a snapshot Cratis Arc query
  * (`IQueryFor<TDataType, TArguments>`). Subscribes via
  * `useQueryWithPaging` from `@cratis/arc.react/queries`, renders the result
- * page in a PrimeReact `DataTable`, and shows a `Paginator` when the result
- * set exceeds one page.
+ * page through the headless {@link DataTableCore}, and shows a
+ * {@link TablePaginator} when the result set exceeds one page.
  *
  * ## What `TQuery` is
  *
@@ -106,33 +109,13 @@ const paging = new Paging(0, 20);
  * writes a `.ts` file per query with the right return type and a `use()`
  * hook; importing the class is all the connection-to-the-backend you need.
  *
- * ## What's unique
- *
- * - **Lazy paging**: the table runs in PrimeReact's `lazy` mode by default
- *   so the server returns one page at a time. The Paginator's
- *   `onPageChange` calls back into the Arc hook to fetch the next page.
- * - **Client-side filtering toggle**: pass `clientFiltering` to keep the
- *   page-fetched rows in the browser and filter locally — useful for
- *   small result sets where you want PrimeReact's filter UI but don't want
- *   to round-trip every keystroke.
- * - **Default filter state**: `defaultFilters` seeds the table's filter
- *   meta on first render so saved or URL-encoded filter state can be
- *   rehydrated.
- *
- * Use {@link DataTableForObservableQuery} for queries that should update in
- * real time as the underlying read model changes server-side. Use
- * {@link DataPage} for a higher-level layout that combines this table with
- * a menubar, selection, and a details pane.
- *
  * ## Children
  *
- * Children are PrimeReact `<Column>` elements describing the visible
- * columns — sorting, filtering, custom body templates, everything
- * PrimeReact's `<Column>` supports.
+ * Children are Cratis `<Column>` elements describing the visible columns —
+ * `field`, `header`, custom `body` templates, and `sortable`.
  *
  * ```tsx
- * import { DataTableForQuery } from '@cratis/components/DataTables';
- * import { Column } from 'primereact/column';
+ * import { DataTableForQuery, Column } from '@cratis/components/DataTables';
  * import { AllAuthors } from './AllAuthors';     // proxy from C#
  *
  * <DataTableForQuery query={AllAuthors} emptyMessage="No authors">
@@ -141,12 +124,15 @@ const paging = new Paging(0, 20);
  * </DataTableForQuery>
  * ```
  *
+ * Use {@link DataTableForObservableQuery} for queries that should update in
+ * real time as the underlying read model changes server-side. Use
+ * {@link DataPage} for a higher-level layout that combines this table with
+ * an action menubar, selection, and a details pane.
+ *
  * ## Styling
  *
  * Forward `pt` / `ptOptions` / `unstyled` / `className` to the underlying
- * PrimeReact DataTable. Use `paginatorPt` / `paginatorPtOptions` /
- * `paginatorUnstyled` to style the inner Paginator independently. See
- * [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
+ * DataTable. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
  *
  * @typeParam TQuery - The query class (proxy generated from C# `IQueryFor`).
  * @typeParam TDataType - The row type returned by the query.
@@ -154,16 +140,12 @@ const paging = new Paging(0, 20);
  * @param props - {@link DataTableForQueryProps}.
  */
 export const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);
     const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const isClientFiltering = props.clientFiltering === true;
-    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    const totalItems = result.paging.totalItems;
+    const pageCount = result.paging.totalPages;
 
     return (
         <div
-            ref={containerRef}
             style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -173,45 +155,34 @@ export const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments
                 overflow: 'hidden'
             }}>
             <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
-                <DataTable
-                    value={result.data as unknown as object[]}
-                    lazy={!isClientFiltering}
-                    rows={paging.pageSize}
-                    totalRecords={totalRecords}
+                <DataTableCore<TDataType>
+                    data={result.data as unknown as TDataType[]}
+                    dataKey={props.dataKey}
+                    emptyMessage={props.emptyMessage}
                     selectionMode='single'
                     selection={props.selection}
                     onSelectionChange={props.onSelectionChange}
-                    dataKey={props.dataKey}
-                    filters={filters}
-                    filterDisplay='menu'
-                    onFilter={(e) => {
-                        setFilters(e.filters);
-                        if (isClientFiltering) {
-                            const filteredValue = e.filteredValue as unknown[] | undefined;
-                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
-                        }
-                    }}
                     globalFilterFields={props.globalFilterFields}
-                    emptyMessage={props.emptyMessage}
-                    style={{ minWidth: '100%' }}
+                    defaultFilters={props.defaultFilters}
                     className={props.className}
+                    style={{ minWidth: '100%' }}
                     pt={props.pt}
                     ptOptions={props.ptOptions}
                     unstyled={props.unstyled}>
                     {props.children}
-                </DataTable>
+                </DataTableCore>
             </div>
 
-            {result.paging.totalItems > 0 && (
+            {totalItems > 0 && pageCount > 1 && (
                 <div style={{ borderTop: '1px solid var(--cratis-surface-border)', flexShrink: 0 }}>
-                    <Paginator
-                        first={result.paging.page * paging.pageSize}
-                        rows={paging.pageSize}
-                        totalRecords={result.paging.totalItems}
-                        onPageChange={(e) => setPage(e.page)}
-                        pt={props.paginatorPt}
-                        ptOptions={props.paginatorPtOptions}
-                        unstyled={props.paginatorUnstyled}
+                    <TablePaginator
+                        page={result.paging.page}
+                        pageCount={pageCount}
+                        onPageChange={setPage}
+                        totalItems={totalItems}
+                        pageSize={paging.pageSize}
+                        className={props.paginatorClassName}
+                        ariaLabels={props.paginatorAriaLabels}
                     />
                 </div>
             )}
diff --git a/Source/DataTables/DataTableSelectionChangeEvent.ts b/Source/DataTables/DataTableSelectionChangeEvent.ts
new file mode 100644
index 0000000..163e9d9
--- /dev/null
+++ b/Source/DataTables/DataTableSelectionChangeEvent.ts
@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { SyntheticEvent } from 'react';
+
+/**
+ * Fired when the selected row of a Cratis data table changes. Replaces
+ * PrimeReact 10's `DataTableSelectionSingleChangeEvent` (removed in
+ * PrimeReact 11, which models selection by key rather than by row object).
+ * The `value` field is preserved so existing `event.value` call sites keep
+ * working.
+ *
+ * @typeParam TData - The row type.
+ */
+export interface DataTableSelectionChangeEvent<TData> {
+    /** The newly-selected row, or `null` when the selection was cleared. */
+    value: TData | null;
+    /** The DOM event that triggered the change, when available. */
+    originalEvent?: SyntheticEvent;
+}
diff --git a/Source/DataTables/TablePaginator.css b/Source/DataTables/TablePaginator.css
new file mode 100644
index 0000000..a6b5eda
--- /dev/null
+++ b/Source/DataTables/TablePaginator.css
@@ -0,0 +1,23 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-table-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.25rem;
+}
+
+.cratis-table-paginator-info {
+    font-size: 0.875rem;
+    color: var(--cratis-text-color-secondary);
+    padding: 0 0.5rem;
+}
+
+.cratis-table-paginator-range {
+    font-size: 0.8125rem;
+    color: var(--cratis-text-color-secondary);
+    margin-right: auto;
+    padding: 0 0.5rem;
+}
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
new file mode 100644
index 0000000..e0063b5
--- /dev/null
+++ b/Source/DataTables/TablePaginator.tsx
@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button } from 'primereact/button';
+import { paginatorRange } from './paginatorRange';
+import './TablePaginator.css';
+
+/** Props for {@link TablePaginator}. */
+export interface TablePaginatorProps {
+    /** The current page, zero-based. */
+    page: number;
+    /** The total number of pages. */
+    pageCount: number;
+    /** Invoked with the requested zero-based page. */
+    onPageChange: (page: number) => void;
+    /** Total number of records across all pages — enables the "X–Y of Z" range report. */
+    totalItems?: number;
+    /** Rows per page — enables the "X–Y of Z" range report. */
+    pageSize?: number;
+    /** Accessible names for the paginator and its controls. Override any to localize. */
+    ariaLabels?: {
+        navigation?: string;
+        first?: string;
+        previous?: string;
+        next?: string;
+        last?: string;
+    };
+    /** Extra class name for the paginator container. */
+    className?: string;
+}
+
+/**
+ * A minimal first/previous/next/last paginator. PrimeReact 11's `Paginator`
+ * is a headless compositional slot rather than a ready-made control, and the
+ * Cratis data tables drive paging through Arc's paging hook rather than the
+ * table's internal pagination — so this renders the page controls wired to a
+ * simple `onPageChange(pageIndex)` callback.
+ */
+export const TablePaginator = ({ page, pageCount, onPageChange, totalItems, pageSize, ariaLabels, className }: TablePaginatorProps) => {
+    const isFirst = page <= 0;
+    const isLast = page >= pageCount - 1;
+    const rangeReport = paginatorRange(page, pageSize, totalItems);
+    // English defaults; a consumer overrides any of these to localize.
+    const labels = { navigation: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page', ...ariaLabels };
+
+    return (
+        <div
+            role="navigation"
+            aria-label={labels.navigation}
+            className={className ? `cratis-table-paginator ${className}` : 'cratis-table-paginator'}>
+            {rangeReport && <span className="cratis-table-paginator-range">{rangeReport}</span>}
+            <Button variant="text" disabled={isFirst} onClick={() => onPageChange(0)} aria-label={labels.first}>
+                <i className="pi pi-angle-double-left" />
+            </Button>
+            <Button variant="text" disabled={isFirst} onClick={() => onPageChange(page - 1)} aria-label={labels.previous}>
+                <i className="pi pi-angle-left" />
+            </Button>
+            <span className="cratis-table-paginator-info">{page + 1} / {Math.max(pageCount, 1)}</span>
+            <Button variant="text" disabled={isLast} onClick={() => onPageChange(page + 1)} aria-label={labels.next}>
+                <i className="pi pi-angle-right" />
+            </Button>
+            <Button variant="text" disabled={isLast} onClick={() => onPageChange(pageCount - 1)} aria-label={labels.last}>
+                <i className="pi pi-angle-double-right" />
+            </Button>
+        </div>
+    );
+};
diff --git a/Source/DataTables/for_paginatorRange/when_formatting_the_range.ts b/Source/DataTables/for_paginatorRange/when_formatting_the_range.ts
new file mode 100644
index 0000000..bb174e6
--- /dev/null
+++ b/Source/DataTables/for_paginatorRange/when_formatting_the_range.ts
@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { paginatorRange } from '../paginatorRange';
+
+describe('when formatting the paginator range on the first page', () => {
+    it('should report the first page span', () => {
+        (paginatorRange(0, 20, 48) ?? '').should.equal('1–20 of 48');
+    });
+});
+
+describe('when formatting the paginator range on the last partial page', () => {
+    it('should clamp the end to the total', () => {
+        (paginatorRange(2, 20, 48) ?? '').should.equal('41–48 of 48');
+    });
+});
+
+describe('when formatting the paginator range with no items', () => {
+    it('should return undefined', () => {
+        (paginatorRange(0, 20, 0) === undefined).should.be.true;
+    });
+});
+
+describe('when formatting the paginator range with unknown totals', () => {
+    it('should return undefined', () => {
+        (paginatorRange(0, undefined, undefined) === undefined).should.be.true;
+    });
+});
diff --git a/Source/DataTables/for_selectionKeys/when_building_keys_for_a_row.ts b/Source/DataTables/for_selectionKeys/when_building_keys_for_a_row.ts
new file mode 100644
index 0000000..07f921b
--- /dev/null
+++ b/Source/DataTables/for_selectionKeys/when_building_keys_for_a_row.ts
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { selectionKeysForRow } from '../selectionKeys';
+
+interface Row { id: number; name: string; }
+
+describe('when building selection keys for a selected row', () => {
+    let keys: Record<string, boolean>;
+
+    beforeEach(() => {
+        keys = selectionKeysForRow<Row>({ id: 7, name: 'Bob' }, 'id');
+    });
+
+    it('should mark the stringified dataKey value as selected', () => {
+        keys['7'].should.be.true;
+    });
+
+    it('should contain exactly one key', () => {
+        Object.keys(keys).should.have.lengthOf(1);
+    });
+});
+
+describe('when building selection keys with nothing selected', () => {
+    it('should return an empty map', () => {
+        Object.keys(selectionKeysForRow<Row>(null, 'id')).should.have.lengthOf(0);
+    });
+});
+
+describe('when building selection keys without a dataKey', () => {
+    it('should return an empty map', () => {
+        Object.keys(selectionKeysForRow<Row>({ id: 7, name: 'Bob' }, undefined)).should.have.lengthOf(0);
+    });
+});
diff --git a/Source/DataTables/for_selectionKeys/when_resolving_a_row_from_keys.ts b/Source/DataTables/for_selectionKeys/when_resolving_a_row_from_keys.ts
new file mode 100644
index 0000000..ac1e44a
--- /dev/null
+++ b/Source/DataTables/for_selectionKeys/when_resolving_a_row_from_keys.ts
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { rowFromSelectionKeys } from '../selectionKeys';
+
+interface Row { id: number; name: string; }
+
+const data: Row[] = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Carol' }];
+
+describe('when resolving a row from a selection-keys map with a selected key', () => {
+    let row: Row | null;
+
+    beforeEach(() => {
+        row = rowFromSelectionKeys<Row>({ '2': true }, data, 'id');
+    });
+
+    it('should return the matching row', () => {
+        (row?.name ?? '').should.equal('Bob');
+    });
+});
+
+describe('when resolving a row from a selection-keys map with no selected key', () => {
+    it('should return null', () => {
+        const result = rowFromSelectionKeys<Row>({ '2': false }, data, 'id');
+        (result === null).should.be.true;
+    });
+});
+
+describe('when resolving a row from a selection-keys map whose key is not in the data', () => {
+    it('should return null', () => {
+        const result = rowFromSelectionKeys<Row>({ '99': true }, data, 'id');
+        (result === null).should.be.true;
+    });
+});
diff --git a/Source/DataTables/index.ts b/Source/DataTables/index.ts
index c9d4a93..12be183 100644
--- a/Source/DataTables/index.ts
+++ b/Source/DataTables/index.ts
@@ -3,3 +3,7 @@
 
 export * from './DataTableForQuery';
 export * from './DataTableForObservableQuery';
+export * from './Column';
+export * from './ColumnFilterMenu';
+export * from './DataTableSelectionChangeEvent';
+export * from './DataTableFilterMeta';
diff --git a/Source/DataTables/paginatorRange.ts b/Source/DataTables/paginatorRange.ts
new file mode 100644
index 0000000..7729d99
--- /dev/null
+++ b/Source/DataTables/paginatorRange.ts
@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Formats the "X–Y of Z" range report for a zero-based page, or `undefined`
+ * when the totals are unknown or there are no records. The end is clamped to
+ * the total so the last (partial) page reports correctly.
+ *
+ * @param page - Zero-based current page.
+ * @param pageSize - Rows per page.
+ * @param totalItems - Total records across all pages.
+ */
+export function paginatorRange(page: number, pageSize: number | undefined, totalItems: number | undefined): string | undefined {
+    if (totalItems === undefined || pageSize === undefined || totalItems <= 0) return undefined;
+    const start = page * pageSize + 1;
+    const end = Math.min((page + 1) * pageSize, totalItems);
+    return `${start}–${end} of ${totalItems}`;
+}
diff --git a/Source/DataTables/selectionKeys.ts b/Source/DataTables/selectionKeys.ts
new file mode 100644
index 0000000..61e1c25
--- /dev/null
+++ b/Source/DataTables/selectionKeys.ts
@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { SelectionKeys } from '@primereact/types/headless/datatable';
+
+/**
+ * Builds PrimeReact 11's key-based selection map for a single selected row —
+ * `{ [String(row[dataKey])]: true }` — or an empty map when nothing is
+ * selected or no `dataKey` is set. This is the write side of the object↔key
+ * translation the Cratis tables use to keep a row-object selection API over
+ * v11's key-based model.
+ *
+ * @typeParam TData - The row type.
+ */
+export function selectionKeysForRow<TData extends object>(
+    selection: TData | null | undefined,
+    dataKey: string | undefined
+): SelectionKeys {
+    if (!selection || !dataKey) return {};
+    return { [String((selection as Record<string, unknown>)[dataKey])]: true };
+}
+
+/**
+ * The read side: resolves the row object matching the single `true` key in a
+ * PrimeReact 11 selection-keys map, or `null` when the selection is cleared or
+ * the key is not in `data`.
+ *
+ * @typeParam TData - The row type.
+ */
+export function rowFromSelectionKeys<TData extends object>(
+    keys: SelectionKeys,
+    data: TData[],
+    dataKey: string | undefined
+): TData | null {
+    if (!dataKey) return null;
+    const selectedKey = Object.keys(keys).find(key => keys[key]);
+    if (selectedKey === undefined) return null;
+    return data.find(row => String((row as Record<string, unknown>)[dataKey]) === selectedKey) ?? null;
+}
diff --git a/Source/Dialogs/BusyIndicatorDialog.tsx b/Source/Dialogs/BusyIndicatorDialog.tsx
index d6b052e..77507ad 100644
--- a/Source/Dialogs/BusyIndicatorDialog.tsx
+++ b/Source/Dialogs/BusyIndicatorDialog.tsx
@@ -32,7 +32,7 @@ import { Dialog } from './Dialog';
  *         }
  *     };
  *
- *     return <Button label="Save" onClick={onSave} />;
+ *     return <Button onClick={onSave}>Save</Button>;
  * };
  * ```
  *
@@ -61,7 +61,9 @@ export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
             buttons={null}
         >
             <div className="flex flex-col items-center justify-center gap-4 py-4">
-                <ProgressSpinner />
+                {/* The spinner's role="progressbar" needs an accessible name; use the
+                    consumer-supplied message/title (already localized), never a baked-in string. */}
+                <ProgressSpinner.Root aria-label={props.message || props.title || 'Loading'} />
                 <p className="m-0 text-center">
                     {props.message}
                 </p>
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 702b3e1..084cac3 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -40,7 +40,7 @@ const DialogWrapper = ({ buttons, title, children, isValid }: { buttons: DialogB
 
     return (
         <>
-            <Button label="Open Dialog" onClick={async () => await showDialog()} />
+            <Button onClick={async () => await showDialog()}>Open Dialog</Button>
             <DialogComponent />
         </>
     );
@@ -116,14 +116,13 @@ export const WithForm: Story = {
         return (
             <>
                 <Button
-                    label="Open Form Dialog"
                     onClick={async () => {
                         const [dialogResult, value] = await showAddNameDialog();
                         if (dialogResult === DialogResult.Ok && value) {
                             setResult(value.name);
                         }
                     }}
-                />
+                >Open Form Dialog</Button>
                 {result && <p>Last saved name: {result}</p>}
                 <AddNameDialogComponent />
             </>
@@ -161,7 +160,7 @@ export const IsBusy: Story = {
 
         return (
             <>
-                <Button label="Open Dialog" onClick={async () => await showDialog()} />
+                <Button onClick={async () => await showDialog()}>Open Dialog</Button>
                 <DialogComponent />
             </>
         );
@@ -181,16 +180,12 @@ export const CustomButtons: Story = {
                     buttons={
                         <>
                             <Button
-                                label="Save Draft"
-                                icon="pi pi-save"
                                 severity="secondary"
                                 onClick={() => closeDialog(DialogResult.Ok, { action: 'draft' })}
-                            />
+                            ><i className="pi pi-save" /> Save Draft</Button>
                             <Button
-                                label="Publish"
-                                icon="pi pi-send"
                                 onClick={() => closeDialog(DialogResult.Ok, { action: 'publish' })}
-                            />
+                            ><i className="pi pi-send" /> Publish</Button>
                         </>
                     }
                     onCancel={() => closeDialog(DialogResult.Cancelled)}
@@ -206,14 +201,13 @@ export const CustomButtons: Story = {
         return (
             <>
                 <Button
-                    label="Open Custom Dialog"
                     onClick={async () => {
                         const [dialogResult, value] = await showCustomActionsDialog();
                         if (dialogResult === DialogResult.Ok && value) {
                             setResult(value.action);
                         }
                     }}
-                />
+                >Open Custom Dialog</Button>
                 {result && <p>Last action: {result}</p>}
                 <CustomActionsDialogComponent />
             </>
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index a021d1c..eb88291 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -1,10 +1,11 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Dialog as PrimeDialog, type DialogProps as PrimeDialogProps } from 'primereact/dialog';
+import { Dialog as PrimeDialog } from 'primereact/dialog';
+import type { DialogRootProps, DialogRootChangeEvent } from '@primereact/types/primitive/dialog';
 import { Button } from 'primereact/button';
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 /**
  * Callback used by {@link Dialog} (and its wrappers) when the dialog is about to
@@ -63,13 +64,19 @@ export interface DialogProps {
     /** Dialog width, any valid CSS length. Defaults to `'450px'`. */
     width?: string;
 
-    /** Inline style forwarded to the underlying PrimeReact Dialog root. */
-    style?: PrimeDialogProps['style'];
+    /** Inline style forwarded to the dialog popup (the visible dialog box). */
+    style?: CSSProperties;
 
     /** Inline style forwarded to the dialog's inner content area. */
-    contentStyle?: PrimeDialogProps['contentStyle'];
+    contentStyle?: CSSProperties;
 
-    /** When true, allows the user to resize the dialog. Defaults to `false`. */
+    /**
+     * When true, allows the user to resize the dialog. Defaults to `false`.
+     *
+     * PrimeReact 11's headless Dialog has no built-in resize handle, so this is
+     * currently accepted for API compatibility and has no effect. Kept so
+     * existing call sites continue to type-check.
+     */
     resizable?: boolean;
 
     /**
@@ -97,6 +104,19 @@ export interface DialogProps {
     /** Override the No button label. Defaults to `'No'`. */
     noLabel?: string;
 
+    /** Accessible name for the header close button. Override to localize. Defaults to `'Close'`. */
+    closeAriaLabel?: string;
+
+    /**
+     * Whether the dialog can be dismissed via the header close button, a
+     * backdrop click, or the Escape key. When omitted, the dialog is
+     * dismissable exactly when a predefined {@link DialogButtons} set is used
+     * (a custom `ReactNode` footer or `null` footer is not dismissable by
+     * default). Set it explicitly to keep a dismiss affordance with a custom
+     * footer — as {@link StepperCommandDialog} does for its wizard chrome.
+     */
+    dismissable?: boolean;
+
     /**
      * Extra CSS class names forwarded to the underlying PrimeReact Dialog root.
      */
@@ -104,17 +124,18 @@ export interface DialogProps {
 
     /**
      * PrimeReact pass-through configuration. Applies to the underlying Dialog's
-     * slots — see PrimeReact's Dialog `pt` reference for the available keys.
-     * Use this (or set a global preset on `CratisComponentsProvider`) to take
-     * full control of styling.
+     * slots (`root`, `positioner`, `backdrop`, `header`, `title`, `close`,
+     * `content`, `footer`, …) — see PrimeReact's Dialog `pt` reference for the
+     * available keys. Use this (or set a global preset on
+     * `CratisComponentsProvider`) to take full control of styling.
      */
-    pt?: PrimeDialogProps['pt'];
+    pt?: DialogRootProps['pt'];
 
     /**
      * PrimeReact pass-through options. Controls merge vs. replace behavior for
      * the {@link pt} preset.
      */
-    ptOptions?: PrimeDialogProps['ptOptions'];
+    ptOptions?: DialogRootProps['ptOptions'];
 
     /**
      * When true, disables every base PrimeReact style on the underlying Dialog.
@@ -207,13 +228,16 @@ export const Dialog = ({
     width = '450px',
     style,
     contentStyle,
-    resizable = false,
+    // `resizable` is accepted for API compatibility but has no effect on
+    // PrimeReact 11's headless Dialog, so it is intentionally not destructured.
     isValid,
     isBusy = false,
     okLabel = 'Ok',
     cancelLabel = 'Cancel',
     yesLabel = 'Yes',
     noLabel = 'No',
+    closeAriaLabel = 'Close',
+    dismissable,
     className,
     pt,
     ptOptions,
@@ -263,31 +287,43 @@ export const Dialog = ({
         }
     };
 
-    const okFooter = (
-        <>
-            <Button label={okLabel} icon="pi pi-check" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />
-        </>
+    // PrimeReact 11's Button renders its content as children (the v10 `label`/`icon`
+    // props are gone) and expresses the outlined look through `variant`. The primary
+    // (confirm) button shows a spinner in place of its icon while busy and carries
+    // autoFocus. This helper keeps the footer definitions below readable.
+    const footerButton = (result: DialogResult, label: string, icon: string, primary: boolean) => (
+        <Button
+            key={`${result}-${label}`}
+            variant={primary ? undefined : 'outlined'}
+            onClick={() => handleClose(result)}
+            disabled={primary ? !isDialogValid || isBusy : isBusy}
+            autoFocus={primary}>
+            <i className={primary && isBusy ? 'pi pi-spin pi-spinner' : icon} />
+            <span>{label}</span>
+        </Button>
     );
 
+    const okFooter = footerButton(DialogResult.Ok, okLabel, 'pi pi-check', true);
+
     const okCancelFooter = (
         <>
-            <Button label={okLabel} icon="pi pi-check" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />
-            <Button label={cancelLabel} icon="pi pi-times" outlined onClick={() => handleClose(DialogResult.Cancelled)} disabled={isBusy} />
+            {footerButton(DialogResult.Ok, okLabel, 'pi pi-check', true)}
+            {footerButton(DialogResult.Cancelled, cancelLabel, 'pi pi-times', false)}
         </>
     );
 
     const yesNoFooter = (
         <>
-            <Button label={yesLabel} icon="pi pi-check" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />
-            <Button label={noLabel} icon="pi pi-times" outlined onClick={() => handleClose(DialogResult.No)} disabled={isBusy} />
+            {footerButton(DialogResult.Yes, yesLabel, 'pi pi-check', true)}
+            {footerButton(DialogResult.No, noLabel, 'pi pi-times', false)}
         </>
     );
 
     const yesNoCancelFooter = (
         <>
-            <Button label={yesLabel} icon="pi pi-check" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />
-            <Button label={noLabel} icon="pi pi-times" outlined onClick={() => handleClose(DialogResult.No)} disabled={isBusy} />
-            <Button label={cancelLabel} icon="pi pi-times" outlined onClick={() => handleClose(DialogResult.Cancelled)} disabled={isBusy} />
+            {footerButton(DialogResult.Yes, yesLabel, 'pi pi-check', true)}
+            {footerButton(DialogResult.No, noLabel, 'pi pi-times', false)}
+            {footerButton(DialogResult.Cancelled, cancelLabel, 'pi pi-times', false)}
         </>
     );
 
@@ -318,23 +354,52 @@ export const Dialog = ({
         </div>
     );
 
+    // The dialog is dismissable (backdrop click, Escape, header close button)
+    // for the predefined-button sets by default, mirroring the v10 `closable`
+    // behavior that keyed off `typeof buttons === 'number'`. The `dismissable`
+    // prop overrides that default so a custom-footer dialog (e.g. the stepper
+    // wizard) can still offer a header-close affordance.
+    const isDismissable = dismissable ?? (typeof buttons === 'number');
+
+    // PrimeReact 11's Dialog is a controlled overlay: `open` reflects `visible`,
+    // and any dismiss gesture fires `onOpenChange` with `value: false`. We route
+    // that through the same `handleClose(Cancelled)` path used by the footer's
+    // cancel button, so the "return false keeps the dialog open" contract holds —
+    // the parent (the Arc dialog host) owns `visible`, so nothing closes unless
+    // `handleClose` calls back through the host.
+    const handleOpenChange = (event: DialogRootChangeEvent) => {
+        if (!event.value) {
+            handleClose(DialogResult.Cancelled);
+        }
+    };
+
     return (
-        <PrimeDialog
-            header={headerElement}
+        <PrimeDialog.Root
+            open={visible}
+            onOpenChange={handleOpenChange}
             modal
-            footer={footer}
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onHide={typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => {}}
-            visible={visible}
-            style={{ width, ...style }}
-            contentStyle={contentStyle}
-            resizable={resizable}
-            closable={typeof buttons === 'number'}
-            className={className}
+            dismissable={isDismissable}
+            closeOnEscape={isDismissable}
             pt={pt}
             ptOptions={ptOptions}
             unstyled={unstyled}>
-            {children}
-        </PrimeDialog>
+            <PrimeDialog.Portal>
+                <PrimeDialog.Backdrop />
+                <PrimeDialog.Positioner>
+                    <PrimeDialog.Popup className={className} style={{ width, ...style }}>
+                        <PrimeDialog.Header>
+                            <PrimeDialog.Title>{headerElement}</PrimeDialog.Title>
+                            {isDismissable && (
+                                <PrimeDialog.Close aria-label={closeAriaLabel}>
+                                    <i className="pi pi-times" />
+                                </PrimeDialog.Close>
+                            )}
+                        </PrimeDialog.Header>
+                        <PrimeDialog.Content style={contentStyle}>{children}</PrimeDialog.Content>
+                        <PrimeDialog.Footer>{footer}</PrimeDialog.Footer>
+                    </PrimeDialog.Popup>
+                </PrimeDialog.Positioner>
+            </PrimeDialog.Portal>
+        </PrimeDialog.Root>
     );
 };
diff --git a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
index b0c8ab1..6e6eba2 100644
--- a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
+++ b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
@@ -10,17 +10,26 @@ const { closeDialog } = vi.hoisted(() => ({
     closeDialog: vi.fn(),
 }));
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean }) => {
-        if (props.icon === 'pi pi-check' && props.onClick) {
-            props.onClick();
+    // PrimeReact 11 Button renders children (the v10 label/icon props are gone); the
+    // confirm button carries autoFocus, which stands in for the click in this SSR render.
+    Button: (props: { autoFocus?: boolean; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
+        if (props.autoFocus && props.onClick) {
+            void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled }, props.label);
+        return React.createElement('button', { disabled: props.disabled }, props.children);
     },
 }));
 
diff --git a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
index b25ec7c..9d8405e 100644
--- a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
+++ b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
@@ -6,17 +6,26 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { Dialog } from '../Dialog';
 
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+vi.mock('primereact/dialog', () => {
+    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
+    // renders its children so the footer buttons and content reach the markup.
+    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    return {
+        Dialog: {
+            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
+            Header: part, Title: part, Close: part, Content: part, Footer: part,
+        },
+    };
+});
 
 vi.mock('primereact/button', () => ({
-    Button: (props: { icon?: string; label?: string; onClick?: () => void | Promise<void>; disabled?: boolean; loading?: boolean }) => {
-        if (props.icon === 'pi pi-check' && props.onClick) {
-            props.onClick();
+    // PrimeReact 11 Button renders children (the v10 label/icon props are gone); the
+    // confirm button carries autoFocus, which stands in for the click in this SSR render.
+    Button: (props: { autoFocus?: boolean; onClick?: () => void | Promise<void>; disabled?: boolean; children?: React.ReactNode }) => {
+        if (props.autoFocus && props.onClick) {
+            void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled }, props.label);
+        return React.createElement('button', { disabled: props.disabled }, props.children);
     },
 }));
 
diff --git a/Source/Display/Avatar.tsx b/Source/Display/Avatar.tsx
new file mode 100644
index 0000000..624a75f
--- /dev/null
+++ b/Source/Display/Avatar.tsx
@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Avatar as PrimeAvatar } from 'primereact/avatar';
+
+/** Props for {@link Avatar}. */
+export interface AvatarProps {
+    /** Image URL. When present, the image is shown; otherwise the label/icon fallback is used. */
+    image?: string;
+    /** Text fallback (e.g. initials) shown when no image is available. */
+    label?: string;
+    /** Icon fallback shown when no image/label is available. */
+    icon?: React.ReactNode;
+    /** Alt text for the image. */
+    alt?: string;
+    /** Avatar size. */
+    size?: 'normal' | 'large' | 'xlarge';
+    /** Extra class name. */
+    className?: string;
+}
+
+/**
+ * A user/entity avatar built on PrimeReact 11's compositional `Avatar`. Shows
+ * an image when available and falls back to initials or an icon otherwise.
+ */
+export const Avatar = ({ image, label, icon, alt, size, className }: AvatarProps) => (
+    <PrimeAvatar.Root size={size} className={className}>
+        {image
+            ? <PrimeAvatar.Image src={image} alt={alt} />
+            : <PrimeAvatar.Fallback>{icon ?? label}</PrimeAvatar.Fallback>}
+    </PrimeAvatar.Root>
+);
diff --git a/Source/Display/Badge.tsx b/Source/Display/Badge.tsx
new file mode 100644
index 0000000..3d4d106
--- /dev/null
+++ b/Source/Display/Badge.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Badge as PrimeBadge } from 'primereact/badge';
+
+/** Severity tone of a {@link Badge}. */
+export type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast';
+
+/** Props for {@link Badge}. */
+export interface BadgeProps {
+    /** The value shown inside the badge (e.g. a count). */
+    value?: React.ReactNode;
+    /** Severity tone (drives the color). */
+    severity?: BadgeSeverity;
+    /** Badge size. */
+    size?: 'small' | 'large' | 'xlarge';
+    /** When `circle`, renders as a dot/circle badge. */
+    shape?: 'circle';
+    /** Extra class name. */
+    className?: string;
+    /** Badge content (alternative to {@link value}). */
+    children?: React.ReactNode;
+}
+
+/**
+ * A compact count/status badge built on PrimeReact 11's `Badge`. Use for
+ * unread counts, notification indicators, and small numeric overlays.
+ */
+export const Badge = ({ value, severity, size, shape, className, children }: BadgeProps) => (
+    <PrimeBadge severity={severity} size={size} shape={shape} className={className} data-severity={severity}>
+        {value ?? children}
+    </PrimeBadge>
+);
diff --git a/Source/Display/Chip.tsx b/Source/Display/Chip.tsx
new file mode 100644
index 0000000..4c56885
--- /dev/null
+++ b/Source/Display/Chip.tsx
@@ -0,0 +1,37 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Chip as PrimeChip } from 'primereact/chip';
+
+/** Props for {@link Chip}. */
+export interface ChipProps {
+    /** The chip label. */
+    label?: string;
+    /** An icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** When true, shows a remove control. */
+    removable?: boolean;
+    /** Invoked when the remove control is activated. */
+    onRemove?: () => void;
+    /** Accessible name for the remove control. Override to localize. Defaults to `'Remove'`. */
+    removeAriaLabel?: string;
+    /** Extra class name. */
+    className?: string;
+}
+
+/**
+ * A labeled, optionally-removable chip built on PrimeReact 11's compositional
+ * `Chip`. Use for filter pills, selected tokens, and tag-like affordances.
+ */
+export const Chip = ({ label, icon, removable, onRemove, removeAriaLabel = 'Remove', className }: ChipProps) => (
+    <PrimeChip.Root className={className}>
+        {icon && <PrimeChip.Start>{icon}</PrimeChip.Start>}
+        <PrimeChip.Label>{label}</PrimeChip.Label>
+        {removable && (
+            <PrimeChip.Remove onClick={onRemove} role="button" aria-label={removeAriaLabel}>
+                <i className="pi pi-times" />
+            </PrimeChip.Remove>
+        )}
+    </PrimeChip.Root>
+);
diff --git a/Source/Display/Display.stories.tsx b/Source/Display/Display.stories.tsx
new file mode 100644
index 0000000..ff9dc28
--- /dev/null
+++ b/Source/Display/Display.stories.tsx
@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
+import { Tag } from './Tag';
+import { Badge } from './Badge';
+import { Chip } from './Chip';
+import { Skeleton } from './Skeleton';
+import { Avatar } from './Avatar';
+import { ProgressBar } from './ProgressBar';
+
+const meta = {
+    title: 'Display/Overview',
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem 0', flexWrap: 'wrap' }}>
+        <span style={{ width: '8rem', color: 'var(--cratis-text-color-secondary)' }}>{label}</span>
+        {children}
+    </div>
+);
+
+/** All status & display components at a glance. */
+export const Overview: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxWidth: '640px' }}>
+            <Row label="Tag">
+                <Tag value="Registered" severity="success" />
+                <Tag value="Pending" severity="warn" />
+                <Tag value="Rejected" severity="danger" />
+                <Tag value="Draft" severity="secondary" rounded />
+            </Row>
+            <Row label="Badge">
+                <Badge value={8} severity="info" />
+                <Badge value={99} severity="danger" />
+                <Badge value="NEW" severity="success" />
+            </Row>
+            <Row label="Chip">
+                <Chip label="Design" />
+                <Chip label="Removable" removable onRemove={fn()} />
+                <Chip label="With icon" icon={<i className="pi pi-user" />} />
+            </Row>
+            <Row label="Avatar">
+                <Avatar label="JD" />
+                <Avatar icon={<i className="pi pi-user" />} size="large" />
+            </Row>
+            <Row label="ProgressBar">
+                <div style={{ flex: 1, minWidth: '200px' }}>
+                    <ProgressBar value={65} />
+                </div>
+            </Row>
+            <Row label="ProgressBar (indeterminate)">
+                <div style={{ flex: 1, minWidth: '200px' }}>
+                    <ProgressBar mode="indeterminate" />
+                </div>
+            </Row>
+            <Row label="Skeleton">
+                <div style={{ flex: 1, minWidth: '200px', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                    <Skeleton width="100%" height="1rem" />
+                    <Skeleton width="70%" height="1rem" />
+                </div>
+                <Skeleton circle height="3rem" />
+            </Row>
+        </div>
+    ),
+};
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
new file mode 100644
index 0000000..3ac8cbd
--- /dev/null
+++ b/Source/Display/ProgressBar.tsx
@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ProgressBar as PrimeProgressBar } from 'primereact/progressbar';
+
+/** Props for {@link ProgressBar}. */
+export interface ProgressBarProps {
+    /** Completion value, 0–100. Ignored in `indeterminate` mode. */
+    value?: number;
+    /** `determinate` (default) shows {@link value}; `indeterminate` shows a looping animation. */
+    mode?: 'determinate' | 'indeterminate';
+    /** Whether to render the percentage label. Defaults to `true` (determinate only). */
+    showValue?: boolean;
+    /** Extra class name. */
+    className?: string;
+}
+
+/**
+ * A horizontal progress indicator built on PrimeReact 11's compositional
+ * `ProgressBar`. Use `indeterminate` for unknown-duration work and
+ * `determinate` with a `value` for measurable progress (e.g. an upload).
+ */
+export const ProgressBar = ({ value, mode = 'determinate', showValue = true, className }: ProgressBarProps) => (
+    <PrimeProgressBar.Root value={value} mode={mode} className={className}>
+        <PrimeProgressBar.Indicator>
+            {showValue && mode === 'determinate' && (
+                <PrimeProgressBar.Label>{value ?? 0}%</PrimeProgressBar.Label>
+            )}
+        </PrimeProgressBar.Indicator>
+    </PrimeProgressBar.Root>
+);
diff --git a/Source/Display/Skeleton.tsx b/Source/Display/Skeleton.tsx
new file mode 100644
index 0000000..681c754
--- /dev/null
+++ b/Source/Display/Skeleton.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Skeleton as PrimeSkeleton } from 'primereact/skeleton';
+
+/** Props for {@link Skeleton}. */
+export interface SkeletonProps {
+    /** Width, any CSS length. Defaults to `'100%'`. */
+    width?: string;
+    /** Height, any CSS length. Defaults to `'1rem'`. */
+    height?: string;
+    /** Border radius, any CSS length. */
+    borderRadius?: string;
+    /** When true, renders a circle (equal width/height, fully rounded). */
+    circle?: boolean;
+    /** Extra class name. */
+    className?: string;
+}
+
+/**
+ * A loading placeholder built on PrimeReact 11's `Skeleton`. Use to reserve
+ * layout while a query is loading (e.g. `result.isPerforming`) instead of a
+ * blank flash or a spinner.
+ */
+export const Skeleton = ({ width = '100%', height = '1rem', borderRadius, circle, className }: SkeletonProps) => (
+    <PrimeSkeleton
+        width={circle ? (height ?? '2rem') : width}
+        height={height}
+        borderRadius={circle ? '50%' : borderRadius}
+        className={className}
+    />
+);
diff --git a/Source/Display/Tag.tsx b/Source/Display/Tag.tsx
new file mode 100644
index 0000000..115d9e2
--- /dev/null
+++ b/Source/Display/Tag.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { Tag as PrimeTag } from 'primereact/tag';
+
+/** Severity tone of a {@link Tag}. */
+export type TagSeverity = 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+
+/** Props for {@link Tag}. */
+export interface TagProps {
+    /** The label shown inside the tag. */
+    value?: React.ReactNode;
+    /** Severity tone (drives the color). */
+    severity?: TagSeverity;
+    /** When true, fully rounds the tag. */
+    rounded?: boolean;
+    /** An icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Extra class name. */
+    className?: string;
+    /** Tag content (alternative to {@link value}). */
+    children?: React.ReactNode;
+}
+
+/**
+ * A small colored status label built on PrimeReact 11's `Tag`. Use for inline
+ * status indicators in tables, lists, and detail views — e.g. an order state
+ * or a read-model flag.
+ */
+export const Tag = ({ value, severity, rounded, icon, className, children }: TagProps) => (
+    <PrimeTag severity={severity} rounded={rounded} className={className} data-severity={severity}>
+        {icon}
+        {value ?? children}
+    </PrimeTag>
+);
diff --git a/Source/Display/index.ts b/Source/Display/index.ts
new file mode 100644
index 0000000..dfb47d6
--- /dev/null
+++ b/Source/Display/index.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './Tag';
+export * from './Badge';
+export * from './Chip';
+export * from './Skeleton';
+export * from './Avatar';
+export * from './ProgressBar';
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index cc32ff1..ee68ae4 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -2,39 +2,172 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import { Dropdown as PrimeDropdown, DropdownProps as PrimeDropdownProps } from 'primereact/dropdown';
-import { useOverlayZIndex } from '../useOverlayZIndex';
+import { Select } from 'primereact/select';
+import type { SelectRootProps, SelectValueChangeEvent } from '@primereact/types/primitive/select';
 
 /**
- * Props for {@link Dropdown}. Identical to PrimeReact's `DropdownProps` —
- * the wrapper does not add new props of its own.
+ * Change event emitted by {@link Dropdown}. Wrapper-owned so the public API does
+ * not leak a raw PrimeReact type; carries the newly selected `value` (a single
+ * option value, or an array when `multiple` is set) plus the originating event.
  */
-export type DropdownProps = PrimeDropdownProps;
+export interface DropdownChangeEvent<T = unknown> {
+    /** The newly selected value. An array of values when `multiple` is set. */
+    value: T;
+
+    /** The underlying React event that produced the change, when available. */
+    originalEvent?: SelectValueChangeEvent['originalEvent'];
+}
+
+/**
+ * Props for {@link Dropdown}. Wrapper-owned — the common single/multi select
+ * surface every Cratis form needs, without exposing PrimeReact's internal
+ * compositional Select parts.
+ */
+export interface DropdownProps<T = unknown> {
+    /** The selected value. An array of values when `multiple` is set. */
+    value?: T;
+
+    /** Source array of option objects (or primitives). */
+    options?: unknown[];
+
+    /** Property name on each option object used as the visible label. */
+    optionLabel?: string;
+
+    /** Property name on each option object used as the underlying value. */
+    optionValue?: string;
+
+    /** Placeholder shown in the trigger when nothing is selected. */
+    placeholder?: string;
+
+    /** When true, shows a filter input inside the options popup. */
+    filter?: boolean;
+
+    /** When true, the dropdown accepts multiple selections. */
+    multiple?: boolean;
+
+    /** When true, shows a clear control that resets the selection. */
+    showClear?: boolean;
+
+    /** Renders the trigger in an invalid (error) state. */
+    invalid?: boolean;
+
+    /** Disables the control. */
+    disabled?: boolean;
+
+    /** Extra CSS class name forwarded to the Select root. */
+    className?: string;
+
+    /** Inline style forwarded to the Select root. */
+    style?: React.CSSProperties;
+
+    /** DOM id forwarded to the Select root — pair it with a label's `htmlFor`. */
+    id?: string;
+
+    /** Form field name forwarded to the Select root. */
+    name?: string;
+
+    /** Tab order for the control. */
+    tabIndex?: number;
+
+    /** Accessible name for the control (when no visible label is associated). */
+    'aria-label'?: string;
+
+    /** Id of the element that labels the control. */
+    'aria-labelledby'?: string;
+
+    /** Fired when the selection changes. */
+    onChange?: (event: DropdownChangeEvent<T>) => void;
+
+    /** Fired when focus leaves the control (rides the root's blur). */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+
+    /** PrimeReact pass-through configuration applied to the Select. */
+    pt?: SelectRootProps['pt'];
+
+    /** PrimeReact pass-through options applied to the Select. */
+    ptOptions?: SelectRootProps['ptOptions'];
+
+    /** When true, disables every base PrimeReact style on the Select. */
+    unstyled?: boolean;
+}
 
 /**
- * Thin wrapper around PrimeReact's `Dropdown` that fixes two ergonomic
- * issues for Cratis apps:
+ * Cratis single/multi select built on PrimeReact 11's compositional `Select`.
  *
- * - Defaults `appendTo` to `document.body` so dropdown panels escape parent
- *   scroll containers (a common gotcha inside dialogs and data table rows).
- * - Forces a high z-index on the dropdown panel via {@link useOverlayZIndex}
- *   so it appears above modal dialogs.
+ * PrimeReact 11 replaced the monolithic v10 `Dropdown` with a headless,
+ * compositional `Select` (Root → Trigger/Value → Portal → Positioner → Popup →
+ * List/Option). This wrapper assembles that composition once behind a small,
+ * familiar `value` / `options` / `optionLabel` / `optionValue` / `onChange`
+ * API so slices never touch the parts directly. `Select.List` auto-renders the
+ * `options`, so no manual option mapping is needed.
  *
- * The component forwards refs and spreads all other props, so it accepts
- * the full PrimeReact `Dropdown` API including `pt`, `ptOptions`, and
- * `unstyled` for restyling.
+ * The options popup renders through `Select.Portal` and stacks correctly above
+ * modal dialogs via PrimeReact 11's overlay manager — the v10 `appendTo` /
+ * manual z-index workaround is no longer required.
  */
-export const Dropdown = React.forwardRef<PrimeDropdown, DropdownProps>((props, ref) => {
-    // Force z-index on the dropdown panel to appear above dialogs
-    useOverlayZIndex('p-dropdown-panel');
-
+export const Dropdown = <T = unknown,>({
+    value,
+    options,
+    optionLabel,
+    optionValue,
+    placeholder,
+    filter,
+    multiple,
+    showClear,
+    invalid,
+    disabled,
+    className,
+    style,
+    id,
+    name,
+    tabIndex,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    onChange,
+    onBlur,
+    pt,
+    ptOptions,
+    unstyled,
+}: DropdownProps<T>) => {
     return (
-        <PrimeDropdown
-            ref={ref}
-            {...props}
-            appendTo={props.appendTo ?? document.body}
-        />
+        // `onBlur` rides the wrapping span because React blur bubbles (focusout).
+        <span onBlur={onBlur}>
+            <Select.Root
+                value={value}
+                options={options}
+                optionLabel={optionLabel}
+                optionValue={optionValue}
+                multiple={multiple}
+                invalid={invalid}
+                disabled={disabled}
+                className={className}
+                style={style}
+                id={id}
+                name={name}
+                tabIndex={tabIndex}
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledby}
+                onValueChange={(event: SelectValueChangeEvent) =>
+                    onChange?.({ value: event.value as T, originalEvent: event.originalEvent })}
+                pt={pt}
+                ptOptions={ptOptions}
+                unstyled={unstyled}>
+                <Select.Trigger>
+                    <Select.Value placeholder={placeholder} />
+                    {showClear && <Select.Clear />}
+                    <Select.Arrow />
+                </Select.Trigger>
+                <Select.Portal>
+                    <Select.Positioner>
+                        <Select.Popup>
+                            {filter && <Select.Filter placeholder={placeholder} />}
+                            <Select.List />
+                        </Select.Popup>
+                    </Select.Positioner>
+                </Select.Portal>
+            </Select.Root>
+        </span>
     );
-});
+};
 
 Dropdown.displayName = 'Dropdown';
diff --git a/Source/Filter/FilterPanel.stories.tsx b/Source/Filter/FilterPanel.stories.tsx
index a5a086e..c0cef8e 100644
--- a/Source/Filter/FilterPanel.stories.tsx
+++ b/Source/Filter/FilterPanel.stories.tsx
@@ -95,7 +95,7 @@ export const SingleSelectFilter: Story = {
             <div style={pageStyle}>
                 <div>
                     <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Single-select Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.6, fontSize: '0.9rem' }}>
+                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
                         Radio-button style — only one option can be selected at a time.
                     </p>
                 </div>
@@ -169,7 +169,7 @@ export const MultiSelectFilter: Story = {
             <div style={pageStyle}>
                 <div>
                     <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Multi-select Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.6, fontSize: '0.9rem' }}>
+                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
                         Checkbox style — multiple options can be selected simultaneously.
                     </p>
                 </div>
@@ -250,7 +250,7 @@ export const NumericRangeFilter: Story = {
             <div style={pageStyle}>
                 <div>
                     <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Numeric Range Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.6, fontSize: '0.9rem' }}>
+                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
                         Histogram with draggable range handles. Click a bar to jump-select that bucket.
                     </p>
                 </div>
@@ -390,7 +390,7 @@ export const CustomEditor: Story = {
             <div style={pageStyle}>
                 <div>
                     <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Custom Filter Editors</h2>
-                    <p style={{ margin: 0, opacity: 0.6, fontSize: '0.9rem' }}>
+                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
                         Declare a <code style={{ fontFamily: 'monospace', fontSize: '0.8em', opacity: 0.8 }}>&lt;FilterEditor&gt;</code> child inside <code style={{ fontFamily: 'monospace', fontSize: '0.8em', opacity: 0.8 }}>&lt;FilterPanel&gt;</code> to provide a custom editor for any filter group.
                     </p>
                 </div>
@@ -511,7 +511,7 @@ export const MixedFilters: Story = {
             <div style={pageStyle}>
                 <div>
                     <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Mixed Filter Types</h2>
-                    <p style={{ margin: 0, opacity: 0.6, fontSize: '0.9rem' }}>
+                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
                         Single-select, multi-select, numeric range and custom editor in one panel, plus a search box.
                     </p>
                 </div>
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index 0d0333d..4a43e9d 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -31,6 +31,10 @@ export interface FilterPanelProps {
   search?: string;
   /** Placeholder text for the search input. Defaults to 'Search…'. */
   searchPlaceholder?: string;
+  /** Accessible name for a clear-filter button. Override to localize. Defaults to 'Clear filter'. */
+  clearFilterAriaLabel?: string;
+  /** Accessible name for a clear-range button. Override to localize. Defaults to 'Clear range'. */
+  clearRangeAriaLabel?: string;
   /** Which filter group is currently expanded. */
   expandedFilterKey?: string | null;
   /** The button element the panel anchors below. */
@@ -146,6 +150,8 @@ export function FilterPanel({
   customValues,
   search,
   searchPlaceholder = 'Search…',
+  clearFilterAriaLabel = 'Clear filter',
+  clearRangeAriaLabel = 'Clear range',
   expandedFilterKey,
   anchorRef,
   onClose,
@@ -260,7 +266,7 @@ export function FilterPanel({
                                 e.stopPropagation();
                                 onFilterClear(filter.key);
                               }}
-                              aria-label="Clear filter"
+                              aria-label={clearFilterAriaLabel}
                             >
                               ×
                             </button>
@@ -277,7 +283,7 @@ export function FilterPanel({
                                 e.stopPropagation();
                                 onRangeChange(filter.key, null);
                               }}
-                              aria-label="Clear range"
+                              aria-label={clearRangeAriaLabel}
                             >
                               ×
                             </button>
@@ -294,7 +300,7 @@ export function FilterPanel({
                                 e.stopPropagation();
                                 onCustomValueChange?.(filter.key, undefined);
                               }}
-                              aria-label="Clear filter"
+                              aria-label={clearFilterAriaLabel}
                             >
                               ×
                             </button>
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
new file mode 100644
index 0000000..5cc905f
--- /dev/null
+++ b/Source/MIGRATION.md
@@ -0,0 +1,130 @@
+# Migrating `@cratis/components` v0.1 → v0.2 (PrimeReact 10 → 11)
+
+`@cratis/components` 0.2 moves from PrimeReact 10 to **PrimeReact 11**. Most
+wrapper APIs are unchanged, so many apps upgrade with only the find-and-replace
+below. This guide lists every change a consuming app might feel.
+
+> **TL;DR:** the package is now **ESM-only**; a handful of `primereact/*` imports
+> moved to `@cratis/components/*`; and styled themes are applied via a
+> `@primeuix/themes` preset (or the new Cratis baseline theme) instead of a
+> `resources/themes/*.css` import. See **Licensing** at the bottom.
+
+---
+
+## 1. ESM-only packaging
+
+PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build.
+
+- If your app already bundles with Vite / modern tooling (the Cratis default),
+  **no change is needed**.
+- If something in your pipeline `require()`d the package, switch it to `import`.
+
+## 2. Import moves (removed `primereact/*` paths)
+
+PrimeReact 11 removed several modules. Replace them with the Cratis-owned
+equivalents — the authoring model is unchanged:
+
+| Was (PrimeReact 10) | Now (v0.2) |
+|---|---|
+| `import { Column } from 'primereact/column'` | `import { Column } from '@cratis/components/DataPage'` (or `@cratis/components/DataTables`) |
+| `import { StepperPanel } from 'primereact/stepperpanel'` | `import { StepperPanel } from '@cratis/components/CommandDialog'` |
+| `import { Menubar } from 'primereact/menubar'` | use `<DataPage.MenuItems>` for list-page actions, or a `Button` toolbar |
+| `import { Dropdown } from 'primereact/dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
+| `primereact/calendar`, `primereact/inputtextarea` | used internally; consume via the `CommandForm` fields (`CalendarField`, `TextAreaField`) |
+
+`<Column field="name" header="Name" sortable filter />` and
+`<StepperPanel header="…">` work exactly as before.
+
+## 3. Data-table selection event
+
+The removed `DataTableSelectionSingleChangeEvent` is replaced by
+`DataTableSelectionChangeEvent<T>`. The `event.value` (the selected row) is
+unchanged, so only the type import changes:
+
+```diff
+- import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+- onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelected(e.value as Product)}
++ import type { DataTableSelectionChangeEvent } from '@cratis/components/DataTables';
++ onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelected(e.value ?? undefined)}
+```
+
+`<Column filter>` per-column filter menus, a global search box, and a paginator
+range report are all restored/added — no API change to opt in beyond `filter`.
+
+## 4. Theming — no more `resources/themes/*.css`
+
+PrimeReact 11 removed the v10 theme stylesheets. Pick one:
+
+- **Unstyled-first (default, no license):** ship structure + the `--cratis-*`
+  token layer and bring your own visuals via `pt` / CSS / Tailwind. Your existing
+  `--surface-*` / `--cratis-*` overrides keep working.
+- **Cratis baseline theme (no license):** `import '@cratis/components/theme'` for
+  a polished default look built entirely on the Cratis tokens.
+- **A styled `@primeuix/themes` preset (license-gated — see below):**
+
+  ```diff
+  - import 'primereact/resources/themes/lara-dark-blue/theme.css';
+  + import Aura from '@primeuix/themes/aura';
+    // …
+  - <CratisComponentsProvider>
+  + <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
+  ```
+
+If you dropped in the raw `PrimeReactProvider`, it now comes from
+`@primereact/core` (not `primereact/api`).
+
+## 5. Dialog
+
+Existing `Dialog` / `CommandDialog` / `StepperCommandDialog` APIs are unchanged.
+`Dialog` gains an additive `dismissable` prop; `resizable` is accepted but has no
+effect (PrimeReact 11's headless dialog has no built-in resize handle).
+
+## 6. Stepper
+
+`CommandStepper` / `StepperCommandDialog` keep their public props, including
+`orientation` (horizontal/vertical), `headerPosition`, and `start` / `end`. The
+`StepperCustomizationProps` type is now Cratis-owned (it no longer aliases
+PrimeReact's `StepperProps`) — if you imported it, the shape is the same minus
+the removed slots.
+
+## 7. Reduced capabilities (forced by PrimeReact 11)
+
+A few v10 features have no PrimeReact 11 equivalent. The props are **kept so your
+code still compiles**, but they no longer do anything — remove them or adopt the
+alternative:
+
+| Prop | What changed |
+|---|---|
+| `Dialog` `resizable` | v11's headless dialog has no resize handle — no effect. |
+| `ChipsField` `separator` | v11 `InputTags` commits one tag per Enter; pasted input is no longer auto-split into chips. |
+| `MultiSelectField` `display` / `maxSelectedLabels` | v11 `Select` renders the selection through its value slot; the v10 comma/chip modes and label-collapse are gone. |
+| `DataTableForQuery` / `DataTableForObservableQuery` / `DataPage` `clientFiltering` | Deprecated — filtering is always applied client-side to the loaded page; the toggle has no effect. |
+
+Some wrappers also **narrowed their surface** (they no longer leak PrimeReact's full API):
+
+- **`Column`** keeps the `field` / `header` / `body` / `sortable` / `filter` authoring model; v10 extras like `editor`, `frozen`, `footer`, `colSpan`, and `expander` are not carried over.
+- **`Dropdown`** exposes a curated single/multi select surface (`value`, `options`, `optionLabel`/`optionValue`, `placeholder`, `filter`, `multiple`, `showClear`, `style`, `id`, `name`, `aria-*`, …) plus `pt` / `ptOptions` / `unstyled` — it no longer accepts arbitrary PrimeReact Select props.
+- The **`DataPage` action toolbar** replaces the v10 Menubar: `menubarPt` / `menubarPtOptions` / `menubarUnstyled` now target the toolbar's **buttons**, and the paginator is styled via `paginatorClassName` (+ `paginatorAriaLabels`), not `pt`.
+
+## 8. What's new (nothing to migrate — just available)
+
+- **`@cratis/components/Notifications`** — `Toaster`, the imperative `toast`, and
+  `toastCommandResult(result)` to surface an Arc command result as a toast.
+- **`@cratis/components/Display`** — `Tag`, `Badge`, `Chip`, `Skeleton`,
+  `Avatar`, `ProgressBar`.
+- **CommandForm fields** — `PasswordField`, `ToggleSwitchField`, `RatingField`.
+
+---
+
+## Licensing (read this)
+
+PrimeReact 11 changed its licensing:
+
+- **Unstyled core + the Cratis token layer + `pt` are free** — no key needed.
+- **The styled `@primeuix/themes` presets are license-gated.** Applying a preset
+  needs a **PrimeUI license key** (free community tier or paid); without one,
+  PrimeReact shows an *"Invalid PrimeUI License"* banner in dev **and** prod.
+  Supply your key through the provider's `value`: `value={{ license: '…' }}`.
+
+**If you use unstyled-first or the Cratis baseline theme, you need no license.**
+Only a bundled `@primeuix/themes` preset requires a (free or paid) PrimeUI key.
diff --git a/Source/Notifications/Toaster.css b/Source/Notifications/Toaster.css
new file mode 100644
index 0000000..3d54bdc
--- /dev/null
+++ b/Source/Notifications/Toaster.css
@@ -0,0 +1,61 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* Baseline toast card — a notification needs a visible surface even before a
+   theme preset is applied, so this ships a token-based default that a preset or
+   `pt` can still override. */
+.cratis-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.625rem;
+    min-width: 18rem;
+    max-width: 26rem;
+    padding: 0.75rem 1rem;
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    border: 1px solid var(--cratis-surface-border);
+    border-left: 4px solid var(--cratis-surface-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.cratis-toast [data-part="content"] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.cratis-toast [data-part="title"] {
+    font-weight: 600;
+}
+
+.cratis-toast [data-part="description"] {
+    font-size: 0.875rem;
+    color: var(--cratis-text-color-secondary);
+    white-space: pre-line;
+}
+
+.cratis-toast [data-part="close"] {
+    border: none;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    cursor: pointer;
+    padding: 0.125rem;
+    border-radius: 0.25rem;
+}
+
+.cratis-toast [data-part="close"]:hover {
+    color: var(--cratis-text-color);
+}
+
+.cratis-toast[data-severity="success"] { border-left-color: var(--cratis-green-500); }
+.cratis-toast[data-severity="info"]    { border-left-color: var(--cratis-primary-color); }
+.cratis-toast[data-severity="warn"]    { border-left-color: var(--cratis-yellow-500, #eab308); }
+.cratis-toast[data-severity="error"]   { border-left-color: var(--cratis-red-500); }
+
+.cratis-toast[data-severity="success"] [data-part="icon"] { color: var(--cratis-green-500); }
+.cratis-toast[data-severity="info"]    [data-part="icon"] { color: var(--cratis-primary-color); }
+.cratis-toast[data-severity="warn"]    [data-part="icon"] { color: var(--cratis-yellow-500, #eab308); }
+.cratis-toast[data-severity="error"]   [data-part="icon"] { color: var(--cratis-red-500); }
diff --git a/Source/Notifications/Toaster.stories.tsx b/Source/Notifications/Toaster.stories.tsx
new file mode 100644
index 0000000..b145aea
--- /dev/null
+++ b/Source/Notifications/Toaster.stories.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'primereact/button';
+import { Toaster } from './Toaster';
+import { toast } from './toast';
+import { toastCommandResult } from './toastCommandResult';
+import type { ICommandResult } from '@cratis/arc/commands';
+
+const meta = {
+    title: 'Notifications/Toaster',
+    component: Toaster,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const makeResult = (over: Partial<ICommandResult>): ICommandResult =>
+    ({ isSuccess: false, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], response: {}, ...over } as unknown as ICommandResult);
+
+/** Fire toasts of each severity, plus the Arc command-result helper. */
+export const Playground: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', width: '20rem' }}>
+            <Toaster position="top-right" />
+            <Button onClick={() => toast.success({ title: 'Saved', description: 'Your changes were saved.' })}>
+                <span>Success</span>
+            </Button>
+            <Button severity="info" onClick={() => toast.info({ title: 'Heads up', description: 'A new version is available.' })}>
+                <span>Info</span>
+            </Button>
+            <Button severity="warn" onClick={() => toast.warn({ title: 'Careful', description: 'This action is irreversible.' })}>
+                <span>Warn</span>
+            </Button>
+            <Button severity="danger" onClick={() => toast.error({ title: 'Failed', description: 'Please try again.' })}>
+                <span>Error</span>
+            </Button>
+            <Button variant="outlined" onClick={() => toastCommandResult(makeResult({ isValid: false, validationResults: [{ message: 'Name is required' }, { message: 'Email is invalid' }] as unknown as ICommandResult['validationResults'] }), { validationTitle: 'Could not register author' })}>
+                <span>Command validation failure</span>
+            </Button>
+            <Button variant="outlined" onClick={() => toastCommandResult(makeResult({ isSuccess: true }), { successTitle: 'Author registered' })}>
+                <span>Command success</span>
+            </Button>
+        </div>
+    ),
+};
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
new file mode 100644
index 0000000..468a092
--- /dev/null
+++ b/Source/Notifications/Toaster.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Toaster as PrimeToaster, useToasterContext } from 'primereact/toaster';
+import { Toast } from 'primereact/toast';
+import type { ToastType } from '@primereact/types/primitive/toaster';
+import type { ToasterPosition } from '@primereact/types/headless/toaster';
+import './Toaster.css';
+
+/**
+ * Reads the live toasts from the toaster context and renders each one. Must be
+ * mounted inside `PrimeToaster.Root` (which provides the context). The
+ * imperative `toast(...)` calls push into the same module-level store this
+ * subscribes to, so a single mounted region shows toasts from anywhere.
+ */
+const ToastList = ({ dismissAriaLabel }: { dismissAriaLabel: string }) => {
+    const toaster = useToasterContext();
+    if (!toaster) return null;
+
+    return (
+        <>
+            {toaster.toasts.map((item: ToastType) => (
+                <Toast.Root key={item.id} toast={item} data-severity={item.severity} className="cratis-toast">
+                    <Toast.Icon match="success"><i className="pi pi-check-circle" /></Toast.Icon>
+                    <Toast.Icon match="info"><i className="pi pi-info-circle" /></Toast.Icon>
+                    <Toast.Icon match="warn"><i className="pi pi-exclamation-triangle" /></Toast.Icon>
+                    <Toast.Icon match="error"><i className="pi pi-times-circle" /></Toast.Icon>
+                    <Toast.Icon><i className="pi pi-bell" /></Toast.Icon>
+                    <Toast.Content>
+                        <Toast.Title />
+                        <Toast.Description />
+                    </Toast.Content>
+                    <Toast.Close aria-label={dismissAriaLabel}>
+                        <i className="pi pi-times" />
+                    </Toast.Close>
+                </Toast.Root>
+            ))}
+        </>
+    );
+};
+
+/** Props for {@link Toaster}. */
+export interface ToasterProps {
+    /** Corner/edge the toasts stack from. Defaults to `'top-right'`. */
+    position?: ToasterPosition;
+    /** Maximum number of toasts shown at once. Defaults to `3`. */
+    limit?: number;
+    /** Auto-dismiss timeout in milliseconds. Defaults to `6000`. Per-toast `duration` overrides it. */
+    timeout?: number;
+    /** Accessible name for each toast's dismiss button. Override to localize. Defaults to `'Dismiss'`. */
+    dismissAriaLabel?: string;
+}
+
+/**
+ * The single, app-wide toast host. Mount one `<Toaster />` near your app root;
+ * then call the imperative {@link toast} (`toast.success(...)`, `toast.error(...)`,
+ * …) from anywhere — including outside React — and the notification appears
+ * here and auto-dismisses.
+ *
+ * Built on PrimeReact 11's headless Toaster/Toast: a module-level store backs
+ * the imperative API, and this region subscribes to it. Icons are chosen per
+ * severity, close/dismiss and the auto-dismiss timer are wired by the
+ * primitives, and severity is surfaced as `data-severity` on each toast for
+ * styling.
+ *
+ * ```tsx
+ * // once, near the app root:
+ * <Toaster position="top-right" />
+ *
+ * // anywhere:
+ * import { toast } from '@cratis/components/Notifications';
+ * toast.success({ title: 'Saved', description: 'Your changes were saved.' });
+ * ```
+ *
+ * To surface an Arc command result automatically, see {@link toastCommandResult}.
+ */
+export const Toaster = ({ position = 'top-right', limit = 3, timeout = 6000, dismissAriaLabel = 'Dismiss' }: ToasterProps) => (
+    <PrimeToaster.Root position={position} limit={limit} timeout={timeout}>
+        <PrimeToaster.Portal>
+            <PrimeToaster.Region>
+                <ToastList dismissAriaLabel={dismissAriaLabel} />
+            </PrimeToaster.Region>
+        </PrimeToaster.Portal>
+    </PrimeToaster.Root>
+);
diff --git a/Source/Notifications/for_toastCommandResult/when_toasting_a_command_result.ts b/Source/Notifications/for_toastCommandResult/when_toasting_a_command_result.ts
new file mode 100644
index 0000000..44f6634
--- /dev/null
+++ b/Source/Notifications/for_toastCommandResult/when_toasting_a_command_result.ts
@@ -0,0 +1,98 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { vi } from 'vitest';
+import type { ICommandResult } from '@cratis/arc/commands';
+
+// One file for all outcomes: the project runs specs with `isolate: false`, so a
+// single module load + one mock avoids the cross-file mock caching that
+// separate files (or vi.resetModules) would run into.
+const { calls } = vi.hoisted(() => ({ calls: { success: [] as { title: string; description?: string }[], warn: [] as { title: string }[], error: [] as { title: string; description?: string }[] } }));
+
+vi.mock('primereact/toaster', () => ({
+    toast: {
+        success: (toast: { title: string; description?: string }) => calls.success.push(toast),
+        warn: (toast: { title: string }) => calls.warn.push(toast),
+        error: (toast: { title: string; description?: string }) => calls.error.push(toast),
+    },
+}));
+
+import { toastCommandResult } from '../toastCommandResult';
+
+const result = (over: Partial<ICommandResult>): ICommandResult =>
+    ({ isSuccess: false, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], ...over } as unknown as ICommandResult);
+
+const reset = () => { calls.success = []; calls.warn = []; calls.error = []; };
+
+describe('when toasting a command result and the command succeeded', () => {
+    let returned: boolean;
+    beforeEach(() => { reset(); returned = toastCommandResult(result({ isSuccess: true }), { successTitle: 'Saved' }); });
+
+    it('should show a success toast with the provided title', () => {
+        calls.success.should.have.lengthOf(1);
+        calls.success[0].title.should.equal('Saved');
+    });
+    it('should not show a warning or error toast', () => {
+        calls.warn.should.have.lengthOf(0);
+        calls.error.should.have.lengthOf(0);
+    });
+    it('should return true', () => returned.should.be.true);
+});
+
+describe('when toasting a successful command result with success suppressed', () => {
+    let returned: boolean;
+    beforeEach(() => { reset(); returned = toastCommandResult(result({ isSuccess: true }), { showSuccess: false }); });
+
+    it('should show no toast', () => {
+        calls.success.should.have.lengthOf(0);
+        calls.warn.should.have.lengthOf(0);
+        calls.error.should.have.lengthOf(0);
+    });
+    it('should still return true', () => returned.should.be.true);
+});
+
+describe('when toasting a command result that was not authorized', () => {
+    let returned: boolean;
+    beforeEach(() => { reset(); returned = toastCommandResult(result({ isAuthorized: false })); });
+
+    it('should show a warning toast', () => calls.warn.should.have.lengthOf(1));
+    it('should not show a success or error toast', () => {
+        calls.success.should.have.lengthOf(0);
+        calls.error.should.have.lengthOf(0);
+    });
+    it('should return false', () => returned.should.be.false);
+});
+
+describe('when toasting a command result that failed validation', () => {
+    let returned: boolean;
+    beforeEach(() => {
+        reset();
+        returned = toastCommandResult(
+            result({ isValid: false, validationResults: [{ message: 'Name is required' }, { message: 'Email is invalid' }] as unknown as ICommandResult['validationResults'] }),
+            { validationTitle: 'Could not save' });
+    });
+
+    it('should show an error toast with the validation title', () => {
+        calls.error.should.have.lengthOf(1);
+        calls.error[0].title.should.equal('Could not save');
+    });
+    it('should list every validation message in the description', () => {
+        (calls.error[0].description ?? '').should.contain('Name is required');
+        (calls.error[0].description ?? '').should.contain('Email is invalid');
+    });
+    it('should return false', () => returned.should.be.false);
+});
+
+describe('when toasting a command result that threw an exception', () => {
+    let returned: boolean;
+    beforeEach(() => { reset(); returned = toastCommandResult(result({ hasExceptions: true, exceptionMessages: ['Boom at line 42'] }), { exceptionTitle: 'Something broke' }); });
+
+    it('should show a generic error toast', () => {
+        calls.error.should.have.lengthOf(1);
+        calls.error[0].title.should.equal('Something broke');
+    });
+    it('should not leak the exception messages into the toast', () => {
+        (calls.error[0].description ?? '').should.not.contain('Boom');
+    });
+    it('should return false', () => returned.should.be.false);
+});
diff --git a/Source/Notifications/index.ts b/Source/Notifications/index.ts
new file mode 100644
index 0000000..d061939
--- /dev/null
+++ b/Source/Notifications/index.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './Toaster';
+export * from './toast';
+export * from './toastCommandResult';
diff --git a/Source/Notifications/toast.ts b/Source/Notifications/toast.ts
new file mode 100644
index 0000000..7a663cd
--- /dev/null
+++ b/Source/Notifications/toast.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * The imperative toast API. Call `toast(...)` for a plain toast, or
+ * `toast.success/info/warn/error(...)` for a severity, `toast.promise(...)` to
+ * track a promise, and `toast.dismiss(id?)` to close. Requires a {@link Toaster}
+ * mounted somewhere in the tree.
+ *
+ * ```tsx
+ * import { toast } from '@cratis/components/Notifications';
+ * toast.success({ title: 'Saved' });
+ * toast.error({ title: 'Failed', description: 'Please try again.' });
+ * ```
+ */
+export { toast } from 'primereact/toaster';
+export type { ToastType, ToastSeverity, ToastId } from '@primereact/types/primitive/toaster';
diff --git a/Source/Notifications/toastCommandResult.ts b/Source/Notifications/toastCommandResult.ts
new file mode 100644
index 0000000..ef0ea94
--- /dev/null
+++ b/Source/Notifications/toastCommandResult.ts
@@ -0,0 +1,89 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ICommandResult } from '@cratis/arc/commands';
+import { toast } from 'primereact/toaster';
+
+/** Options for {@link toastCommandResult}. */
+export interface ToastCommandResultOptions {
+    /** Title for the success toast. Defaults to `'Success'`. */
+    successTitle?: string;
+    /** Description for the success toast. */
+    successDescription?: string;
+    /** Title when the command was rejected by authorization. Defaults to `'Not authorized'`. */
+    unauthorizedTitle?: string;
+    /** Title when the command failed validation. Defaults to `'Validation failed'`. */
+    validationTitle?: string;
+    /** Title when the command threw. Defaults to `'Something went wrong'`. */
+    exceptionTitle?: string;
+    /** When false, no toast is shown on success. Defaults to `true`. */
+    showSuccess?: boolean;
+}
+
+/**
+ * Surfaces an Arc {@link ICommandResult} as a toast, mapping the granular
+ * result flags to the right severity — the same branching Arc apps do when
+ * executing a command outside a `CommandDialog`:
+ *
+ * - **success** → a success toast (suppress with `showSuccess: false`);
+ * - **not authorized** → a warning toast;
+ * - **invalid** → an error toast listing the per-field validation messages;
+ * - **exceptions** → a generic error toast (stack traces are never shown to
+ *   users — log `result.exceptionMessages` yourself).
+ *
+ * Requires a {@link Toaster} mounted in the tree. Returns `true` on success so
+ * callers can gate follow-up work (close a panel, refresh a query).
+ *
+ * ```tsx
+ * const result = await command.execute();
+ * if (toastCommandResult(result, { successTitle: 'Author registered' })) {
+ *     refresh();
+ * }
+ * ```
+ *
+ * @typeParam TResponse - The command response type.
+ * @param result - The command result to surface.
+ * @param options - {@link ToastCommandResultOptions}.
+ * @returns `true` when the command succeeded, otherwise `false`.
+ */
+export function toastCommandResult<TResponse = object>(
+    result: ICommandResult<TResponse>,
+    options: ToastCommandResultOptions = {}
+): boolean {
+    const {
+        successTitle = 'Success',
+        successDescription,
+        unauthorizedTitle = 'Not authorized',
+        validationTitle = 'Validation failed',
+        exceptionTitle = 'Something went wrong',
+        showSuccess = true,
+    } = options;
+
+    if (result.isSuccess) {
+        if (showSuccess) {
+            toast.success({ title: successTitle, description: successDescription });
+        }
+        return true;
+    }
+
+    if (!result.isAuthorized) {
+        toast.warn({ title: unauthorizedTitle });
+        return false;
+    }
+
+    if (!result.isValid) {
+        const description = result.validationResults
+            .map(validationResult => validationResult.message)
+            .filter(Boolean)
+            .join('\n');
+        toast.error({ title: validationTitle, description: description || undefined });
+        return false;
+    }
+
+    if (result.hasExceptions) {
+        toast.error({ title: exceptionTitle });
+        return false;
+    }
+
+    return false;
+}
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index fe374da..3bc0e05 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Tooltip } from 'primereact/tooltip';
+import { Tooltip } from '../Common/Tooltip';
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import * as faIcons from 'react-icons/fa6';
 import { ObjectNavigationalBar } from '../ObjectNavigationalBar';
@@ -9,9 +9,11 @@ import { Json, JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { getValueAtPath } from './objectHelpers';
 import { InputText } from 'primereact/inputtext';
 import { InputNumber } from 'primereact/inputnumber';
+import type { InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
 import { Checkbox } from 'primereact/checkbox';
-import { Calendar } from 'primereact/calendar';
-import { InputTextarea } from 'primereact/inputtextarea';
+import type { CheckboxRootChangeEvent } from '@primereact/types/primitive/checkbox';
+import { Textarea } from 'primereact/textarea';
+import { DatePickerInput } from '../Common/DatePickerInput';
 
 /**
  * Props for {@link ObjectContentEditor}.
@@ -236,18 +238,17 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
             });
         };
 
-        const inputStyle = {
-            width: '100%',
-            ...(error ? { borderColor: 'var(--cratis-red-500)' } : {})
-        };
-
         if (property.type === 'boolean') {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <Checkbox
+                    <Checkbox.Root
                         checked={Boolean(value)}
-                        onChange={(e) => handleChange(e.checked ?? false)}
-                    />
+                        onCheckedChange={(e: CheckboxRootChangeEvent) => handleChange(e.checked ?? false)}
+                        invalid={!!error}>
+                        <Checkbox.Box>
+                            <Checkbox.Indicator />
+                        </Checkbox.Box>
+                    </Checkbox.Root>
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
             );
@@ -256,13 +257,13 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (property.type === 'number' || property.type === 'integer') {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <InputNumber
+                    <InputNumber.Root
                         value={(value === null || value === undefined) ? null : Number(value)}
-                        onValueChange={(e) => handleChange(e.value ?? null)}
-                        mode="decimal"
+                        onValueChange={(e: InputNumberRootValueChangeEvent) => handleChange(e.value ?? null)}
                         useGrouping={false}
-                        style={inputStyle}
-                    />
+                        invalid={!!error}>
+                        <InputNumber.Input className="w-full" />
+                    </InputNumber.Root>
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
             );
@@ -272,12 +273,12 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
             const dateValue = value ? new Date(value as string) : null;
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <Calendar
+                    <DatePickerInput
                         value={dateValue}
-                        onChange={(e) => handleChange(e.value instanceof Date ? e.value.toISOString() : null)}
+                        onChange={(date) => handleChange(date ? date.toISOString() : null)}
                         showTime
                         showIcon
-                        style={inputStyle}
+                        invalid={!!error}
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -288,11 +289,11 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
             const dateValue = value ? new Date(value as string) : null;
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <Calendar
+                    <DatePickerInput
                         value={dateValue}
-                        onChange={(e) => handleChange(e.value instanceof Date ? e.value.toISOString().split('T')[0] : null)}
+                        onChange={(date) => handleChange(date ? date.toISOString().split('T')[0] : null)}
                         showIcon
-                        style={inputStyle}
+                        invalid={!!error}
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -320,11 +321,12 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (isLongText) {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <InputTextarea
+                    <Textarea
                         value={String(value ?? '')}
                         onChange={(e) => handleChange(e.target.value)}
                         rows={3}
-                        style={inputStyle}
+                        invalid={!!error}
+                        className="w-full"
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -336,7 +338,8 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                 <InputText
                     value={String(value ?? '')}
                     onChange={(e) => handleChange(e.target.value)}
-                    style={inputStyle}
+                    invalid={!!error}
+                    className="w-full"
                 />
                 {error && <small style={fieldErrorStyle}>{error}</small>}
             </div>
@@ -442,11 +445,11 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                                     <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
                                         {propertyName}
                                         {description && (
-                                            <faIcons.FaCircleInfo
-                                                className="property-info-icon"
-                                                style={infoIconStyle}
-                                                data-pr-tooltip={description}
-                                                data-pr-position="right" />
+                                            <Tooltip content={description} position="right">
+                                                <faIcons.FaCircleInfo
+                                                    className="property-info-icon"
+                                                    style={infoIconStyle} />
+                                            </Tooltip>
                                         )}
                                     </span>
                                 </td>
@@ -466,7 +469,6 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
     return (
         <div className={className ? `order-content ${className}` : 'order-content'} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-            <Tooltip target="[data-pr-tooltip]" />
             <ObjectNavigationalBar
                 navigationPath={navigationPath}
                 onNavigate={navigateToBreadcrumb}
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
index fd2a2f9..5ed27a9 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
@@ -4,6 +4,7 @@
 import { useMemo } from 'react';
 import { Button } from 'primereact/button';
 import * as faIcons from 'react-icons/fa6';
+import { Tooltip } from '../Common/Tooltip';
 import { buildNavigationBreadcrumbs } from './breadcrumbHelpers';
 import './ObjectNavigationalBar.css';
 
@@ -24,6 +25,9 @@ export interface ObjectNavigationalBarProps {
      */
     onNavigate: (index: number) => void;
 
+    /** Label and accessible name for the back button (tooltip + aria-label). Override to localize. Defaults to `'Navigate back'`. */
+    backLabel?: string;
+
     /** Extra CSS class names appended to the navigation bar root. */
     className?: string;
 }
@@ -36,7 +40,7 @@ export interface ObjectNavigationalBarProps {
  *
  * @param props - {@link ObjectNavigationalBarProps}.
  */
-export function ObjectNavigationalBar({ navigationPath, onNavigate, className }: ObjectNavigationalBarProps) {
+export function ObjectNavigationalBar({ navigationPath, onNavigate, backLabel = 'Navigate back', className }: ObjectNavigationalBarProps) {
     const breadcrumbItems = useMemo(() => buildNavigationBreadcrumbs(navigationPath), [navigationPath]);
     const rootClassName = className
         ? `cratis-object-navigational-bar px-4 py-2 mb-2 ${className}`
@@ -45,15 +49,17 @@ export function ObjectNavigationalBar({ navigationPath, onNavigate, className }:
     return (
         <div className={rootClassName}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <Button
-                    icon={<faIcons.FaArrowLeft />}
-                    text
-                    size="small"
-                    onClick={() => onNavigate(navigationPath.length - 1)}
-                    tooltip="Navigate back"
-                    tooltipOptions={{ position: 'top' }}
-                    disabled={navigationPath.length === 0}
-                />
+                <Tooltip content={backLabel} position="top">
+                    <Button
+                        variant="text"
+                        size="small"
+                        iconOnly
+                        onClick={() => onNavigate(navigationPath.length - 1)}
+                        disabled={navigationPath.length === 0}
+                        aria-label={backLabel}>
+                        <faIcons.FaArrowLeft />
+                    </Button>
+                </Tooltip>
                 <div style={{ fontSize: '0.9rem', color: 'var(--cratis-text-color-secondary)' }}>
                     {breadcrumbItems.map((item, index) => (
                         <span key={index}>
diff --git a/Source/README.md b/Source/README.md
index 6cec797..66f9759 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -7,8 +7,8 @@ A collection of React components for building modern applications with Cratis.
 ### Minimum Versions
 
 - TypeScript: 4.7+
-- React: 18.0+ or 19.0+
-- Node.js: 16+ (for development)
+- React: 19.0+
+- Node.js: 18+ (for development)
 
 ### TypeScript Configuration
 
@@ -16,32 +16,35 @@ This package is compatible with all modern TypeScript `moduleResolution` strateg
 
 - ✅ `"bundler"` (recommended for Vite, esbuild, webpack 5+)
 - ✅ `"node16"` / `"nodenext"` (for Node.js projects)
-- ✅ `"node"` (legacy, but supported)
 
-The package provides dual CommonJS and ES Module builds with proper conditional exports for optimal module resolution and tree-shaking.
+The package is **ESM-only** (`"type": "module"`) — PrimeReact 11 dropped the
+CommonJS build. It ships subpath `exports` with per-entry `types` for optimal
+module resolution and tree-shaking. Consume it from an ESM or bundler context;
+there is no `require()` entry.
 
 ## Installation
 
 ```bash
-npm install @cratis/components primereact primeicons
+npm install @cratis/components
 # or
-yarn add @cratis/components primereact primeicons
+yarn add @cratis/components
 ```
 
-`primereact` and `primeicons` are peer dependencies — installing them in your
-app ensures a single copy is shared with the wrappers in this package. The
-`@cratis/arc*` packages and `react`/`react-dom` are also peer dependencies;
-you typically already have them.
+`primereact`, `primeicons`, and the rest of the UI runtime (`@primereact/core`,
+`@primereact/headless`, `pixi.js`, `framer-motion`, `allotment`, `react-icons`)
+ship as **regular dependencies**, so they are installed for you — you do not
+add them separately.
 
-The following are **optional** peer dependencies, only required if you use the
-component that depends on them:
+The genuine **peer dependencies** you provide in your app are `react` /
+`react-dom` (**19+**), the `@cratis/arc*` packages, `reflect-metadata`, and
+`tsyringe` — you typically already have these in a Cratis app. The styled
+`@primeuix/themes` presets are optional and only needed if you opt into a
+licensed preset (see [Styling](#styling)).
 
-| Component | Optional peer |
-|---|---|
-| `PivotViewer` | `pixi.js` (canvas) and `framer-motion` (animated panels) |
-| `DataPage` resizable layout | `allotment` |
-
-Install them only when you reach for the corresponding component.
+> **Note:** because `primereact` is bundled here rather than a peer, importing
+> `primereact/*` **directly** in your app can pull in a second copy. Reach
+> PrimeReact through the Cratis wrappers, or add `primereact` to your bundler's
+> dedupe list, if you also use it directly.
 
 ## Usage
 
@@ -72,7 +75,9 @@ Components:
 - `@cratis/components/DataPage`
 - `@cratis/components/DataTables`
 - `@cratis/components/Dialogs`
+- `@cratis/components/Display` — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`
 - `@cratis/components/Dropdown`
+- `@cratis/components/Notifications` — `Toaster`, `toast`, `toastCommandResult`
 - `@cratis/components/ObjectContentEditor`
 - `@cratis/components/ObjectNavigationalBar`
 - `@cratis/components/PivotViewer`
@@ -83,6 +88,7 @@ Components:
 
 Stylesheets:
 
+- `@cratis/components/theme` — the **Cratis baseline theme** (light + dark, no PrimeUI license); import it and add `class="cratis-theme"` to skin every component from the token layer
 - `@cratis/components/styles` — Tailwind utilities + Cratis CSS variable tokens (single stylesheet, recommended)
 - `@cratis/components/tokens` — only the `--cratis-*` CSS variable tokens (for consumers using their own utility CSS solution)
 
@@ -93,37 +99,38 @@ Styling is designed to stay out of the way: choose the setup that matches how
 much control you want, and the other layers stay invisible.
 
 > **Tip — see each setup live:** every Storybook story includes a **Styling**
-> toolbar (paintbrush icon) that flips between five modes that demonstrate
-> the three setups below: *Lara Dark Blue*, *Lara Light Blue*, *Themed with
-> custom palette*, *Unstyled (bare structure)*, and *Unstyled + Tailwind pt*.
-> Open any story (`yarn dev`) and switch modes to see the same component under
-> each setup.
+> toolbar (paintbrush icon) that flips between the modes demonstrating the
+> setups below: *Aura Dark* and *Aura Light* (a licensed `@primeuix/themes`
+> preset), *Cratis baseline theme* (light and dark, no license), *Unstyled
+> (bare structure)*, and *Unstyled + Tailwind pt*. Open any story (`yarn dev`)
+> and switch modes to see the same component under each setup.
 
 ### TL;DR — choose a styling setup
 
-| Setup | When | Effort | What you write |
-|---|---|---|---|
-| **Use a PrimeReact theme** | You want components to look good immediately and tweak from there. | Lowest | Theme CSS import + provider |
-| **Use a custom palette on top of a PrimeReact theme** | You want PrimeReact's structure but your own colors. | Low | A PrimeReact theme + CSS variable overrides |
-| **Use fully unstyled mode** | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
+| Setup | When | Effort | License | What you write |
+|---|---|---|---|---|
+| **Cratis baseline theme** | You want a polished default look with no license. | Lowest | None | `unstyled` + `import '@cratis/components/theme'` + `class="cratis-theme"` |
+| **A styled `@primeuix/themes` preset** | You want a prebuilt design system to tweak from. | Low | PrimeUI key | `value={{ theme: { preset } }}` on the provider |
+| **A custom palette over a preset** | You want the preset's structure but your own colors. | Low | PrimeUI key | A preset + CSS variable overrides |
+| **Fully unstyled** | You're integrating into a tightly controlled design system. | Highest | None | `unstyled: true` + a `pt` preset in CSS or Tailwind |
 
-> **Why the first two options still load a PrimeReact theme**
+> **Why you need a theme, a baseline stylesheet, or a `pt` preset**
 >
-> In PrimeReact 10, every widget's *structural* CSS (padding, borders, dialog
-> frame, focus rings, button shapes) ships **inside the theme file**. There is
-> no separate "primitives" stylesheet. So a consumer who doesn't load any
-> PrimeReact theme also has no structural CSS — components render as their
-> raw HTML primitives.
+> PrimeReact 11 is **unstyled-first**: the primitives render structural markup
+> with no built-in visuals. A look comes from one of three sources — a
+> `@primeuix/themes` preset (token-based, license-gated), the Cratis baseline
+> theme (`@cratis/components/theme`, no license), or your own `pt`/CSS. Load
+> none of them and the components render as their raw HTML primitives.
 >
-> The `--cratis-*` token layer is therefore an **additive Cratis-scoped tint**
-> for surfaces *our* wrappers own (validation error text, the FormElement
-> addon, breadcrumb borders, etc.). It is not, by itself, enough to skin
-> PrimeReact widgets. Override PrimeReact's variables when you want the whole
-> UI in your palette. Use `unstyled: true` and a `pt` preset when you want to
-> replace PrimeReact's visuals entirely.
+> The `--cratis-*` token layer is an **additive Cratis-scoped tint** for
+> surfaces *our* wrappers own (validation error text, the FormElement addon,
+> breadcrumb borders, etc.). It is not, by itself, enough to skin the
+> PrimeReact widgets — pair it with the baseline theme, a preset, or a `pt`
+> preset. Override the PrimeReact variables (or a preset's `--p-*` tokens) when
+> you want the whole UI in your palette.
 
-All three setups use the same one-line setup. You can change direction later
-because the same provider, tokens, and `pt` hooks stay available.
+All setups share the same one-line provider setup. You can change direction
+later because the same provider, tokens, and `pt` hooks stay available.
 
 ### One-line setup (every styling option)
 
@@ -142,36 +149,66 @@ export const App = () => (
   the package plus the `--cratis-*` CSS variable token layer that every
   internal component reads from. (Use `@cratis/components/tokens` instead if
   you're bringing your own Tailwind.)
-- `CratisComponentsProvider` is a thin wrapper over PrimeReact's
-  `PrimeReactProvider` so Cratis has one place to layer in defaults. Drop in
-  raw `PrimeReactProvider` if you'd rather.
+- `CratisComponentsProvider` is a thin wrapper over `@primereact/core`'s
+  `PrimeReactProvider` so Cratis has one place to layer in defaults (including
+  the optional `value={{ theme: { preset } }}` styled layer). Drop in the raw
+  `PrimeReactProvider` from `@primereact/core` if you'd rather.
 
-The three setups below differ only in **what else** you load on top of this
-setup.
+The setups below differ only in **what else** you load on top of this
+provider setup.
 
 ---
 
-### Use a PrimeReact theme
+### Use a styled preset
 
-Load any PrimeReact theme stylesheet alongside Cratis Components. PrimeReact's
-own widgets paint themselves from the theme, and the `--cratis-*` tokens cascade
-to the matching theme variables so Cratis-scoped surfaces follow along.
+PrimeReact 11 dropped the v10 `primereact/resources/themes/*/theme.css`
+stylesheets in favor of the token-based `@primeuix/themes` layer. Apply a
+preset by passing `value={{ theme: { preset } }}` to `CratisComponentsProvider` —
+no theme CSS import. PrimeReact's own widgets paint themselves from the preset, and the
+`--cratis-*` tokens cascade to the matching variables so Cratis-scoped surfaces
+follow along.
 
 ```tsx
-// 1. Theme first, then Cratis styles so any --cratis-* override wins.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
+import Aura from '@primeuix/themes/aura';   // or lara / nora / material
 import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
 
 import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
-    <CratisComponentsProvider>
+    <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
         <YourApp />
     </CratisComponentsProvider>
 );
 ```
 
+Omit `theme` entirely to stay unstyled-first — ship only structure plus the
+`--cratis-*` tokens and bring your own visuals (see the pass-through / `pt`
+options below).
+
+### Use the Cratis baseline theme (no license)
+
+Want a polished default look **without a PrimeUI license**? Ship the components
+unstyled and import the Cratis baseline theme — a token-based stylesheet that
+styles every component from the `--cratis-*` layer:
+
+```tsx
+import 'primeicons/primeicons.css';
+import '@cratis/components/theme';   // the baseline theme
+
+export const App = () => (
+    <CratisComponentsProvider value={{ unstyled: true }}>
+        <div className="cratis-theme">   {/* scope: put on <body>, app root, or a subtree */}
+            <YourApp />
+        </div>
+    </CratisComponentsProvider>
+);
+```
+
+Add `cratis-dark` to an ancestor for the dark palette. The theme defers to a
+`@primeuix/themes` preset's `--p-*` tokens when one is present, so you can layer
+it under a preset too, and every rule is overridable via your own CSS or `pt`.
+
 #### Override a single component with CSS
 
 Plain CSS works fine on top of the theme. Target either PrimeReact's class
@@ -255,11 +292,10 @@ independently if you want Cratis surfaces to differ from PrimeReact widgets.
 ```
 
 ```tsx
-// 1. PrimeReact theme provides the structure.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
+// 1. A styled preset provides the structure (apply it via the provider — see above).
 import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
-// 2. Your palette overrides — must come after the theme so they win.
+// 2. Your palette overrides — must come after the styles so they win.
 import './palette.override.css';
 ```
 
@@ -290,7 +326,6 @@ Tailwind handles cascade and dark mode:
 ```css
 /* app.css */
 @import "tailwindcss";
-@import "primereact/resources/themes/lara-dark-blue/theme.css";
 @import "@cratis/components/styles";
 
 @layer base {
@@ -412,7 +447,7 @@ Same shape, Tailwind utilities as the class strings:
 // pt-preset.ts
 export const globalPt = {
     button: {
-        root: { className: 'inline-flex items-center px-4 py-2 rounded-lg bg-sky-500 text-white hover:bg-sky-400 disabled:opacity-50' },
+        root: { className: 'inline-flex items-center px-4 py-2 rounded-lg bg-sky-700 text-white hover:bg-sky-600 disabled:opacity-50' },
     },
     dialog: {
         root:    { className: 'rounded-2xl shadow-2xl overflow-hidden' },
diff --git a/Source/SchemaEditor/NameCell.tsx b/Source/SchemaEditor/NameCell.tsx
index c71ce4d..278777e 100644
--- a/Source/SchemaEditor/NameCell.tsx
+++ b/Source/SchemaEditor/NameCell.tsx
@@ -3,6 +3,7 @@
 
 import { InputText } from 'primereact/inputtext';
 import * as faIcons from 'react-icons/fa6';
+import { Tooltip } from '../Common/Tooltip';
 import { JsonSchemaProperty } from '../types/JsonSchema';
 
 export interface NameCellProps {
@@ -21,33 +22,28 @@ export const NameCell = ({ rowData, isEditMode, onUpdate, validationError }: Nam
 
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <span
-                    className={isNavigable ? 'schema-navigation-tooltip' : undefined}
-                    data-pr-tooltip={isNavigable ? navigationTooltipText : undefined}
-                    data-pr-position="top"
-                >
-                    {rowData.name}
-                </span>
+                <Tooltip content={isNavigable ? navigationTooltipText : undefined} position="top">
+                    <span>{rowData.name}</span>
+                </Tooltip>
                 {rowData.description && (
-                    <faIcons.FaCircleInfo
-                        className="schema-description-tooltip"
-                        style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.875rem' }}
-                        data-pr-tooltip={rowData.description}
-                        data-pr-position="right"
-                    />
+                    <Tooltip content={rowData.description} position="right">
+                        <faIcons.FaCircleInfo
+                            style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.875rem' }}
+                        />
+                    </Tooltip>
                 )}
             </div>
         );
     }
 
     return (
-        <InputText
-            value={rowData.name || ''}
-            onChange={(e) => onUpdate(rowData.name || '', 'name', e.target.value)}
-            className="w-full"
-            invalid={!!validationError}
-            data-pr-tooltip={validationError}
-            data-pr-position="top"
-        />
+        <Tooltip content={validationError} position="top" className="w-full">
+            <InputText
+                value={rowData.name || ''}
+                onChange={(e) => onUpdate(rowData.name || '', 'name', e.target.value)}
+                className="w-full"
+                invalid={!!validationError}
+            />
+        </Tooltip>
     );
 };
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index e1d1af7..3bf2efd 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -3,10 +3,10 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { Button } from 'primereact/button';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { Menubar } from 'primereact/menubar';
-import { Tooltip } from 'primereact/tooltip';
+import { DataTableCore } from '../DataTables/DataTableCore';
+import { Column } from '../DataTables/Column';
+import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
+import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
 import { NameCell } from './NameCell';
 import { TypeCell } from './TypeCell';
@@ -14,7 +14,48 @@ import { JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { TypeFormat, DEFAULT_TYPE_FORMATS } from '../types/TypeFormat';
 import { validatePropertyName, buildBreadcrumbItems } from './schemaHelpers';
 import css from './SchemaEditor.module.css';
-import { MenuItem } from 'primereact/menuitem';
+
+/**
+ * User-facing strings for {@link SchemaEditor}. Every field is optional; pass a
+ * partial `labels` to override any of them (for localization). Omitted fields
+ * fall back to {@link defaultSchemaEditorLabels} (English).
+ */
+export interface SchemaEditorLabels {
+    /** Menu action that enters edit mode. */
+    edit: string;
+    /** Menu action that saves changes. */
+    save: string;
+    /** Menu action that cancels editing. */
+    cancel: string;
+    /** Menu action that adds a property. */
+    addProperty: string;
+    /** Accessible name for the action menubar. */
+    actions: string;
+    /** Accessible name and tooltip for the back button. */
+    navigateBack: string;
+    /** Shown when the schema has no properties. */
+    emptyMessage: string;
+    /** Accessible name for the "drill into array item definition" button. */
+    navigateToItemDefinition: string;
+    /** Accessible name for the "drill into object properties" button. */
+    navigateToProperties: string;
+    /** Accessible name for the "remove property" button. */
+    deleteProperty: string;
+}
+
+/** English defaults for {@link SchemaEditorLabels}. */
+export const defaultSchemaEditorLabels: SchemaEditorLabels = {
+    edit: 'Edit',
+    save: 'Save',
+    cancel: 'Cancel',
+    addProperty: 'Add Property',
+    actions: 'Actions',
+    navigateBack: 'Navigate back',
+    emptyMessage: 'No properties defined',
+    navigateToItemDefinition: 'Navigate to item definition',
+    navigateToProperties: 'Navigate to object properties',
+    deleteProperty: 'Delete property'
+};
 
 /**
  * Props for {@link SchemaEditor}.
@@ -66,6 +107,9 @@ export interface SchemaEditorProps {
      * PrimeReact components, use a global `pt` preset on `CratisComponentsProvider`.
      */
     className?: string;
+
+    /** Override any user-facing string (for localization). See {@link SchemaEditorLabels}. */
+    labels?: Partial<SchemaEditorLabels>;
 }
 
 /**
@@ -92,8 +136,10 @@ export const SchemaEditor = ({
     saveDisabled = false,
     cancelDisabled = false,
     typeFormats = DEFAULT_TYPE_FORMATS,
-    className
+    className,
+    labels
 }: SchemaEditorProps) => {
+    const l = { ...defaultSchemaEditorLabels, ...labels };
     const [currentPath, setCurrentPath] = useState<string[]>([]);
     const [properties, setProperties] = useState<JsonSchemaProperty[]>([]);
     const [currentSchema, setCurrentSchema] = useState<JsonSchema>(schema);
@@ -347,38 +393,37 @@ export const SchemaEditor = ({
 
     const hasValidationErrors = Object.keys(validationErrors).length > 0;
 
-    const menuItems = useMemo(() => [
+    const menuItems = useMemo<ActionMenuItem[]>(() => [
         ...(!isEditMode ? [{
-            label: 'Edit',
+            label: l.edit,
             icon: <faIcons.FaPencil className='mr-2' />,
             command: canEdit ? handleEdit : undefined,
             className: !canEdit ? 'edit-disabled-with-reason' : undefined,
-            template: !canEdit && canNotEditReason ? (item: MenuItem) => (
-                <div
-                    className="p-menuitem-link p-disabled"
-                    data-pr-tooltip={canNotEditReason}
-                    data-pr-position="bottom"
-                    style={{ cursor: 'not-allowed', opacity: 0.6 }}
-                >
-                    {item.icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                </div>
+            template: !canEdit && canNotEditReason ? (item: ActionMenuItem) => (
+                <Tooltip content={canNotEditReason} position="bottom">
+                    <div
+                        style={{ cursor: 'not-allowed', opacity: 0.6, display: 'inline-flex', alignItems: 'center', padding: '0.5rem 0.75rem' }}
+                    >
+                        {item.icon}
+                        <span>{item.label}</span>
+                    </div>
+                </Tooltip>
             ) : undefined
         }] : []),
         ...(isEditMode ? [
             ...(!saveDisabled ? [{
-                label: 'Save',
+                label: l.save,
                 icon: <faIcons.FaCheck className='mr-2' />,
                 command: hasValidationErrors ? undefined : handleSave,
                 disabled: hasValidationErrors
             }] : []),
             ...(!cancelDisabled ? [{
-                label: 'Cancel',
+                label: l.cancel,
                 icon: <faIcons.FaXmark className='mr-2' />,
                 command: handleCancel
             }] : []),
             {
-                label: 'Add Property',
+                label: l.addProperty,
                 icon: <faIcons.FaPlus className='mr-2' />,
                 command: addProperty
             }
@@ -392,23 +437,24 @@ export const SchemaEditor = ({
     return (
         <div className={className ? `schema-editor ${className}` : 'schema-editor'} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
             <div className="px-4 py-4">
-                <Tooltip target="[data-pr-tooltip]" />
                 <div className="schema-editor-menubar">
-                    <Menubar aria-label="Actions" model={menuItems} />
+                    <ActionMenubar aria-label={l.actions} model={menuItems} />
                 </div>
             </div>
 
             <div className={`px-4 py-2 ${css.bottomBorder}`}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                    <Button
-                        icon={<faIcons.FaArrowLeft />}
-                        text
-                        size="small"
-                        onClick={navigateBack}
-                        disabled={isAtRoot}
-                        tooltip="Navigate back"
-                        tooltipOptions={{ position: 'top' }}
-                    />
+                    <Tooltip content="Navigate back" position="top">
+                        <Button
+                            variant="text"
+                            size="small"
+                            iconOnly
+                            onClick={navigateBack}
+                            disabled={isAtRoot}
+                            aria-label={l.navigateBack}>
+                            <faIcons.FaArrowLeft />
+                        </Button>
+                    </Tooltip>
                     <div style={{ fontSize: '0.9rem', color: 'var(--cratis-text-color-secondary)', cursor: 'pointer' }}>
                         {breadcrumbItems.map((item, index) => (
                             <span key={index}>
@@ -432,14 +478,12 @@ export const SchemaEditor = ({
             </div>
 
             <div style={{ flex: 1, overflow: 'auto', padding: '1rem' }}>
-                <Tooltip key={`nav-${eventTypeName}-${currentPath.join('/')}`} target=".schema-navigation-tooltip" mouseTrack mouseTrackTop={15} />
-                <Tooltip key={`desc-${eventTypeName}-${currentPath.join('/')}`} target=".schema-description-tooltip" />
-                <DataTable
+                <DataTableCore<JsonSchemaProperty>
                     key={`${isEditMode}-${currentPath.join('/')}`}
-                    value={properties}
+                    data={properties}
                     dataKey="id"
-                    emptyMessage="No properties defined"
-                    rowClassName={(rowData: JsonSchemaProperty) => {
+                    emptyMessage={l.emptyMessage}
+                    rowClassName={(rowData) => {
                         if (!isEditMode && (rowData.type === 'object' || (rowData.type === 'array' && rowData.items?.type === 'object'))) {
                             return css.navigableRow;
                         }
@@ -447,7 +491,7 @@ export const SchemaEditor = ({
                     }}
                     onRowClick={(e) => {
                         if (!isEditMode) {
-                            const rowData = e.data as JsonSchemaProperty;
+                            const rowData = e.data;
                             if (rowData.name) {
                                 if (rowData.type === 'object') {
                                     navigateToProperty(rowData.name);
@@ -487,11 +531,12 @@ export const SchemaEditor = ({
                                 onNavigateToProperty={navigateToProperty}
                                 onNavigateToArrayItems={navigateToArrayItems}
                                 onRemoveProperty={removeProperty}
+                                labels={l}
                             />
                         )}
                         style={{ width: '70%' }}
                     />
-                </DataTable>
+                </DataTableCore>
             </div>
         </div>
     );
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 5893117..07bf3a9 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -2,10 +2,12 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { Button } from 'primereact/button';
-import { Dropdown } from 'primereact/dropdown';
+import { Dropdown } from '../Dropdown/Dropdown';
+import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
 import { TypeFormat } from '../types/TypeFormat';
 import { JsonSchemaProperty } from '../types/JsonSchema';
+import type { SchemaEditorLabels } from './SchemaEditor';
 
 export interface TypeCellProps {
     rowData: JsonSchemaProperty;
@@ -16,6 +18,8 @@ export interface TypeCellProps {
     onNavigateToProperty: (propertyName: string) => void;
     onNavigateToArrayItems: (propertyName: string) => void;
     onRemoveProperty: (propertyName: string) => void;
+    /** Resolved (merged with defaults) SchemaEditor labels for the cell's buttons. */
+    labels: SchemaEditorLabels;
 }
 
 const CONTAINER_TYPES = [
@@ -31,7 +35,8 @@ export const TypeCell = ({
     onUpdateArrayItemType,
     onNavigateToProperty,
     onNavigateToArrayItems,
-    onRemoveProperty
+    onRemoveProperty,
+    labels
 }: TypeCellProps) => {
     const DEFAULT_TYPE_OPTIONS = [
         { label: 'string', value: 'string' },
@@ -93,37 +98,31 @@ export const TypeCell = ({
             const itemType = rowData.items?.type || 'string';
             const isNavigable = itemType === 'object';
             return (
-                <div
-                    className="flex items-center gap-2 w-full"
-                    style={{ height: '100%' }}
-                    data-pr-tooltip={isNavigable ? 'Click to navigate to item definition' : undefined}
-                    data-pr-position="top"
-                >
-                    <span>Array of {itemType}</span>
-                    {isNavigable && (
-                        <>
-                            <div style={{ flex: 1 }} />
-                            <span style={{ display: 'flex', alignItems: 'center' }}>
-                                <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
-                            </span>
-                        </>
-                    )}
-                </div>
+                <Tooltip content={isNavigable ? 'Click to navigate to item definition' : undefined} position="top" className="w-full">
+                    <div className="flex items-center gap-2 w-full" style={{ height: '100%' }}>
+                        <span>Array of {itemType}</span>
+                        {isNavigable && (
+                            <>
+                                <div style={{ flex: 1 }} />
+                                <span style={{ display: 'flex', alignItems: 'center' }}>
+                                    <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
+                                </span>
+                            </>
+                        )}
+                    </div>
+                </Tooltip>
             );
         } else if (rowData.type === 'object') {
             return (
-                <div
-                    className="flex items-center gap-2 w-full"
-                    style={{ height: '100%' }}
-                    data-pr-tooltip="Click to navigate to object properties"
-                    data-pr-position="top"
-                >
-                    <span>Object</span>
-                    <div style={{ flex: 1 }} />
-                    <span style={{ display: 'flex', alignItems: 'center' }}>
-                        <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
-                    </span>
-                </div>
+                <Tooltip content="Click to navigate to object properties" position="top" className="w-full">
+                    <div className="flex items-center gap-2 w-full" style={{ height: '100%' }}>
+                        <span>Object</span>
+                        <div style={{ flex: 1 }} />
+                        <span style={{ display: 'flex', alignItems: 'center' }}>
+                            <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
+                        </span>
+                    </div>
+                </Tooltip>
             );
         }
         return displayValue;
@@ -131,18 +130,22 @@ export const TypeCell = ({
 
     return (
         <div className="flex items-center gap-2 w-full" style={{ minHeight: '2.5rem' }}>
-            <Dropdown
+            <Dropdown<string>
                 value={currentValue}
                 options={allTypeOptions}
+                optionLabel="label"
+                optionValue="value"
                 onChange={(e) => handleTypeChange(e.value, rowData.name || '')}
                 className="flex-1"
             />
             {rowData.type === 'array' && rowData.items && (
                 <>
                     <span style={{ whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }}>of</span>
-                    <Dropdown
+                    <Dropdown<string>
                         value={rowData.items.type || 'string'}
                         options={allTypeOptions}
+                        optionLabel="label"
+                        optionValue="value"
                         onChange={(e) => handleTypeChange(e.value, rowData.name || '', true)}
                         className="flex-1"
                     />
@@ -150,35 +153,25 @@ export const TypeCell = ({
             )}
             <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                 {rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (
-                    <Button
-                        icon={<faIcons.FaArrowRight />}
-                        text
-                        size="small"
-                        onClick={() => onNavigateToArrayItems(rowData.name!)}
-                        tooltip="Navigate to item definition"
-                        tooltipOptions={{ position: 'top' }}
-                    />
+                    <Tooltip content={labels.navigateToItemDefinition} position="top">
+                        <Button variant="text" size="small" iconOnly onClick={() => onNavigateToArrayItems(rowData.name!)} aria-label={labels.navigateToItemDefinition}>
+                            <faIcons.FaArrowRight />
+                        </Button>
+                    </Tooltip>
                 )}
                 {rowData.type === 'object' && rowData.name && (
-                    <Button
-                        icon={<faIcons.FaArrowRight />}
-                        text
-                        size="small"
-                        onClick={() => onNavigateToProperty(rowData.name!)}
-                        tooltip="Navigate to object properties"
-                        tooltipOptions={{ position: 'top' }}
-                    />
+                    <Tooltip content={labels.navigateToProperties} position="top">
+                        <Button variant="text" size="small" iconOnly onClick={() => onNavigateToProperty(rowData.name!)} aria-label={labels.navigateToProperties}>
+                            <faIcons.FaArrowRight />
+                        </Button>
+                    </Tooltip>
                 )}
                 {rowData.name && (
-                    <Button
-                        icon={<faIcons.FaTrash />}
-                        text
-                        severity="danger"
-                        size="small"
-                        onClick={() => onRemoveProperty(rowData.name!)}
-                        tooltip="Delete property"
-                        tooltipOptions={{ position: 'top' }}
-                    />
+                    <Tooltip content={labels.deleteProperty} position="top">
+                        <Button variant="text" severity="danger" size="small" iconOnly onClick={() => onRemoveProperty(rowData.name!)} aria-label={labels.deleteProperty}>
+                            <faIcons.FaTrash />
+                        </Button>
+                    </Tooltip>
                 )}
             </div>
         </div>
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index 48dbe8c..f395833 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -2,8 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Timeline, type TimelineProps } from 'primereact/timeline';
+import { Timeline } from 'primereact/timeline';
+import type { TimelineRootProps } from '@primereact/types/primitive/timeline';
 import type { Event } from './types';
+import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
 import './EventsView.css';
 
@@ -18,13 +20,16 @@ interface EventsViewProps {
     className?: string;
 
     /** PrimeReact pass-through configuration applied to the underlying Timeline. */
-    pt?: TimelineProps['pt'];
+    pt?: TimelineRootProps['pt'];
 
     /** PrimeReact pass-through options applied to the underlying Timeline. */
-    ptOptions?: TimelineProps['ptOptions'];
+    ptOptions?: TimelineRootProps['ptOptions'];
 
     /** When true, disables every base PrimeReact style on the underlying Timeline. */
     unstyled?: boolean;
+
+    /** Accessible-name overrides; defaults to English. See {@link TimeMachineLabels}. */
+    labels?: TimeMachineLabels;
 }
 
 /**
@@ -38,7 +43,7 @@ interface EventsViewProps {
  *
  * @param props - {@link EventsViewProps}.
  */
-export const EventsView: React.FC<EventsViewProps> = ({ events, className, pt, ptOptions, unstyled }) => {
+export const EventsView: React.FC<EventsViewProps> = ({ events, className, pt, ptOptions, unstyled, labels = defaultTimeMachineLabels }) => {
     // Use test data if no events provided
     const displayEvents = events.length > 0 ? events : [];
     const containerRef = useRef<HTMLDivElement>(null);
@@ -116,29 +121,36 @@ export const EventsView: React.FC<EventsViewProps> = ({ events, className, pt, p
                         type="button"
                         className="events-view-scroll-button events-view-scroll-button--top"
                         onClick={scrollToTop}
-                        aria-label="Scroll to top"
+                        aria-label={labels.scrollToTop}
                     >
                         <i className="pi pi-arrow-up" />
                     </button>
                 </div>
             )}
-            <Timeline
-                value={displayEvents}
+            <Timeline.Root
                 align="alternate"
-                content={customContent}
-                marker={customMarker}
                 className={className ? `events-view-timeline ${className}` : 'events-view-timeline'}
                 pt={pt}
                 ptOptions={ptOptions}
                 unstyled={unstyled}
-            />
+            >
+                {displayEvents.map((event, index) => (
+                    <Timeline.Event key={index}>
+                        <Timeline.Separator>
+                            <Timeline.Marker>{customMarker()}</Timeline.Marker>
+                            {index < displayEvents.length - 1 && <Timeline.Connector />}
+                        </Timeline.Separator>
+                        <Timeline.Content>{customContent(event, index)}</Timeline.Content>
+                    </Timeline.Event>
+                ))}
+            </Timeline.Root>
             {canScrollDown && (
                 <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom">
                     <button
                         type="button"
                         className="events-view-scroll-button events-view-scroll-button--bottom"
                         onClick={scrollToBottom}
-                        aria-label="Scroll to bottom"
+                        aria-label={labels.scrollToBottom}
                     >
                         <i className="pi pi-arrow-down" />
                     </button>
diff --git a/Source/TimeMachine/ReadModelView.tsx b/Source/TimeMachine/ReadModelView.tsx
index 7985c22..8af86e5 100644
--- a/Source/TimeMachine/ReadModelView.tsx
+++ b/Source/TimeMachine/ReadModelView.tsx
@@ -3,6 +3,7 @@
 
 import React, { useState } from 'react';
 import type { Version } from './types';
+import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
 
 /**
@@ -30,6 +31,9 @@ interface ReadModelViewProps {
      * the hover state.
      */
     onHoveringCardChange: (isHovering: boolean) => void;
+
+    /** Accessible-name overrides; defaults to English. See {@link TimeMachineLabels}. */
+    labels?: TimeMachineLabels;
 }
 
 /**
@@ -48,6 +52,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
     hoveredIndex,
     onVersionSelect,
     onHoveringCardChange,
+    labels = defaultTimeMachineLabels,
 }) => {
     const displayIndex = hoveredIndex ?? selectedIndex;
     const [flippedMap, setFlippedMap] = useState<Record<string, boolean>>({});
@@ -116,7 +121,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     type="button"
                                                     className="window-flip-button"
                                                     onClick={toggleFlip(version.id)}
-                                                    aria-label="Show related events"
+                                                    aria-label={labels.showRelatedEvents}
                                                     aria-pressed={isFlipped}
                                                 >
                                                     <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
@@ -140,7 +145,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     type="button"
                                                     className="window-flip-button"
                                                     onClick={toggleFlip(version.id)}
-                                                    aria-label="Show read model snapshot"
+                                                    aria-label={labels.showReadModelSnapshot}
                                                     aria-pressed={isFlipped}
                                                 >
                                                     <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index badcf51..eb3dd29 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -5,8 +5,12 @@ import React, { useState, useCallback, useRef, useEffect } from 'react';
 import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
 import { EventsView } from './EventsView';
+import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import './TimeMachine.css';
 
+export type { TimeMachineLabels } from './TimeMachineLabels';
+export { defaultTimeMachineLabels } from './TimeMachineLabels';
+
 enum ViewModes {
   ReadModel = 'ReadModel',
   Events = 'Events',
@@ -18,6 +22,8 @@ interface TimeMachineProps {
   onVersionChange?: (index: number) => void;
   /** Scroll sensitivity - higher values require more scrolling to change versions */
   scrollSensitivity?: number;
+  /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */
+  labels?: Partial<TimeMachineLabels>;
 }
 
 export const TimeMachine: React.FC<TimeMachineProps> = ({
@@ -25,7 +31,9 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
   currentVersionIndex = 0,
   onVersionChange,
   scrollSensitivity = 50,
+  labels,
 }) => {
+  const l = { ...defaultTimeMachineLabels, ...labels };
   const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const [isHoveringCard, setIsHoveringCard] = useState(false);
@@ -104,16 +112,16 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
         <button
           className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}
           onClick={() => setViewMode(ViewModes.ReadModel)}
-          aria-label="Read Model View"
-          title="Read Model View"
+          aria-label={l.readModelView}
+          title={l.readModelView}
         >
           <i className="pi pi-box" />
         </button>
         <button
           className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}
           onClick={() => setViewMode(ViewModes.Events)}
-          aria-label="Events View"
-          title="Events View"
+          aria-label={l.eventsView}
+          title={l.eventsView}
         >
           <i className="pi pi-list" />
         </button>
@@ -127,9 +135,10 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
           hoveredIndex={hoveredIndex}
           onVersionSelect={handleVersionSelect}
           onHoveringCardChange={setIsHoveringCard}
+          labels={l}
         />
       ) : (
-        <EventsView events={allEvents} />
+        <EventsView events={allEvents} labels={l} />
       )}
 
       {/* Timeline - only show in ReadModel view */}
@@ -150,7 +159,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
             className="nav-button prev"
             disabled={selectedIndex === 0}
             onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}
-            aria-label="Previous version"
+            aria-label={l.previousVersion}
           >
             ‹
           </button>
@@ -158,7 +167,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
             className="nav-button next"
             disabled={selectedIndex === versions.length - 1}
             onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}
-            aria-label="Next version"
+            aria-label={l.nextVersion}
           >
             ›
           </button>
diff --git a/Source/TimeMachine/TimeMachineLabels.ts b/Source/TimeMachine/TimeMachineLabels.ts
new file mode 100644
index 0000000..f6d29d2
--- /dev/null
+++ b/Source/TimeMachine/TimeMachineLabels.ts
@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * User-facing strings for {@link TimeMachine} and its sub-views. Every field is
+ * optional at the call site; pass a partial `labels` to override any (for
+ * localization). Omitted fields fall back to {@link defaultTimeMachineLabels}
+ * (English).
+ */
+export interface TimeMachineLabels {
+    /** Accessible name for the read-model view toggle. */
+    readModelView: string;
+    /** Accessible name for the events view toggle. */
+    eventsView: string;
+    /** Accessible name for the previous-version control. */
+    previousVersion: string;
+    /** Accessible name for the next-version control. */
+    nextVersion: string;
+    /** Accessible name for the "show related events" control. */
+    showRelatedEvents: string;
+    /** Accessible name for the "show read-model snapshot" control. */
+    showReadModelSnapshot: string;
+    /** Accessible name for the "scroll to top" control. */
+    scrollToTop: string;
+    /** Accessible name for the "scroll to bottom" control. */
+    scrollToBottom: string;
+}
+
+/** English defaults for {@link TimeMachineLabels}. */
+export const defaultTimeMachineLabels: TimeMachineLabels = {
+    readModelView: 'Read Model View',
+    eventsView: 'Events View',
+    previousVersion: 'Previous version',
+    nextVersion: 'Next version',
+    showRelatedEvents: 'Show related events',
+    showReadModelSnapshot: 'Show read model snapshot',
+    scrollToTop: 'Scroll to top',
+    scrollToBottom: 'Scroll to bottom',
+};
diff --git a/Source/TimeMachine/index.ts b/Source/TimeMachine/index.ts
index a6e2de2..08cd152 100644
--- a/Source/TimeMachine/index.ts
+++ b/Source/TimeMachine/index.ts
@@ -4,5 +4,7 @@
 export { TimeMachine } from './TimeMachine';
 export { ReadModelView } from './ReadModelView';
 export { EventsView } from './EventsView';
+export { defaultTimeMachineLabels } from './TimeMachineLabels';
+export type { TimeMachineLabels } from './TimeMachineLabels';
 export { Properties } from './Properties';
 export * from './types';
diff --git a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
index 1e056d6..46fb965 100644
--- a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
@@ -6,7 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { ToolbarButton } from '../../ToolbarButton';
 
-vi.mock('../../Common/Tooltip', () => ({
+vi.mock('../../../Common/Tooltip', () => ({
     Tooltip: (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children),
 }));
 
diff --git a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
index a698305..8acdc99 100644
--- a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
@@ -6,7 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { ToolbarButton } from '../../ToolbarButton';
 
-vi.mock('../../Common/Tooltip', () => ({
+vi.mock('../../../Common/Tooltip', () => ({
     Tooltip: (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children),
 }));
 
diff --git a/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts b/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
index 1c6c546..74da774 100644
--- a/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
@@ -7,7 +7,7 @@ import { vi } from 'vitest';
 import { Toolbar } from '../../Toolbar';
 import { ToolbarButton } from '../../ToolbarButton';
 
-vi.mock('../../Common/Tooltip', () => ({
+vi.mock('../../../Common/Tooltip', () => ({
     Tooltip: (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children),
 }));
 
diff --git a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
index 17e2300..261ed32 100644
--- a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
@@ -6,7 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { ToolbarFanOutItem } from '../../ToolbarFanOutItem';
 
-vi.mock('../../Common/Tooltip', () => ({
+vi.mock('../../../Common/Tooltip', () => ({
     Tooltip: (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children),
 }));
 
diff --git a/Source/index.ts b/Source/index.ts
index e38edc6..52135e6 100644
--- a/Source/index.ts
+++ b/Source/index.ts
@@ -8,8 +8,10 @@ import * as Common from './Common';
 import * as DataPage from './DataPage';
 import * as DataTables from './DataTables';
 import * as Dialogs from './Dialogs';
+import * as Display from './Display';
 import * as Dropdown from './Dropdown';
 import * as Filter from './Filter';
+import * as Notifications from './Notifications';
 import * as ObjectContentEditor from './ObjectContentEditor';
 import * as ObjectNavigationalBar from './ObjectNavigationalBar';
 import * as PivotViewer from './PivotViewer';
@@ -26,8 +28,10 @@ export {
     DataPage,
     DataTables,
     Dialogs,
+    Display,
     Dropdown,
     Filter,
+    Notifications,
     ObjectContentEditor,
     ObjectNavigationalBar,
     PivotViewer,
diff --git a/Source/package.json b/Source/package.json
index e2d8853..46d83c5 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components",
-    "version": "0.1.8",
+    "version": "0.2.0",
     "description": "",
     "author": "Cratis",
     "license": "MIT",
@@ -11,12 +11,18 @@
     "publishConfig": {
         "access": "public"
     },
+    "type": "module",
     "files": [
         "dist",
         "!dist/**/*.stories.*",
-        "!dist/**/given.*"
+        "!dist/**/given.*",
+        "!dist/**/storybook-static/**",
+        "!dist/**/vite.config.*",
+        "!dist/**/vitest.setup.*",
+        "!dist/**/*.tsbuildinfo",
+        "!dist/cjs/**"
     ],
-    "main": "dist/cjs/index.js",
+    "main": "dist/esm/index.js",
     "module": "dist/esm/index.js",
     "types": "dist/esm/index.d.ts",
     "sideEffects": [
@@ -26,96 +32,87 @@
         "./package.json": "./package.json",
         ".": {
             "types": "./dist/esm/index.d.ts",
-            "require": "./dist/cjs/index.js",
             "import": "./dist/esm/index.js"
         },
         "./CommandDialog": {
             "types": "./dist/esm/CommandDialog/index.d.ts",
-            "require": "./dist/cjs/CommandDialog/index.js",
             "import": "./dist/esm/CommandDialog/index.js"
         },
         "./CommandStepper": {
             "types": "./dist/esm/CommandDialog/CommandStepper.d.ts",
-            "require": "./dist/cjs/CommandDialog/CommandStepper.js",
             "import": "./dist/esm/CommandDialog/CommandStepper.js"
         },
         "./CommandForm": {
             "types": "./dist/esm/CommandForm/index.d.ts",
-            "require": "./dist/cjs/CommandForm/index.js",
             "import": "./dist/esm/CommandForm/index.js"
         },
         "./CommandForm/fields": {
             "types": "./dist/esm/CommandForm/index.d.ts",
-            "require": "./dist/cjs/CommandForm/index.js",
             "import": "./dist/esm/CommandForm/index.js"
         },
         "./Common": {
             "types": "./dist/esm/Common/index.d.ts",
-            "require": "./dist/cjs/Common/index.js",
             "import": "./dist/esm/Common/index.js"
         },
         "./DataPage": {
             "types": "./dist/esm/DataPage/index.d.ts",
-            "require": "./dist/cjs/DataPage/index.js",
             "import": "./dist/esm/DataPage/index.js"
         },
         "./DataTables": {
             "types": "./dist/esm/DataTables/index.d.ts",
-            "require": "./dist/cjs/DataTables/index.js",
             "import": "./dist/esm/DataTables/index.js"
         },
         "./Dialogs": {
             "types": "./dist/esm/Dialogs/index.d.ts",
-            "require": "./dist/cjs/Dialogs/index.js",
             "import": "./dist/esm/Dialogs/index.js"
         },
+        "./Display": {
+            "types": "./dist/esm/Display/index.d.ts",
+            "import": "./dist/esm/Display/index.js"
+        },
         "./Dropdown": {
             "types": "./dist/esm/Dropdown/index.d.ts",
-            "require": "./dist/cjs/Dropdown/index.js",
             "import": "./dist/esm/Dropdown/index.js"
         },
         "./Filter": {
             "types": "./dist/esm/Filter/index.d.ts",
-            "require": "./dist/cjs/Filter/index.js",
             "import": "./dist/esm/Filter/index.js"
         },
+        "./Notifications": {
+            "types": "./dist/esm/Notifications/index.d.ts",
+            "import": "./dist/esm/Notifications/index.js"
+        },
         "./ObjectContentEditor": {
             "types": "./dist/esm/ObjectContentEditor/index.d.ts",
-            "require": "./dist/cjs/ObjectContentEditor/index.js",
             "import": "./dist/esm/ObjectContentEditor/index.js"
         },
         "./ObjectNavigationalBar": {
             "types": "./dist/esm/ObjectNavigationalBar/index.d.ts",
-            "require": "./dist/cjs/ObjectNavigationalBar/index.js",
             "import": "./dist/esm/ObjectNavigationalBar/index.js"
         },
         "./PivotViewer": {
             "types": "./dist/esm/PivotViewer/index.d.ts",
-            "require": "./dist/cjs/PivotViewer/index.js",
             "import": "./dist/esm/PivotViewer/index.js"
         },
         "./SchemaEditor": {
             "types": "./dist/esm/SchemaEditor/index.d.ts",
-            "require": "./dist/cjs/SchemaEditor/index.js",
             "import": "./dist/esm/SchemaEditor/index.js"
         },
         "./TimeMachine": {
             "types": "./dist/esm/TimeMachine/index.d.ts",
-            "require": "./dist/cjs/TimeMachine/index.js",
             "import": "./dist/esm/TimeMachine/index.js"
         },
         "./Toolbar": {
             "types": "./dist/esm/Toolbar/index.d.ts",
-            "require": "./dist/cjs/Toolbar/index.js",
             "import": "./dist/esm/Toolbar/index.js"
         },
         "./types": {
             "types": "./dist/esm/types/index.d.ts",
-            "require": "./dist/cjs/types/index.js",
             "import": "./dist/esm/types/index.js"
         },
         "./styles": "./dist/esm/tailwind-utilities.css",
-        "./tokens": "./dist/esm/tokens.css"
+        "./tokens": "./dist/esm/tokens.css",
+        "./theme": "./dist/esm/theme.css"
     },
     "scripts": {
         "prepare": "yarn g:build",
@@ -132,16 +129,19 @@
         "build-storybook": "npx storybook build"
     },
     "dependencies": {
+        "@primereact/core": "11.0.0",
+        "@primereact/headless": "11.0.0",
         "allotment": "1.20.5",
         "framer-motion": "12.42.2",
         "pixi.js": "^8.19.0",
-        "primeicons": "7.0.0",
-        "primereact": "10.9.8",
+        "primeicons": "8.0.0",
+        "primereact": "11.0.0",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
     },
     "devDependencies": {
-        "@cratis/arc.vite": "^20.49.2"
+        "@cratis/arc.vite": "^20.49.2",
+        "@primeuix/themes": "3.0.0"
     },
     "peerDependencies": {
         "@cratis/arc": "^20.3.1",
diff --git a/Source/rollup.config.mjs b/Source/rollup.config.mjs
index 05d5336..99a6f1b 100644
--- a/Source/rollup.config.mjs
+++ b/Source/rollup.config.mjs
@@ -7,8 +7,7 @@ import pkg from './package.json' with { type: 'json' };
 
 import path from "path";
 
-const cjsPath = path.dirname(pkg.main);
 const esmPath = path.dirname(pkg.module);
 const tsconfigPath = path.join(import.meta.dirname, "tsconfig.json");
 
-export default rollup(cjsPath, esmPath, tsconfigPath, pkg);
+export default rollup(esmPath, tsconfigPath, pkg);
diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index e2e5fdc..fa8ad9a 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -3,7 +3,8 @@
 # Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 # Find all CSS files (excluding node_modules, dist, and .storybook)
-# and copy them to both dist/esm and dist/cjs directories
+# and copy them into the ESM output directory. PrimeReact 11 is ESM-only, so
+# the package ships a single ESM build — there is no CJS output.
 
 find . -name '*.css' \
   -not -path './node_modules/*' \
@@ -11,17 +12,15 @@ find . -name '*.css' \
   -not -path './.storybook/*' \
   -not -name 'tailwind.css' \
   -not -name 'tailwind-utilities.css' | while read -r file; do
-  
+
   # Remove the leading './'
   relative_path="${file#./}"
-  
-  # Create directory structure and copy file to both output directories
+
+  # Create directory structure and copy file to the ESM output directory
   mkdir -p "dist/esm/$(dirname "$relative_path")"
-  mkdir -p "dist/cjs/$(dirname "$relative_path")"
-  
+
   cp "$file" "dist/esm/$relative_path"
-  cp "$file" "dist/cjs/$relative_path"
-  
+
   echo "Copied $relative_path"
 done
 
diff --git a/Source/theme.css b/Source/theme.css
new file mode 100644
index 0000000..6998292
--- /dev/null
+++ b/Source/theme.css
@@ -0,0 +1,357 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/*
+ * Cratis baseline theme — a token-based default look for the unstyled
+ * PrimeReact 11 components, built entirely on the `--cratis-*` / `--surface-*`
+ * token layer. It requires **no PrimeUI license** (unlike the styled
+ * `@primeuix/themes` presets).
+ *
+ * Usage: run the components `unstyled`, `import '@cratis/components/theme'`, and
+ * add `class="cratis-theme"` to an ancestor (e.g. <body> or your app root). The
+ * rules are scoped under `.cratis-theme` so it can also theme a subtree.
+ *
+ * It intentionally styles all buttons as filled primary (the unstyled DOM
+ * carries no variant/severity); component-owned CSS (ActionMenubar, paginator,
+ * toast, tooltip, filter menu) refines specific button roles on top.
+ */
+
+/* Concrete palette. The Cratis tokens normally resolve from a `@primeuix/themes`
+   preset's `--p-*` variables; with no preset (the license-free path) that chain
+   is empty, so the baseline theme supplies real colors here — deferring to a
+   preset's `--p-*` when one *is* present, and falling back to these otherwise. */
+.cratis-theme {
+    /* Paint the base surface, not just the text color — so the theme is
+       self-contained on any host background. Applied to <body> it fills the
+       viewport; applied to a subtree (a documented use) it establishes the
+       themed backdrop instead of letting the dark text fall on whatever is
+       behind it. The surface token flips light/dark with the palette below. */
+    color: var(--cratis-text-color);
+    background-color: var(--cratis-surface-section);
+
+    --cratis-primary-color:      var(--p-primary-color, #3b82f6);
+    --cratis-primary-color-text: var(--p-primary-contrast-color, #ffffff);
+    --cratis-primary-300:        var(--p-primary-300, #93c5fd);
+    --cratis-primary-400:        var(--p-primary-400, #60a5fa);
+    --cratis-primary-500:        var(--p-primary-500, #3b82f6);
+    --cratis-primary-600:        var(--p-primary-600, #2563eb);
+    --cratis-green-500:          var(--p-green-500, #22c55e);
+    --cratis-orange-500:         var(--p-orange-500, #f59e0b);
+    --cratis-red-500:            var(--p-red-500, #ef4444);
+
+    --cratis-surface-0:          var(--p-surface-0, #ffffff);
+    --cratis-surface-100:        var(--p-surface-100, #f1f5f9);
+    --cratis-surface-section:    var(--p-surface-50, #f8fafc);
+    --cratis-surface-card:       var(--p-surface-0, #ffffff);
+    --cratis-surface-overlay:    var(--p-surface-0, #ffffff);
+    --cratis-surface-hover:      var(--p-surface-100, #f1f5f9);
+    --cratis-surface-border:     var(--p-surface-200, #e2e8f0);
+
+    --cratis-text-color:           var(--p-text-color, #1e293b);
+    --cratis-text-color-secondary: var(--p-text-muted-color, #475569);
+    --cratis-highlight-bg:         var(--p-highlight-background, #dbeafe);
+    --cratis-highlight-text-color: var(--p-highlight-color, #1e40af);
+    --cratis-maskbg:               rgba(0, 0, 0, 0.4);
+    --cratis-border-radius:        6px;
+
+    /* Arc component chrome. @cratis/arc.react's field wrappers, form errors, and
+       dialogs read this `--color-*` token family; map it onto the palette so the
+       baseline theme also themes the Arc surface (labels, borders, field errors),
+       not only the PrimeReact components. The chrome/text tokens reference the
+       `--cratis-*` vars so they flip automatically in dark; the semantic colors
+       are WCAG-AA-safe on the light surface and re-declared for dark below. */
+    --color-text:                 var(--cratis-text-color);
+    --color-text-secondary:       var(--cratis-text-color-secondary);
+    --color-text-muted:           var(--cratis-text-color-secondary);
+    --color-border:               var(--cratis-surface-border);
+    --color-background-secondary: var(--cratis-surface-section);
+    --color-background-tertiary:  var(--cratis-surface-100);
+    --color-error:                #b91c1c;
+    --color-error-bg:             #fef2f2;
+    --color-success:              #15803d;
+    --color-warning:              #b45309;
+
+    /* Arc also reads these radius/spacing/font tokens (with no fallbacks of its
+       own); supply a scale so Arc chrome keeps its corners, padding, and gaps
+       under the baseline theme instead of collapsing to the initial value. */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+    /* Concrete values for two tokens tokens.css leaves preset-only. Filter/
+       FilterPanel.css (shipped via @cratis/components/Filter) consumes both
+       without inline fallbacks, so with no preset the Filter panel would lose its
+       sub-surface backgrounds and focus rings. */
+    --cratis-surface-ground: var(--p-surface-50, #f8fafc);
+    --cratis-focus-ring:     0 0 0 0.2rem rgba(59, 130, 246, 0.45);
+}
+
+/* Dark palette — applied when the `cratis-dark` class is on an ancestor. */
+.cratis-dark .cratis-theme,
+.cratis-theme.cratis-dark {
+    --cratis-surface-0:       #1e293b;
+    --cratis-surface-100:     #334155;
+    --cratis-surface-section: #0f172a;
+    --cratis-surface-card:    #1e293b;
+    --cratis-surface-overlay: #1e293b;
+    --cratis-surface-hover:   #334155;
+    --cratis-surface-border:  #334155;
+
+    --cratis-text-color:           #f8fafc;
+    --cratis-text-color-secondary: #cbd5e1;
+    --cratis-highlight-bg:         #1e3a8a;
+    --cratis-highlight-text-color: #ffffff;
+    --cratis-maskbg:               rgba(0, 0, 0, 0.6);
+    --cratis-surface-ground:       #020617;
+
+    /* Lighter semantic colors that stay AA-legible on the dark surface. The
+       chrome/text `--color-*` tokens follow the `--cratis-*` vars redefined
+       above, so only the concrete semantic colors are re-declared here. The
+       error-bg is deepened (red-950) so the #f87171 error text clears AA (~6.4:1)
+       on the exception banner, not just on the section surface. */
+    --color-error:    #f87171;
+    --color-error-bg: #450a0a;
+    --color-success:  #4ade80;
+    --color-warning:  #fbbf24;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius, 6px);
+    /* A WCAG-AA-safe filled shade against the white label. */
+    background: #1d4ed8;
+    color: #fff;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s, opacity 0.15s;
+}
+.cratis-theme [data-scope='button']:not([disabled]):hover { background: #1e40af; }
+.cratis-theme [data-scope='button']:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cratis-primary-300, var(--cratis-primary-color)); }
+.cratis-theme [data-scope='button'][disabled] { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Text inputs ─────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='inputtext'],
+.cratis-theme [data-scope='textarea'],
+.cratis-theme [data-scope='inputnumber'][data-part='input'],
+.cratis-theme [data-scope='datepicker'][data-part='input'],
+.cratis-theme [data-scope='inputtags'][data-part='control'],
+.cratis-theme [data-scope='select'][data-part='root'] {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: var(--cratis-surface-0);
+    color: var(--cratis-text-color);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius, 6px);
+    box-sizing: border-box;
+}
+.cratis-theme [data-scope='textarea'] { resize: vertical; min-height: 4rem; }
+.cratis-theme [data-scope='select'][data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+.cratis-theme [data-scope='select'][data-part='value'] { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
+.cratis-theme [data-scope='select'][data-part='arrow'],
+.cratis-theme [data-scope='datepicker'][data-part='trigger'] { color: var(--cratis-text-color-secondary); }
+.cratis-theme [data-scope='inputtext']:focus-visible,
+.cratis-theme [data-scope='textarea']:focus-visible,
+.cratis-theme [data-scope='inputnumber'][data-part='input']:focus-visible {
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: 0 0 0 2px var(--cratis-primary-300, transparent);
+}
+.cratis-theme [aria-invalid='true'],
+.cratis-theme [data-invalid] > [data-scope='inputtext'],
+.cratis-theme [data-scope='inputtext'][aria-invalid='true'] { border-color: var(--cratis-red-500); }
+
+/* ── Select / datepicker popup ───────────────────────────────────────────── */
+.cratis-theme [data-scope='select'][data-part='list'],
+.cratis-theme [data-scope='select'][data-part='popup'] {
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius, 6px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+.cratis-theme [data-scope='select'][data-part='option'] { padding: 0.5rem 0.75rem; cursor: pointer; }
+.cratis-theme [data-scope='select'][data-part='option']:hover,
+.cratis-theme [data-scope='select'][data-part='option'][data-selected] { background: var(--cratis-surface-hover); }
+
+/* ── Checkbox / radio ────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='checkboxbox'],
+.cratis-theme [data-scope='radiobutton'][data-part='box'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.15rem;
+    height: 1.15rem;
+    background: var(--cratis-surface-0);
+    border: 1px solid var(--cratis-surface-border);
+    color: var(--cratis-primary-color-text);
+}
+.cratis-theme [data-scope='checkboxbox'] { border-radius: 4px; }
+.cratis-theme [data-scope='radiobutton'][data-part='box'] { border-radius: 50%; }
+.cratis-theme [data-scope='checkbox'][data-part='root'][data-checked] [data-scope='checkboxbox'],
+.cratis-theme [data-scope='radiobutton'][data-part='root'][data-checked] [data-part='box'] {
+    background: var(--cratis-primary-color);
+    border-color: var(--cratis-primary-color);
+}
+
+/* ── Toggle switch ───────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='toggleswitch'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    width: 2.5rem;
+    height: 1.4rem;
+    padding: 0.15rem;
+    background: var(--cratis-surface-border);
+    border-radius: 999px;
+    transition: background-color 0.15s;
+}
+.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='control'] { background: var(--cratis-primary-color); }
+.cratis-theme [data-scope='toggleswitch'][data-part='handle'] {
+    width: 1.1rem;
+    height: 1.1rem;
+    background: var(--cratis-surface-0);
+    border-radius: 50%;
+    transition: transform 0.15s;
+}
+.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='handle'] { transform: translateX(1.1rem); }
+
+/* ── Slider ──────────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='slider'][data-part='track'] { height: 0.35rem; background: var(--cratis-surface-border); border-radius: 999px; }
+.cratis-theme [data-scope='slider'][data-part='range'] { height: 0.35rem; background: var(--cratis-primary-color); border-radius: 999px; }
+.cratis-theme [data-scope='slider'][data-part='handle'] { width: 1.1rem; height: 1.1rem; background: var(--cratis-primary-color); border-radius: 50%; }
+
+/* ── Dialog ──────────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='dialog'][data-part='backdrop'],
+.cratis-theme [data-scope='dialog'][data-part='mask'] { background: var(--cratis-maskbg, rgba(0, 0, 0, 0.5)); }
+.cratis-theme [data-scope='dialog'][data-part='popup'] {
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    border-radius: 0.75rem;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+    overflow: hidden;
+}
+.cratis-theme [data-scope='dialog'][data-part='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+    font-weight: 600;
+}
+.cratis-theme [data-scope='dialog'][data-part='content'] { padding: 1.25rem; }
+.cratis-theme [data-scope='dialog'][data-part='footer'] { padding: 1rem 1.25rem; border-top: 1px solid var(--cratis-surface-border); }
+.cratis-theme [data-scope='dialog'][data-part='close'] {
+    border: none; background: transparent; color: var(--cratis-text-color-secondary);
+    cursor: pointer; padding: 0.25rem; border-radius: 0.25rem;
+}
+.cratis-theme [data-scope='dialog'][data-part='close']:hover { color: var(--cratis-text-color); background: var(--cratis-surface-hover); }
+
+/* ── DataTable ───────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='datatable'][data-part='table'] { width: 100%; border-collapse: collapse; }
+.cratis-theme [data-scope='datatable'][data-part='thead'] { background: var(--cratis-surface-section); }
+.cratis-theme [data-scope='datatable'][data-part='theadcell'] {
+    padding: 0.625rem 0.75rem; text-align: left; font-weight: 600;
+    color: var(--cratis-text-color-secondary); border-bottom: 1px solid var(--cratis-surface-border);
+}
+.cratis-theme [data-scope='datatable'][data-part='cell'] { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--cratis-surface-border); }
+.cratis-theme [data-scope='datatable'][data-part='row']:hover { background: var(--cratis-surface-hover); }
+.cratis-theme [data-scope='datatable'][data-part='row'][data-selected] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
+
+/* ── Tag / Badge ─────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='tag'] {
+    display: inline-flex; align-items: center; gap: 0.25rem;
+    padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 500;
+    background: var(--cratis-surface-hover); color: var(--cratis-text-color);
+}
+.cratis-theme [data-scope='badge'] {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 999px;
+    font-size: 0.75rem; font-weight: 600; background: #1d4ed8; color: #fff;
+}
+/* Filled severity backgrounds use WCAG-AA-safe (darker) shades against white text. */
+.cratis-theme [data-severity='success'] { background: #15803d; color: #fff; }
+.cratis-theme [data-severity='info'] { background: #1d4ed8; color: #fff; }
+.cratis-theme [data-severity='warn'] { background: #b45309; color: #fff; }
+.cratis-theme [data-severity='danger'] { background: #b91c1c; color: #fff; }
+.cratis-theme [data-severity='secondary'] { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
+
+/* ── Chip / Avatar ───────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='chip'][data-part='root'] {
+    display: inline-flex; align-items: center; gap: 0.375rem;
+    padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--cratis-surface-hover); color: var(--cratis-text-color);
+}
+.cratis-theme [data-scope='chip'][data-part='remove'] { cursor: pointer; color: var(--cratis-text-color-secondary); }
+.cratis-theme [data-scope='avatar'][data-part='root'] {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden;
+    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
+}
+.cratis-theme [data-scope='avatar'][data-part='root'][data-size='large'] { width: 3rem; height: 3rem; }
+
+/* ── ProgressBar / Skeleton ──────────────────────────────────────────────── */
+.cratis-theme [data-scope='progressbar'][data-part='root'] {
+    height: 1.25rem; background: var(--cratis-surface-border); border-radius: 999px; overflow: hidden;
+}
+.cratis-theme [data-scope='progressbar'][data-part='indicator'] {
+    display: flex; align-items: center; justify-content: center; height: 100%;
+    background: #1d4ed8; color: #fff; font-size: 0.75rem;
+    transition: width 0.2s;
+}
+.cratis-theme [data-scope='skeleton'] {
+    display: block; background: var(--cratis-surface-hover); border-radius: 4px;
+    animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
+}
+@keyframes cratis-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* ── Stepper ─────────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='stepper'][data-part='number'] {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 1.75rem; height: 1.75rem; border-radius: 50%;
+    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
+}
+.cratis-theme [data-scope='stepper'][data-part='step'][data-active] [data-part='number'] {
+    background: var(--cratis-primary-color); color: var(--cratis-primary-color-text);
+}
+.cratis-theme [data-scope='stepper'][data-part='separator'] { background: var(--cratis-surface-border); }
+.cratis-theme [data-scope='stepper'][data-part='header'] {
+    display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; color: inherit;
+}
+
+/* ── Rating ──────────────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='rating'][data-part='root'] { display: inline-flex; gap: 0.25rem; }
+.cratis-theme [data-scope='rating'] .pi { font-size: 1.25rem; cursor: pointer; }
+.cratis-theme [data-scope='rating'] .pi-star { color: var(--cratis-surface-border); }
+.cratis-theme [data-scope='rating'] .pi-star-fill { color: var(--cratis-orange-500, #f59e0b); }
+
+/* ── ProgressSpinner (BusyIndicatorDialog) ───────────────────────────────────
+   The unstyled primitive is a bare SVG circle with no stroke or motion; give it
+   a visible ring and spin it so the busy indicator actually shows. */
+.cratis-theme [data-scope='progressspinner'][data-part='root'] {
+    display: inline-block; width: 2.5rem; height: 2.5rem;
+    animation: cratis-spin 1s linear infinite;
+}
+.cratis-theme [data-scope='progressspinner'] svg { width: 100%; height: 100%; }
+.cratis-theme [data-scope='progressspinner'] circle {
+    fill: none; stroke: var(--cratis-primary-color, #3b82f6); stroke-width: 4;
+    stroke-linecap: round; stroke-dasharray: 80 200;
+}
+@keyframes cratis-spin { to { transform: rotate(360deg); } }
diff --git a/rollup.config.mjs b/rollup.config.mjs
index c91c002..06892b7 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -10,20 +10,21 @@ import { dirname, join, resolve } from 'path';
 /**
  * Rollup plugin that compiles the Tailwind entry CSS through PostCSS after the
  * bundle is written, producing a self-contained tailwind-utilities.css written
- * into both the ESM and CJS output directories.
+ * into the ESM output directory.
  *
  * Because Rollup's external rule preserves CSS imports verbatim in the output
- * JS, the `import './tailwind-utilities.css'` added to index.ts will be kept
- * in dist/esm/index.js and dist/cjs/index.js.  Vite (or any bundler) in the
- * consuming app then finds the CSS file sitting next to the JS and injects it
- * automatically — no manual import required in the consumer app.
+ * JS, any `import './tailwind-utilities.css'` is kept in dist/esm/index.js.
+ * Vite (or any bundler) in the consuming app then finds the CSS file sitting
+ * next to the JS and injects it automatically — no manual import required in
+ * the consumer app. Consumers reach it explicitly through the `./styles`
+ * package export.
  *
  * Without this step the utility classes (e.g. p-2, gap-1, w-10 …) only exist
  * in the package's source JSX and would never be generated by the consuming
  * app's own Tailwind build, because node_modules is typically excluded from
  * content scanning.
  */
-function compileTailwind(sourceDir, cjsPath, esmPath) {
+function compileTailwind(sourceDir, esmPath) {
     let hasRun = false;
     return {
         name: 'compile-tailwind',
@@ -39,38 +40,27 @@ function compileTailwind(sourceDir, cjsPath, esmPath) {
 
             const css = readFileSync(inputFile, 'utf8');
 
-            for (const outputDir of [cjsPath, esmPath]) {
-                const outputFile = resolve(outputDir, 'tailwind-utilities.css');
-                const result = await postcss([tailwindcss({ base: sourceDir }), autoprefixer]).process(css, {
-                    from: inputFile,
-                    to: outputFile,
-                });
-                mkdirSync(dirname(outputFile), { recursive: true });
-                writeFileSync(outputFile, result.css);
-            }
-            console.log('✓ Compiled Tailwind utilities → dist/{cjs,esm}/tailwind-utilities.css');
+            const outputFile = resolve(esmPath, 'tailwind-utilities.css');
+            const result = await postcss([tailwindcss({ base: sourceDir }), autoprefixer]).process(css, {
+                from: inputFile,
+                to: outputFile,
+            });
+            mkdirSync(dirname(outputFile), { recursive: true });
+            writeFileSync(outputFile, result.css);
+            console.log('✓ Compiled Tailwind utilities → dist/esm/tailwind-utilities.css');
         },
     };
 }
 
 /**
- * Rollup plugin to generate package.json files in output directories
- * This ensures proper module resolution for both CJS and ESM formats
+ * Rollup plugin to generate the package.json in the ESM output directory,
+ * marking it as an ES module. PrimeReact 11 is ESM-only, so the package ships
+ * a single ESM build — there is no CJS output.
  */
-function generatePackageJson(cjsPath, esmPath) {
+function generatePackageJson(esmPath) {
     return {
         name: 'generate-package-json',
         buildEnd() {
-            // Create CJS package.json
-            const cjsDir = cjsPath;
-            mkdirSync(cjsDir, { recursive: true });
-            writeFileSync(
-                join(cjsDir, 'package.json'),
-                JSON.stringify({ type: 'commonjs' }, null, 2),
-                'utf-8'
-            );
-
-            // Create ESM package.json
             const esmDir = esmPath;
             mkdirSync(esmDir, { recursive: true });
             writeFileSync(
@@ -79,25 +69,17 @@ function generatePackageJson(cjsPath, esmPath) {
                 'utf-8'
             );
 
-            console.log('✓ Generated package.json files for CJS and ESM outputs');
+            console.log('✓ Generated package.json for ESM output');
         }
     };
 }
 
-export function rollup(cjsPath, esmPath, tsconfigPath, pkg) {
+export function rollup(esmPath, tsconfigPath, pkg) {
     const sourceDir = dirname(tsconfigPath);
     return {
         input: 'index.ts',
 
         output: [
-            {
-                dir: cjsPath,
-                format: "cjs",
-                exports: "named",
-                sourcemap: true,
-                preserveModules: true,
-                preserveModulesRoot: "."
-            },
             {
                 dir: esmPath,
                 format: "es",
@@ -113,6 +95,8 @@ export function rollup(cjsPath, esmPath, tsconfigPath, pkg) {
             /^@cratis\/components/,
             /^@cratis\/arc/,
             /^primereact\//,
+            /^@primereact\//,
+            /^@primeuix\//,
             /^primeicons/,
             /^react-icons\//,
             /\.css$/,
@@ -140,8 +124,8 @@ export function rollup(cjsPath, esmPath, tsconfigPath, pkg) {
                     composite: false,
                 }
             }),
-            generatePackageJson(cjsPath, esmPath),
-            compileTailwind(sourceDir, cjsPath, esmPath),
+            generatePackageJson(esmPath),
+            compileTailwind(sourceDir, esmPath),
         ]
     };
 }