@cratis/scene.primereact 1.1.0 → 3.0.0

package/.storybook/preview.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 type { Decorator, Preview } from '@storybook/react';
+import { PrimeReactProvider } from '@primereact/core';
+import { primeReactTheme, usePrimeReactTheme } from '../theme';
+import '../primeReactTheme.css';
+import './preview.css';
+
+// PrimeReact 11 ships no CSS at all - there is no `primereact/resources` directory any more, so the two
+// stylesheet imports that used to sit here (the compiled theme and the structural sheet) have nothing to
+// resolve to. Only the icon font is still a stylesheet.
+import 'primeicons/primeicons.css';
+
+/**
+ * Puts every story inside a `PrimeReactProvider` carrying a real Scene theme.
+ *
+ * This is the v11 replacement for importing a compiled theme stylesheet, and it is not merely a
+ * different way to spell the same thing: in v11 a look *only* exists once a preset has reached the
+ * provider, because that is what makes `@primeuix/styled` emit the `--p-*` custom properties every
+ * component reads. A story rendered outside a provider is not "unthemed", it is unstyled.
+ *
+ * Going through `usePrimeReactTheme` rather than importing a preset directly means the stories exercise
+ * the same path an application does, so a break in Scene's own theme resolution shows up here rather
+ * than only in an application that consumes the package.
+ */
+const withTheme: Decorator = (Story) => {
+    const configuration = usePrimeReactTheme(primeReactTheme('lara-light-blue'));
+
+    return (
+        <PrimeReactProvider value={configuration}>
+            <Story />
+        </PrimeReactProvider>
+    );
+};
+
+const preview: Preview = {
+    decorators: [withTheme],
+    parameters: {
+        controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+    },
+};
+
+export default preview;

package/MenuItem.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * One entry in a menu, menubar, breadcrumb, split button, dock or tiered menu.
+ *
+ * This type used to be PrimeReact's, imported from `primereact/menuitem`. PrimeReact 11 removed that
+ * module along with every component that consumed it, so the shape is Scene's now.
+ *
+ * Owning it turns out to be the better arrangement rather than a consolation. The authored `{ label,
+ * icon, items }` shape is Scene's vocabulary - it is what a `.play` file writes and what `toMenuItems`
+ * produces - and it never needed to be defined by whichever component library happened to render it.
+ * With the type here, the ten adapters that share it agree with each other rather than with a third
+ * party, and a Cratis-owned replacement for a removed PrimeReact menu takes the same items as the
+ * PrimeReact-backed ones do.
+ *
+ * The shape is deliberately the subset Scene actually authors, not a port of PrimeReact 10's full
+ * `MenuItem`. Carrying over fields nothing reads would be inventing a contract to maintain.
+ */
+export interface MenuItem {
+    /**
+     * The text shown for the entry. Absent only on a separator, which has nothing to label.
+     */
+    label?: string;
+
+    /**
+     * An icon class - a `pi pi-*` class from `primeicons`, or any class an application's own icon font
+     * defines.
+     */
+    icon?: string;
+
+    /**
+     * A navigation target. Present when the entry is a link rather than a command.
+     */
+    url?: string;
+
+    /**
+     * Nested entries. Any depth: a menubar and a tiered menu differ in how deep an author goes, not in
+     * what they accept.
+     */
+    items?: MenuItem[];
+
+    /**
+     * Whether the entry is a divider rather than something selectable.
+     */
+    separator?: boolean;
+
+    /**
+     * Whether the entry is shown but cannot be chosen.
+     */
+    disabled?: boolean;
+
+    /**
+     * Invoked when the entry is chosen.
+     */
+    command?: () => void;
+}

package/PrimeSeverity.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 severities PrimeReact 11 accepts, as it spells them.
+ *
+ * This is a union rather than an enum, which is the one place in this package that convention is worth
+ * departing from. The value is handed straight to PrimeReact props whose own types are string-literal
+ * unions, and a TypeScript string enum member is *not* assignable to a string literal - so an enum here
+ * would buy discoverability at the cost of a cast at every call site, which is the opposite of the point.
+ * The rule exists for vocabularies Scene owns; this one is PrimeReact's contract, and mirroring it exactly
+ * is what keeps the adapters cast-free.
+ *
+ * Not every component accepts every member - `Message` takes a narrower set than `Button` does - so a
+ * component still narrows further where its own prop type demands it.
+ */
+export type PrimeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'help' | 'contrast';

