diff --git a/AGENTS.md b/AGENTS.md
index a7764e789d..827fb9e704 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -44,6 +44,10 @@ Annotate every endpoint with the resource role of its domain, e.g. `read:alarms`
 
 Access control belongs in the resource implementation, not in the service. Extend `ManagerWebResource` and use its checks rather than reaching for the identity provider: `throwIfNotRealmActiveAndAccessible` and `throwIfRestrictedUser` reject with a 403, and `isRealmActiveAndAccessible` and `isRestrictedUser` are there for conditions that need more than a rejection. Resolve the entity first and return 404 when it is missing, then require access to its realm, and apply restricted user rules in the same place. Service methods take already authorised input and state that in their javadoc with "Callers are responsible for enforcing realm authorization." Alarms and notifications are the reference for this shape; equivalent endpoints across the two must enforce the same way. Flows that never pass through a resource, such as notifications published to the message broker, authorise inside the service instead.
 
+## Spelling
+
+Write code, comments and docs in US English, e.g. `color`, not `colour`.
+
 ## UI
 
 Frontend conventions live in `ui/AGENTS.md`. Read it before changing anything under `ui/`.
diff --git a/ui/AGENTS.md b/ui/AGENTS.md
index 7f80a3a554..9f6921940c 100644
--- a/ui/AGENTS.md
+++ b/ui/AGENTS.md
@@ -38,20 +38,31 @@ The date and time picker wrappers set their `i18n` themselves: the date order, c
 
 ### Styling the component's shadow-DOM internals
 
-Pick the approach by how much of the base component you need to keep. The base + Lumo styles are keyed off the element's `static get is()`, so a wrapper that does _not_ override `is` still reports the base tag (e.g. `vaadin-checkbox-group`) and inherits the full base + Lumo theme.
+**How Vaadin applies styles.** A Vaadin element's shadow root has three layers, later ones winning at equal specificity:
 
-**Small tweaks to an existing component (preferred default).** Do NOT override `is`, since that detaches the element from the base + Lumo styles keyed off `is` and strips the inherited theme/layout entirely. Do NOT use `static get styles()` — ThemableMixin injects those _before_ Lumo, so Lumo wins; and for wrapper classes that don't override `is`, ThemableMixin may not associate the child's `static get styles()` with the finalized element at all. Instead apply styles in one of these ways:
+1. Base styles defined in `static get styles()` of the Vaadin component class or our `or-vaadin-*` classes. The Lumo theme drops these when it injects, unless the component sets `includeBaseStyles: true` (badge, slider). Components without `LumoInjectionMixin`, such as `vaadin-dialog`, always keep them.
+2. Lumo modules defined through `@media lumo_<name>` blocks are injected per tag as listed in `--_lumo-<tag>-inject-modules`. Lumo defines its modules and lists them this way in `@vaadin/vaadin-lumo-styles/components/<name>.css`. The list in our `ui/component/theme/src/components/or-vaadin-<name>.css` overwrites Lumo's list for that tag, so we include Lumo's declared list and include our own `@media lumo_` blocks. `components/index.css` therefore imports our file after every other file that declares a list for the same tag, including through a Lumo import.
+3. Styles registered with ``registerStyles("<tag>", css`…`)`` are added after Lumo to elements whose `is` matches the tag, and are inherited by subclasses. Register them before `customElements.define` runs for that tag, otherwise existing instances are restyled and a console warning is logged. For our own tag that means on module level above the class.
 
