diff --git a/AGENTS.md b/AGENTS.md
index 2f59fe8030..da6c1a7bcb 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -284,21 +284,24 @@ where the error points.
 > **verified, recurring workflow trap** with its real error signature, and
 > **reproducible + non-obvious**. A genuine repo bug is not a row — fix it.
 
-| Symptom                                                                                                                                                                                                         | Cause                                                                                                                                                                                                                                                                                             | Fix                                                                                                                                                                                                                                                                                                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| CI step **"Check all generated code is committed"** fails (`git diff --exit-code`)                                                                                                                              | You changed an `@flr-generate` component's props, an icon, prop JSDoc, or a `.module.scss`'s class names and didn't regenerate — or regenerated but didn't commit                                                                                                                                 | `pnpm build` (or the specific generator from the [Generated code](#generated-code--must-be-committed) table), then commit the changed `view.ts`, `src/views/*`, `src/auto-generated/**`, `*.module.d.scss.ts`, icon, or `doc-properties.json`                                                                                                                                                                    |
-| `test:compile` fails on a new component — the `flowComponent("X", …)` name/props type isn't assignable                                                                                                          | `flowComponent` names are typed as `keyof` a hand-maintained props registry                                                                                                                                                                                                                       | Register the props type in `packages/components/src/components/propTypes/index.ts` (see [The flowComponent factory](packages/components/AGENTS.md#the-flowcomponent-factory))                                                                                                                                                                                                                                    |
-| A package script errors (e.g. **"X is not exported from `@mittwald/flow-…`"**, missing module) or silently uses **stale** output from another package                                                           | You ran the package script directly (`pnpm --filter <pkg> <script>`, `next dev`, bare `vite`), which builds only that package and skips the `^build` chain that (re)builds and regenerates its workspace dependencies (incl. `view.ts` / `src/auto-generated/**`)                                 | **Default to the nx target** — `pnpm nx <target> <pkg>` (e.g. `pnpm nx dev <app>`, `pnpm nx build <pkg>`); its `dependsOn: ["^build", …]` builds and regenerates every dependency first. Reach for a direct single-package script only when the dependencies are already current                                                                                                                                 |
-| An `nx` graph target dies with **"configured to use 10.28.2 of pnpm … your current pnpm is v…"**                                                                                                                | You prefixed a dependency-graph target with `corepack`; nested per-task pnpm spawns resolve to a pnpm other than the pinned `10.28.2`                                                                                                                                                             | Use **bare `pnpm nx …`** for graph targets (`build`, `dev`, anything with `dependsOn`/`^build`). `corepack pnpm --filter <pkg> <script>` stays fine for single-package scripts                                                                                                                                                                                                                                   |
-| Browser tests fail instantly with a missing-executable / "no browser" error                                                                                                                                     | Playwright browsers not installed in this environment                                                                                                                                                                                                                                             | `pnpm test:browser:prepare` once                                                                                                                                                                                                                                                                                                                                                                                 |
-| A visual test stays red in CI after you regenerated screenshots locally on macOS                                                                                                                                | `test:visual:update` on macOS only writes `-darwin` snapshots; CI gates on the `-webkit-linux` baseline                                                                                                                                                                                           | Push and add the **`update-screenshots`** PR label — CI regenerates the Linux baseline and commits it back. Local `-darwin` regen only helps local macOS runs                                                                                                                                                                                                                                                    |
-| A visual test fails with a **small** diff (`N pixels (ratio 0.01) differ`) and you're tempted to just add `update-screenshots`                                                                                  | A small diff is not automatically noise — a real regression can hide in ~1% (e.g. a logical-property autofix flipping under a `direction: rtl` layout hack, so a toggle handle lands on the wrong side). `update-screenshots` bakes whatever renders _now_ into the baseline, entrenching the bug | **Open the diff image** first (CI job artifacts, or local `.vitest-attachments/**/*-diff-*.png`). Only use `update-screenshots` for a change you confirmed is intentional; otherwise fix the code. Add the verify-only **`run-visual-tests`** label proactively on any styling/layout PR                                                                                                                         |
-| A new dependency **won't resolve** on `pnpm install`                                                                                                                                                            | `minimumReleaseAge` blocks versions younger than one week (`@mittwald/*` exempt)                                                                                                                                                                                                                  | Use an older published version, or wait out the window                                                                                                                                                                                                                                                                                                                                                           |
-| Dev server 500s with **"Can't resolve '&lt;pkg&gt;'"** after merging `main` into a worktree                                                                                                                     | `pnpm install` ran before the merge pulled in a new dependency                                                                                                                                                                                                                                    | Re-run `pnpm install`; a running dev server picks the dep up on the next request                                                                                                                                                                                                                                                                                                                                 |
-| **Scheduled cross-version tests go red _after_ your PR merged** — you removed a component or changed its rendered structure                                                                                     | Cross-version smoke tests run on a schedule, **not** on PRs (they network-install old published versions). Removing a component or adding/removing/reordering host-output elements produces an old-vs-current structural divergence, and the version gates weren't adjusted before merge          | Add the **`run-cross-version-tests`** PR label (`test-cross-version-label.yml`) to run both harnesses on the branch. Fix real divergences by gating per-version — `test.skipIf(crossVersion({ below }))` or a `scenarioVersionSupport.ts` entry — never by weakening the normalizers. See [remote-react-components/CONTRIBUTE.md](packages/remote-react-components/CONTRIBUTE.md#running-them-on-a-pull-request) |
-| A PostCSS plugin you added to a package's `vite.config.ts` behaves differently in the **release build** than in dev, or a plugin you added to `vite.build.config.ts` seems to have no effect                    | `mergeConfig` **concatenates** `css.postcss.plugins`, so the build config runs the dev config's plugins _first_ and then its own. Two plugins that transform the same construct silently compose in that order, and nothing in the emitted CSS reveals it                                         | Design the pair to compose (have the earlier plugin step aside when it detects the later one via `result.processor.plugins`), or replace `css.postcss` after the merge instead of extending it. Assert the built artifact, not just the plugin in isolation — a unit test and a test project with their own config both stay green while the release build is wrong                                              |
-| A second **browser** vitest project makes the run die at startup with **"Cannot define a nested project for a &lt;browser&gt; browser. The project name '&lt;name&gt; (&lt;browser&gt;)' was already defined"** | Vitest names the per-browser child projects by writing onto the `browser.instances` objects. Spreading the shared `vitestBrowserTestConfig` into two projects shares those objects by reference, so the second project's name overwrites the first                                                | Give each browser project its own copies: `instances: vitestBrowserTestConfig.browser.instances.map((instance) => ({ ...instance }))`. Also check the package's `test:browser` script actually selects the new project — a bare `--project=browser` silently skips it, a glob like `--project=browser*` (as `test:unit` already does with `unit*`) picks both up                                                 |
-| A CI workflow that runs `pnpm install` and then pushes, merges or checks out spends minutes in `eslint`/`stylelint`/`prettier`, or reinstalls in the middle of a merge                                          | simple-git-hooks is allowlisted in `allowBuilds`, so its `postinstall` writes `.git/hooks` on **every** `pnpm install` — runners included. `pre-push` is `pnpm lint`, `post-merge`/`post-checkout` are `pnpm install`                                                                             | Add `SKIP_INSTALL_SIMPLE_GIT_HOOKS: "1"` to the workflow's `env` (see `publish.yml`). Where a failed push would strand something already published, also pass `git push --no-verify` — that guard sits at the push and does not depend on the env var staying put (#2932)                                                                                                                                        |
+| Symptom                                                                                                                                                                                                                                                                      | Cause                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Fix                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| CI step **"Check all generated code is committed"** fails (`git diff --exit-code`)                                                                                                                                                                                           | You changed an `@flr-generate` component's props, an icon, prop JSDoc, or a `.module.scss`'s class names and didn't regenerate — or regenerated but didn't commit                                                                                                                                                                                                                                                                                                                       | `pnpm build` (or the specific generator from the [Generated code](#generated-code--must-be-committed) table), then commit the changed `view.ts`, `src/views/*`, `src/auto-generated/**`, `*.module.d.scss.ts`, icon, or `doc-properties.json`                                                                                                                                                                    |
+| `test:compile` fails on a new component — the `flowComponent("X", …)` name/props type isn't assignable                                                                                                                                                                       | `flowComponent` names are typed as `keyof` a hand-maintained props registry                                                                                                                                                                                                                                                                                                                                                                                                             | Register the props type in `packages/components/src/components/propTypes/index.ts` (see [The flowComponent factory](packages/components/AGENTS.md#the-flowcomponent-factory))                                                                                                                                                                                                                                    |
+| A package script errors (e.g. **"X is not exported from `@mittwald/flow-…`"**, missing module) or silently uses **stale** output from another package                                                                                                                        | You ran the package script directly (`pnpm --filter <pkg> <script>`, `next dev`, bare `vite`), which builds only that package and skips the `^build` chain that (re)builds and regenerates its workspace dependencies (incl. `view.ts` / `src/auto-generated/**`)                                                                                                                                                                                                                       | **Default to the nx target** — `pnpm nx <target> <pkg>` (e.g. `pnpm nx dev <app>`, `pnpm nx build <pkg>`); its `dependsOn: ["^build", …]` builds and regenerates every dependency first. Reach for a direct single-package script only when the dependencies are already current                                                                                                                                 |
+| An `nx` graph target dies with **"configured to use 10.28.2 of pnpm … your current pnpm is v…"**                                                                                                                                                                             | You prefixed a dependency-graph target with `corepack`; nested per-task pnpm spawns resolve to a pnpm other than the pinned `10.28.2`                                                                                                                                                                                                                                                                                                                                                   | Use **bare `pnpm nx …`** for graph targets (`build`, `dev`, anything with `dependsOn`/`^build`). `corepack pnpm --filter <pkg> <script>` stays fine for single-package scripts                                                                                                                                                                                                                                   |
+| Browser tests fail instantly with a missing-executable / "no browser" error                                                                                                                                                                                                  | Playwright browsers not installed in this environment                                                                                                                                                                                                                                                                                                                                                                                                                                   | `pnpm test:browser:prepare` once                                                                                                                                                                                                                                                                                                                                                                                 |
+| A visual test stays red in CI after you regenerated screenshots locally on macOS                                                                                                                                                                                             | `test:visual:update` on macOS only writes `-darwin` snapshots; CI gates on the `-webkit-linux` baseline                                                                                                                                                                                                                                                                                                                                                                                 | Push and add the **`update-screenshots`** PR label — CI regenerates the Linux baseline and commits it back. Local `-darwin` regen only helps local macOS runs                                                                                                                                                                                                                                                    |
+| A visual test fails with a **small** diff (`N pixels (ratio 0.01) differ`) and you're tempted to just add `update-screenshots`                                                                                                                                               | A small diff is not automatically noise — a real regression can hide in ~1% (e.g. a logical-property autofix flipping under a `direction: rtl` layout hack, so a toggle handle lands on the wrong side). `update-screenshots` bakes whatever renders _now_ into the baseline, entrenching the bug                                                                                                                                                                                       | **Open the diff image** first (CI job artifacts, or local `.vitest-attachments/**/*-diff-*.png`). Only use `update-screenshots` for a change you confirmed is intentional; otherwise fix the code. Add the verify-only **`run-visual-tests`** label proactively on any styling/layout PR                                                                                                                         |
+| A new dependency **won't resolve** on `pnpm install`                                                                                                                                                                                                                         | `minimumReleaseAge` blocks versions younger than one week (`@mittwald/*` exempt)                                                                                                                                                                                                                                                                                                                                                                                                        | Use an older published version, or wait out the window                                                                                                                                                                                                                                                                                                                                                           |
+| Dev server 500s with **"Can't resolve '&lt;pkg&gt;'"** after merging `main` into a worktree                                                                                                                                                                                  | `pnpm install` ran before the merge pulled in a new dependency                                                                                                                                                                                                                                                                                                                                                                                                                          | Re-run `pnpm install`; a running dev server picks the dep up on the next request                                                                                                                                                                                                                                                                                                                                 |
+| **Scheduled cross-version tests go red _after_ your PR merged** — you removed a component or changed its rendered structure                                                                                                                                                  | Cross-version smoke tests run on a schedule, **not** on PRs (they network-install old published versions). Removing a component or adding/removing/reordering host-output elements produces an old-vs-current structural divergence, and the version gates weren't adjusted before merge                                                                                                                                                                                                | Add the **`run-cross-version-tests`** PR label (`test-cross-version-label.yml`) to run both harnesses on the branch. Fix real divergences by gating per-version — `test.skipIf(crossVersion({ below }))` or a `scenarioVersionSupport.ts` entry — never by weakening the normalizers. See [remote-react-components/CONTRIBUTE.md](packages/remote-react-components/CONTRIBUTE.md#running-them-on-a-pull-request) |
+| A PostCSS plugin you added to a package's `vite.config.ts` behaves differently in the **release build** than in dev, or a plugin you added to `vite.build.config.ts` seems to have no effect                                                                                 | `mergeConfig` **concatenates** `css.postcss.plugins`, so the build config runs the dev config's plugins _first_ and then its own. Two plugins that transform the same construct silently compose in that order, and nothing in the emitted CSS reveals it                                                                                                                                                                                                                               | Design the pair to compose (have the earlier plugin step aside when it detects the later one via `result.processor.plugins`), or replace `css.postcss` after the merge instead of extending it. Assert the built artifact, not just the plugin in isolation — a unit test and a test project with their own config both stay green while the release build is wrong                                              |
+| A second **browser** vitest project makes the run die at startup with **"Cannot define a nested project for a &lt;browser&gt; browser. The project name '&lt;name&gt; (&lt;browser&gt;)' was already defined"**                                                              | Vitest names the per-browser child projects by writing onto the `browser.instances` objects. Spreading the shared `vitestBrowserTestConfig` into two projects shares those objects by reference, so the second project's name overwrites the first                                                                                                                                                                                                                                      | Give each browser project its own copies: `instances: vitestBrowserTestConfig.browser.instances.map((instance) => ({ ...instance }))`. Also check the package's `test:browser` script actually selects the new project — a bare `--project=browser` silently skips it, a glob like `--project=browser*` (as `test:unit` already does with `unit*`) picks both up                                                 |
+| A CI workflow that runs `pnpm install` and then pushes, merges or checks out spends minutes in `eslint`/`stylelint`/`prettier`, or reinstalls in the middle of a merge                                                                                                       | simple-git-hooks is allowlisted in `allowBuilds`, so its `postinstall` writes `.git/hooks` on **every** `pnpm install` — runners included. `pre-push` is `pnpm lint`, `post-merge`/`post-checkout` are `pnpm install`                                                                                                                                                                                                                                                                   | Add `SKIP_INSTALL_SIMPLE_GIT_HOOKS: "1"` to the workflow's `env` (see `publish.yml`). Where a failed push would strand something already published, also pass `git push --no-verify` — that guard sits at the push and does not depend on the env var staying put (#2932)                                                                                                                                        |
+| A visual test that hovers before `testScreenshot` captures the **non-hovered** state — the diff looks as if the CSS never applied                                                                                                                                            | `testScreenshot` calls `setNeutralPointerPosition()` before every screenshot, so a CSS `:hover` state is gone by capture time. An overlay opened by hover survives (`Tooltip`) — its visibility is state, not a CSS `:hover` rule; a pure `:hover` style never does                                                                                                                                                                                                                     | Assert the computed style in a `*.browser.test.tsx` instead of screenshotting it. And hover the **label**, not the `input` inside it — stacked icons cover the input and Playwright refuses with `<svg …> intercepts pointer events`                                                                                                                                                                             |
+| `test:compile` fails in unrelated shared code with **`Property 'children' does not exist on type 'Partial<XProps>'`** right after you registered a new component                                                                                                             | `dynamic()` and other shared helpers are typed over the **union of every** registered props type, so code reading `p.children` breaks as soon as one registered component has no `children` (`Field.tsx`, `flowComponent.browser.test.tsx`)                                                                                                                                                                                                                                             | Declare `children?: never` on the new props type. It keeps the union accessible and documents that the component takes no children — do **not** add a real `children` slot you then ignore                                                                                                                                                                                                                       |
+| A `ReactElement`-valued prop renders fine in the visual suite's **Remote** environment but kills a real remote connection with **`DataCloneError: Symbol(react.transitional.element) could not be cloned`** (the host then shows `Remote rendering failed: Timeout reached`) | The prop was generated as a **remote property**, and properties travel through `postMessage`/structured clone, which cannot carry a React element. `remote-dom-react` turns an element-valued prop into a slotted child _only_ when the element declares it as a slot (`Element.remoteSlotDefinitions.has(prop)`), and the generator declares a slot only for props typed exactly `ReactNode` or listed in `@flr-slot-props` (`dev/remote-components-generator/lib/propClassifiers.ts`) | Add `@flr-slot-props <propA>, <propB>` to the component's JSDoc and regenerate — the prop then arrives as a slotted child and any React subtree works, including a raw `<svg>` or a Tabler icon. Verify in `apps/remote-dom-demo` over the iframe connection: the visual suite's Remote environment is **in-process** and never serializes, so it cannot see this class of bug                                   |
 
 ## Where to look next
 
diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/max-value.tsx b/apps/docs/src/content/04-components/form-controls/rating/examples/max-value.tsx
new file mode 100644
index 0000000000..a315e5dc4c
--- /dev/null
+++ b/apps/docs/src/content/04-components/form-controls/rating/examples/max-value.tsx
@@ -0,0 +1,8 @@
+import {
+  Label,
+  Rating,
+} from "@mittwald/flow-react-components";
+
+<Rating maxValue={10} defaultValue={7}>
+  <Label>Bewertung</Label>
+</Rating>;
diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/segments.tsx b/apps/docs/src/content/04-components/form-controls/rating/examples/segments.tsx
new file mode 100644
index 0000000000..9b59f5b324
--- /dev/null
+++ b/apps/docs/src/content/04-components/form-controls/rating/examples/segments.tsx
@@ -0,0 +1,57 @@
+import {
+  Icon,
+  Label,
+  Rating,
+  RatingSegment,
+} from "@mittwald/flow-react-components";
+import {
+  IconMoodEmpty,
+  IconMoodEmptyFilled,
+  IconMoodHappy,
+  IconMoodHappyFilled,
+  IconMoodSad,
+  IconMoodSadFilled,
+} from "@tabler/icons-react";
+
+<Rating fill="single" defaultValue={3}>
+  <Label>Wie zufrieden bist du?</Label>
+  <RatingSegment
+    aria-label="Unzufrieden"
+    iconEmpty={
+      <Icon>
+        <IconMoodSad />
+      </Icon>
+    }
+    iconFilled={
+      <Icon color="danger">
+        <IconMoodSadFilled />
+      </Icon>
+    }
+  />
+  <RatingSegment
+    aria-label="Neutral"
+    iconEmpty={
+      <Icon>
+        <IconMoodEmpty />
+      </Icon>
+    }
+    iconFilled={
+      <Icon color="warning">
+        <IconMoodEmptyFilled />
+      </Icon>
+    }
+  />
+  <RatingSegment
+    aria-label="Zufrieden"
+    iconEmpty={
+      <Icon>
+        <IconMoodHappy />
+      </Icon>
+    }
+    iconFilled={
+      <Icon color="success">
+        <IconMoodHappyFilled />
+      </Icon>
+    }
+  />
+</Rating>;
diff --git a/apps/docs/src/content/04-components/form-controls/rating/index.mdx b/apps/docs/src/content/04-components/form-controls/rating/index.mdx
index 6890cd2267..b096ce3ca9 100644
--- a/apps/docs/src/content/04-components/form-controls/rating/index.mdx
+++ b/apps/docs/src/content/04-components/form-controls/rating/index.mdx
@@ -1,8 +1,8 @@
 ---
 component: Rating
 description:
-  Die Rating Component ermöglicht die Eingabe und Darstellung einer Bewertung
-  von 0 bis 5 Sternen.
+  Die Rating Component ermöglicht die Eingabe und Darstellung einer Bewertung —
+  standardmäßig mit fünf Sternen.
 ---
 
 <LiveCodeEditor stretch />
@@ -13,8 +13,8 @@ description:
 
 - Unterstütze die visuelle Darstellung immer mit ergänzendem Kontext. Dazu
   eignet sich zum Beispiel ein [Label](/04-components/content/label).
-- Nutze eine konsistente Skalierung von 0 bis 5 Sternen innerhalb eines
-  Interfaces.
+- Nutze innerhalb eines Interfaces eine konsistente Skalierung. Gleichartige
+  Bewertungen erhalten dieselbe Anzahl an Segmenten und dieselben Symbole.
 
 ---
 
@@ -26,6 +26,15 @@ Es stehen die Größen **Medium** oder **Small** zur Verfügung.
 
 ---
 
+# Anzahl der Segmente
+
+Über `maxValue` wird die Anzahl der Segmente gesetzt. Ohne Angabe besteht ein
+Rating aus fünf Segmenten.
+
+<LiveCodeEditor example="max-value" editorCollapsed />
+
+---
+
 # Readonly
 
 Verwende `isReadOnly`, wenn du die Rating-Component nur zur Darstellung
@@ -44,6 +53,24 @@ verwenden möchtest.
 
 ---
 
+# Icons pro Segment
+
+Soll jede Stufe ihr eigenes Symbol haben, werden die Segmente einzeln über
+`<RatingSegment />` in das Rating gelegt. Jedes Segment unterstützt eigene
+`iconEmpty`- und `iconFilled`-Icons und überschreibt damit die Icons des
+Ratings. Sind Segmente angegeben, bestimmen sie die Anzahl der Segmente.
+
+Über `aria-label` lassen sich die automatischen Labels („3 von 5") pro Segment
+überschreiben.
+
+Über `fill` wird zusätzlich gesteuert, welche Segmente als gefüllt dargestellt
+werden: **Cumulative** füllt alle Segmente bis zum Wert (Standard, das Verhalten
+einer Sternebewertung), **Single** nur das gewählte Segment.
+
+<LiveCodeEditor example="segments" editorCollapsed />
+
+---
+
 # Kombiniere mit ...
 
 ## BigNumber
diff --git a/apps/remote-dom-demo/src/app/layout.tsx b/apps/remote-dom-demo/src/app/layout.tsx
index e89173ed7b..8ad0bd997f 100644
--- a/apps/remote-dom-demo/src/app/layout.tsx
+++ b/apps/remote-dom-demo/src/app/layout.tsx
@@ -94,6 +94,7 @@ export default function Layout(props: PropsWithChildren) {
                         Notifications
                       </NavigationItem>
                       <NavigationItem page="popover">Popover</NavigationItem>
+                      <NavigationItem page="rating">Rating</NavigationItem>
                     </NavigationGroup>
                     <TunnelExit id="remote-demo" />
                   </Navigation>
diff --git a/apps/remote-dom-demo/src/app/remote/rating/page.tsx b/apps/remote-dom-demo/src/app/remote/rating/page.tsx
new file mode 100644
index 0000000000..726fffe660
--- /dev/null
+++ b/apps/remote-dom-demo/src/app/remote/rating/page.tsx
@@ -0,0 +1,72 @@
+"use client";
+import {
+  Flex,
+  Heading,
+  Icon,
+  Label,
+  Rating,
+  RatingSegment,
+} from "@mittwald/flow-remote-react-components";
+import {
+  IconMoodEmpty,
+  IconMoodEmptyFilled,
+  IconMoodHappy,
+  IconMoodHappyFilled,
+  IconMoodSad,
+  IconMoodSadFilled,
+} from "@tabler/icons-react";
+
+export default function Page() {
+  return (
+    <Flex direction="column" gap="l">
+      <Heading>Default</Heading>
+      <Rating defaultValue={2}>
+        <Label>Cantina rating</Label>
+      </Rating>
+
+      <Heading>Segments with single fill</Heading>
+      <Rating fill="single" defaultValue={2}>
+        <Label>How was your meal at the cantina?</Label>
+        <RatingSegment
+          aria-label="Terrible"
+          iconEmpty={
+            <Icon>
+              <IconMoodSad />
+            </Icon>
+          }
+          iconFilled={
+            <Icon color="danger">
+              <IconMoodSadFilled />
+            </Icon>
+          }
+        />
+        <RatingSegment
+          aria-label="Okay"
+          iconEmpty={
+            <Icon>
+              <IconMoodEmpty />
+            </Icon>
+          }
+          iconFilled={
+            <Icon color="warning">
+              <IconMoodEmptyFilled />
+            </Icon>
+          }
+        />
+        <RatingSegment
+          aria-label="Great"
+          iconEmpty={
+            <Icon>
+              <IconMoodHappy />
+            </Icon>
+          }
+          iconFilled={
+            <Icon color="success">
+              <IconMoodHappyFilled />
+            </Icon>
+          }
+        />
+      </Rating>
+    </Flex>
+  );
+}
diff --git a/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx b/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx
index ab91d0eab5..b5149774b2 100644
--- a/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx
+++ b/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx
@@ -8,6 +8,7 @@ import {
   FileField,
   Label,
   Option,
+  Rating,
   MarkdownEditor,
   Section,
   Select,
@@ -52,6 +53,7 @@ export default function Page() {
     defaultValues: {
       name: "",
       dateRange: [],
+      cantina: 3,
       account: "Rogue Squadron",
       confirm: false,
       email: "",
@@ -103,6 +105,11 @@ export default function Page() {
             <Label>Date range</Label>
           </DateRangePicker>
         </Field>
+        <Field name="cantina">
+          <Rating>
+            <Label>Cantina rating</Label>
+          </Rating>
+        </Field>
         <TranslationProvider
           translations={{
             "en-US": {
@@ -196,6 +203,7 @@ export default function Page() {
           <Button
             onPress={() => {
               form.setValue("email", "leia@rebel-alliance.com");
+              form.setValue("cantina", 5);
             }}
           >
             Set value
diff --git a/nx.json b/nx.json
index 71d455decb..3ed1ed8c3c 100644
--- a/nx.json
+++ b/nx.json
@@ -29,7 +29,7 @@
       "cache": true
     },
     "test:compile": {
-      "dependsOn": ["^build", "build:icons"],
+      "dependsOn": ["^build", "build:icons", "build:scss-types"],
       "cache": true
     },
     "test:cross-version:prepare": {
diff --git a/packages/components/src/components/Rating/Rating.browser.test.tsx b/packages/components/src/components/Rating/Rating.browser.test.tsx
new file mode 100644
index 0000000000..672d1835d8
--- /dev/null
+++ b/packages/components/src/components/Rating/Rating.browser.test.tsx
@@ -0,0 +1,128 @@
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-react";
+import { page } from "vitest/browser";
+import { useForm } from "react-hook-form";
+import { Rating } from "@/components/Rating";
+import { Button } from "@/components/Button";
+import { Label } from "@/components/Label";
+import { Form, typedField } from "@/integrations/react-hook-form";
+import { RatingSegment } from "@/components/Rating/components/RatingSegment";
+import { IconStarFilled } from "@/components/Icon/components/icons";
+import styles from "./Rating.module.scss";
+
+const segments = (): HTMLElement[] =>
+  Array.from(document.querySelectorAll(`.${styles.ratingSegment}`));
+
+// Both icons are stacked and cross-faded, so filled is an opacity, not a node.
+const fillStates = (): boolean[] =>
+  segments().map((segment) => {
+    const filled = segment.querySelector(`.${styles.filled}`);
+    return !!filled && getComputedStyle(filled).opacity === "1";
+  });
+
+test("segment children set the number of segments and their labels", async () => {
+  await render(
+    <Rating aria-label="Rating" maxValue={10} value={2}>
+      <RatingSegment />
+      <RatingSegment />
+      <RatingSegment />
+    </Rating>,
+  );
+
+  expect(segments()).toHaveLength(3);
+  await expect
+    .element(page.getByRole("radio", { name: "2 of 3" }))
+    .toBeInTheDocument();
+});
+
+test("a segment label can be overridden", async () => {
+  await render(
+    <Rating aria-label="Rating">
+      <RatingSegment aria-label="Terrible" />
+      <RatingSegment aria-label="Great" />
+    </Rating>,
+  );
+
+  await expect
+    .element(page.getByRole("radio", { name: "Terrible" }))
+    .toBeInTheDocument();
+});
+
+test("single fill previews the hovered segment", async () => {
+  await render(<Rating aria-label="Rating" fill="single" value={2} />);
+
+  // Hover the label, not the radio input — the stacked icons cover the input.
+  await page.getByLocator("label:has(input[value='4'])").hover();
+
+  await expect.poll(fillStates).toEqual([false, false, false, true, false]);
+});
+
+test("a segment icon wins over the rating icon", async () => {
+  await render(
+    <Rating
+      aria-label="Rating"
+      value={2}
+      iconFilled={<IconStarFilled data-testid="rating-icon" />}
+    >
+      <RatingSegment />
+      <RatingSegment
+        iconFilled={<IconStarFilled data-testid="segment-icon" />}
+      />
+    </Rating>,
+  );
+
+  const [first, second] = segments();
+
+  expect(first?.querySelector("[data-testid='rating-icon']")).not.toBeNull();
+  expect(second?.querySelector("[data-testid='segment-icon']")).not.toBeNull();
+});
+
+test("the rating's size reaches the icons of a segment", async () => {
+  await render(
+    <Rating aria-label="Rating" value={1} size="s">
+      <RatingSegment />
+    </Rating>,
+  );
+
+  const [segment] = segments();
+  const width = segment
+    ?.querySelector(`.${styles.filled}`)
+    ?.getBoundingClientRect().width;
+
+  expect(width).toBeLessThan(24);
+});
+
+/*
+ * The rating keeps the selected value in local state, so a value set from the
+ * outside has to win over it.
+ */
+test("a value set on the form reaches the rating", async () => {
+  const Fixture = () => {
+    const form = useForm<{ rating: number }>({ defaultValues: { rating: 2 } });
+    const Field = typedField(form);
+
+    return (
+      <Form form={form} onSubmit={async () => undefined}>
+        <Field name="rating">
+          <Rating>
+            <Label>Rating</Label>
+          </Rating>
+        </Field>
+        <Button onPress={() => form.setValue("rating", 4)}>Set to 4</Button>
+      </Form>
+    );
+  };
+
+  await render(<Fixture />);
+
+  const selectedValue = () =>
+    Array.from(
+      document.querySelectorAll<HTMLInputElement>("input[type=radio]"),
+    ).find((input) => input.checked)?.value;
+
+  expect(selectedValue()).toBe("2");
+
+  await page.getByRole("button", { name: "Set to 4" }).click();
+
+  await expect.poll(selectedValue).toBe("4");
+});
diff --git a/packages/components/src/components/Rating/Rating.module.d.scss.ts b/packages/components/src/components/Rating/Rating.module.d.scss.ts
index a7a93bcb90..d3e881a4ac 100644
--- a/packages/components/src/components/Rating/Rating.module.d.scss.ts
+++ b/packages/components/src/components/Rating/Rating.module.d.scss.ts
@@ -4,9 +4,9 @@ declare const classNames: {
   readonly ratingSegment: "ratingSegment";
   readonly empty: "empty";
   readonly filled: "filled";
+  readonly "fill-cumulative": "fill-cumulative";
   readonly current: "current";
-  readonly star: "star";
-  readonly starFilled: "starFilled";
+  readonly "fill-single": "fill-single";
   readonly "size-s": "size-s";
   readonly "size-m": "size-m";
 };
diff --git a/packages/components/src/components/Rating/Rating.module.scss b/packages/components/src/components/Rating/Rating.module.scss
index 2b62246094..8961b258aa 100644
--- a/packages/components/src/components/Rating/Rating.module.scss
+++ b/packages/components/src/components/Rating/Rating.module.scss
@@ -1,5 +1,19 @@
 @use "@/styles/mixins/focus";
 
+/**
+ * Segments render filled by default. The fill rules below empty out every
+ * segment that must not appear filled.
+ */
+@mixin empty-segment {
+  .empty {
+    opacity: 1;
+  }
+
+  .filled {
+    opacity: 0;
+  }
+}
+
 .rating {
   .ratingSegments {
     display: flex;
@@ -40,61 +54,44 @@
     color: var(--rating--star-filled-color);
   }
 
-  &:not(:has(.ratingSegments:hover)),
-  &[data-readonly] {
-    .ratingSegment {
-      &.current {
-        ~ .ratingSegment {
-          .empty {
-            opacity: 1;
-          }
-
-          .filled {
-            opacity: 0;
-          }
-        }
+  &.fill-cumulative {
+    &:not(:has(.ratingSegments:hover)),
+    &[data-readonly] {
+      .ratingSegment.current ~ .ratingSegment {
+        @include empty-segment;
       }
-    }
 
-    &:not(:has(.current)) {
-      .ratingSegment {
-        .empty {
-          opacity: 1;
-        }
+      &:not(:has(.current)) .ratingSegment {
+        @include empty-segment;
+      }
+    }
 
-        .filled {
-          opacity: 0;
-        }
+    &:not([data-readonly]) {
+      .ratingSegment:hover ~ .ratingSegment {
+        @include empty-segment;
       }
     }
   }
 
-  &:not([data-readonly]) {
-    &.ratingSegments:hover {
-      .ratingSegment {
-        .empty {
-          opacity: 0;
-        }
-
-        .filled {
-          opacity: 1;
-        }
+  &.fill-single {
+    &:not(:has(.ratingSegments:hover)),
+    &[data-readonly] {
+      .ratingSegment:not(.current) {
+        @include empty-segment;
+      }
+    }
+
+    &:not([data-readonly]):has(.ratingSegments:hover) {
+      .ratingSegment:not(:hover) {
+        @include empty-segment;
       }
     }
+  }
 
+  &:not([data-readonly]) {
     .ratingSegment:hover {
       transform: scale(1.2);
       transform-origin: center;
-
-      ~ .ratingSegment {
-        .empty {
-          opacity: 1;
-        }
-
-        .filled {
-          opacity: 0;
-        }
-      }
     }
   }
 
@@ -102,8 +99,8 @@
   &[data-disabled],
   [aria-disabled] & {
     .ratingSegment {
-      .star,
-      .starFilled {
+      .empty,
+      .filled {
         color: var(--form-control--border-color--disabled);
       }
     }
diff --git a/packages/components/src/components/Rating/Rating.tsx b/packages/components/src/components/Rating/Rating.tsx
index 1f439a7c1f..5a060d0167 100644
--- a/packages/components/src/components/Rating/Rating.tsx
+++ b/packages/components/src/components/Rating/Rating.tsx
@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactElement } from "react";
+import { Children, type PropsWithChildren, type ReactElement } from "react";
 import styles from "./Rating.module.scss";
 import clsx from "clsx";
 import * as Aria from "react-aria-components";
@@ -7,10 +7,12 @@ import {
   flowComponent,
   type FlowComponentProps,
 } from "@/lib/componentFactory/flowComponent";
-import { PropsContextProvider } from "@/lib/propsContext";
+import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
 import { useFieldComponent } from "@/lib/hooks/useFieldComponent";
 import { useObjectRef } from "@react-aria/utils";
 import { useMakeFocusable } from "@/lib/hooks/dom/useMakeFocusable";
+import { UiComponentTunnelExit } from "@/components/UiComponentTunnel/UiComponentTunnelExit";
+import { RatingSegmentContextProvider } from "@/components/Rating/context";
 
 export interface RatingProps
   extends
@@ -23,18 +25,39 @@ export interface RatingProps
   defaultValue?: number;
   /** The size of the component. @default: "m" */
   size?: "s" | "m";
+  /**
+   * The number of segments the rating consists of. Ignored when the rating has
+   * `RatingSegment` children — those define the number of segments themselves.
+   *
+   * @default: 5
+   */
+  maxValue?: number;
+  /**
+   * How the segments are filled. `cumulative` fills every segment up to the
+   * value, `single` fills only the selected segment.
+   *
+   * @default: cumulative
+   */
+  fill?: "cumulative" | "single";
   /** An alternative icon for the empty state */
   iconEmpty?: ReactElement;
   /** An alternative icon for the filled state */
   iconFilled?: ReactElement;
 }
 
-/** @flr-generate all */
+const segmentsTunnelId = "segments";
+
+/**
+ * @flr-generate all
+ * @flr-slot-props iconEmpty, iconFilled
+ */
 export const Rating = flowComponent("Rating", (props) => {
   const {
     value,
-    defaultValue = 0,
+    defaultValue,
     size = "m",
+    maxValue = 5,
+    fill = "cumulative",
     className,
     children,
     ref,
@@ -53,6 +76,7 @@ export const Rating = flowComponent("Rating", (props) => {
   const rootClassName = clsx(
     styles.rating,
     styles[`size-${size}`],
+    styles[`fill-${fill}`],
     fieldProps.className,
     className,
   );
@@ -61,44 +85,57 @@ export const Rating = flowComponent("Rating", (props) => {
 
   useMakeFocusable(localRef);
 
-  const stringValue = value?.toString();
+  const segmentProps = { size, iconEmpty, iconFilled };
+
+  const propsContext: PropsContext = {
+    ...fieldPropsContext,
+    RatingSegment: {
+      ...segmentProps,
+      tunnel: { id: segmentsTunnelId, component: "Rating" },
+    },
+  };
+
+  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (
+    <RatingSegment key={index} {...segmentProps} />
+  ));
 
   return (
     <Aria.RadioGroup
       {...rest}
       className={rootClassName}
-      defaultValue={defaultValue.toString()}
-      value={stringValue}
+      value={value?.toString()}
+      defaultValue={defaultValue?.toString()}
       ref={localRef}
     >
-      {(renderProps) => {
-        const selectedValue = parseInt(renderProps.state.selectedValue ?? "0");
+      <FieldErrorCaptureContext>
+        <PropsContextProvider
+          props={propsContext}
+          dependencies={[size, iconEmpty, iconFilled]}
+        >
+          {children}
+        </PropsContextProvider>
+        <div className={styles.ratingSegments}>
+          <UiComponentTunnelExit id={segmentsTunnelId} component="Rating">
+            {(tunnelChildren) => {
+              const tunneledSegments = Children.toArray(tunnelChildren);
+              const segments =
+                tunneledSegments.length > 0
+                  ? tunneledSegments
+                  : defaultSegments;
 
-        return (
-          <>
-            <FieldErrorCaptureContext>
-              <PropsContextProvider props={fieldPropsContext}>
-                {children}
-                <div className={styles.ratingSegments}>
-                  {Array(5)
-                    .fill("")
-                    .map((_, index) => (
-                      <RatingSegment
-                        key={index}
-                        index={index}
-                        selectedValue={selectedValue}
-                        size={size}
-                        iconEmpty={iconEmpty}
-                        iconFilled={iconFilled}
-                      />
-                    ))}
-                </div>
-              </PropsContextProvider>
-            </FieldErrorCaptureContext>
-            <FieldErrorView />
-          </>
-        );
-      }}
+              return segments.map((segment, index) => (
+                <RatingSegmentContextProvider
+                  key={index}
+                  value={{ value: index + 1, count: segments.length }}
+                >
+                  {segment}
+                </RatingSegmentContextProvider>
+              ));
+            }}
+          </UiComponentTunnelExit>
+        </div>
+      </FieldErrorCaptureContext>
+      <FieldErrorView />
     </Aria.RadioGroup>
   );
 });
diff --git a/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.tsx b/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.tsx
index f8dcc41a1a..b0ee39ffbf 100644
--- a/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.tsx
+++ b/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.tsx
@@ -1,11 +1,11 @@
 import { type FC, type PropsWithChildren } from "react";
-import type { RatingProps } from "@/components/Rating";
+import type { RatingSegmentProps } from "@/components/Rating/components/RatingSegment/RatingSegment";
 import styles from "../../Rating.module.scss";
 import { IconStar } from "@/components/Icon/components/icons";
 import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
 
 interface Props extends PropsWithChildren {
-  size: RatingProps["size"];
+  size: RatingSegmentProps["size"];
 }
 
 export const EmptySegment: FC<Props> = (props) => {
diff --git a/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.tsx b/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.tsx
index cdd17d35cc..29e6957619 100644
--- a/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.tsx
+++ b/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.tsx
@@ -1,11 +1,11 @@
 import { type FC, type PropsWithChildren } from "react";
-import type { RatingProps } from "@/components/Rating";
+import type { RatingSegmentProps } from "@/components/Rating/components/RatingSegment/RatingSegment";
 import styles from "../../Rating.module.scss";
 import { IconStarFilled } from "@/components/Icon/components/icons";
 import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
 
 interface Props extends PropsWithChildren {
-  size: RatingProps["size"];
+  size: RatingSegmentProps["size"];
 }
 
 export const FilledSegment: FC<Props> = (props) => {
diff --git a/packages/components/src/components/Rating/components/RatingSegment/RatingSegment.tsx b/packages/components/src/components/Rating/components/RatingSegment/RatingSegment.tsx
index b0007a3383..866172310a 100644
--- a/packages/components/src/components/Rating/components/RatingSegment/RatingSegment.tsx
+++ b/packages/components/src/components/Rating/components/RatingSegment/RatingSegment.tsx
@@ -1,38 +1,58 @@
-import { type FC, type PropsWithChildren, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import clsx from "clsx";
 import styles from "@/components/Rating/Rating.module.scss";
 import * as Aria from "react-aria-components";
-import type { RatingProps } from "@/components/Rating";
+import {
+  flowComponent,
+  type FlowComponentProps,
+} from "@/lib/componentFactory/flowComponent";
+import type { PropsWithClassName } from "@/lib/types/props";
 import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import locales from "../../locales/*.locale.json";
+import { useRatingSegmentContext } from "@/components/Rating/context";
 import { FilledSegment } from "@/components/Rating/components/RatingSegment/FilledSegment";
 import { EmptySegment } from "@/components/Rating/components/RatingSegment/EmptySegment";
 
-interface Props extends PropsWithChildren {
-  index: number;
-  selectedValue: number;
-  size: RatingProps["size"];
+export interface RatingSegmentProps
+  extends
+    Omit<Aria.RadioProps, "children" | "value" | "className">,
+    PropsWithClassName,
+    FlowComponentProps<HTMLLabelElement> {
+  /** An alternative icon for the empty state of this segment */
   iconEmpty?: ReactElement;
+  /** An alternative icon for the filled state of this segment */
   iconFilled?: ReactElement;
+  /** @internal Set by the surrounding `Rating`. */
+  size?: "s" | "m";
+  /** A segment renders icons only. `never` keeps the shared props union usable. */
+  children?: never;
 }
-export const RatingSegment: FC<Props> = (props) => {
-  const { index, selectedValue, size, iconEmpty, iconFilled } = props;
 
-  const value = index + 1;
+/**
+ * @flr-generate all
+ * @flr-slot-props iconEmpty, iconFilled
+ */
+export const RatingSegment = flowComponent("RatingSegment", (props) => {
+  const { className, iconEmpty, iconFilled, size = "m", ref, ...rest } = props;
+
+  const { value, count } = useRatingSegmentContext();
 
   const stringFormatter = useLocalizedStringFormatter(locales, "Rating");
 
   return (
     <Aria.Radio
-      aria-label={stringFormatter.format(`segment.${value}`)}
+      aria-label={stringFormatter.format("segment", { value, count })}
+      {...rest}
       value={value.toString()}
-      className={clsx(
-        styles.ratingSegment,
-        value === selectedValue && styles.current,
-      )}
+      ref={ref}
+      className={({ isSelected }) =>
+        clsx(styles.ratingSegment, isSelected && styles.current, className)
+      }
     >
       <FilledSegment size={size}>{iconFilled}</FilledSegment>
       <EmptySegment size={size}>{iconEmpty}</EmptySegment>
     </Aria.Radio>
   );
-};
+});
+
+export default RatingSegment;
diff --git a/packages/components/src/components/Rating/components/RatingSegment/index.ts b/packages/components/src/components/Rating/components/RatingSegment/index.ts
index 8abd4ef297..57ef87ba35 100644
--- a/packages/components/src/components/Rating/components/RatingSegment/index.ts
+++ b/packages/components/src/components/Rating/components/RatingSegment/index.ts
@@ -1 +1,2 @@
-export { RatingSegment } from "./RatingSegment";
+export { default } from "./RatingSegment";
+export { type RatingSegmentProps, RatingSegment } from "./RatingSegment";
diff --git a/packages/components/src/components/Rating/components/RatingSegment/view.ts b/packages/components/src/components/Rating/components/RatingSegment/view.ts
new file mode 100644
index 0000000000..ba4fecb355
--- /dev/null
+++ b/packages/components/src/components/Rating/components/RatingSegment/view.ts
@@ -0,0 +1,10 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import type { RatingSegment } from "./RatingSegment";
+import type { ViewComponent } from "@/lib/viewComponentContext";
+
+declare global {
+  interface FlowViewComponents {
+    RatingSegment: ViewComponent<typeof RatingSegment>;
+  }
+}
diff --git a/packages/components/src/components/Rating/context.ts b/packages/components/src/components/Rating/context.ts
new file mode 100644
index 0000000000..07cfbd680c
--- /dev/null
+++ b/packages/components/src/components/Rating/context.ts
@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+interface RatingSegmentContext {
+  /** The one-based position of the segment inside the rating. */
+  value: number;
+  /** The total number of segments of the rating. */
+  count: number;
+}
+
+const ratingSegmentContext = createContext<RatingSegmentContext>({
+  value: 1,
+  count: 1,
+});
+
+export const useRatingSegmentContext = (): RatingSegmentContext =>
+  useContext(ratingSegmentContext);
+
+export const RatingSegmentContextProvider = ratingSegmentContext.Provider;
diff --git a/packages/components/src/components/Rating/index.ts b/packages/components/src/components/Rating/index.ts
index 0ad9490955..dfab08b0aa 100644
--- a/packages/components/src/components/Rating/index.ts
+++ b/packages/components/src/components/Rating/index.ts
@@ -1,4 +1,5 @@
 export * from "./view";
 
 export { type RatingProps, Rating } from "./Rating";
+export * from "./components/RatingSegment";
 export { default } from "./Rating";
diff --git a/packages/components/src/components/Rating/locales/de-DE.locale.json b/packages/components/src/components/Rating/locales/de-DE.locale.json
index 82ff40d874..b9e8133693 100644
--- a/packages/components/src/components/Rating/locales/de-DE.locale.json
+++ b/packages/components/src/components/Rating/locales/de-DE.locale.json
@@ -1,8 +1,3 @@
 {
-  "segment.0": "0 von 5",
-  "segment.1": "1 von 5",
-  "segment.2": "2 von 5",
-  "segment.3": "3 von 5",
-  "segment.4": "4 von 5",
-  "segment.5": "5 von 5"
+  "segment": "{value} von {count}"
 }
diff --git a/packages/components/src/components/Rating/locales/en-US.locale.json b/packages/components/src/components/Rating/locales/en-US.locale.json
index 4e61ed9bf4..86f56a98bf 100644
--- a/packages/components/src/components/Rating/locales/en-US.locale.json
+++ b/packages/components/src/components/Rating/locales/en-US.locale.json
@@ -1,8 +1,3 @@
 {
-  "segment.0": "0 of 5",
-  "segment.1": "1 of 5",
-  "segment.2": "2 of 5",
-  "segment.3": "3 of 5",
-  "segment.4": "4 of 5",
-  "segment.5": "5 of 5"
+  "segment": "{value} of {count}"
 }
diff --git a/packages/components/src/components/Rating/stories/Default.stories.tsx b/packages/components/src/components/Rating/stories/Default.stories.tsx
index 17efeee596..6328835900 100644
--- a/packages/components/src/components/Rating/stories/Default.stories.tsx
+++ b/packages/components/src/components/Rating/stories/Default.stories.tsx
@@ -6,13 +6,34 @@ import { FieldError } from "@/components/FieldError";
 import { useForm } from "react-hook-form";
 import { Form, SubmitButton, typedField } from "@/integrations/react-hook-form";
 import { Icon } from "@/components/Icon";
-import { IconLeaf, IconLeafFilled } from "@tabler/icons-react";
+import {
+  IconLeaf,
+  IconLeafFilled,
+  IconMoodEmpty,
+  IconMoodEmptyFilled,
+  IconMoodHappy,
+  IconMoodHappyFilled,
+  IconMoodSad,
+  IconMoodSadFilled,
+} from "@tabler/icons-react";
+import { RatingSegment } from "@/components/Rating/components/RatingSegment";
 
 const meta: Meta<typeof Rating> = {
   title: "Form Controls/Rating",
   component: Rating,
-  args: { size: "m", isDisabled: false, isReadOnly: false, isRequired: false },
-  argTypes: { size: { control: "inline-radio", options: ["s", "m"] } },
+  args: {
+    size: "m",
+    maxValue: 5,
+    fill: "cumulative",
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+  },
+  argTypes: {
+    size: { control: "inline-radio", options: ["s", "m"] },
+    fill: { control: "inline-radio", options: ["cumulative", "single"] },
+    maxValue: { control: { type: "number", min: 1, max: 12 } },
+  },
   parameters: {
     controls: { exclude: ["iconEmpty", "iconFilled"] },
   },
@@ -86,3 +107,55 @@ export const WithCustomIcon: Story = {
     ),
   },
 };
+
+export const WithSegments: Story = {
+  args: { fill: "single" },
+  // The segments define how many there are, so maxValue has no effect here.
+  parameters: {
+    controls: { exclude: ["iconEmpty", "iconFilled", "maxValue"] },
+  },
+  render: (props) => (
+    <Rating {...props} defaultValue={3}>
+      <Label>How was your stay on Tatooine?</Label>
+      <RatingSegment
+        aria-label="Terrible"
+        iconEmpty={
+          <Icon>
+            <IconMoodSad />
+          </Icon>
+        }
+        iconFilled={
+          <Icon color="danger">
+            <IconMoodSadFilled />
+          </Icon>
+        }
+      />
+      <RatingSegment
+        aria-label="Okay"
+        iconEmpty={
+          <Icon>
+            <IconMoodEmpty />
+          </Icon>
+        }
+        iconFilled={
+          <Icon color="warning">
+            <IconMoodEmptyFilled />
+          </Icon>
+        }
+      />
+      <RatingSegment
+        aria-label="Great"
+        iconEmpty={
+          <Icon>
+            <IconMoodHappy />
+          </Icon>
+        }
+        iconFilled={
+          <Icon color="success">
+            <IconMoodHappyFilled />
+          </Icon>
+        }
+      />
+    </Rating>
+  ),
+};
diff --git a/packages/components/src/components/propTypes/index.ts b/packages/components/src/components/propTypes/index.ts
index bb12028111..ab054ffc76 100644
--- a/packages/components/src/components/propTypes/index.ts
+++ b/packages/components/src/components/propTypes/index.ts
@@ -84,6 +84,7 @@ import type { MarkdownEditorProps } from "@/components/MarkdownEditor";
 import type { AlertTextProps } from "@/components/AlertText";
 import type { IllustratedMessageProps } from "@/components/IllustratedMessage";
 import type { RatingProps } from "@/components/Rating";
+import type { RatingSegmentProps } from "@/components/Rating/components/RatingSegment";
 import type { CodeEditorProps } from "@/components/CodeEditor";
 import type { KbdProps } from "@/components/Kbd/Kbd";
 import type { AccordionProps } from "@/components/Accordion";
@@ -171,6 +172,7 @@ export interface FlowComponentPropsTypes {
   RadioButton: RadioButtonProps;
   RadioGroup: RadioGroupProps;
   Rating: RatingProps;
+  RatingSegment: RatingSegmentProps;
   SearchField: SearchFieldProps;
   Section: SectionProps;
   Segment: SegmentProps;
@@ -267,6 +269,7 @@ const propsContextSupportingComponentsMap: Record<
   RadioButton: true,
   RadioGroup: true,
   Rating: true,
+  RatingSegment: true,
   SearchField: true,
   Section: true,
   SectionHeader: true,
diff --git a/packages/components/src/views/RatingSegmentView.tsx b/packages/components/src/views/RatingSegmentView.tsx
new file mode 100644
index 0000000000..c22b25b9ce
--- /dev/null
+++ b/packages/components/src/views/RatingSegmentView.tsx
@@ -0,0 +1,17 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import React, { memo, type FC, useContext } from "react";
+import {
+  RatingSegment,
+  type RatingSegmentProps,
+} from "@/components/Rating/components/RatingSegment/RatingSegment";
+import { viewComponentContext } from "@/lib/viewComponentContext/viewComponentContext";
+
+const RatingSegmentView: FC<RatingSegmentProps> = memo((props) => {
+  const View =
+    useContext(viewComponentContext)["RatingSegment"] ?? RatingSegment;
+  return <View {...props} />;
+});
+RatingSegmentView.displayName = "RatingSegmentView";
+
+export default RatingSegmentView;
diff --git a/packages/remote-elements/src/auto-generated/RemoteRatingElement.ts b/packages/remote-elements/src/auto-generated/RemoteRatingElement.ts
index 9c8b482d58..b21e648496 100644
--- a/packages/remote-elements/src/auto-generated/RemoteRatingElement.ts
+++ b/packages/remote-elements/src/auto-generated/RemoteRatingElement.ts
@@ -19,6 +19,7 @@ export class RemoteRatingElement extends FlowRemoteElement<RemoteRatingElementPr
       className: {},
       defaultValue: {},
       dir: {},
+      fill: {},
       form: {},
       hidden: {},
       id: {},
@@ -28,6 +29,7 @@ export class RemoteRatingElement extends FlowRemoteElement<RemoteRatingElementPr
       isReadOnly: {},
       isRequired: {},
       lang: {},
+      maxValue: {},
       name: {},
       orientation: {},
       render: {},
diff --git a/packages/remote-elements/src/auto-generated/RemoteRatingSegmentElement.ts b/packages/remote-elements/src/auto-generated/RemoteRatingSegmentElement.ts
new file mode 100644
index 0000000000..b828dbd7e7
--- /dev/null
+++ b/packages/remote-elements/src/auto-generated/RemoteRatingSegmentElement.ts
@@ -0,0 +1,127 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+import type { RatingSegmentProps as RemoteRatingSegmentElementProps } from "@mittwald/flow-react-components";
+export type { RatingSegmentProps as RemoteRatingSegmentElementProps } from "@mittwald/flow-react-components";
+
+export class RemoteRatingSegmentElement extends FlowRemoteElement<RemoteRatingSegmentElementProps> {
+  static override get remoteAttributes() {
+    return ["style"];
+  }
+
+  static override get remoteProperties() {
+    return {
+      "aria-describedby": {},
+      "aria-details": {},
+      "aria-label": {},
+      "aria-labelledby": {},
+      autoFocus: {},
+      className: {},
+      dir: {},
+      hidden: {},
+      id: {},
+      inert: {},
+      inputRef: {},
+      isDisabled: {},
+      lang: {},
+      render: {},
+      size: {},
+      slot: {},
+      translate: {},
+    };
+  }
+
+  static override get remoteEvents() {
+    return {
+      animationEnd: {},
+      animationEndCapture: {},
+      animationIteration: {},
+      animationIterationCapture: {},
+      animationStart: {},
+      animationStartCapture: {},
+      auxClick: {},
+      auxClickCapture: {},
+      blur: {},
+      click: {},
+      clickCapture: {},
+      contextMenu: {},
+      contextMenuCapture: {},
+      doubleClick: {},
+      doubleClickCapture: {},
+      focus: {},
+      focusChange: {},
+      gotPointerCapture: {},
+      gotPointerCaptureCapture: {},
+      hoverChange: {},
+      hoverEnd: {},
+      hoverStart: {},
+      keyDown: {},
+      keyUp: {},
+      lostPointerCapture: {},
+      lostPointerCaptureCapture: {},
+      mouseDown: {},
+      mouseDownCapture: {},
+      mouseEnter: {},
+      mouseLeave: {},
+      mouseMove: {},
+      mouseMoveCapture: {},
+      mouseOut: {},
+      mouseOutCapture: {},
+      mouseOver: {},
+      mouseOverCapture: {},
+      mouseUp: {},
+      mouseUpCapture: {},
+      pointerCancel: {},
+      pointerCancelCapture: {},
+      pointerDown: {},
+      pointerDownCapture: {},
+      pointerEnter: {},
+      pointerLeave: {},
+      pointerMove: {},
+      pointerMoveCapture: {},
+      pointerOut: {},
+      pointerOutCapture: {},
+      pointerOver: {},
+      pointerOverCapture: {},
+      pointerUp: {},
+      pointerUpCapture: {},
+      press: {},
+      pressChange: {},
+      pressEnd: {},
+      pressStart: {},
+      pressUp: {},
+      scroll: {},
+      scrollCapture: {},
+      touchCancel: {},
+      touchCancelCapture: {},
+      touchEnd: {},
+      touchEndCapture: {},
+      touchMove: {},
+      touchMoveCapture: {},
+      touchStart: {},
+      touchStartCapture: {},
+      transitionCancel: {},
+      transitionCancelCapture: {},
+      transitionEnd: {},
+      transitionEndCapture: {},
+      transitionRun: {},
+      transitionRunCapture: {},
+      transitionStart: {},
+      transitionStartCapture: {},
+      wheel: {},
+      wheelCapture: {},
+    };
+  }
+
+  static override get remoteSlots() {
+    return ["iconEmpty", "iconFilled"];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "flr-rating-segment": InstanceType<typeof RemoteRatingSegmentElement>;
+  }
+}
+
+customElements.define("flr-rating-segment", RemoteRatingSegmentElement);
diff --git a/packages/remote-elements/src/auto-generated/index.ts b/packages/remote-elements/src/auto-generated/index.ts
index f6606557c7..f0758b91de 100644
--- a/packages/remote-elements/src/auto-generated/index.ts
+++ b/packages/remote-elements/src/auto-generated/index.ts
@@ -100,6 +100,7 @@ export * from "./RemoteRadioButtonElement";
 export * from "./RemoteRadioGroupElement";
 export * from "./RemoteRangeCalendarElement";
 export * from "./RemoteRatingElement";
+export * from "./RemoteRatingSegmentElement";
 export * from "./RemoteSearchFieldElement";
 export * from "./RemoteSectionElement";
 export * from "./RemoteSegmentElement";
diff --git a/packages/remote-react-components/package.json b/packages/remote-react-components/package.json
index 9ddc675e84..f53f9297df 100644
--- a/packages/remote-react-components/package.json
+++ b/packages/remote-react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-components",
-  "version": "1.0.3",
+  "version": "0.2.0-alpha.1047",
   "type": "module",
   "description": "React components that can be used in a remote environment",
   "homepage": "https://flow.mittwald.de",
@@ -65,6 +65,7 @@
     "@mittwald/flow-remote-react-renderer": "workspace:*",
     "@mittwald/typescript-config": "workspace:*",
     "@quilted/threads": "^3.3.1",
+    "@tabler/icons-react": "^3.44.0",
     "@types/node": "^25.9.3",
     "@types/react-dom": "^19.2",
     "@types/semver": "^7.8.0",
diff --git a/packages/remote-react-components/src/auto-generated/RatingSegment.ts b/packages/remote-react-components/src/auto-generated/RatingSegment.ts
new file mode 100644
index 0000000000..d67a53ad6e
--- /dev/null
+++ b/packages/remote-react-components/src/auto-generated/RatingSegment.ts
@@ -0,0 +1,102 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+"use client";
+import createFlowRemoteComponent from "@/components/createFlowRemoteComponent";
+import { RemoteRatingSegmentElement } from "@mittwald/flow-remote-elements";
+export { type RemoteRatingSegmentElement } from "@mittwald/flow-remote-elements";
+
+export const RatingSegment = createFlowRemoteComponent(
+  "flr-rating-segment",
+  "RatingSegment",
+  RemoteRatingSegmentElement,
+  {
+    slotProps: {
+      wrapper: "flr-slot-root-wrapper",
+    },
+    eventProps: {
+      onAnimationEnd: { event: "animationEnd" } as never,
+      onAnimationEndCapture: { event: "animationEndCapture" } as never,
+      onAnimationIteration: { event: "animationIteration" } as never,
+      onAnimationIterationCapture: {
+        event: "animationIterationCapture",
+      } as never,
+      onAnimationStart: { event: "animationStart" } as never,
+      onAnimationStartCapture: { event: "animationStartCapture" } as never,
+      onAuxClick: { event: "auxClick" } as never,
+      onAuxClickCapture: { event: "auxClickCapture" } as never,
+      onBlur: { event: "blur" } as never,
+      onClick: { event: "click" } as never,
+      onClickCapture: { event: "clickCapture" } as never,
+      onContextMenu: { event: "contextMenu" } as never,
+      onContextMenuCapture: { event: "contextMenuCapture" } as never,
+      onDoubleClick: { event: "doubleClick" } as never,
+      onDoubleClickCapture: { event: "doubleClickCapture" } as never,
+      onFocus: { event: "focus" } as never,
+      onFocusChange: { event: "focusChange" } as never,
+      onGotPointerCapture: { event: "gotPointerCapture" } as never,
+      onGotPointerCaptureCapture: {
+        event: "gotPointerCaptureCapture",
+      } as never,
+      onHoverChange: { event: "hoverChange" } as never,
+      onHoverEnd: { event: "hoverEnd" } as never,
+      onHoverStart: { event: "hoverStart" } as never,
+      onKeyDown: { event: "keyDown" } as never,
+      onKeyUp: { event: "keyUp" } as never,
+      onLostPointerCapture: { event: "lostPointerCapture" } as never,
+      onLostPointerCaptureCapture: {
+        event: "lostPointerCaptureCapture",
+      } as never,
+      onMouseDown: { event: "mouseDown" } as never,
+      onMouseDownCapture: { event: "mouseDownCapture" } as never,
+      onMouseEnter: { event: "mouseEnter" } as never,
+      onMouseLeave: { event: "mouseLeave" } as never,
+      onMouseMove: { event: "mouseMove" } as never,
+      onMouseMoveCapture: { event: "mouseMoveCapture" } as never,
+      onMouseOut: { event: "mouseOut" } as never,
+      onMouseOutCapture: { event: "mouseOutCapture" } as never,
+      onMouseOver: { event: "mouseOver" } as never,
+      onMouseOverCapture: { event: "mouseOverCapture" } as never,
+      onMouseUp: { event: "mouseUp" } as never,
+      onMouseUpCapture: { event: "mouseUpCapture" } as never,
+      onPointerCancel: { event: "pointerCancel" } as never,
+      onPointerCancelCapture: { event: "pointerCancelCapture" } as never,
+      onPointerDown: { event: "pointerDown" } as never,
+      onPointerDownCapture: { event: "pointerDownCapture" } as never,
+      onPointerEnter: { event: "pointerEnter" } as never,
+      onPointerLeave: { event: "pointerLeave" } as never,
+      onPointerMove: { event: "pointerMove" } as never,
+      onPointerMoveCapture: { event: "pointerMoveCapture" } as never,
+      onPointerOut: { event: "pointerOut" } as never,
+      onPointerOutCapture: { event: "pointerOutCapture" } as never,
+      onPointerOver: { event: "pointerOver" } as never,
+      onPointerOverCapture: { event: "pointerOverCapture" } as never,
+      onPointerUp: { event: "pointerUp" } as never,
+      onPointerUpCapture: { event: "pointerUpCapture" } as never,
+      onPress: { event: "press" } as never,
+      onPressChange: { event: "pressChange" } as never,
+      onPressEnd: { event: "pressEnd" } as never,
+      onPressStart: { event: "pressStart" } as never,
+      onPressUp: { event: "pressUp" } as never,
+      onScroll: { event: "scroll" } as never,
+      onScrollCapture: { event: "scrollCapture" } as never,
+      onTouchCancel: { event: "touchCancel" } as never,
+      onTouchCancelCapture: { event: "touchCancelCapture" } as never,
+      onTouchEnd: { event: "touchEnd" } as never,
+      onTouchEndCapture: { event: "touchEndCapture" } as never,
+      onTouchMove: { event: "touchMove" } as never,
+      onTouchMoveCapture: { event: "touchMoveCapture" } as never,
+      onTouchStart: { event: "touchStart" } as never,
+      onTouchStartCapture: { event: "touchStartCapture" } as never,
+      onTransitionCancel: { event: "transitionCancel" } as never,
+      onTransitionCancelCapture: { event: "transitionCancelCapture" } as never,
+      onTransitionEnd: { event: "transitionEnd" } as never,
+      onTransitionEndCapture: { event: "transitionEndCapture" } as never,
+      onTransitionRun: { event: "transitionRun" } as never,
+      onTransitionRunCapture: { event: "transitionRunCapture" } as never,
+      onTransitionStart: { event: "transitionStart" } as never,
+      onTransitionStartCapture: { event: "transitionStartCapture" } as never,
+      onWheel: { event: "wheel" } as never,
+      onWheelCapture: { event: "wheelCapture" } as never,
+    },
+  },
+);
diff --git a/packages/remote-react-components/src/auto-generated/index.ts b/packages/remote-react-components/src/auto-generated/index.ts
index a353207c8a..df580c5b56 100644
--- a/packages/remote-react-components/src/auto-generated/index.ts
+++ b/packages/remote-react-components/src/auto-generated/index.ts
@@ -100,6 +100,7 @@ export * from "./RadioButton";
 export * from "./RadioGroup";
 export * from "./RangeCalendar";
 export * from "./Rating";
+export * from "./RatingSegment";
 export * from "./SearchField";
 export * from "./Section";
 export * from "./Segment";
diff --git a/packages/remote-react-components/src/tests/visual/Rating.browser.test.tsx b/packages/remote-react-components/src/tests/visual/Rating.browser.test.tsx
index f4bc076aa6..6063398e23 100644
--- a/packages/remote-react-components/src/tests/visual/Rating.browser.test.tsx
+++ b/packages/remote-react-components/src/tests/visual/Rating.browser.test.tsx
@@ -1,6 +1,35 @@
 import { crossVersion, testEnvironments } from "@/tests/lib/environments";
 import { test } from "vitest";
 import { page } from "vitest/browser";
+import {
+  IconMoodEmpty,
+  IconMoodEmptyFilled,
+  IconMoodHappy,
+  IconMoodHappyFilled,
+  IconMoodSad,
+  IconMoodSadFilled,
+} from "@tabler/icons-react";
+
+const moods = [
+  {
+    label: "Bad",
+    color: "danger",
+    Empty: IconMoodSad,
+    Filled: IconMoodSadFilled,
+  },
+  {
+    label: "Okay",
+    color: "warning",
+    Empty: IconMoodEmpty,
+    Filled: IconMoodEmptyFilled,
+  },
+  {
+    label: "Great",
+    color: "success",
+    Empty: IconMoodHappy,
+    Filled: IconMoodHappyFilled,
+  },
+] as const;
 
 test.each(testEnvironments)(
   "Rating states (%s)",
@@ -19,6 +48,9 @@ test.each(testEnvironments)(
         <Rating value={5} isReadOnly>
           <Label>Readonly</Label>
         </Rating>
+        <Rating value={3} isDisabled>
+          <Label>Disabled</Label>
+        </Rating>
       </Flex>,
     );
 
@@ -66,3 +98,44 @@ test.skipIf(crossVersion({ below: "0.2.0-alpha.883" })).each(testEnvironments)(
     await testScreenshot("Rating custom icon");
   },
 );
+
+// RatingSegment, fill and maxValue are part of the next minor.
+const ratingSegmentSince = "1.1.0";
+
+test.skipIf(crossVersion({ below: ratingSegmentSince })).each(testEnvironments)(
+  "Rating segments (%s)",
+  async ({
+    testScreenshot,
+    render,
+    components: { Flex, Rating, RatingSegment, Label, Icon },
+  }) => {
+    await render(
+      <Flex direction="column" gap="m">
+        <Rating maxValue={10} value={7}>
+          <Label>maxValue</Label>
+        </Rating>
+        <Rating fill="single" value={2}>
+          <Label>Single fill with segments</Label>
+          {moods.map(({ label, color, Empty, Filled }) => (
+            <RatingSegment
+              key={label}
+              aria-label={label}
+              iconEmpty={
+                <Icon>
+                  <Empty />
+                </Icon>
+              }
+              iconFilled={
+                <Icon color={color}>
+                  <Filled />
+                </Icon>
+              }
+            />
+          ))}
+        </Rating>
+      </Flex>,
+    );
+
+    await testScreenshot("Rating segments");
+  },
+);
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-darwin.png
new file mode 100644
index 0000000000..85e4a2f1c7
Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-linux.png
new file mode 100644
index 0000000000..807deb150a
Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-firefox-linux.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-darwin.png
new file mode 100644
index 0000000000..3a09890c33
Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-linux.png
new file mode 100644
index 0000000000..a11ca0f66d
Binary files /dev/null and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-segments-webkit-linux.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-darwin.png
index 3fd54ebc21..18b0c302d7 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-darwin.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-linux.png
index e8532c9d76..d230681f6d 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-firefox-linux.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-darwin.png
index fec3c7e4ea..b220bafaa0 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-darwin.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-linux.png
index f086f88a92..1987fa3320 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Rating.browser.test.tsx/Rating-states-webkit-linux.png differ
diff --git a/packages/remote-react-renderer/src/auto-generated/index.ts b/packages/remote-react-renderer/src/auto-generated/index.ts
index aa4f789d22..9265ea56e4 100644
--- a/packages/remote-react-renderer/src/auto-generated/index.ts
+++ b/packages/remote-react-renderer/src/auto-generated/index.ts
@@ -101,6 +101,7 @@ import { RadioButton as RadioButton } from "@mittwald/flow-react-components";
 import { RadioGroup as RadioGroup } from "@mittwald/flow-react-components";
 import { RangeCalendar as RangeCalendar } from "@mittwald/flow-react-components";
 import { Rating as Rating } from "@mittwald/flow-react-components";
+import { RatingSegment as RatingSegment } from "@mittwald/flow-react-components";
 import { SearchField as SearchField } from "@mittwald/flow-react-components";
 import { Section as Section } from "@mittwald/flow-react-components";
 import { Segment as Segment } from "@mittwald/flow-react-components";
@@ -412,6 +413,10 @@ export const flowComponents = {
     RangeCalendar,
   ),
   "flr-rating": createFlowRemoteComponentRenderer("Rating", Rating),
+  "flr-rating-segment": createFlowRemoteComponentRenderer(
+    "RatingSegment",
+    RatingSegment,
+  ),
   "flr-search-field": createFlowRemoteComponentRenderer(
     "SearchField",
     SearchField,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acbb7db520..f041ece65b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1180,6 +1180,9 @@ importers:
       '@quilted/threads':
         specifier: ^3.3.1
         version: 3.3.1(patch_hash=fa797cdfb8346ba050fd5d6367ccd451df47806c6ea34421e45e8cc760faf812)(@preact/signals-core@1.14.2)
+      '@tabler/icons-react':
+        specifier: ^3.44.0
+        version: 3.46.0(react@19.2.8)
       '@types/node':
         specifier: ^25.9.3
         version: 25.9.5