package/README.md

@@ -1,7 +1,7 @@
 # @cratis/scene.primereact
 
 The PrimeReact component package for Scene. It maps Scene's abstract component names onto real
-PrimeReact 10 components, and PrimeReact's free PrimeTek themes onto Scene `Theme` objects.
+PrimeReact 11 components, and PrimeTek's `@primeuix/themes` presets onto Scene `Theme` objects.
 
 User-facing documentation lives in [`Documentation/primereact-package/`](../../../Documentation/primereact-package/index.md).
 This file is the contributor's note: the conventions the source follows and the reasoning behind them.
@@ -13,12 +13,13 @@ primereact/
 ├── primeReactPackage.ts        the ScenePackage manifest + the ScenePackageBundle
 ├── primeReactComponents.ts     the ComponentRegistry - every abstract name to its adapter
 ├── properties.ts               typed readers for element.properties
-├── menuItems.ts, treeNodes.ts  shared readers for the two nested models PrimeReact reuses
-├── primeReactTheme.css         the Scene token <-> PrimeReact variable bridge
+├── menuItems.ts, treeNodes.ts  shared readers for the two nested models the menus and trees reuse
+├── MenuItem.ts, TreeNode.ts    those two models - Scene's own since v11 removed PrimeReact's
+├── primeReactTheme.css         the Scene token <-> PrimeReact design-token bridge
 ├── storyElements.ts            fixture builders the galleries share
 ├── button/ data/ form/ media/ menu/ messages/ misc/ overlay/ panel/ screen/
 │                               one adapter per file, grouped by PrimeReact family