-- **External `::part()` rule (preferred for part properties).** Add the rule in `ui/component/theme/src/components/or-vaadin-<name>.css` (imported from that dir's `index.css`), keyed on the real tag name: `or-vaadin-<tag>::part(<part>) { … }`. This is a plain browser CSS feature — the global stylesheet pierces the shadow DOM boundary through the exposed part with no ThemableMixin involvement. It scopes cleanly to that tag only and is invisible to the `is`-based lookup.
-- **Lumo `@media` module injection (for rules that must live inside the shadow DOM).** Use this only when `::part()` is insufficient — e.g. `:host` pseudo-class selectors, `::slotted`, or pseudo-elements that cannot be reached from outside. Define the rules in a named `@media <module-name>` block in the theme CSS file and add that name to `--_lumo-vaadin-<tag>-inject-modules`. The injector stamps those rules into the shadow DOM _after_ Lumo, so they always win.
-- **Slotted native inputs (`<textarea>`, `<input>`) are light DOM, not shadow DOM.** Style them with a normal descendant rule from the surrounding tree (`or-vaadin-<tag> textarea { … }`) or with inline styles from the wrapper class; both win over the base component's `::slotted()` rules in the cascade.
+Lumo and `registerStyles` match the element's `static get is()`, while base styles come with the class. From outside, custom properties and `::part()` rules beat the shadow DOM's own rules, and slotted light-DOM children such as native inputs take normal selectors. `test/styling-contract.test.ts` checks the theme and every element the package index exports against these layers.
 
-**A component that fully owns its visuals via `registerStyles()`.** Only when the component re-implements the look from scratch (so it has no inherited theme to preserve) override `is` and register styles from its own module; do NOT use `static get styles()`. Vaadin's `ThemableMixin.finalizeStyles()` injects `static` styles _before_ the Lumo theme injector, so the theme overrides them and nothing appears to apply; styles registered via `registerStyles()` are injected _after_ the injector, so they always win. Recipe (see `or-vaadin-toggle.ts`):
+Base styles and registered styles ship with the component code. Our Lumo module lists, `@media lumo_` blocks and `::part()` rules live in `@openremote/theme`. An app without that theme therefore gets the base styles, or Lumo's default lists if it loads Lumo itself, plus our registered styles. The hard-coded fallbacks below keep our own components usable there.
 
-- Call `registerStyles("or-vaadin-<tag>", css\`...\`)`from`@vaadin/vaadin-themable-mixin/register-styles.js` at module top (before the element is finalized).
-- Override `static get is() { return "or-vaadin-<tag>"; }`. The base class reports its own tag (e.g. `vaadin-checkbox`), and `registerStyles`/`getStylesForThis()` key off `is`; without this the styles either don't match or leak onto every instance of the base component. (This same override is what detaches the element from the base theme, which is acceptable here because the component re-styles everything itself.)
-- Out-specify base rules with `:host(...)` prefixes (e.g. the checkbox base hides its marker with `:host(:not([checked])) [part='checkbox']::after { opacity: 0 }`).
-- Give every themed CSS var a hard-coded fallback (e.g. `var(--lumo-primary-color, #47a942)`) so the component also looks correct standalone, with no theme loaded.
+**Public API.** Projects may rely on what the custom-elements manifest documents: tags, attributes, properties, events, slots, `--or-*` properties and theme variants, plus the documented Vaadin API of thin wrappers. Do not rename or remove those in one step; keep the old name working with a warning for a release. Shadow structure, internal classes, Lumo module names, `--_*` properties and the parts of our own components are internal, and code that depends on Vaadin internals stays in this repo.
+
+**Choosing the approach.** Use the first that fits:
+
+1. A documented custom property, for a value such as a color, size or spacing.
+2. A `::part()` rule in `ui/component/theme/src/components/or-vaadin-<name>.css`, keyed on the real tag.
+3. A Lumo module in that file, for rules that must live inside the shadow DOM, such as `:host(...)` states, `::slotted()` or internal elements.
+4. A theme variant: a Lumo module scoped by `:host([theme~="<variant>"])`, for one small change to an existing component, such as order, direction or colors. Lumo support for a Vaadin base variant, like `reverse`, keeps the Vaadin name.
+5. A new `or-vaadin-<name>` component when the change touches several of those, needs another slot or template, or changes the semantics, as `or-vaadin-toggle` and `or-vaadin-radio-card` do:
+   - Override `static get is()` and call `registerStyles("or-vaadin-<name>", …)` at module top, before the class is defined.
+   - Reuse the Lumo look of the parts it keeps by listing their modules for the new tag, and style them through the Vaadin properties those modules read. Without listed modules the Vaadin base styles apply and need out-specifying with `:host(...)`.
+   - Keep the slots the Vaadin mixins fill and the part names the reused modules target.
+   - Expose `--or-*` properties with hard-coded fallbacks, and slots, rather than parts.
+
+A look specific to one project stays in that project, built on the above. Do not add `static get styles()` to a wrapper whose Vaadin class drops its base styles under Lumo, and do not call `registerStyles()` for a `vaadin-*` tag, as it reaches every instance and subclass.
 
 ### Registering an input type in the input pipeline
 
diff --git a/ui/app/storybook/docs/components/or-vaadin-radio-card.mdx b/ui/app/storybook/docs/components/or-vaadin-radio-card.mdx
new file mode 100644
index 0000000000..7625dd41e7
--- /dev/null
+++ b/ui/app/storybook/docs/components/or-vaadin-radio-card.mdx
@@ -0,0 +1,34 @@
+{/* prettier-ignore-start */}
+
+{/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */}
+
+{/* prettier-ignore-end */}
+
+import { Meta } from "@storybook/addon-docs/blocks";
+import * as ComponentStory from "../../../../component/or-vaadin-components/stories/or-vaadin-radio-card.stories"; // stories need relative imports
+import { ComponentDocs } from "../../util/componentdocs.mdx";
+
+<Meta title="Components/Radio card" />
+
+<ComponentDocs
+  story={ComponentStory}
+  options={{ displayName: "Radio card" }}
+  elementsjson={ComponentStory.customElements}
+/>
diff --git a/ui/app/storybook/docs/components/or-vaadin-radio-group.mdx b/ui/app/storybook/docs/components/or-vaadin-radio-group.mdx
new file mode 100644
index 0000000000..6c5d940515
--- /dev/null
+++ b/ui/app/storybook/docs/components/or-vaadin-radio-group.mdx
@@ -0,0 +1,34 @@
+{/* prettier-ignore-start */}
+
+{/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */}
+
+{/* prettier-ignore-end */}
+
+import { Meta } from "@storybook/addon-docs/blocks";
+import * as ComponentStory from "../../../../component/or-vaadin-components/stories/or-vaadin-radio-group.stories"; // stories need relative imports
+import { ComponentDocs } from "../../util/componentdocs.mdx";
+
+<Meta title="Components/Radio group" />
+
+<ComponentDocs
+  story={ComponentStory}
+  options={{ displayName: "Radio group" }}
+  elementsjson={ComponentStory.customElements}
+/>
diff --git a/ui/component/or-vaadin-components/README.md b/ui/component/or-vaadin-components/README.md
index b8b87422d8..6617455083 100644
--- a/ui/component/or-vaadin-components/README.md
+++ b/ui/component/or-vaadin-components/README.md
@@ -30,7 +30,7 @@ document.body.appendChild(textField);
 
 ### Group fields
 
-The group fields `or-vaadin-checkbox-group` and `or-vaadin-radio-group` should use the "native" Vaadin child components, `vaadin-checkbox` and `vaadin-radio-button`, respectively. These are registered when importing the group fields.
+The group field `or-vaadin-checkbox-group` takes `vaadin-checkbox` children and `or-vaadin-radio-group` takes `or-vaadin-radio-button` children. These are registered when importing the group fields.
 
 ```html
 <or-vaadin-checkbox-group>
@@ -39,8 +39,8 @@ The group fields `or-vaadin-checkbox-group` and `or-vaadin-radio-group` should u
 </or-vaadin-checkbox-group>
 
 <or-vaadin-radio-group>
-  <vaadin-radio-button></vaadin-radio-button>
-  <vaadin-radio-button></vaadin-radio-button>
+  <or-vaadin-radio-button></or-vaadin-radio-button>
+  <or-vaadin-radio-button></or-vaadin-radio-button>
 </or-vaadin-radio-group>
 ```
 
diff --git a/ui/component/or-vaadin-components/src/index.ts b/ui/component/or-vaadin-components/src/index.ts
index 4cb3e07569..127c969739 100644
--- a/ui/component/or-vaadin-components/src/index.ts
+++ b/ui/component/or-vaadin-components/src/index.ts
@@ -33,6 +33,8 @@ export * from "./or-vaadin-menu-bar";
 export * from "./or-vaadin-multi-select-combo-box";
 export * from "./or-vaadin-number-field";
 export * from "./or-vaadin-password-field";
+export * from "./or-vaadin-radio-button";
+export * from "./or-vaadin-radio-card";
 export * from "./or-vaadin-radio-group";
 export * from "./or-vaadin-select";
 export * from "./or-vaadin-slider";
diff --git a/ui/component/or-vaadin-components/src/or-vaadin-radio-button.ts b/ui/component/or-vaadin-components/src/or-vaadin-radio-button.ts
new file mode 100644
index 0000000000..8f23a74263
--- /dev/null
+++ b/ui/component/or-vaadin-components/src/or-vaadin-radio-button.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { customElement } from "lit/decorators.js";
+import { RadioButton } from "@vaadin/radio-group/vaadin-radio-button.js";
+import type { OrVaadinComponent } from "./util";
+import type { LitElement } from "lit";
+
+@customElement("or-vaadin-radio-button")
+export class OrVaadinRadioButton
+  extends (RadioButton as new () => RadioButton & LitElement)
+  implements OrVaadinComponent {}
diff --git a/ui/component/or-vaadin-components/src/or-vaadin-radio-card.ts b/ui/component/or-vaadin-components/src/or-vaadin-radio-card.ts
new file mode 100644
index 0000000000..79b2057748
--- /dev/null
+++ b/ui/component/or-vaadin-components/src/or-vaadin-radio-card.ts
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { customElement } from "lit/decorators.js";
+import { html, type LitElement } from "lit";
+import { RadioButton } from "@vaadin/radio-group/vaadin-radio-button.js";
+import { registerStyles, css } from "@vaadin/vaadin-themable-mixin/register-styles.js";
+import type { OrVaadinComponent } from "./util";
+
+/*
+ * The radio keeps the Vaadin look, as the theme injects the Lumo radio-button modules for this tag. These styles only
+ * lay the radio button out as a card and map the `--or-radio-card-*` properties onto the Vaadin ones.
+ */
+registerStyles(
+  "or-vaadin-radio-card",
+  css`
+    :host {
+      --_checked-color: var(--or-radio-card-checked-color, var(--lumo-primary-text-color, #47a942));
+      --vaadin-selection-color: var(--_checked-color);
+      --vaadin-radio-button-background: var(--or-radio-card-radio-color, var(--lumo-contrast-20pct, #d9dcd9));
+      --vaadin-radio-button-dot-color: var(--or-radio-card-dot-color, var(--lumo-primary-contrast-color, #ffffff));
+      --vaadin-radio-button-size: var(--or-radio-card-radio-size, 24px);
+      /* Lumo draws the dot as a border, so it takes the radius */
+      --vaadin-radio-button-dot-size: calc(var(--or-radio-card-dot-size, 8px) / 2);
+      --vaadin-radio-button-label-padding: 0;
+
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--or-radio-card-gap, var(--lumo-space-s, 8px));
+      box-sizing: border-box;
+      padding: var(--or-radio-card-padding, var(--lumo-space-m, 16px));
+      border-radius: var(--or-radio-card-radius, var(--lumo-border-radius-l, 12px));
+      background: var(--or-radio-card-background, var(--lumo-contrast-5pct, #f2f3f2));
+      color: var(--or-radio-card-color, var(--lumo-body-text-color, #1f211f));
+      cursor: var(--lumo-clickable-cursor, pointer);
+      -webkit-tap-highlight-color: transparent;
+      transition:
+        background-color 0.15s,
+        color 0.15s;
+    }
+
+    :host([checked]) {
+      background: var(--or-radio-card-checked-background, var(--lumo-primary-color-10pct, #e9f5e8));
+      color: var(--_checked-color);
+    }
+
+    [part="radio"] {
+      flex: none;
+      margin: 0;
+    }
+
+    :host([theme~="reverse"]) [part="radio"] {
+      order: 1;
+    }
+
+    ::slotted([slot="icon"]) {
+      flex: none;
+    }
+
+    ::slotted([slot="label"]) {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* The native input covers the whole card, so a click anywhere on it selects the option */
+    ::slotted(input) {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      border: 0;
+      border-radius: inherit;
+      opacity: 0;
+      appearance: none;
+      cursor: inherit;
+    }
+  `
+);
+
+/**
+ * A radio button shown as a card with an optional icon, for use in `<or-vaadin-radio-group>` next to or instead
+ * of `<or-vaadin-radio-button>`. The whole card selects the option, and the checked card takes the checked colors.
+ *
+ * @customElement "or-vaadin-radio-card"
+ * @slot icon - Icon shown before the label. It takes the card's text color through `currentColor`.
+ * @slot label - Label content, laid out by the consumer. Use the `label` attribute instead for plain text.
+ * @attr {string} theme - Set to `reverse` to show the radio at the end of the card instead of the start.
+ * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
+ * @cssprop --or-radio-card-background - Card background when not checked.
+ * @cssprop --or-radio-card-color - Text and icon color when not checked.
+ * @cssprop --or-radio-card-checked-background - Card background when checked.
+ * @cssprop --or-radio-card-checked-color - Text and icon color, and radio fill, when checked.
+ * @cssprop --or-radio-card-radio-color - Radio fill when not checked.
+ * @cssprop --or-radio-card-dot-color - Color of the dot in a checked radio.
+ * @cssprop --or-radio-card-radio-size - Diameter of the radio.
+ * @cssprop --or-radio-card-dot-size - Diameter of the dot in a checked radio.
+ * @cssprop --or-radio-card-gap - Space between the radio, icon and label.
+ * @cssprop --or-radio-card-padding - Padding of the card.
+ * @cssprop --or-radio-card-radius - Corner radius of the card.
+ * @cssprop --or-radio-card-spacing - Space between the cards of an `<or-vaadin-radio-group>`, applied by the theme.
+ */
+@customElement("or-vaadin-radio-card")
+export class OrVaadinRadioCard
+  extends (RadioButton as new () => RadioButton & LitElement)
+  implements OrVaadinComponent
+{
+  static get is() {
+    return "or-vaadin-radio-card";
+  }
+
+  protected override render() {
+    return html`
+      <div part="radio" aria-hidden="true"></div>
+      <slot name="icon"></slot>
+      <slot name="label"></slot>
+      <slot name="input"></slot>
+    `;
+  }
+}
diff --git a/ui/component/or-vaadin-components/src/or-vaadin-radio-group.ts b/ui/component/or-vaadin-components/src/or-vaadin-radio-group.ts
index d449d80ceb..1ae8ea8cc1 100644
--- a/ui/component/or-vaadin-components/src/or-vaadin-radio-group.ts
+++ b/ui/component/or-vaadin-components/src/or-vaadin-radio-group.ts
@@ -19,6 +19,7 @@
 import { customElement } from "lit/decorators.js";
 import { RadioGroup } from "@vaadin/radio-group";
 import type { OrVaadinComponent } from "./util";
+import "./or-vaadin-radio-button";
 
 @customElement("or-vaadin-radio-group")
 export class OrVaadinRadioGroup extends RadioGroup implements OrVaadinComponent {}
diff --git a/ui/component/or-vaadin-components/stories/or-vaadin-radio-card.stories.ts b/ui/component/or-vaadin-components/stories/or-vaadin-radio-card.stories.ts
new file mode 100644
index 0000000000..e3fd1777ad
--- /dev/null
+++ b/ui/component/or-vaadin-components/stories/or-vaadin-radio-card.stories.ts
@@ -0,0 +1,144 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import { getORStorybookHelpers } from "../../storybook-utils";
+import customElements from "../build/custom-elements.json" with { type: "json" };
+import packageJson from "../package.json" with { type: "json" };
+import { html } from "lit";
+import "../src/or-vaadin-radio-card";
+import "../src/or-vaadin-radio-group";
+
+const tagName = "or-vaadin-radio-card";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getORStorybookHelpers(tagName);
+
+const appearances = [
+  { value: "light", title: "Light", description: "Dark text on a light background", swatch: "#ffffff" },
+  { value: "dark", title: "Dark", description: "Light text on a dark background", swatch: "#1f211f" },
+  {
+    value: "system",
+    title: "System",
+    description: "Follows the setting of the device",
+    swatch: "linear-gradient(135deg, #ffffff 50%, #1f211f 50%)",
+  },
+];
+
+const swatch = (background: string) => html`
+  <span
+    slot="icon"
+    aria-hidden="true"
+    style="box-sizing: border-box; width: 40px; height: 40px; border: 1px solid var(--lumo-contrast-20pct); border-radius: var(--lumo-border-radius-m); background: ${background};"
+  ></span>
+`;
+
+const meta: Meta = {
+  title: "Playground/or-vaadin-components/radio-card",
+  component: tagName,
+  args,
+  argTypes,
+  render: (storyArgs) => template(storyArgs, swatch(appearances[2].swatch)),
+  excludeStories: /^[a-z].*/,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    docs: {
+      subtitle: `<${tagName}>`,
+      description:
+        "Radio card is a more mobile-friendly alternative to `<or-vaadin-radio-button>`. It is a radio button shown as a card, with an optional icon before its label. It is meant for `<or-vaadin-radio-group>`, where it can be used next to or instead of `<or-vaadin-radio-button>`, and it supports the same states (checked, disabled) and events (`change`, `checked-changed`). The whole card selects the option, and the colors, sizes and spacing are set through `--or-radio-card-*` properties.",
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    label: "System",
+    checked: true,
+  },
+};
+
+/** Cards with the radio at the end. */
+export const Reverse: Story = {
+  name: "Reverse",
+  parameters: {
+    title: "Reverse",
+    summary: 'Set `theme="reverse"` on a card to show the radio at the end instead of the start.',
+    docs: {
+      story: {
+        height: "260px",
+      },
+    },
+  },
+  render: () => html`
+    <or-vaadin-radio-group theme="vertical" value="system">
+      ${appearances.map(
+        (appearance) => html`
+          <or-vaadin-radio-card theme="reverse" value=${appearance.value} label=${appearance.title}>
+            ${swatch(appearance.swatch)}
+          </or-vaadin-radio-card>
+        `
+      )}
+    </or-vaadin-radio-group>
+  `,
+};
+
+/** Cards with a title and a description, styled once on the group. */
+export const TitleAndDescription: Story = {
+  name: "Title and description",
+  parameters: {
+    title: "Title and description",
+    summary:
+      "The `label` slot takes any content, such as a title and a description. The `--or-radio-card-*` properties inherit, so setting them on the group styles all of its cards.",
+    docs: {
+      story: {
+        height: "280px",
+      },
+    },
+  },
+  render: () => html`
+    <or-vaadin-radio-group
+      label="Appearance"
+      theme="vertical"
+      value="system"
+      style="--or-radio-card-padding: var(--lumo-space-s) var(--lumo-space-m); --or-radio-card-checked-color: var(--lumo-success-text-color); --or-radio-card-checked-background: var(--lumo-success-color-10pct);"
+    >
+      ${appearances.map(
+        (appearance) => html`
+          <or-vaadin-radio-card theme="reverse" value=${appearance.value}>
+            ${swatch(appearance.swatch)}
+            <div slot="label">
+              <div style="font-weight: 600;">${appearance.title}</div>
+              <div style="color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s);">
+                ${appearance.description}
+              </div>
+            </div>
+          </or-vaadin-radio-card>
+        `
+      )}
+    </or-vaadin-radio-group>
+  `,
+};
+
+export const examples = [Reverse, TitleAndDescription];
+
+export { customElements, packageJson };
+
+export default meta;
diff --git a/ui/component/or-vaadin-components/stories/or-vaadin-radio-group.stories.ts b/ui/component/or-vaadin-components/stories/or-vaadin-radio-group.stories.ts
new file mode 100644
index 0000000000..33b17da610
--- /dev/null
+++ b/ui/component/or-vaadin-components/stories/or-vaadin-radio-group.stories.ts
@@ -0,0 +1,140 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import { getORStorybookHelpers } from "../../storybook-utils";
+import customElements from "../build/custom-elements.json" with { type: "json" };
+import packageJson from "../package.json" with { type: "json" };
+import { html } from "lit";
+import "../src/or-vaadin-radio-group";
+
+const tagName = "or-vaadin-radio-group";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getORStorybookHelpers(tagName);
+
+const radioButtons = html`
+  <or-vaadin-radio-button label="Email" value="email"></or-vaadin-radio-button>
+  <or-vaadin-radio-button label="SMS" value="sms"></or-vaadin-radio-button>
+  <or-vaadin-radio-button label="Push" value="push"></or-vaadin-radio-button>
+`;
+
+const meta: Meta = {
+  title: "Playground/or-vaadin-components/radio-group",
+  component: tagName,
+  args,
+  argTypes,
+  render: (storyArgs) => template(storyArgs, radioButtons),
+  excludeStories: /^[a-z].*/,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    docs: {
+      subtitle: `<${tagName}>`,
+      description:
+        "Radio group lets the user pick exactly one option from a set of `<or-vaadin-radio-button>` or `<or-vaadin-radio-card>` children. The group holds the selected `value` and provides the label, helper text and validation, and it supports the same states (disabled, readonly, required) and events (`change`, `value-changed`) as the other Vaadin fields.",
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    label: "Notifications",
+    value: "email",
+  },
+};
+
+/** Disabled and readonly radio groups. */
+export const DisabledReadonly: Story = {
+  name: "Disabled & Readonly",
+  parameters: {
+    title: "Disabled & Readonly",
+    summary:
+      "Use `disabled` to block interaction entirely and `readonly` to show a value that cannot be edited. Both apply to all options in the group.",
+    docs: {
+      story: {
+        height: "110px",
+      },
+    },
+  },
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(2, max-content); gap: 24px 64px; padding: 8px;">
+      <or-vaadin-radio-group label="Disabled" value="email" disabled>${radioButtons}</or-vaadin-radio-group>
+      <or-vaadin-radio-group label="Readonly" value="email" readonly>${radioButtons}</or-vaadin-radio-group>
+    </div>
+  `,
+};
+
+/** Radio groups in both orientations. */
+export const Orientation: Story = {
+  name: "Orientation",
+  parameters: {
+    title: "Orientation",
+    summary: 'Under the theme the group is horizontal by default; use `theme="vertical"` to stack the options.',
+    docs: {
+      story: {
+        height: "280px",
+      },
+    },
+  },
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px; padding: 8px;">
+      <or-vaadin-radio-group label="Notifications (vertical)" theme="vertical" value="email">
+        ${radioButtons}
+      </or-vaadin-radio-group>
+      <or-vaadin-radio-group label="Notifications (horizontal)" value="email">${radioButtons}</or-vaadin-radio-group>
+    </div>
+  `,
+};
+
+/** Helper text gives extra context below the options. */
+export const HelperText: Story = {
+  name: "Helper text",
+  parameters: {
+    title: "Helper text",
+    summary:
+      "Use `helper-text` to show additional context below the options, for example to explain why a choice is `required`.",
+    docs: {
+      story: {
+        height: "130px",
+      },
+    },
+  },
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(2, max-content); gap: 24px 64px; padding: 8px;">
+      <or-vaadin-radio-group
+        label="With helper text"
+        value="email"
+        helper-text="Additional context shown below the options"
+      >
+        ${radioButtons}
+      </or-vaadin-radio-group>
+      <or-vaadin-radio-group label="Required" required helper-text="This choice is required">
+        ${radioButtons}
+      </or-vaadin-radio-group>
+    </div>
+  `,
+};
+
+export const examples = [DisabledReadonly, Orientation, HelperText];
+
+export { customElements, packageJson };
+
+export default meta;
diff --git a/ui/component/or-vaadin-components/test/fixtures/styling-contract-harness.js b/ui/component/or-vaadin-components/test/fixtures/styling-contract-harness.js
new file mode 100644
index 0000000000..3781e7f16f
--- /dev/null
+++ b/ui/component/or-vaadin-components/test/fixtures/styling-contract-harness.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+// Plain JS on purpose: the component-test bundle compiles .ts files against ui/test's tsconfig
+// (rootDir ui/test), so TS component sources outside that dir fail the build.
+import { LitElement } from "lit";
+import { parseStyleSheets } from "@vaadin/vaadin-themable-mixin/src/lumo-modules.js";
+import * as components from "@openremote/or-vaadin-components";
+
+/**
+ * Reports the styling rules that the loaded theme and every element exported by the package index break. Elements are
+ * found through the index, so a new component is checked as soon as it is exported.
+ */
+export class StylingContractHarness extends LitElement {
+  get violations() {
+    const violations = [];
+    const { tags, modules } = parseStyleSheets([...document.styleSheets, ...document.adoptedStyleSheets]);
+
+    if (!tags.size) {
+      violations.push("The theme lists no Lumo modules");
+    }
+    for (const [tag, names] of tags) {
+      for (const name of names.filter((name) => !modules.has(name))) {
+        violations.push(`${tag}: Lumo module "${name}" does not exist`);
+      }
+    }
+
+    for (const element of Object.values(components)) {
+      const tag = typeof element === "function" ? customElements.getName(element) : null;
+      // Lumo drops the base styles of these elements, and our static styles are part of those
+      if (!tag || element.lumoInjector?.includeBaseStyles !== false) {
+        continue;
+      }
+      for (let cls = element; customElements.getName(cls)?.startsWith("or-"); cls = Object.getPrototypeOf(cls)) {
+        if (Object.hasOwn(cls, "styles")) {
+          violations.push(`${tag}: static styles are dropped once Lumo styles are injected`);
+        }
+      }
+    }
+
+    return violations;
+  }
+}
+customElements.define("test-styling-contract-harness", StylingContractHarness);
diff --git a/ui/component/or-vaadin-components/test/styling-contract.test.ts b/ui/component/or-vaadin-components/test/styling-contract.test.ts
new file mode 100644
index 0000000000..06798c5b9f
--- /dev/null
+++ b/ui/component/or-vaadin-components/test/styling-contract.test.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2026, OpenRemote Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { ct, expect } from "./fixtures";
+import { StylingContractHarness } from "./fixtures/styling-contract-harness.js";
+
+ct("should apply the styles of every exported component under the theme", async ({ mount }) => {
+  const component = await mount(StylingContractHarness);
+
+  expect(await component.evaluate((el: StylingContractHarness) => el.violations)).toEqual([]);
+});
diff --git a/ui/component/theme/src/components/or-vaadin-radio-group.css b/ui/component/theme/src/components/or-vaadin-radio-group.css
index 625809cc93..7d9a1d3715 100644
--- a/ui/component/theme/src/components/or-vaadin-radio-group.css
+++ b/ui/component/theme/src/components/or-vaadin-radio-group.css
@@ -18,10 +18,16 @@
  */
 @import "@vaadin/vaadin-lumo-styles/components/radio-group.css";
 
+or-vaadin-radio-group:has(> or-vaadin-radio-card)::part(group-field) {
+  gap: var(--or-radio-card-spacing, var(--lumo-space-xs));
+}
+
 :root::before,
 :host::before {
   --_lumo-vaadin-radio-group-inject: 1;
   --_lumo-vaadin-radio-group-inject-modules:
     lumo_mixins_group-field, lumo_mixins_field-label, lumo_mixins_field-required, lumo_mixins_field-error-message,
     lumo_mixins_field-helper, lumo_components_radio-group, lumo_mixins_field-internal;
+  --_lumo-or-vaadin-radio-card-inject: 1;
+  --_lumo-or-vaadin-radio-card-inject-modules: lumo_mixins_checkable-field, lumo_components_radio-button;
 }