-├── theme/                      the theme catalog, the stylesheet helper and the live swap
+├── theme/                      the theme catalog and the preset resolution behind it
 └── for_*/                      BDD specs beside the code they specify
 ```
 
@@ -30,8 +31,9 @@ and two things called `Dropdown` in one file is how confusion starts. It follows
 `CoreText` precedent in `@cratis/scene.react`.
 
 **Abstract names are `lowerCamelCase`** — `inputText`, `dataTable`, `selectButton`. The abstract name
-follows what the component *is*, not what PrimeReact 10 happens to call it: `toggleSwitch` maps onto v10's
-`InputSwitch`, and v11 renames that component to `ToggleSwitch`, so the abstract name was already right.
+follows what the component *is*, not what PrimeReact happens to call it this major version:
+`toggleSwitch` mapped onto v10's `InputSwitch`, and v11 renamed that component to `ToggleSwitch` - the
+abstract name had been right all along and did not move.
 
 **Three names are deliberately shared with `core`** — `text`, `button` and `card`. That is override
 priority working as designed, not a collision. Seven more (`table`, `column`, `title`, `field`,
@@ -53,52 +55,59 @@ Thirteen semantic tokens, and every Scene package must agree on them — a vocab
 package is one no package can rely on. `primeReactTheme.css` is the only place the Scene names and
 PrimeReact's names meet.
 
-| Scene token | CSS custom property | PrimeReact 10 variable |
+| Scene token | CSS custom property | PrimeReact 11 design token |
 | --- | --- | --- |
-| `primary.color` | `--scene-primary-color` | `--primary-color` |
-| `primary.contrastColor` | `--scene-primary-contrast-color` | `--primary-color-text` |
-| `surface.background` | `--scene-surface-background` | `--surface-ground` |
-| `surface.card` | `--scene-surface-card` | `--surface-card` |
-| `surface.border` | `--scene-surface-border` | `--surface-border` |
-| `surface.hover` | `--scene-surface-hover` | `--surface-hover` |
-| `surface.overlay` | `--scene-surface-overlay` | `--surface-overlay` |
-| `text.color` | `--scene-text-color` | `--text-color` |
-| `text.mutedColor` | `--scene-text-muted-color` | `--text-color-secondary` |
-| `highlight.background` | `--scene-highlight-background` | `--highlight-bg` |
-| `highlight.color` | `--scene-highlight-color` | `--highlight-text-color` |
-| `content.borderRadius` | `--scene-content-border-radius` | `--border-radius` |
-| `focus.ring` | `--scene-focus-ring` | `--focus-ring` |
+| `primary.color` | `--scene-primary-color` | `--p-primary-color` |
+| `primary.contrastColor` | `--scene-primary-contrast-color` | `--p-primary-contrast-color` |
+| `surface.background` | `--scene-surface-background` | `--p-surface-50` / `--p-surface-950` |
+| `surface.card` | `--scene-surface-card` | `--p-content-background` |
+| `surface.border` | `--scene-surface-border` | `--p-content-border-color` |
+| `surface.hover` | `--scene-surface-hover` | `--p-content-hover-background` |
+| `surface.overlay` | `--scene-surface-overlay` | `--p-overlay-popover-background` |
+| `text.color` | `--scene-text-color` | `--p-text-color` |
+| `text.mutedColor` | `--scene-text-muted-color` | `--p-text-muted-color` |
+| `highlight.background` | `--scene-highlight-background` | `--p-highlight-background` |
+| `highlight.color` | `--scene-highlight-color` | `--p-highlight-color` |
+| `content.borderRadius` | `--scene-content-border-radius` | `--p-content-border-radius` |
+| `focus.ring` | `--scene-focus-ring` | `--p-focus-ring-shadow` |
+
+The v10 column of this table was an ad-hoc vocabulary that could only be learned by reading compiled
+stylesheets; v11's is one systematic `--p-*` namespace derived from the preset's own token paths, so
+the bridge shrank.
 
 The bridge runs both ways, and the scoping is load-bearing. On `:root`, each Scene token falls back to
-the loaded PrimeReact theme. Inside `[data-scene-theme-root]` — the element `SceneThemeProvider` writes
+the active preset's `--p-*` value. Inside `[data-scene-theme-root]` — the element `SceneThemeProvider` writes
 tokens onto — the Scene tokens are fed back onto PrimeReact's variables. The second rule must never move
 to `:root`: custom properties that reference each other on the *same* element form a cycle, are invalid
 at computed-value time, and resolve to nothing.
 
 ## Themes
 
-25 free PrimeTek themes. Token values are read verbatim from each theme's own `theme.css` `:root` block,
-so a Scene token always agrees with what the PrimeReact stylesheet renders — including `lara-light-teal`,
-which really does ship the same color for `--highlight-bg` and `--highlight-text-color`. There is one
-deliberate deviation: PrimeReact 10.9.8 ships `viva-dark` with an unresolved SCSS expression,
-`rgba($primaryColor, 0.08)`, for `--surface-hover`; that is not valid CSS, so the intended value is used
-instead.
+24 themes across the four `@primeuix/themes` preset families - Aura, Lara, Nora and Material - each bound
+to one of the preset's own primitive color ramps for its accent.
 
-Every theme is PrimeTek's work and none is ours. Attribution is applied once in `primeReactThemes.ts` to
-every preset rather than written per theme, so a twenty-sixth theme cannot be added without it. The full
-attribution table is in
+The token values are **generated**, not transcribed. A v10 theme was a compiled stylesheet whose `:root`
+block could be read with a text editor; a v11 preset is a JavaScript object whose values are token
+references (`{emerald.500}`, `light-dark({surface.0}, {surface.900})`) that `@primeuix/styled` resolves at
+runtime. What is committed in `themePresets.ts` is the output of running those same resolution rules, so
+the catalog stays plain data a picker can read without booting a theme engine while still agreeing with
+what the preset renders. A spec fails the build if any token still holds an unresolved reference.
+
+Every theme is PrimeTek's design work and none is ours - Scene picks the accent and nothing else.
+Attribution is applied once in `primeReactThemes.ts` to every preset rather than written per theme, so a
+twenty-fifth theme cannot be added without it. The full attribution table is in
 [the theme reference](../../../Documentation/primereact-package/theme-reference.md).
 
 | Field | Value |
 | --- | --- |
 | `author` | `PrimeTek` |
 | `authorUrl` | `https://primereact.org` |
-| `license` | `MIT` — verified in `node_modules/primereact/LICENSE.md`: "The MIT License (MIT), Copyright (c) 2016-2025 PrimeTek" |
+| `license` | `PrimeUI Commercial` - **not MIT.** v10 and its themes were MIT; v11 relicensed the whole stack. See [Licensing](#licensing). |
 
 `compatibleWith` is `['PrimeReact', 'Tailwind', 'core']`. `core` is listed deliberately:
 `ThemeCompatibility` has no implicit exemption for it, and these themes genuinely reach `core`'s
-components — through the semantic token layer `SceneThemeProvider` applies to the whole subtree, though
-not through the PrimeReact stylesheet, which only ever matches `.p-*` elements.
+components - through the semantic token layer `SceneThemeProvider` applies to the whole subtree, though
+not through the `--p-*` properties, which only PrimeReact's own components read.
 
 ## Not covered
 
@@ -110,65 +119,43 @@ not through the PrimeReact stylesheet, which only ever matches `.p-*` elements.
 Both are genuinely useful and both are deliberate omissions, not oversights. A profile needing them
 should activate a package that owns that dependency.
 
-Also worth knowing: `column` renders nothing on its own. That is PrimeReact's own semantics — a bare
-`<Column/>` outside a `DataTable` renders nothing either. When a `column` element is nested under
-`dataTable` or `table`, the table reads its `field`/`header`/`sortable` off the *model* (`element.slots`)
-rather than the rendered node, because PrimeReact identifies its columns by React element type and a
-wrapper would not be recognized as one.
-
-## Migrating to PrimeReact 11
-
-PrimeReact 11 exists, but this package targets **10.9.8** and must keep doing so: Cratis Studio pins
-`primereact` to `10.9.8` through a root `resolutions` entry, and `@cratis/components` depends on exactly
-that version. Import from `primereact/*` only — never `@primereact/*` or `@primeuix/themes`.
-
-The renames are recorded here so the eventual port is a known quantity rather than a discovery.
-
-### Renames
-
-| PrimeReact 10 | PrimeReact 11 |
-| --- | --- |
-| `Dropdown` | `Select` |
-| `Calendar` | `DatePicker` |
-| `OverlayPanel` | `Popover` |
-| **`Sidebar`** | **`Drawer`** |
-| `InputSwitch` | `ToggleSwitch` |
-| `TabView` + `TabPanel` | `Tabs` |
-| `InputTextarea` | `Textarea` |
-| `Password` | `InputPassword` |
-| `Chips` | `InputTags` |
-| `ColorPicker` | `InputColor` |
-| `Galleria` | `Gallery` |
-| `ScrollPanel` | `ScrollArea` |
-| `SelectButton` | `ToggleButtonGroup` |
-
-> [!WARNING]
-> **`Sidebar` is the trap.** v10's `Sidebar` becomes `Drawer`, *and* v11 introduces a brand-new,
-> unrelated `Sidebar` for application-shell navigation. A port that follows the name rather than the
-> behavior silently swaps a slide-in overlay for a static shell element, and it will compile.
-
-### Moved to commercial packages
-
-`Chart` and `Editor` move to `@primeuipro/*` and have no React release yet. This package does not map
-either of them, so nothing here is affected.
-
-### Became hooks
-
-`InputMask`, `KeyFilter`, `ScrollTop`, `OrderList` and `PickList` are hooks in v11 rather than
-components. The four this package maps — `inputMask`, `scrollTop`, `orderList`, `pickList` — each need a
-rewrite, not a rename.
-
-### Removed
-
-`ConfirmPopup`, `BlockUI`, `PanelMenu`, `TabMenu`, `DeferredContent`, `DataScroller`,
-`TriStateCheckbox`, `MultiStateCheckbox`, `SlideMenu`, `Mention`, `Dock` and `Ripple` are gone. Four of
-them are mapped here — `blockUI`, `panelMenu`, `tabMenu` and `dock` — and each needs a replacement built
-from what remains, or the abstract name retired from the manifest.
-
-### Icons
-
-v11 components ship **no icons**. Every `icon` property this package passes through assumes `primeicons`
-is loaded, which stays true, but v11's own components no longer bundle their internal ones.
+Also worth knowing: `column` renders nothing on its own, and since PrimeReact 11 that is *our* semantics
+rather than PrimeReact's. v11 removed `primereact/column`, so `data/Column.tsx` is a Cratis-owned
+declaration component that returns `null`. When a `column` element is nested under `dataTable` or `table`,
+the table reads its `field`/`header`/`sortable` off the *model* (`element.slots`) rather than the rendered
+node - which is why the derivation survived the v11 port unchanged.
+
+## PrimeReact 11
+
+This package targets **11.1.0**. The full record of the port from 10.9.8 - every rename, every abstract
+name that lost its component, and what was built, converted or dropped for each - is in
+[the migration page](../../../Documentation/primereact-package/primereact-11-migration.md).
+
+The short version for a contributor:
+
+- **v11 is compositional.** `primereact/select` exports `Select.Root` / `Trigger` / `Value` / `Portal` /
+  `Positioner` / `Popup` / `List` / `Option` and you assemble them. Most renames are more than an import.
+- **`Sidebar` is the trap.** v10's `Sidebar` is v11's `Drawer`, *and* v11 introduces a brand-new,
+  unrelated `Sidebar` for application-shell navigation. Following the name rather than the behavior
+  compiles cleanly and silently swaps an overlay for a static shell.
+- **v11 ships zero CSS.** There is no `primereact/resources` directory. A look comes from a preset handed
+  to `PrimeReactProvider`; `usePrimeReactTheme` returns that configuration for a Scene theme.
+- **14 abstract names are now backed by Cratis-owned components** built here because v11 removed theirs,
+  2 are expressed over `@primereact/headless` hooks, and 4 were dropped from the manifest
+  (`cascadeSelect`, `inputMask`, `treeTable`, `virtualScroller`).
+- **`MenuItem` and `TreeNode` are Scene's types now** - `primereact/menuitem` and `primereact/treenode`
+  were removed. Import them from this package, never from `primereact/*`.
+
+### Licensing
+
+PrimeReact 10 was MIT. PrimeReact 11 is not, and neither is `primeicons` 8, `@primereact/core`,
+`@primereact/headless`, `@primeuix/themes` or `@primeuix/styled` - all are under the commercial PrimeUI
+license and **require a license key regardless of how you style**. The check runs in `PrimeReactProvider`
+on mount with no condition on `unstyled`, on `theme`, or on `NODE_ENV`; without a key you get a console
+warning and an "Invalid PrimeUI License" banner in development and production alike.
+
+See [the migration page](../../../Documentation/primereact-package/primereact-11-migration.md#licensing)
+for the community and commercial tiers and the redistribution clause.
 
 ## Gates
 

package/TreeNode.ts

@@ -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.
+
+/**
+ * One node in a tree, tree select or organization chart.
+ *
+ * This type used to be PrimeReact's, imported from `primereact/treenode`. PrimeReact 11 removed that
+ * module, so the shape is Scene's now - the same move, and for the same reason, as {@link MenuItem}.
+ *
+ * `key` is the load-bearing field and the reason this is a named type rather than an inline shape.
+ * Expansion and selection are both keyed off it, so a tree of unkeyed nodes expands the wrong rows the
+ * moment two siblings share a label. `toTreeNodes` synthesizes one from the node's path when an author
+ * did not supply it, which is why the field is optional here but always populated by the time a node
+ * reaches a component.
+ */
+export interface TreeNode {
+    /**
+     * Identity, unique across the whole tree. Synthesized from the node's path when not authored.
+     */
+    key?: string;
+
+    /**
+     * The text shown for the node.
+     */
+    label?: string;
+
+    /**
+     * An icon class - a `pi pi-*` class from `primeicons`, or any class an application's own icon font
+     * defines.
+     */
+    icon?: string;
+
+    /**
+     * Child nodes. A node with no `children` is a leaf.
+     */
+    children?: TreeNode[];
+
+    /**
+     * Whether the node starts out expanded.
+     */
+    expanded?: boolean;
+
+    /**
+     * A class applied to the node's row, so an author can mark a node out visually - a warning state, a
+     * muted row - without the tree needing to know what the mark means.
+     */
+    className?: string;
+
+    /**
+     * Whether the node is a leaf regardless of whether it currently has `children`.
+     *
+     * This exists for lazily loaded trees, where a node's children are fetched only when it is expanded:
+     * without it, an unexpanded branch and a leaf are indistinguishable, so every leaf would render an
+     * expand affordance that resolves to nothing.
+     */
+    leaf?: boolean;
+
+    /**
+     * Whether the node is shown but cannot be selected.
+     */
+    selectable?: boolean;
+
+    /**
+     * Whatever the author attached to the node - the row behind it, an id, a payload. Opaque to every
+     * adapter; carried so a selection handler can get back to what was selected.
+     */
+    data?: unknown;
+}

package/button/ButtonGallery.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         layout: 'padded',
-        docs: { description: { component: 'The button family. Note that `button` deliberately claims the same bare name `core` declares, so a profile listing core then PrimeReact resolves it here.' } },
+        docs: { description: { component: 'The button family. Note that `button` deliberately claims the same bare name `core` declares, so a profile listing core then PrimeReact resolves it here. `splitButton` is a Cratis-owned rebuild - PrimeReact 11 removed its own with no replacement - composed from the `Button` and `Popover` that survived, so it is themed and positioned by the same machinery as everything beside it.' } },
     },
 } satisfies Meta<typeof SceneElementView>;
 

package/button/PrimeButton.tsx

@@ -3,7 +3,7 @@
 
 import { Button } from 'primereact/button';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { booleanProperty, stringProperty } from '../properties';
+import {booleanProperty, severityProperty, stringProperty} from '../properties';
 
 /**
  * The `PrimeReact:button` component.
@@ -12,19 +12,37 @@ import { booleanProperty, stringProperty } from '../properties';
  * `PrimeReact` resolves `button` to this one and records that it shadowed core's - which is the whole
  * point of override priority, and the reason a screen written against the fallback vocabulary gets a real
  * themed button the moment a component library is added to the profile, with no edit to the screen.
+ *
+ * PrimeReact 11 reshaped the props under it, and the adapter absorbs all of it so screens do not have to.
+ * `label` and `icon` are children now rather than props. The `outlined` and `text` booleans collapsed into
+ * a single `variant`, which is the better model - they were never combinable - and the authored booleans
+ * are still read and translated. `warning` became `warn`.
+ *
+ * `loading` is the one that could not simply be translated: v11 dropped it. The state still matters to a
+ * screen, so it is rebuilt from parts that exist - a spinning icon in place of the button's own, the
+ * button disabled so the action cannot be fired twice, and `aria-busy` so the state is announced rather
+ * than only drawn. The icon is marked decorative throughout because the label already names the action.
  */
 export function PrimeButton({ element, slots }: RegisteredComponentProps) {
+    const icon = stringProperty(element, 'icon');
+    const severity = severityProperty(element, 'severity');
+    const loading = booleanProperty(element, 'loading', false);
+
+    let variant: 'link' | 'text' | 'outlined' | undefined;
+    if (booleanProperty(element, 'outlined', false)) variant = 'outlined';
+    else if (booleanProperty(element, 'text', false)) variant = 'text';
+
     return (
         <Button
             data-scene-id={element.id}
-            label={stringProperty(element, 'label')}
-            icon={stringProperty(element, 'icon')}
-            severity={stringProperty(element, 'severity') as 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined}
-            outlined={booleanProperty(element, 'outlined', false)}
-            text={booleanProperty(element, 'text', false)}
+            severity={severity}
+            variant={variant}
             rounded={booleanProperty(element, 'rounded', false)}
-            loading={booleanProperty(element, 'loading', false)}
-            disabled={booleanProperty(element, 'disabled', false)}>
+            disabled={loading || booleanProperty(element, 'disabled', false)}
+            aria-busy={loading}>
+            {loading && <i className='pi pi-spinner pi-spin' aria-hidden='true' />}
+            {!loading && icon !== undefined && <i className={icon} aria-hidden='true' />}
+            {stringProperty(element, 'label')}
             {slots.content}
         </Button>
     );

package/button/PrimeButtonGroup.tsx

@@ -13,12 +13,15 @@ import { optionsProperty } from '../properties';
  * content is therefore rendered when a screen supplies it, and otherwise the group is built from a
  * `buttons` property - which is what lets a generated screen produce a group without having to nest
  * elements it does not otherwise need.
+ *
+ * PrimeReact 11 left the group itself alone; the only change is in the buttons, which take their label as
+ * children now rather than through a `label` prop.
  */
 export function PrimeButtonGroup({ element, slots }: RegisteredComponentProps) {
     const buttons = optionsProperty(element, 'buttons');
     return (
         <ButtonGroup data-scene-id={element.id}>
-            {slots.content?.length ? slots.content : buttons.map((button) => <Button key={button.value} label={button.label} />)}
+            {slots.content?.length ? slots.content : buttons.map((button) => <Button key={button.value}>{button.label}</Button>)}
         </ButtonGroup>
     );
 }

package/button/PrimeSpeedDial.tsx

@@ -9,18 +9,36 @@ import { menuItemsProperty } from '../menuItems';
 /**
  * The `PrimeReact:speedDial` component - a floating action button that fans its actions out on hover.
  *
- * Rendered inside a sized, relatively positioned box because SpeedDial positions itself absolutely
+ * Rendered inside a sized, relatively positioned box because SpeedDial positions its actions absolutely
  * against its nearest positioned ancestor; dropped straight into a Scene tree it would otherwise anchor
  * itself to the page and float over unrelated content.
+ *
+ * PrimeReact 11 replaced the `model` prop with parts, so the items are written out here. That is more
+ * lines but a better fit: each action is a real button the adapter can name and label, where v10's model
+ * entries produced icon-only buttons with no accessible name unless the screen happened to think of one.
+ * The label is used as the accessible name and as the tooltip, and the icon is marked decorative, so an
+ * action reads the same to a screen reader as it does to a pointer.
  */
 export function PrimeSpeedDial({ element }: RegisteredComponentProps) {
+    const items = menuItemsProperty(element, 'items');
     return (
         <div data-scene-id={element.id} className='relative h-40 w-40'>
-            <SpeedDial
-                model={menuItemsProperty(element, 'items')}
+            <SpeedDial.Root
                 direction={stringProperty(element, 'direction', 'up') as 'up' | 'down' | 'left' | 'right'}
-                type={stringProperty(element, 'type', 'linear') as 'linear' | 'circle' | 'semi-circle' | 'quarter-circle'}
-            />
+                type={stringProperty(element, 'type', 'linear') as 'linear' | 'circle' | 'semi-circle' | 'quarter-circle'}>
+                <SpeedDial.Trigger aria-label='Actions'>
+                    <i className='pi pi-plus' aria-hidden='true' />
+                </SpeedDial.Trigger>
+                <SpeedDial.List>
+                    {items.map((item, index) => (
+                        <SpeedDial.Item key={index} index={index}>
+                            <SpeedDial.Action aria-label={item.label} title={item.label} onClick={item.command}>
+                                <i className={item.icon ?? 'pi pi-circle'} aria-hidden='true' />
+                            </SpeedDial.Action>
+                        </SpeedDial.Item>
+                    ))}
+                </SpeedDial.List>
+            </SpeedDial.Root>
         </div>
     );
 }

package/button/PrimeSplitButton.tsx

@@ -1,17 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { SplitButton } from 'primereact/splitbutton';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { SplitButton } from './SplitButton';
 import { booleanProperty, stringProperty } from '../properties';
 import { menuItemsProperty } from '../menuItems';
 
 /**
  * The `PrimeReact:splitButton` component - a primary action with a dropdown of related ones.
  *
- * The secondary actions come from an `items` property rather than from slots, because PrimeReact drives
- * them from a data model and not from children; feeding it rendered React nodes would give it no labels
- * to show.
+ * PrimeReact 11 removed `SplitButton` with no replacement and no headless hook, so the adapter renders
+ * Cratis's own {@link SplitButton}, itself composed from the `Button` and `Popover` that survived. Nothing
+ * about the element's contract changed, which is the whole point of having an adapter layer at all.
+ *
+ * The secondary actions come from an `items` property rather than from slots, because they are data - a
+ * list of labels and icons - and feeding a menu rendered React nodes would give it nothing to show in its
+ * rows. `menuItemsProperty` is the same reader every other menu in this package uses, so a screen writes
+ * items the same way here as it does for a menubar.
  */
 export function PrimeSplitButton({ element }: RegisteredComponentProps) {
     return (
@@ -19,7 +24,8 @@ export function PrimeSplitButton({ element }: RegisteredComponentProps) {
             data-scene-id={element.id}
             label={stringProperty(element, 'label')}
             icon={stringProperty(element, 'icon')}
-            model={menuItemsProperty(element, 'items')}
+            severity={stringProperty(element, 'severity')}
+            items={menuItemsProperty(element, 'items')}
             disabled={booleanProperty(element, 'disabled', false)}
         />
     );