From 32b94374afbcf48b3ba9a2e05d99a5551f987db8 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Fri, 26 Jun 2026 12:27:54 +0300
Subject: [PATCH 01/12] feat(rating): tedi-ready component #531

---
 skills/tedi-react/references/components.md    |  24 ++
 src/tedi/components/form/rating/index.ts      |   1 +
 .../components/form/rating/rating.module.scss |  97 +++++++
 .../components/form/rating/rating.spec.tsx    |  69 +++++
 .../components/form/rating/rating.stories.tsx | 262 ++++++++++++++++++
 src/tedi/components/form/rating/rating.tsx    | 210 ++++++++++++++
 src/tedi/index.ts                             |   1 +
 7 files changed, 664 insertions(+)
 create mode 100644 src/tedi/components/form/rating/index.ts
 create mode 100644 src/tedi/components/form/rating/rating.module.scss
 create mode 100644 src/tedi/components/form/rating/rating.spec.tsx
 create mode 100644 src/tedi/components/form/rating/rating.stories.tsx
 create mode 100644 src/tedi/components/form/rating/rating.tsx

diff --git a/skills/tedi-react/references/components.md b/skills/tedi-react/references/components.md
index 4584cba94..b3182b0ff 100644
--- a/skills/tedi-react/references/components.md
+++ b/skills/tedi-react/references/components.md
@@ -1605,6 +1605,30 @@ Sub-components: `OptionContent.Label`, `OptionContent.Meta`
 )} />
 ```
 
+### Rating
+
+Rating scale for collecting feedback. Rendered as a `radiogroup` of native radios (keyboard arrows move between items, form-submittable).
+
+**Props:** `RatingProps`
+- `label: string` (required) — accessible name for the group
+- `type?: 'star' | 'number' | 'icon' = 'star'` — `star`/`number` fill cumulatively (every item up to the value); `icon` highlights a single item
+- `count?: number` — items in the scale (default `5` for `star`/`icon`, `10` for `number`)
+- `value?: number`, `defaultValue?: number = 0` — selected value (1-based; `0` = no rating). Controlled with `value` + `onChange`
+- `onChange?: (value: number) => void`
+- `itemLabels?: string[]` — per-item labels (length = `count`); used as each radio's accessible name and shown as captions (`icon`: under each item; `number`: first/last as start/end; `star`: the selected item's label as a single caption)
+- `icons?: string[]` — glyph names for `type="icon"` (defaults to the five sentiment faces when `count` is 5)
+- `disabled?: boolean`, `readOnly?: boolean`, `name?: string`, `className?: string`
+
+```tsx
+<Rating
+  label="Hinnang"
+  type="star"
+  value={value}
+  onChange={setValue}
+  itemLabels={['Väga halb', 'Halb', 'Keskmine', 'Hea', 'Väga hea']}
+/>
+```
+
 States: the `Label` uses `color: inherit`, so it follows the parent item's per-state text colour (default → hover → active → disabled) defined on `DropdownItem` / the Select option — both surfaces share the `--dropdown-item-*` and `--form-checkbox-radio-*` tokens. The leading icon and `Meta` keep their secondary/tertiary colours. `Select` renders its option content with `<OptionContent indicatorSemantics="control">` internally, so a custom `renderOption` is only needed for *richer* content (icon/meta), not to match the default look.
 
 ---
diff --git a/src/tedi/components/form/rating/index.ts b/src/tedi/components/form/rating/index.ts
new file mode 100644
index 000000000..75c51e756
--- /dev/null
+++ b/src/tedi/components/form/rating/index.ts
@@ -0,0 +1 @@
+export * from './rating';
diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
new file mode 100644
index 000000000..166131da9
--- /dev/null
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -0,0 +1,97 @@
+.tedi-rating {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-04);
+  align-items: flex-start;
+}
+
+.tedi-rating__items {
+  display: flex;
+  gap: var(--feedback-star-inner-spacing);
+  align-items: flex-start;
+}
+
+.tedi-rating--number .tedi-rating__items,
+.tedi-rating--icon .tedi-rating__items {
+  gap: var(--layout-grid-gutters-08);
+}
+
+.tedi-rating__item {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-04);
+  align-items: center;
+  cursor: pointer;
+}
+
+.tedi-rating--disabled .tedi-rating__item {
+  cursor: not-allowed;
+}
+
+.tedi-rating__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+
+.tedi-rating__visual {
+  display: inline-flex;
+}
+
+.tedi-rating__input:focus-visible + .tedi-rating__visual {
+  outline: 2px solid var(--general-border-brand);
+  outline-offset: 2px;
+  border-radius: var(--button-radius-default);
+}
+
+.tedi-rating__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-sm-height);
+  height: var(--button-sm-height);
+  font-size: var(--body-small-regular-size);
+  color: var(--feedback-indicator);
+  background-color: var(--general-surface-primary);
+  border: var(--tedi-borders-01) solid var(--feedback-indicator);
+  border-radius: 50%;
+}
+
+.tedi-rating__item--active .tedi-rating__circle {
+  color: var(--general-text-white);
+  background-color: var(--feedback-indicator);
+}
+
+.tedi-rating__caption,
+.tedi-rating__endpoints,
+.tedi-rating__star-caption {
+  font-size: var(--body-small-regular-size);
+  color: var(--general-text-secondary);
+}
+
+.tedi-rating__caption {
+  text-align: center;
+}
+
+.tedi-rating__endpoints {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.tedi-rating--disabled {
+  .tedi-rating__circle {
+    color: var(--general-text-disabled);
+    border-color: var(--general-text-disabled);
+  }
+
+  .tedi-rating__item--active .tedi-rating__circle {
+    color: var(--general-text-white);
+    background-color: var(--general-text-disabled);
+  }
+}
diff --git a/src/tedi/components/form/rating/rating.spec.tsx b/src/tedi/components/form/rating/rating.spec.tsx
new file mode 100644
index 000000000..981554b15
--- /dev/null
+++ b/src/tedi/components/form/rating/rating.spec.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+import { Rating } from './rating';
+
+import '@testing-library/jest-dom';
+
+describe('Rating', () => {
+  it('renders a labelled radiogroup with the requested number of items', () => {
+    render(<Rating label="Feedback" type="star" count={5} />);
+    const group = screen.getByRole('radiogroup', { name: 'Feedback' });
+    expect(group).toBeInTheDocument();
+    expect(within(group).getAllByRole('radio')).toHaveLength(5);
+  });
+
+  it('defaults to 10 items for the number type', () => {
+    render(<Rating label="NPS" type="number" />);
+    expect(screen.getAllByRole('radio')).toHaveLength(10);
+  });
+
+  it('marks the selected radio from defaultValue (uncontrolled)', () => {
+    render(<Rating label="Feedback" defaultValue={3} count={5} />);
+    expect(screen.getByRole('radio', { name: '3 of 5' })).toBeChecked();
+  });
+
+  it('fires onChange and updates selection when an item is chosen', () => {
+    const onChange = jest.fn();
+    render(<Rating label="Feedback" count={5} onChange={onChange} />);
+    fireEvent.click(screen.getByRole('radio', { name: '4 of 5' }));
+    expect(onChange).toHaveBeenCalledWith(4);
+    expect(screen.getByRole('radio', { name: '4 of 5' })).toBeChecked();
+  });
+
+  it('respects the controlled value and does not self-update', () => {
+    const onChange = jest.fn();
+    render(<Rating label="Feedback" count={5} value={2} onChange={onChange} />);
+    fireEvent.click(screen.getByRole('radio', { name: '5 of 5' }));
+    expect(onChange).toHaveBeenCalledWith(5);
+    expect(screen.getByRole('radio', { name: '2 of 5' })).toBeChecked();
+  });
+
+  it('uses itemLabels as accessible names', () => {
+    render(<Rating label="Feedback" type="icon" count={3} itemLabels={['Bad', 'Ok', 'Good']} />);
+    expect(screen.getByRole('radio', { name: 'Good' })).toBeInTheDocument();
+  });
+
+  it('gives every radio a non-empty name even with sparse (endpoint-only) labels', () => {
+    render(
+      <Rating label="NPS" type="number" count={10} itemLabels={['Low', '', '', '', '', '', '', '', '', 'High']} />
+    );
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => expect(radio).toHaveAccessibleName(/.+/));
+    expect(screen.getByRole('radio', { name: 'Low' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'High' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: '5 of 10' })).toBeInTheDocument();
+  });
+
+  it('disables every radio when disabled', () => {
+    render(<Rating label="Feedback" count={5} disabled />);
+    screen.getAllByRole('radio').forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it('is non-interactive when readOnly', () => {
+    const onChange = jest.fn();
+    render(<Rating label="Feedback" count={5} defaultValue={2} readOnly onChange={onChange} />);
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => expect(radio).toBeDisabled());
+    expect(screen.getByRole('radio', { name: '2 of 5' })).toBeChecked();
+  });
+});
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
new file mode 100644
index 000000000..aca670924
--- /dev/null
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { Heading } from '../../base/typography/heading/heading';
+import { Text } from '../../base/typography/text/text';
+import { Button } from '../../buttons/button/button';
+import { Card, CardContent } from '../../cards/card';
+import { VerticalSpacing } from '../../layout/vertical-spacing';
+import { ChoiceGroup } from '../choice-group/choice-group';
+import { ChoiceGroupValue } from '../choice-group/choice-group.types';
+import { TextArea } from '../textarea/textarea';
+import { Rating, RatingType } from './rating';
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.63.78?node-id=15548-139123&m=dev" target="_BLANK">Figma ↗</a>
+ */
+const meta: Meta<typeof Rating> = {
+  component: Rating,
+  title: 'TEDI-Ready/Components/Form/Rating',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.63.78?node-id=15548-139123&m=dev',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Rating>;
+
+const STAR_LABELS = [
+  'Ei jäänud üldse rahule',
+  'Ei jäänud rahule',
+  'Osaliselt rahul',
+  'Jäin rahule',
+  'Jäin väga rahule',
+];
+
+const ICON_LABELS = ['Väga halb', 'Halb', 'Keskmine', 'Hea', 'Väga hea'];
+const NUMBER_LABELS = Array.from({ length: 10 }, (_, index) =>
+  index === 0 ? 'Väga halb' : index === 9 ? 'Suurepärane' : ''
+);
+
+const rowLabel = (value: number, max: number): string => (value === 0 ? 'No rating' : `${value} of ${max}`);
+
+const ScaleShowcase = ({
+  type,
+  max,
+  itemLabels,
+}: {
+  type: RatingType;
+  max: number;
+  itemLabels?: string[];
+}): JSX.Element => (
+  <VerticalSpacing size={1}>
+    {Array.from({ length: max + 1 }, (_, value) => (
+      <div key={value} style={{ display: 'flex', alignItems: 'flex-start', gap: '1.5rem' }}>
+        <div style={{ width: '5rem', flexShrink: 0 }}>
+          <Text modifiers="bold">{rowLabel(value, max)}</Text>
+        </div>
+        <Rating
+          type={type}
+          count={max}
+          defaultValue={value}
+          readOnly
+          itemLabels={itemLabels}
+          label={rowLabel(value, max)}
+        />
+      </div>
+    ))}
+  </VerticalSpacing>
+);
+
+export const Default: Story = {
+  render: (args) => <Rating {...args} defaultValue={3} itemLabels={STAR_LABELS} />,
+};
+
+export const Stars: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="star" max={5} itemLabels={STAR_LABELS} />,
+};
+
+export const Numbers: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="number" max={10} itemLabels={NUMBER_LABELS} />,
+};
+
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="icon" max={5} itemLabels={ICON_LABELS} />,
+};
+
+export const Indicator: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const cell = (type: RatingType, value: number) => (
+      <Rating
+        type={type}
+        count={1}
+        defaultValue={value}
+        readOnly
+        icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
+        label={`${type} ${value ? 'selected' : 'not selected'}`}
+      />
+    );
+
+    return (
+      <table style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th />
+            {(['star', 'number', 'icon'] as const).map((type) => (
+              <th key={type} style={{ padding: '0.5rem 1.5rem', textAlign: 'left' }}>
+                <Text modifiers="bold">{type[0].toUpperCase() + type.slice(1)}</Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            { label: 'Not selected', value: 0 },
+            { label: 'Selected', value: 1 },
+          ].map((row) => (
+            <tr key={row.label}>
+              <th style={{ padding: '0.5rem 1.5rem 0.5rem 0', textAlign: 'left' }}>
+                <Text modifiers="bold">{row.label}</Text>
+              </th>
+              {(['star', 'number', 'icon'] as const).map((type) => (
+                <td key={type} style={{ padding: '0.5rem 1.5rem' }}>
+                  {cell(type, row.value)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(2);
+    return (
+      <VerticalSpacing size={1}>
+        <Rating {...args} type="star" value={value} onChange={setValue} itemLabels={STAR_LABELS} label="Hinnang" />
+        <span>Valitud: {value || '—'}</span>
+      </VerticalSpacing>
+    );
+  },
+};
+
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <VerticalSpacing size={2}>
+      <Rating type="star" label="No rating" itemLabels={STAR_LABELS} />
+      <Rating type="star" label="Read-only" defaultValue={3} readOnly itemLabels={STAR_LABELS} />
+      <Rating type="star" label="Disabled" defaultValue={3} disabled itemLabels={STAR_LABELS} />
+      <Rating type="icon" label="Disabled icons" defaultValue={2} disabled itemLabels={ICON_LABELS} />
+    </VerticalSpacing>
+  ),
+};
+
+const REASON_ITEMS = [
+  { id: 'reason-error', value: 'error', label: 'Näen veateadet' },
+  { id: 'reason-wrong', value: 'wrong', label: 'Andmed on valed' },
+  { id: 'reason-missing', value: 'missing', label: 'Andmed puuduvad' },
+  { id: 'reason-no-right', value: 'no-right', label: 'Õigus puudub' },
+  { id: 'reason-not-found', value: 'not-found', label: 'Ei leidnud, mida otsisin' },
+  { id: 'reason-complex', value: 'complex', label: 'Keeruline' },
+  { id: 'reason-other', value: 'other', label: 'Muu põhjus' },
+];
+
+const centered = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 'var(--layout-grid-gutters-08)',
+} as const;
+
+export const FeedbackFormExample: Story = {
+  parameters: {
+    controls: { disable: true },
+    layout: 'padded',
+  },
+  render: () => {
+    const [rating, setRating] = useState(1);
+    const [reasons, setReasons] = useState<ChoiceGroupValue>(['error']);
+    const [comment, setComment] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+
+    return (
+      <Card>
+        <CardContent>
+          {submitted ? (
+            <div style={centered}>
+              <Heading element="h2" modifiers="h5">
+                Aitäh!
+              </Heading>
+              <Text color="secondary">Sinu tagasiside aitab portaali paremaks muuta.</Text>
+            </div>
+          ) : (
+            <VerticalSpacing size={1.5}>
+              <div style={centered}>
+                <Heading element="h2" modifiers="h5">
+                  Kuidas jäid rahule teenuse kasutamisega?
+                </Heading>
+                <Rating
+                  label="Kuidas jäid rahule teenuse kasutamisega?"
+                  value={rating}
+                  onChange={setRating}
+                  itemLabels={STAR_LABELS}
+                />
+              </div>
+
+              {rating > 0 && (
+                <>
+                  <div style={centered}>
+                    <Heading element="h3" modifiers="h5">
+                      Mis mõjutas Sinu vastust?
+                    </Heading>
+                    <Text color="secondary">Vali sobivad märksõnad</Text>
+                  </div>
+                  <ChoiceGroup
+                    id="feedback-reasons"
+                    name="feedback-reasons"
+                    label="Mis mõjutas Sinu vastust?"
+                    hideLabel
+                    inputType="checkbox"
+                    variant="card"
+                    color="secondary"
+                    showIndicator
+                    value={reasons}
+                    onChange={setReasons}
+                    items={REASON_ITEMS}
+                    rowProps={{ justifyContent: 'center' }}
+                  />
+
+                  <TextArea
+                    id="feedback-comment"
+                    label="Soovi korral lisa täpsustus"
+                    characterLimit={500}
+                    value={comment}
+                    onChange={setComment}
+                    helper={{
+                      text: 'Me ei vasta selle vormi kaudu saadetud tagasisidele. Palun ära lisa siia isiklikku teavet.',
+                    }}
+                  />
+
+                  <div style={centered}>
+                    <Button onClick={() => setSubmitted(true)}>Saada tagasiside</Button>
+                  </div>
+                </>
+              )}
+            </VerticalSpacing>
+          )}
+        </CardContent>
+      </Card>
+    );
+  },
+};
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
new file mode 100644
index 000000000..b68a211a5
--- /dev/null
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -0,0 +1,210 @@
+import cn from 'classnames';
+import React, { useId, useState } from 'react';
+
+import { Icon } from '../../base/icon/icon';
+import styles from './rating.module.scss';
+
+export type RatingType = 'star' | 'number' | 'icon';
+
+const DEFAULT_ICONS = [
+  'sentiment_very_dissatisfied',
+  'sentiment_dissatisfied',
+  'sentiment_neutral',
+  'sentiment_satisfied',
+  'sentiment_very_satisfied',
+] as const;
+
+export interface RatingProps {
+  /**
+   * Accessible name for the rating group (`radiogroup`). Required so screen readers announce what
+   * is being rated.
+   */
+  label: string;
+  /**
+   * Visual style of the scale.
+   * - `star` — outlined / filled stars, cumulative (every item up to the value fills).
+   * - `number` — numbered circles, cumulative, with optional start / end captions.
+   * - `icon` — a single highlighted icon (e.g. sentiment faces) with per-item captions.
+   * @default star
+   */
+  type?: RatingType;
+  /**
+   * Number of items in the scale.
+   * @default 5 (`star` / `icon`), 10 (`number`)
+   */
+  count?: number;
+  /**
+   * Selected value (1-based; `0` means no rating). Provide with `onChange` for controlled use.
+   */
+  value?: number;
+  /**
+   * Initial value for uncontrolled use.
+   * @default 0
+   */
+  defaultValue?: number;
+  /**
+   * Fired with the chosen value (1-based) when the selection changes.
+   */
+  onChange?: (value: number) => void;
+  /**
+   * Per-item labels (length should match `count`). Used as each item's accessible name and:
+   * - `icon` — shown as a caption under every item.
+   * - `number` — the first and last are shown as start / end captions.
+   * - `star` — the selected (or hovered) item's label is shown as a single caption below the row.
+   */
+  itemLabels?: string[];
+  /**
+   * Icon glyph names for `type="icon"` (length should match `count`). Defaults to the five
+   * sentiment faces when `count` is 5.
+   */
+  icons?: string[];
+  /**
+   * Disable interaction and mute the colours.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Show the value without allowing changes.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * `name` for the underlying radio inputs (form submission). Defaults to a generated id.
+   */
+  name?: string;
+  /**
+   * Additional class name on the root element.
+   */
+  className?: string;
+}
+
+export const Rating = (props: RatingProps): JSX.Element => {
+  const {
+    label,
+    type = 'star',
+    count,
+    value,
+    defaultValue = 0,
+    onChange,
+    itemLabels,
+    icons,
+    disabled = false,
+    readOnly = false,
+    name,
+    className,
+  } = props;
+
+  const generatedName = useId();
+  const groupName = name ?? generatedName;
+  const total = count ?? (type === 'number' ? 10 : 5);
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const interactive = !disabled && !readOnly;
+  const displayValue = interactive && hoverValue !== null ? hoverValue : currentValue;
+
+  const resolvedIcons = icons ?? (total === DEFAULT_ICONS.length ? [...DEFAULT_ICONS] : undefined);
+
+  const setValue = (next: number): void => {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  const isItemActive = (position: number): boolean =>
+    type === 'icon' ? position === displayValue : position <= displayValue;
+
+  // `||` (not `??`) so sparse label arrays — e.g. only the number scale's endpoints — still give
+  // every radio a non-empty accessible name.
+  const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position} of ${total}`;
+
+  const renderVisual = (position: number, active: boolean): React.ReactNode => {
+    if (type === 'star') {
+      return (
+        <Icon
+          name="kid_star"
+          filled={active}
+          color={disabled ? 'tertiary' : 'brand'}
+          size={24}
+          className={styles['tedi-rating__star']}
+        />
+      );
+    }
+
+    return (
+      <span className={styles['tedi-rating__circle']}>
+        {type === 'number' ? (
+          position
+        ) : (
+          <Icon
+            name={resolvedIcons?.[position - 1] ?? 'circle'}
+            color={active ? 'white' : disabled ? 'tertiary' : 'brand'}
+            size={18}
+          />
+        )}
+      </span>
+    );
+  };
+
+  const positions = Array.from({ length: total }, (_, index) => index + 1);
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      className={cn(
+        styles['tedi-rating'],
+        styles[`tedi-rating--${type}`],
+        { [styles['tedi-rating--disabled']]: disabled },
+        className
+      )}
+    >
+      <div className={styles['tedi-rating__items']} onMouseLeave={() => setHoverValue(null)}>
+        {positions.map((position) => {
+          const active = isItemActive(position);
+          return (
+            <label
+              key={position}
+              className={cn(styles['tedi-rating__item'], { [styles['tedi-rating__item--active']]: active })}
+              onMouseEnter={interactive ? () => setHoverValue(position) : undefined}
+            >
+              <input
+                type="radio"
+                className={styles['tedi-rating__input']}
+                name={groupName}
+                value={position}
+                checked={currentValue === position}
+                disabled={!interactive}
+                onChange={() => setValue(position)}
+                aria-label={itemLabel(position)}
+              />
+              <span className={styles['tedi-rating__visual']} aria-hidden="true">
+                {renderVisual(position, active)}
+              </span>
+              {type === 'icon' && itemLabels?.[position - 1] && (
+                <span className={styles['tedi-rating__caption']}>{itemLabels[position - 1]}</span>
+              )}
+            </label>
+          );
+        })}
+      </div>
+
+      {type === 'number' && (itemLabels?.[0] || itemLabels?.[total - 1]) && (
+        <div className={styles['tedi-rating__endpoints']}>
+          <span>{itemLabels?.[0]}</span>
+          <span>{itemLabels?.[total - 1]}</span>
+        </div>
+      )}
+
+      {type === 'star' && displayValue > 0 && itemLabels?.[displayValue - 1] && (
+        <div className={styles['tedi-rating__star-caption']}>{itemLabels[displayValue - 1]}</div>
+      )}
+    </div>
+  );
+};
+
+Rating.displayName = 'Rating';
+
+export default Rating;
diff --git a/src/tedi/index.ts b/src/tedi/index.ts
index 7c5590604..b24b1ac9e 100644
--- a/src/tedi/index.ts
+++ b/src/tedi/index.ts
@@ -71,6 +71,7 @@ export * from './components/misc/scroll-fade/scroll-fade';
 export * from './components/misc/affix/affix';
 export * from './components/misc/ellipsis/ellipsis';
 export * from './components/misc/option-content/option-content';
+export * from './components/form/rating/rating';
 export * from './components/layout/sidenav';
 export * from './components/layout/footer';
 

From ce502894a429d6dcc1ea863e66d1264e919c4ef8 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 1 Jul 2026 10:13:06 +0300
Subject: [PATCH 02/12] feat(rating): design review fixes #531

---
 .../components/form/rating/rating.module.scss | 34 ++++++++++++++++---
 src/tedi/components/form/rating/rating.tsx    |  8 ++---
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index 166131da9..db9d4b36a 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -1,8 +1,11 @@
+@use '@tedi-design-system/core/bootstrap-utility/breakpoints';
+
 .tedi-rating {
   display: flex;
   flex-direction: column;
   gap: var(--layout-grid-gutters-04);
   align-items: flex-start;
+  width: fit-content;
 }
 
 .tedi-rating__items {
@@ -67,21 +70,28 @@
   background-color: var(--feedback-indicator);
 }
 
-.tedi-rating__caption,
-.tedi-rating__endpoints,
-.tedi-rating__star-caption {
+.tedi-rating__caption {
   font-size: var(--body-small-regular-size);
   color: var(--general-text-secondary);
+  text-align: center;
 }
 
-.tedi-rating__caption {
+.tedi-rating__star-caption {
+  align-self: stretch;
+  min-height: var(--body-extra-small-line-height);
+  font-size: var(--body-extra-small-size);
+  line-height: var(--body-extra-small-line-height);
+  color: var(--general-text-secondary);
   text-align: center;
 }
 
 .tedi-rating__endpoints {
   display: flex;
+  align-self: stretch;
   justify-content: space-between;
-  width: 100%;
+  font-size: var(--body-extra-small-size);
+  line-height: var(--body-extra-small-line-height);
+  color: var(--general-text-secondary);
 }
 
 .tedi-rating--disabled {
@@ -95,3 +105,17 @@
     background-color: var(--general-text-disabled);
   }
 }
+
+@include breakpoints.media-breakpoint-down(md) {
+  .tedi-rating--number {
+    .tedi-rating__items {
+      display: grid;
+      grid-template-columns: repeat(5, auto);
+    }
+
+    .tedi-rating__circle {
+      width: var(--button-md-height);
+      height: var(--button-md-height);
+    }
+  }
+}
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index b68a211a5..4812d1e6d 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -116,8 +116,6 @@ export const Rating = (props: RatingProps): JSX.Element => {
   const isItemActive = (position: number): boolean =>
     type === 'icon' ? position === displayValue : position <= displayValue;
 
-  // `||` (not `??`) so sparse label arrays — e.g. only the number scale's endpoints — still give
-  // every radio a non-empty accessible name.
   const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position} of ${total}`;
 
   const renderVisual = (position: number, active: boolean): React.ReactNode => {
@@ -198,8 +196,10 @@ export const Rating = (props: RatingProps): JSX.Element => {
         </div>
       )}
 
-      {type === 'star' && displayValue > 0 && itemLabels?.[displayValue - 1] && (
-        <div className={styles['tedi-rating__star-caption']}>{itemLabels[displayValue - 1]}</div>
+      {type === 'star' && itemLabels?.some(Boolean) && (
+        <div className={styles['tedi-rating__star-caption']}>
+          {displayValue > 0 ? itemLabels[displayValue - 1] : null}
+        </div>
       )}
     </div>
   );

From 0e182e831847588ef64f0862bda82af2ddf12e81 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Thu, 3 Sep 2026 10:56:00 +0300
Subject: [PATCH 03/12] fix(rating): fix imports #531

---
 src/tedi/components/form/rating/rating.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index aca670924..dcbd461b4 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -4,11 +4,11 @@ import { useState } from 'react';
 import { Heading } from '../../base/typography/heading/heading';
 import { Text } from '../../base/typography/text/text';
 import { Button } from '../../buttons/button/button';
-import { Card, CardContent } from '../../cards/card';
+import { Card, CardContent } from '../../content/card';
 import { VerticalSpacing } from '../../layout/vertical-spacing';
 import { ChoiceGroup } from '../choice-group/choice-group';
 import { ChoiceGroupValue } from '../choice-group/choice-group.types';
-import { TextArea } from '../textarea/textarea';
+import { Textarea } from '../textarea/textarea';
 import { Rating, RatingType } from './rating';
 
 /**
@@ -237,7 +237,7 @@ export const FeedbackFormExample: Story = {
                     rowProps={{ justifyContent: 'center' }}
                   />
 
-                  <TextArea
+                  <Textarea
                     id="feedback-comment"
                     label="Soovi korral lisa täpsustus"
                     characterLimit={500}

From b277251a0e84d3f0770e2e8be66f0f2d40ed4d83 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Mon, 28 Sep 2026 10:37:14 +0300
Subject: [PATCH 04/12] feat(rating): design improvements #531

---
 .../components/form/rating/rating.module.scss |  97 ++++++++++--
 .../components/form/rating/rating.spec.tsx    |  46 +++++-
 .../components/form/rating/rating.stories.tsx | 143 ++++++++++++------
 src/tedi/components/form/rating/rating.tsx    | 129 +++++++++++++---
 .../providers/label-provider/labels-map.ts    |   7 +
 5 files changed, 331 insertions(+), 91 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index db9d4b36a..4f0e7de93 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -47,9 +47,22 @@
 }
 
 .tedi-rating__input:focus-visible + .tedi-rating__visual {
-  outline: 2px solid var(--general-border-brand);
-  outline-offset: 2px;
   border-radius: var(--button-radius-default);
+  box-shadow: 0 0 0 1px var(--general-effect-colors-focus-outset-inner-shadow),
+    0 0 0 3px var(--general-effect-colors-focus-outset-outer-shadow);
+}
+
+.tedi-rating__star {
+  line-height: 1;
+  color: var(--general-text-brand);
+  text-align: center;
+}
+
+.tedi-rating--star .tedi-rating__visual {
+  align-items: center;
+  justify-content: center;
+  width: var(--feedback-star-size);
+  height: var(--feedback-star-size);
 }
 
 .tedi-rating__circle {
@@ -59,15 +72,32 @@
   width: var(--button-sm-height);
   height: var(--button-sm-height);
   font-size: var(--body-small-regular-size);
-  color: var(--feedback-indicator);
+  color: var(--general-text-secondary);
   background-color: var(--general-surface-primary);
-  border: var(--tedi-borders-01) solid var(--feedback-indicator);
+  border: var(--tedi-borders-01) solid var(--general-border-secondary);
   border-radius: 50%;
 }
 
-.tedi-rating__item--active .tedi-rating__circle {
+.tedi-rating--icon .tedi-rating__circle {
+  color: var(--general-text-brand);
+}
+
+.tedi-rating__item--active .tedi-rating__circle,
+.tedi-rating__circle--filled {
   color: var(--general-text-white);
-  background-color: var(--feedback-indicator);
+  background-color: var(--feedback-background-default);
+  border-color: var(--feedback-background-default);
+}
+
+.tedi-rating--hovering .tedi-rating__item--active .tedi-rating__star,
+.tedi-rating__item:hover .tedi-rating__star {
+  color: var(--feedback-background-hover);
+}
+
+.tedi-rating--hovering .tedi-rating__item--active .tedi-rating__circle,
+.tedi-rating__item--active:hover .tedi-rating__circle {
+  background-color: var(--feedback-background-hover);
+  border-color: var(--feedback-background-hover);
 }
 
 .tedi-rating__caption {
@@ -95,19 +125,64 @@
 }
 
 .tedi-rating--disabled {
-  .tedi-rating__circle {
+  .tedi-rating__star {
     color: var(--general-text-disabled);
-    border-color: var(--general-text-disabled);
   }
 
+  .tedi-rating__circle,
   .tedi-rating__item--active .tedi-rating__circle {
-    color: var(--general-text-white);
-    background-color: var(--general-text-disabled);
+    color: var(--general-text-disabled);
+    background-color: var(--general-surface-primary);
+    border-color: var(--general-text-disabled);
   }
 }
 
+.tedi-rating--readonly {
+  flex-direction: row;
+  align-items: center;
+}
+
+.tedi-rating__summary {
+  display: inline-flex;
+  gap: var(--layout-grid-gutters-08);
+  align-items: center;
+}
+
+.tedi-rating__stars {
+  display: inline-flex;
+  gap: var(--feedback-star-inner-spacing);
+}
+
+.tedi-rating__star-partial {
+  position: relative;
+  display: inline-flex;
+}
+
+.tedi-rating__star-partial-fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  display: inline-flex;
+  width: var(--tedi-rating-star-fill);
+  overflow: hidden;
+}
+
+.tedi-rating__summary-text {
+  font-size: var(--heading-h6-size);
+  line-height: var(--heading-h6-line-height);
+  color: var(--general-text-secondary);
+}
+
+.tedi-rating__summary-value {
+  font-weight: var(--heading-h6-weight);
+}
+
+.tedi-rating__summary-count {
+  font-weight: var(--body-regular-weight);
+}
+
 @include breakpoints.media-breakpoint-down(md) {
-  .tedi-rating--number {
+  .tedi-rating--number:not(.tedi-rating--readonly) {
     .tedi-rating__items {
       display: grid;
       grid-template-columns: repeat(5, auto);
diff --git a/src/tedi/components/form/rating/rating.spec.tsx b/src/tedi/components/form/rating/rating.spec.tsx
index 981554b15..cf48be800 100644
--- a/src/tedi/components/form/rating/rating.spec.tsx
+++ b/src/tedi/components/form/rating/rating.spec.tsx
@@ -1,9 +1,12 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 
+import { LabelProvider } from '../../../providers/label-provider';
 import { Rating } from './rating';
 
 import '@testing-library/jest-dom';
 
+const renderWithLabels = (ui: JSX.Element) => render(<LabelProvider>{ui}</LabelProvider>);
+
 describe('Rating', () => {
   it('renders a labelled radiogroup with the requested number of items', () => {
     render(<Rating label="Feedback" type="star" count={5} />);
@@ -59,11 +62,42 @@ describe('Rating', () => {
     screen.getAllByRole('radio').forEach((radio) => expect(radio).toBeDisabled());
   });
 
-  it('is non-interactive when readOnly', () => {
-    const onChange = jest.fn();
-    render(<Rating label="Feedback" count={5} defaultValue={2} readOnly onChange={onChange} />);
-    const radios = screen.getAllByRole('radio');
-    radios.forEach((radio) => expect(radio).toBeDisabled());
-    expect(screen.getByRole('radio', { name: '2 of 5' })).toBeChecked();
+  describe('readOnly aggregate summary', () => {
+    it('renders a non-interactive summary (no radios) with the value, max and rater count', () => {
+      renderWithLabels(<Rating label="Teenuse hinnang" count={5} value={3.5} ratingsCount={271} readOnly />);
+      expect(screen.queryAllByRole('radio')).toHaveLength(0);
+      const summary = screen.getByRole('img');
+
+      expect(summary).toHaveAccessibleName(/^Teenuse hinnang: 3[.,]5\/5 - 271 hindajat$/);
+    });
+
+    it('omits the rater count when ratingsCount is not provided', () => {
+      renderWithLabels(<Rating label="Hinnang" count={5} value={4} readOnly />);
+      expect(screen.getByRole('img')).toHaveAccessibleName('Hinnang: 4/5');
+    });
+
+    it('partially fills the boundary star in the scale variant (3.5 -> 3 full, 1 half, 1 empty)', () => {
+      const { container } = renderWithLabels(
+        <Rating label="Hinnang" type="star" count={5} value={3.5} readOnly readOnlyVariant="scale" />
+      );
+      const fills = container.querySelectorAll<HTMLElement>('.tedi-rating__star-partial-fill');
+
+      expect(fills).toHaveLength(4);
+      expect(fills[0].style.getPropertyValue('--tedi-rating-star-fill')).toBe('100%');
+      expect(fills[2].style.getPropertyValue('--tedi-rating-star-fill')).toBe('100%');
+      expect(fills[3].style.getPropertyValue('--tedi-rating-star-fill')).toBe('50%');
+    });
+
+    it('renders a single star (no partial-fill overlays) in the default summary variant', () => {
+      const { container } = renderWithLabels(<Rating label="Hinnang" type="star" count={5} value={3.5} readOnly />);
+      expect(container.querySelectorAll('.tedi-rating__star-partial-fill')).toHaveLength(0);
+    });
+
+    it('does not render the interactive scale in readOnly mode', () => {
+      const onChange = jest.fn();
+      renderWithLabels(<Rating label="Hinnang" count={5} value={2} ratingsCount={10} readOnly onChange={onChange} />);
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+      expect(onChange).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index dcbd461b4..55ccfca36 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -12,15 +12,19 @@ import { Textarea } from '../textarea/textarea';
 import { Rating, RatingType } from './rating';
 
 /**
- * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.63.78?node-id=15548-139123&m=dev" target="_BLANK">Figma ↗</a>
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.76.92?node-id=15548-139124&m=dev" target="_BLANK">Figma ↗</a>
  */
 const meta: Meta<typeof Rating> = {
   component: Rating,
   title: 'TEDI-Ready/Components/Form/Rating',
+  args: {
+    label: 'Hinnang',
+    type: 'star',
+  },
   parameters: {
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.63.78?node-id=15548-139123&m=dev',
+      url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.76.92?node-id=15548-139124&m=dev',
     },
   },
 };
@@ -58,51 +62,35 @@ const ScaleShowcase = ({
         <div style={{ width: '5rem', flexShrink: 0 }}>
           <Text modifiers="bold">{rowLabel(value, max)}</Text>
         </div>
-        <Rating
-          type={type}
-          count={max}
-          defaultValue={value}
-          readOnly
-          itemLabels={itemLabels}
-          label={rowLabel(value, max)}
-        />
+        <Rating type={type} count={max} defaultValue={value} itemLabels={itemLabels} label={rowLabel(value, max)} />
       </div>
     ))}
+    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1.5rem' }}>
+      <div style={{ width: '5rem', flexShrink: 0 }}>
+        <Text modifiers="bold">Read only</Text>
+      </div>
+      <Rating type={type} count={max} readOnly value={3.5} ratingsCount={271} label={`${type} read-only rating`} />
+    </div>
   </VerticalSpacing>
 );
 
 export const Default: Story = {
-  render: (args) => <Rating {...args} defaultValue={3} itemLabels={STAR_LABELS} />,
-};
-
-export const Stars: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="star" max={5} itemLabels={STAR_LABELS} />,
-};
-
-export const Numbers: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="number" max={10} itemLabels={NUMBER_LABELS} />,
+  render: (args) => <Rating {...args} />,
 };
 
-export const Icons: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="icon" max={5} itemLabels={ICON_LABELS} />,
-};
-
-export const Indicator: Story = {
-  parameters: { controls: { disable: true } },
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: '#rating-hover label', focusVisible: '#rating-focus input' },
+  },
   render: () => {
-    const cell = (type: RatingType, value: number) => (
-      <Rating
-        type={type}
-        count={1}
-        defaultValue={value}
-        readOnly
-        icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
-        label={`${type} ${value ? 'selected' : 'not selected'}`}
-      />
-    );
+    const rows: { label: string; id?: string; props: Partial<Parameters<typeof Rating>[0]> }[] = [
+      { label: 'Not selected', props: { defaultValue: 0 } },
+      { label: 'Selected', props: { defaultValue: 1 } },
+      { label: 'Hover', id: 'rating-hover', props: { defaultValue: 1 } },
+      { label: 'Disabled', props: { defaultValue: 1, disabled: true } },
+      { label: 'Focus', id: 'rating-focus', props: { defaultValue: 0 } },
+    ];
 
     return (
       <table style={{ borderCollapse: 'collapse' }}>
@@ -117,17 +105,20 @@ export const Indicator: Story = {
           </tr>
         </thead>
         <tbody>
-          {[
-            { label: 'Not selected', value: 0 },
-            { label: 'Selected', value: 1 },
-          ].map((row) => (
-            <tr key={row.label}>
+          {rows.map((row) => (
+            <tr key={row.label} id={row.id}>
               <th style={{ padding: '0.5rem 1.5rem 0.5rem 0', textAlign: 'left' }}>
                 <Text modifiers="bold">{row.label}</Text>
               </th>
               {(['star', 'number', 'icon'] as const).map((type) => (
                 <td key={type} style={{ padding: '0.5rem 1.5rem' }}>
-                  {cell(type, row.value)}
+                  <Rating
+                    {...row.props}
+                    type={type}
+                    count={1}
+                    icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
+                    label={`${type} ${row.label}`}
+                  />
                 </td>
               ))}
             </tr>
@@ -138,6 +129,21 @@ export const Indicator: Story = {
   },
 };
 
+export const Stars: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="star" max={5} itemLabels={STAR_LABELS} />,
+};
+
+export const Numbers: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="number" max={10} itemLabels={NUMBER_LABELS} />,
+};
+
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="icon" max={5} itemLabels={ICON_LABELS} />,
+};
+
 export const Controlled: Story = {
   render: (args) => {
     const [value, setValue] = useState(2);
@@ -150,14 +156,51 @@ export const Controlled: Story = {
   },
 };
 
-export const States: Story = {
+/**
+ * The read-only `scale` variant renders the whole star scale with the boundary star filled to the
+ * fraction (e.g. `3,5` → three full, one half, one empty), followed by the summary text. Use it to
+ * show an aggregate rating inline; the default `summary` variant shows a single star instead.
+ */
+export const ReadOnlyScale: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <VerticalSpacing size={2}>
-      <Rating type="star" label="No rating" itemLabels={STAR_LABELS} />
-      <Rating type="star" label="Read-only" defaultValue={3} readOnly itemLabels={STAR_LABELS} />
-      <Rating type="star" label="Disabled" defaultValue={3} disabled itemLabels={STAR_LABELS} />
-      <Rating type="icon" label="Disabled icons" defaultValue={2} disabled itemLabels={ICON_LABELS} />
+    <VerticalSpacing size={1}>
+      {[4.8, 3.5, 2.5, 1.2].map((value) => (
+        <Rating
+          key={value}
+          type="star"
+          readOnly
+          readOnlyVariant="scale"
+          value={value}
+          ratingsCount={271}
+          label="Teenuse hinnang"
+        />
+      ))}
+    </VerticalSpacing>
+  ),
+};
+
+/**
+ * Swap glyphs via `icons`:
+ * - `type="icon"` takes an array (one per item) for a single-highlight scale — here a weather scale.
+ * - `type="star"` takes a single string to change the cumulative glyph (e.g. a pointier `star` or a
+ *   `favorite` heart), keeping the fill and hover/focus behaviour.
+ *
+ * Pair with `itemLabels` for accessible names / captions.
+ */
+export const CustomIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <VerticalSpacing size={1}>
+      <Rating
+        type="icon"
+        icons={['thunderstorm', 'rainy', 'cloud', 'partly_cloudy_day', 'sunny']}
+        itemLabels={['Väga halb', 'Halb', 'Keskmine', 'Hea', 'Väga hea']}
+        defaultValue={4}
+        label="Ilmahinnang"
+      />
+      <Rating type="star" icons="star" defaultValue={3} itemLabels={STAR_LABELS} label="Pointier star" />
+      <Rating type="star" icons="favorite" defaultValue={4} label="Favourite" />
     </VerticalSpacing>
   ),
 };
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 4812d1e6d..4a8ab3dc5 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import React, { useId, useState } from 'react';
 
+import { useLabels } from '../../../providers/label-provider';
 import { Icon } from '../../base/icon/icon';
 import styles from './rating.module.scss';
 
@@ -17,24 +18,25 @@ const DEFAULT_ICONS = [
 export interface RatingProps {
   /**
    * Accessible name for the rating group (`radiogroup`). Required so screen readers announce what
-   * is being rated.
+   * is being rated. In `readOnly` mode it prefixes the summary's accessible name.
    */
   label: string;
   /**
    * Visual style of the scale.
-   * - `star` — outlined / filled stars, cumulative (every item up to the value fills).
-   * - `number` — numbered circles, cumulative, with optional start / end captions.
-   * - `icon` — a single highlighted icon (e.g. sentiment faces) with per-item captions.
+   * - `star` - outlined / filled stars, cumulative (every item up to the value fills).
+   * - `number` - numbered circles, cumulative, with optional start / end captions.
+   * - `icon` - a single highlighted icon (e.g. sentiment faces) with per-item captions.
    * @default star
    */
   type?: RatingType;
   /**
-   * Number of items in the scale.
+   * Number of items in the scale (the maximum rating).
    * @default 5 (`star` / `icon`), 10 (`number`)
    */
   count?: number;
   /**
    * Selected value (1-based; `0` means no rating). Provide with `onChange` for controlled use.
+   * In `readOnly` mode this is the (possibly fractional) average, e.g. `3.5`.
    */
   value?: number;
   /**
@@ -43,31 +45,50 @@ export interface RatingProps {
    */
   defaultValue?: number;
   /**
-   * Fired with the chosen value (1-based) when the selection changes.
+   * Fired with the chosen value (1-based) when the selection changes. Not called in `readOnly` mode.
    */
   onChange?: (value: number) => void;
   /**
    * Per-item labels (length should match `count`). Used as each item's accessible name and:
-   * - `icon` — shown as a caption under every item.
-   * - `number` — the first and last are shown as start / end captions.
-   * - `star` — the selected (or hovered) item's label is shown as a single caption below the row.
+   * - `icon` - shown as a caption under every item.
+   * - `number` - the first and last are shown as start / end captions.
+   * - `star` - the selected (or hovered) item's label is shown as a single caption below the row.
    */
   itemLabels?: string[];
   /**
-   * Icon glyph names for `type="icon"` (length should match `count`). Defaults to the five
-   * sentiment faces when `count` is 5.
+   * Custom glyph(s), as Material Symbol names.
+   * - `type="icon"` — an array, one glyph per item (length should match `count`); defaults to the
+   *   five sentiment faces when `count` is 5.
+   * - `type="star"` — a single glyph string (e.g. `'favorite'`, `'thumb_up'`) to swap the cumulative
+   *   star; an array uses its first entry. Defaults to `kid_star`.
    */
-  icons?: string[];
+  icons?: string | string[];
   /**
    * Disable interaction and mute the colours.
    * @default false
    */
   disabled?: boolean;
   /**
-   * Show the value without allowing changes.
+   * Render a compact, non-interactive summary of an aggregate rating instead of the interactive
+   * scale: a single filled visual (`star`, or `icon` for the rounded value; `number` shows none)
+   * followed by `{value}/{count}` and, when {@link ratingsCount} is set, the localised rater count
+   * (e.g. `3,5/5 - 271 hindajat`). `value` may be fractional here.
    * @default false
    */
   readOnly?: boolean;
+  /**
+   * Number of ratings behind the average, shown in the `readOnly` summary (e.g. `271 hindajat`).
+   * Ignored outside `readOnly` mode; the count is omitted when not provided.
+   */
+  ratingsCount?: number;
+  /**
+   * How the `readOnly` rating is displayed. Ignored when not `readOnly`.
+   * - `summary` - a single filled visual + `{value}/{count}` text (compact aggregate).
+   * - `scale` - the whole star scale with the boundary star filled to the fraction (`3.5` → three
+   *   full, one half, one empty), then the text. `star` only; other types fall back to `summary`.
+   * @default summary
+   */
+  readOnlyVariant?: 'summary' | 'scale';
   /**
    * `name` for the underlying radio inputs (form submission). Defaults to a generated id.
    */
@@ -90,10 +111,13 @@ export const Rating = (props: RatingProps): JSX.Element => {
     icons,
     disabled = false,
     readOnly = false,
+    ratingsCount,
+    readOnlyVariant = 'summary',
     name,
     className,
   } = props;
 
+  const { getLabel, locale } = useLabels();
   const generatedName = useId();
   const groupName = name ?? generatedName;
   const total = count ?? (type === 'number' ? 10 : 5);
@@ -104,9 +128,12 @@ export const Rating = (props: RatingProps): JSX.Element => {
 
   const [hoverValue, setHoverValue] = useState<number | null>(null);
   const interactive = !disabled && !readOnly;
-  const displayValue = interactive && hoverValue !== null ? hoverValue : currentValue;
+  const isHovering = interactive && hoverValue !== null;
+  const displayValue = isHovering ? (hoverValue as number) : currentValue;
 
-  const resolvedIcons = icons ?? (total === DEFAULT_ICONS.length ? [...DEFAULT_ICONS] : undefined);
+  const iconList = Array.isArray(icons) ? icons : icons !== undefined ? [icons] : undefined;
+  const resolvedIcons = iconList ?? (total === DEFAULT_ICONS.length ? [...DEFAULT_ICONS] : undefined);
+  const starGlyph = iconList?.[0] ?? 'kid_star';
 
   const setValue = (next: number): void => {
     if (!isControlled) setInternalValue(next);
@@ -118,13 +145,16 @@ export const Rating = (props: RatingProps): JSX.Element => {
 
   const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position} of ${total}`;
 
+  const positions = Array.from({ length: total }, (_, index) => index + 1);
+
   const renderVisual = (position: number, active: boolean): React.ReactNode => {
+    const filledActive = active && !disabled;
     if (type === 'star') {
       return (
         <Icon
-          name="kid_star"
-          filled={active}
-          color={disabled ? 'tertiary' : 'brand'}
+          name={starGlyph}
+          filled={filledActive}
+          color="inherit"
           size={24}
           className={styles['tedi-rating__star']}
         />
@@ -136,17 +166,67 @@ export const Rating = (props: RatingProps): JSX.Element => {
         {type === 'number' ? (
           position
         ) : (
-          <Icon
-            name={resolvedIcons?.[position - 1] ?? 'circle'}
-            color={active ? 'white' : disabled ? 'tertiary' : 'brand'}
-            size={18}
-          />
+          <Icon name={resolvedIcons?.[position - 1] ?? 'circle'} color={filledActive ? 'white' : 'inherit'} size={18} />
         )}
       </span>
     );
   };
 
-  const positions = Array.from({ length: total }, (_, index) => index + 1);
+  if (readOnly) {
+    const formattedValue = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(currentValue);
+    const valueText = `${formattedValue}/${total}`;
+    const countText = ratingsCount !== undefined ? ` - ${getLabel('rating.raters', ratingsCount)}` : '';
+    const summary = `${valueText}${countText}`;
+    const iconPosition = Math.min(total, Math.max(1, Math.round(currentValue)));
+    const isStarScale = type === 'star' && readOnlyVariant === 'scale';
+    const readOnlyVisual = isStarScale ? (
+      <span className={styles['tedi-rating__stars']}>
+        {positions.map((position) => {
+          const fill = Math.max(0, Math.min(1, currentValue - (position - 1))) * 100;
+          return (
+            <span key={position} className={styles['tedi-rating__star-partial']}>
+              <Icon name={starGlyph} color="inherit" size={24} className={styles['tedi-rating__star']} />
+              {fill > 0 && (
+                <span
+                  className={styles['tedi-rating__star-partial-fill']}
+                  style={{ '--tedi-rating-star-fill': `${fill}%` } as React.CSSProperties}
+                >
+                  <Icon name={starGlyph} filled color="inherit" size={24} className={styles['tedi-rating__star']} />
+                </span>
+              )}
+            </span>
+          );
+        })}
+      </span>
+    ) : type === 'star' ? (
+      <Icon name={starGlyph} filled color="inherit" size={24} className={styles['tedi-rating__star']} />
+    ) : type === 'icon' ? (
+      <span className={cn(styles['tedi-rating__circle'], styles['tedi-rating__circle--filled'])}>
+        <Icon name={resolvedIcons?.[iconPosition - 1] ?? 'circle'} color="white" size={18} />
+      </span>
+    ) : null;
+
+    return (
+      <div
+        role="img"
+        aria-label={`${label}: ${summary}`}
+        className={cn(
+          styles['tedi-rating'],
+          styles['tedi-rating--readonly'],
+          styles[`tedi-rating--${type}`],
+          className
+        )}
+      >
+        <div className={styles['tedi-rating__summary']} aria-hidden="true">
+          {readOnlyVisual}
+          <span className={styles['tedi-rating__summary-text']}>
+            <span className={styles['tedi-rating__summary-value']}>{valueText}</span>
+            {countText && <span className={styles['tedi-rating__summary-count']}>{countText}</span>}
+          </span>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div
@@ -156,6 +236,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
         styles['tedi-rating'],
         styles[`tedi-rating--${type}`],
         { [styles['tedi-rating--disabled']]: disabled },
+        { [styles['tedi-rating--hovering']]: isHovering },
         className
       )}
     >
diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts
index dc987deb9..6879530c8 100644
--- a/src/tedi/providers/label-provider/labels-map.ts
+++ b/src/tedi/providers/label-provider/labels-map.ts
@@ -1442,6 +1442,13 @@ export const labelsMap = validateDefaultLabels({
     en: 'Visibility',
     ru: 'Видимость',
   },
+  'rating.raters': {
+    description: 'Suffix in the read-only Rating summary showing how many people rated, e.g. "271 hindajat"',
+    components: ['Rating'],
+    et: (count: number) => `${count} hindajat`,
+    en: (count: number) => `${count} ratings`,
+    ru: (count: number) => `${count} оценок`,
+  },
 });
 
 type DefaultLabels = typeof labelsMap;

From 80c7ef183546bc666a3f12289b16f5080a1152fe Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Mon, 28 Sep 2026 12:55:01 +0300
Subject: [PATCH 05/12] feat(rating): simplify jdoc #531

---
 src/tedi/components/form/rating/rating.tsx | 61 ++++++----------------
 1 file changed, 15 insertions(+), 46 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 4a8ab3dc5..00d9009ed 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -16,51 +16,33 @@ const DEFAULT_ICONS = [
 ] as const;
 
 export interface RatingProps {
-  /**
-   * Accessible name for the rating group (`radiogroup`). Required so screen readers announce what
-   * is being rated. In `readOnly` mode it prefixes the summary's accessible name.
-   */
+  /** Accessible name for the group; also prefixes the `readOnly` summary. */
   label: string;
   /**
-   * Visual style of the scale.
-   * - `star` - outlined / filled stars, cumulative (every item up to the value fills).
-   * - `number` - numbered circles, cumulative, with optional start / end captions.
-   * - `icon` - a single highlighted icon (e.g. sentiment faces) with per-item captions.
+   * Visual style. `star` / `number` fill cumulatively; `icon` highlights a single item.
    * @default star
    */
   type?: RatingType;
   /**
-   * Number of items in the scale (the maximum rating).
+   * Number of items (the max rating).
    * @default 5 (`star` / `icon`), 10 (`number`)
    */
   count?: number;
-  /**
-   * Selected value (1-based; `0` means no rating). Provide with `onChange` for controlled use.
-   * In `readOnly` mode this is the (possibly fractional) average, e.g. `3.5`.
-   */
+  /** Selected value (1-based; `0` = none). Use with `onChange` for controlled mode. In `readOnly`, the (possibly fractional) average. */
   value?: number;
   /**
-   * Initial value for uncontrolled use.
+   * Initial value for uncontrolled mode.
    * @default 0
    */
   defaultValue?: number;
-  /**
-   * Fired with the chosen value (1-based) when the selection changes. Not called in `readOnly` mode.
-   */
+  /** Called with the chosen value when the selection changes. */
   onChange?: (value: number) => void;
-  /**
-   * Per-item labels (length should match `count`). Used as each item's accessible name and:
-   * - `icon` - shown as a caption under every item.
-   * - `number` - the first and last are shown as start / end captions.
-   * - `star` - the selected (or hovered) item's label is shown as a single caption below the row.
-   */
+  /** Per-item labels (length = `count`); used as each item's accessible name and as captions. */
   itemLabels?: string[];
   /**
-   * Custom glyph(s), as Material Symbol names.
-   * - `type="icon"` — an array, one glyph per item (length should match `count`); defaults to the
-   *   five sentiment faces when `count` is 5.
-   * - `type="star"` — a single glyph string (e.g. `'favorite'`, `'thumb_up'`) to swap the cumulative
-   *   star; an array uses its first entry. Defaults to `kid_star`.
+   * Custom Material Symbol glyph(s): an array (one per item) for `type="icon"`, or a single string to
+   * swap the `type="star"` glyph.
+   * @default sentiment faces (`icon`) / `kid_star` (`star`)
    */
   icons?: string | string[];
   /**
@@ -69,33 +51,20 @@ export interface RatingProps {
    */
   disabled?: boolean;
   /**
-   * Render a compact, non-interactive summary of an aggregate rating instead of the interactive
-   * scale: a single filled visual (`star`, or `icon` for the rounded value; `number` shows none)
-   * followed by `{value}/{count}` and, when {@link ratingsCount} is set, the localised rater count
-   * (e.g. `3,5/5 - 271 hindajat`). `value` may be fractional here.
+   * Show a compact read-only summary (visual + `{value}/{count}` text) instead of the interactive scale.
    * @default false
    */
   readOnly?: boolean;
-  /**
-   * Number of ratings behind the average, shown in the `readOnly` summary (e.g. `271 hindajat`).
-   * Ignored outside `readOnly` mode; the count is omitted when not provided.
-   */
+  /** Number of ratings shown in the `readOnly` summary (e.g. `271 hindajat`); omitted when unset. */
   ratingsCount?: number;
   /**
-   * How the `readOnly` rating is displayed. Ignored when not `readOnly`.
-   * - `summary` - a single filled visual + `{value}/{count}` text (compact aggregate).
-   * - `scale` - the whole star scale with the boundary star filled to the fraction (`3.5` → three
-   *   full, one half, one empty), then the text. `star` only; other types fall back to `summary`.
+   * `readOnly` layout: `summary` (single visual) or `scale` (full star scale with fractional fill).
    * @default summary
    */
   readOnlyVariant?: 'summary' | 'scale';
-  /**
-   * `name` for the underlying radio inputs (form submission). Defaults to a generated id.
-   */
+  /** `name` for the radio inputs (form submission). Defaults to a generated id. */
   name?: string;
-  /**
-   * Additional class name on the root element.
-   */
+  /** Additional class name on the root element. */
   className?: string;
 }
 

From 552a34e351682470a2f9190e917ad010d88893ba Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Fri, 2 Oct 2026 14:33:35 +0300
Subject: [PATCH 06/12] feat(rating): design review fixes #531

---
 .../components/form/rating/rating.module.scss | 49 ++++++-----
 .../components/form/rating/rating.spec.tsx    |  7 ++
 .../components/form/rating/rating.stories.tsx | 81 ++++++++++++++-----
 src/tedi/components/form/rating/rating.tsx    | 21 +++--
 4 files changed, 111 insertions(+), 47 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index 4f0e7de93..8ea170628 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -78,30 +78,39 @@
   border-radius: 50%;
 }
 
-.tedi-rating--icon .tedi-rating__circle {
+.tedi-rating--icon .tedi-rating__circle,
+.tedi-rating--number .tedi-rating__circle {
   color: var(--general-text-brand);
 }
 
 .tedi-rating__item--active .tedi-rating__circle,
 .tedi-rating__circle--filled {
   color: var(--general-text-white);
-  background-color: var(--feedback-background-default);
-  border-color: var(--feedback-background-default);
+  background-color: var(--general-surface-brand-primary);
+  border-color: var(--general-surface-brand-primary);
 }
 
 .tedi-rating--hovering .tedi-rating__item--active .tedi-rating__star,
-.tedi-rating__item:hover .tedi-rating__star {
-  color: var(--feedback-background-hover);
+.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item:hover .tedi-rating__star {
+  color: var(--general-icon-brand-dark);
 }
 
 .tedi-rating--hovering .tedi-rating__item--active .tedi-rating__circle,
-.tedi-rating__item--active:hover .tedi-rating__circle {
-  background-color: var(--feedback-background-hover);
-  border-color: var(--feedback-background-hover);
+.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item--active:hover .tedi-rating__circle {
+  background-color: var(--general-icon-brand-dark);
+  border-color: var(--general-icon-brand-dark);
+}
+
+// Hover on an unselected circle - light-blue tint with a brand-dark border/number (per the states).
+.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item:not(.tedi-rating__item--active):hover .tedi-rating__circle {
+  color: var(--general-icon-brand-dark);
+  background-color: var(--general-surface-brand-quaternary);
+  border-color: var(--general-icon-brand-dark);
 }
 
 .tedi-rating__caption {
-  font-size: var(--body-small-regular-size);
+  font-size: var(--body-extra-small-size);
+  line-height: var(--body-extra-small-line-height);
   color: var(--general-text-secondary);
   text-align: center;
 }
@@ -129,11 +138,15 @@
     color: var(--general-text-disabled);
   }
 
-  .tedi-rating__circle,
-  .tedi-rating__item--active .tedi-rating__circle {
+  .tedi-rating__circle {
     color: var(--general-text-disabled);
-    background-color: var(--general-surface-primary);
-    border-color: var(--general-text-disabled);
+    background-color: transparent;
+    border-color: var(--general-border-primary);
+  }
+
+  .tedi-rating__item--active .tedi-rating__circle {
+    background-color: var(--general-surface-tertiary);
+    border-color: var(--general-border-primary);
   }
 }
 
@@ -167,20 +180,14 @@
   overflow: hidden;
 }
 
+// The whole read-only summary (value + rater count) is one bold H6, per Figma.
 .tedi-rating__summary-text {
   font-size: var(--heading-h6-size);
+  font-weight: var(--heading-h6-weight);
   line-height: var(--heading-h6-line-height);
   color: var(--general-text-secondary);
 }
 
-.tedi-rating__summary-value {
-  font-weight: var(--heading-h6-weight);
-}
-
-.tedi-rating__summary-count {
-  font-weight: var(--body-regular-weight);
-}
-
 @include breakpoints.media-breakpoint-down(md) {
   .tedi-rating--number:not(.tedi-rating--readonly) {
     .tedi-rating__items {
diff --git a/src/tedi/components/form/rating/rating.spec.tsx b/src/tedi/components/form/rating/rating.spec.tsx
index cf48be800..c85c87aa3 100644
--- a/src/tedi/components/form/rating/rating.spec.tsx
+++ b/src/tedi/components/form/rating/rating.spec.tsx
@@ -76,6 +76,13 @@ describe('Rating', () => {
       expect(screen.getByRole('img')).toHaveAccessibleName('Hinnang: 4/5');
     });
 
+    it('shows the count number without the raters label when showRatingsCountLabel is false', () => {
+      renderWithLabels(
+        <Rating label="Hinnang" count={5} value={3.5} ratingsCount={271} showRatingsCountLabel={false} readOnly />
+      );
+      expect(screen.getByRole('img')).toHaveAccessibleName(/^Hinnang: 3[.,]5\/5 - 271$/);
+    });
+
     it('partially fills the boundary star in the scale variant (3.5 -> 3 full, 1 half, 1 empty)', () => {
       const { container } = renderWithLabels(
         <Rating label="Hinnang" type="star" count={5} value={3.5} readOnly readOnlyVariant="scale" />
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index 55ccfca36..90faa82ee 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
 import { Heading } from '../../base/typography/heading/heading';
 import { Text } from '../../base/typography/text/text';
@@ -69,7 +69,27 @@ const ScaleShowcase = ({
       <div style={{ width: '5rem', flexShrink: 0 }}>
         <Text modifiers="bold">Read only</Text>
       </div>
-      <Rating type={type} count={max} readOnly value={3.5} ratingsCount={271} label={`${type} read-only rating`} />
+      {/* Three count modes: full raters label, number only (showRatingsCountLabel={false}), and none. */}
+      <VerticalSpacing size={0.5}>
+        <Rating
+          type={type}
+          count={max}
+          readOnly
+          value={3.5}
+          ratingsCount={271}
+          label={`${type} read-only, with raters`}
+        />
+        <Rating
+          type={type}
+          count={max}
+          readOnly
+          value={3.5}
+          ratingsCount={271}
+          showRatingsCountLabel={false}
+          label={`${type} read-only, count only`}
+        />
+        <Rating type={type} count={max} readOnly value={3.5} label={`${type} read-only, no count`} />
+      </VerticalSpacing>
     </div>
   </VerticalSpacing>
 );
@@ -84,25 +104,39 @@ export const States: Story = {
     pseudo: { hover: '#rating-hover label', focusVisible: '#rating-focus input' },
   },
   render: () => {
-    const rows: { label: string; id?: string; props: Partial<Parameters<typeof Rating>[0]> }[] = [
-      { label: 'Not selected', props: { defaultValue: 0 } },
-      { label: 'Selected', props: { defaultValue: 1 } },
-      { label: 'Hover', id: 'rating-hover', props: { defaultValue: 1 } },
-      { label: 'Disabled', props: { defaultValue: 1, disabled: true } },
-      { label: 'Focus', id: 'rating-focus', props: { defaultValue: 0 } },
+    const types = ['star', 'number', 'icon'] as const;
+    // Each type has a Default (unselected) and a Selected sub-column; rows are the item states.
+    const rows: { label: string; id?: string; disabled?: boolean }[] = [
+      { label: 'Default' },
+      { label: 'Hover', id: 'rating-hover' },
+      { label: 'Disabled', disabled: true },
+      { label: 'Focus', id: 'rating-focus' },
     ];
+    const cell = { padding: '0.5rem 1.5rem', textAlign: 'left' as const };
 
     return (
       <table style={{ borderCollapse: 'collapse' }}>
         <thead>
           <tr>
-            <th />
-            {(['star', 'number', 'icon'] as const).map((type) => (
-              <th key={type} style={{ padding: '0.5rem 1.5rem', textAlign: 'left' }}>
+            <th rowSpan={2} />
+            {types.map((type) => (
+              <th key={type} colSpan={2} style={cell}>
                 <Text modifiers="bold">{type[0].toUpperCase() + type.slice(1)}</Text>
               </th>
             ))}
           </tr>
+          <tr>
+            {types.map((type) => (
+              <Fragment key={type}>
+                <th style={cell}>
+                  <Text modifiers="bold">Default</Text>
+                </th>
+                <th style={cell}>
+                  <Text modifiers="bold">Selected</Text>
+                </th>
+              </Fragment>
+            ))}
+          </tr>
         </thead>
         <tbody>
           {rows.map((row) => (
@@ -110,16 +144,21 @@ export const States: Story = {
               <th style={{ padding: '0.5rem 1.5rem 0.5rem 0', textAlign: 'left' }}>
                 <Text modifiers="bold">{row.label}</Text>
               </th>
-              {(['star', 'number', 'icon'] as const).map((type) => (
-                <td key={type} style={{ padding: '0.5rem 1.5rem' }}>
-                  <Rating
-                    {...row.props}
-                    type={type}
-                    count={1}
-                    icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
-                    label={`${type} ${row.label}`}
-                  />
-                </td>
+              {types.map((type) => (
+                <Fragment key={type}>
+                  {[0, 1].map((selected) => (
+                    <td key={selected} style={cell}>
+                      <Rating
+                        type={type}
+                        count={1}
+                        defaultValue={selected}
+                        disabled={row.disabled}
+                        icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
+                        label={`${type} ${row.label} ${selected ? 'selected' : 'default'}`}
+                      />
+                    </td>
+                  ))}
+                </Fragment>
               ))}
             </tr>
           ))}
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 00d9009ed..5a66db716 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -57,6 +57,12 @@ export interface RatingProps {
   readOnly?: boolean;
   /** Number of ratings shown in the `readOnly` summary (e.g. `271 hindajat`); omitted when unset. */
   ratingsCount?: number;
+  /**
+   * Show the descriptive raters label next to `ratingsCount` (e.g. `271 hindajat`). Set `false` to
+   * show the number only (`271`).
+   * @default true
+   */
+  showRatingsCountLabel?: boolean;
   /**
    * `readOnly` layout: `summary` (single visual) or `scale` (full star scale with fractional fill).
    * @default summary
@@ -81,6 +87,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
     disabled = false,
     readOnly = false,
     ratingsCount,
+    showRatingsCountLabel = true,
     readOnlyVariant = 'summary',
     name,
     className,
@@ -144,7 +151,14 @@ export const Rating = (props: RatingProps): JSX.Element => {
   if (readOnly) {
     const formattedValue = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(currentValue);
     const valueText = `${formattedValue}/${total}`;
-    const countText = ratingsCount !== undefined ? ` - ${getLabel('rating.raters', ratingsCount)}` : '';
+    const countText =
+      ratingsCount !== undefined
+        ? ` - ${
+            showRatingsCountLabel
+              ? getLabel('rating.raters', ratingsCount)
+              : new Intl.NumberFormat(locale).format(ratingsCount)
+          }`
+        : '';
     const summary = `${valueText}${countText}`;
     const iconPosition = Math.min(total, Math.max(1, Math.round(currentValue)));
     const isStarScale = type === 'star' && readOnlyVariant === 'scale';
@@ -188,10 +202,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
       >
         <div className={styles['tedi-rating__summary']} aria-hidden="true">
           {readOnlyVisual}
-          <span className={styles['tedi-rating__summary-text']}>
-            <span className={styles['tedi-rating__summary-value']}>{valueText}</span>
-            {countText && <span className={styles['tedi-rating__summary-count']}>{countText}</span>}
-          </span>
+          <span className={styles['tedi-rating__summary-text']}>{summary}</span>
         </div>
       </div>
     );

From 6bb8e5649f8267fd74f2a379e90392a6f1b3054c Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Sun, 4 Oct 2026 15:06:07 +0300
Subject: [PATCH 07/12] feat(rating): design review fixes #531

---
 .storybook/preview-head.html                  |  10 ++
 .../components/form/rating/rating.module.scss |  70 +++++---
 .../components/form/rating/rating.stories.tsx | 161 ++++++++++--------
 src/tedi/components/form/rating/rating.tsx    |  42 ++---
 4 files changed, 169 insertions(+), 114 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 75156a55a..2e05e69f6 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -3,6 +3,16 @@
     max-width: 1200px;
   }
 
+  /* When a story is taller than a sized viewport, the element the backgrounds addon colours
+     (.sb-show-main) can be shorter than the content, exposing the iframe's default grey behind it.
+     Painting <html> makes the surface propagate across the whole scroll area; !important beats
+     Storybook's own preview body background. The token resolves per the theme class on <html>. */
+  html,
+  body {
+    min-height: 100vh;
+    background-color: var(--general-surface-primary) !important;
+  }
+
   html.tedi-theme--dark .sb-show-main,
   html.tedi-theme--dark .docs-story,
   html.tedi-theme--dark .docs-story > div,
diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index 8ea170628..61ebe0962 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -16,6 +16,7 @@
 
 .tedi-rating--number .tedi-rating__items,
 .tedi-rating--icon .tedi-rating__items {
+  flex-wrap: wrap;
   gap: var(--layout-grid-gutters-08);
 }
 
@@ -32,6 +33,21 @@
   cursor: not-allowed;
 }
 
+.tedi-rating--vertical .tedi-rating__items {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.tedi-rating--vertical .tedi-rating__item {
+  flex-direction: row;
+  gap: var(--layout-grid-gutters-08);
+  justify-content: flex-start;
+}
+
+.tedi-rating--vertical .tedi-rating__caption {
+  text-align: left;
+}
+
 .tedi-rating__input {
   position: absolute;
   inset: 0;
@@ -124,29 +140,44 @@
   text-align: center;
 }
 
-.tedi-rating__endpoints {
-  display: flex;
-  align-self: stretch;
-  justify-content: space-between;
-  font-size: var(--body-extra-small-size);
-  line-height: var(--body-extra-small-line-height);
-  color: var(--general-text-secondary);
+.tedi-rating--number:not(.tedi-rating--vertical) {
+  .tedi-rating__items {
+    row-gap: var(--layout-grid-gutters-24);
+    padding-bottom: var(--layout-grid-gutters-24);
+  }
+
+  .tedi-rating__caption {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-top: var(--layout-grid-gutters-04);
+    white-space: nowrap;
+    transform: translateX(-50%);
+  }
 }
 
+// Disabled colours map to Figma's form/rating/* tokens, which aren't in the published core yet.
+// TODO: drop the hex fallbacks once @tedi-design-system/core ships these semantic tokens.
 .tedi-rating--disabled {
+  // Unselected disabled star: outline drawn in the disabled border/stroke tone.
   .tedi-rating__star {
-    color: var(--general-text-disabled);
+    color: var(--form-rating-unselected-border-disabled, #e1e2e5);
+  }
+
+  .tedi-rating__item--active .tedi-rating__star {
+    color: var(--form-rating-selected-background-disabled, #f0f0f2);
   }
 
   .tedi-rating__circle {
-    color: var(--general-text-disabled);
-    background-color: transparent;
-    border-color: var(--general-border-primary);
+    color: var(--form-rating-unselected-text-disabled, #9293a4);
+    background-color: var(--form-rating-unselected-background-disabled, #0000);
+    border-color: var(--form-rating-unselected-border-disabled, #e1e2e5);
   }
 
   .tedi-rating__item--active .tedi-rating__circle {
-    background-color: var(--general-surface-tertiary);
-    border-color: var(--general-border-primary);
+    color: var(--form-rating-selected-text-disabled, #9293a4);
+    background-color: var(--form-rating-selected-background-disabled, #f0f0f2);
+    border-color: var(--form-rating-selected-border-disabled, #e1e2e5);
   }
 }
 
@@ -180,7 +211,6 @@
   overflow: hidden;
 }
 
-// The whole read-only summary (value + rater count) is one bold H6, per Figma.
 .tedi-rating__summary-text {
   font-size: var(--heading-h6-size);
   font-weight: var(--heading-h6-weight);
@@ -189,15 +219,7 @@
 }
 
 @include breakpoints.media-breakpoint-down(md) {
-  .tedi-rating--number:not(.tedi-rating--readonly) {
-    .tedi-rating__items {
-      display: grid;
-      grid-template-columns: repeat(5, auto);
-    }
-
-    .tedi-rating__circle {
-      width: var(--button-md-height);
-      height: var(--button-md-height);
-    }
+  .tedi-rating--number:not(.tedi-rating--readonly, .tedi-rating--vertical) .tedi-rating__items {
+    column-gap: var(--layout-grid-gutters-04);
   }
 }
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index 90faa82ee..acc51b8c3 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 
 import { Heading } from '../../base/typography/heading/heading';
 import { Text } from '../../base/typography/text/text';
@@ -22,6 +22,12 @@ const meta: Meta<typeof Rating> = {
     type: 'star',
   },
   parameters: {
+    status: {
+      type: [{ name: 'breakpointSupport', url: '?path=/docs/helpers-usebreakpointprops--usebreakpointprops' }],
+    },
+    controls: {
+      exclude: ['sm', 'md', 'lg', 'xl', 'xxl'],
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.76.92?node-id=15548-139124&m=dev',
@@ -58,18 +64,18 @@ const ScaleShowcase = ({
 }): JSX.Element => (
   <VerticalSpacing size={1}>
     {Array.from({ length: max + 1 }, (_, value) => (
-      <div key={value} style={{ display: 'flex', alignItems: 'flex-start', gap: '1.5rem' }}>
+      // Row label sits on top on mobile (so the scale gets the full width) and moves to a left column from md up.
+      <div key={value} className="flex flex-column flex-md-row gap-3 align-items-start">
         <div style={{ width: '5rem', flexShrink: 0 }}>
           <Text modifiers="bold">{rowLabel(value, max)}</Text>
         </div>
         <Rating type={type} count={max} defaultValue={value} itemLabels={itemLabels} label={rowLabel(value, max)} />
       </div>
     ))}
-    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1.5rem' }}>
+    <div className="flex flex-column flex-md-row gap-3 align-items-start">
       <div style={{ width: '5rem', flexShrink: 0 }}>
         <Text modifiers="bold">Read only</Text>
       </div>
-      {/* Three count modes: full raters label, number only (showRatingsCountLabel={false}), and none. */}
       <VerticalSpacing size={0.5}>
         <Rating
           type={type}
@@ -98,89 +104,102 @@ export const Default: Story = {
   render: (args) => <Rating {...args} />,
 };
 
+export const Stars: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="star" max={5} itemLabels={STAR_LABELS} />,
+};
+
+export const Numbers: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="number" max={10} itemLabels={NUMBER_LABELS} />,
+};
+
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ScaleShowcase type="icon" max={5} itemLabels={ICON_LABELS} />,
+};
+
 export const States: Story = {
   parameters: {
     controls: { disable: true },
-    pseudo: { hover: '#rating-hover label', focusVisible: '#rating-focus input' },
+    pseudo: { hover: '[id^="rating-hover"] label', focusVisible: '[id^="rating-focus"] input' },
   },
   render: () => {
     const types = ['star', 'number', 'icon'] as const;
-    // Each type has a Default (unselected) and a Selected sub-column; rows are the item states.
-    const rows: { label: string; id?: string; disabled?: boolean }[] = [
+    // Rows are the item states. Each type gets its own compact Default / Selected table; the three
+    // tables sit side by side as columns from lg up and stack under each other on smaller screens.
+    const rows: { label: string; state?: 'hover' | 'focus'; disabled?: boolean }[] = [
       { label: 'Default' },
-      { label: 'Hover', id: 'rating-hover' },
+      { label: 'Hover', state: 'hover' },
       { label: 'Disabled', disabled: true },
-      { label: 'Focus', id: 'rating-focus' },
+      { label: 'Focus', state: 'focus' },
     ];
-    const cell = { padding: '0.5rem 1.5rem', textAlign: 'left' as const };
+    const cell = { padding: '0.5rem 1rem', textAlign: 'left' as const };
 
     return (
-      <table style={{ borderCollapse: 'collapse' }}>
-        <thead>
-          <tr>
-            <th rowSpan={2} />
-            {types.map((type) => (
-              <th key={type} colSpan={2} style={cell}>
-                <Text modifiers="bold">{type[0].toUpperCase() + type.slice(1)}</Text>
-              </th>
-            ))}
-          </tr>
-          <tr>
-            {types.map((type) => (
-              <Fragment key={type}>
-                <th style={cell}>
-                  <Text modifiers="bold">Default</Text>
-                </th>
-                <th style={cell}>
-                  <Text modifiers="bold">Selected</Text>
-                </th>
-              </Fragment>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row) => (
-            <tr key={row.label} id={row.id}>
-              <th style={{ padding: '0.5rem 1.5rem 0.5rem 0', textAlign: 'left' }}>
-                <Text modifiers="bold">{row.label}</Text>
-              </th>
-              {types.map((type) => (
-                <Fragment key={type}>
-                  {[0, 1].map((selected) => (
-                    <td key={selected} style={cell}>
-                      <Rating
-                        type={type}
-                        count={1}
-                        defaultValue={selected}
-                        disabled={row.disabled}
-                        icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
-                        label={`${type} ${row.label} ${selected ? 'selected' : 'default'}`}
-                      />
-                    </td>
-                  ))}
-                </Fragment>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <div className="flex flex-column flex-lg-row gap-5 align-items-start">
+        {types.map((type) => (
+          <VerticalSpacing size={0.5} key={type}>
+            <Heading element="h3" modifiers="h5">
+              {type[0].toUpperCase() + type.slice(1)}
+            </Heading>
+            <table style={{ borderCollapse: 'collapse' }}>
+              <thead>
+                <tr>
+                  <th />
+                  <th style={cell}>
+                    <Text modifiers="bold">Default</Text>
+                  </th>
+                  <th style={cell}>
+                    <Text modifiers="bold">Selected</Text>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row) => (
+                  <tr key={row.label} id={row.state ? `rating-${row.state}-${type}` : undefined}>
+                    <th style={{ padding: '0.5rem 1rem 0.5rem 0', textAlign: 'left' }}>
+                      <Text modifiers="bold">{row.label}</Text>
+                    </th>
+                    {[0, 1].map((selected) => (
+                      <td key={selected} style={cell}>
+                        <Rating
+                          type={type}
+                          count={1}
+                          defaultValue={selected}
+                          disabled={row.disabled}
+                          icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
+                          label={`${type} ${row.label} ${selected ? 'selected' : 'default'}`}
+                        />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </VerticalSpacing>
+        ))}
+      </div>
     );
   },
 };
 
-export const Stars: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="star" max={5} itemLabels={STAR_LABELS} />,
-};
-
-export const Numbers: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="number" max={10} itemLabels={NUMBER_LABELS} />,
-};
-
-export const Icons: Story = {
+/**
+ * `orientation="vertical"` stacks the scale and puts each icon beside its caption, so long labels fit
+ * on narrow (mobile) layouts where the horizontal row would overflow.
+ */
+export const VerticalIcons: Story = {
+  name: 'Vertical (icons)',
   parameters: { controls: { disable: true } },
-  render: () => <ScaleShowcase type="icon" max={5} itemLabels={ICON_LABELS} />,
+  render: () => (
+    <Rating
+      type="icon"
+      orientation="vertical"
+      itemLabels={['Väga halb kogemus', 'Halb kogemus', 'Keskmine kogemus', 'Hea kogemus', 'Väga hea kogemus']}
+      defaultValue={4}
+      label="Teenuse hinnang"
+    />
+  ),
 };
 
 export const Controlled: Story = {
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 5a66db716..ba9918472 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -1,12 +1,24 @@
 import cn from 'classnames';
 import React, { useId, useState } from 'react';
 
+import { BreakpointSupport, useBreakpointProps } from '../../../helpers';
 import { useLabels } from '../../../providers/label-provider';
 import { Icon } from '../../base/icon/icon';
 import styles from './rating.module.scss';
 
 export type RatingType = 'star' | 'number' | 'icon';
 
+export interface RatingBreakpointProps {
+  /**
+   * Lay the scale out horizontally or stack it vertically (icon + caption per row; number scale
+   * stacked with the endpoint captions bracketing it). Use `vertical` on narrow layouts for
+   * `type="icon"` with long `itemLabels`, or for a number scale that would otherwise overflow.
+   * Breakpoint-aware: e.g. `orientation="vertical" md={{ orientation: 'horizontal' }}`.
+   * @default horizontal
+   */
+  orientation?: 'horizontal' | 'vertical';
+}
+
 const DEFAULT_ICONS = [
   'sentiment_very_dissatisfied',
   'sentiment_dissatisfied',
@@ -15,7 +27,7 @@ const DEFAULT_ICONS = [
   'sentiment_very_satisfied',
 ] as const;
 
-export interface RatingProps {
+export interface RatingProps extends BreakpointSupport<RatingBreakpointProps> {
   /** Accessible name for the group; also prefixes the `readOnly` summary. */
   label: string;
   /**
@@ -75,6 +87,7 @@ export interface RatingProps {
 }
 
 export const Rating = (props: RatingProps): JSX.Element => {
+  const { getCurrentBreakpointProps } = useBreakpointProps(props.defaultServerBreakpoint);
   const {
     label,
     type = 'star',
@@ -89,9 +102,10 @@ export const Rating = (props: RatingProps): JSX.Element => {
     ratingsCount,
     showRatingsCountLabel = true,
     readOnlyVariant = 'summary',
+    orientation = 'horizontal',
     name,
     className,
-  } = props;
+  } = getCurrentBreakpointProps<RatingProps>(props);
 
   const { getLabel, locale } = useLabels();
   const generatedName = useId();
@@ -124,16 +138,12 @@ export const Rating = (props: RatingProps): JSX.Element => {
   const positions = Array.from({ length: total }, (_, index) => index + 1);
 
   const renderVisual = (position: number, active: boolean): React.ReactNode => {
+    // A selected star stays filled even when disabled (CSS tints it grey); `filledActive` only drives
+    // the icon's white glyph, which must drop to grey when disabled.
     const filledActive = active && !disabled;
     if (type === 'star') {
       return (
-        <Icon
-          name={starGlyph}
-          filled={filledActive}
-          color="inherit"
-          size={24}
-          className={styles['tedi-rating__star']}
-        />
+        <Icon name={starGlyph} filled={active} color="inherit" size={24} className={styles['tedi-rating__star']} />
       );
     }
 
@@ -215,6 +225,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
       className={cn(
         styles['tedi-rating'],
         styles[`tedi-rating--${type}`],
+        { [styles['tedi-rating--vertical']]: orientation === 'vertical' },
         { [styles['tedi-rating--disabled']]: disabled },
         { [styles['tedi-rating--hovering']]: isHovering },
         className
@@ -223,6 +234,8 @@ export const Rating = (props: RatingProps): JSX.Element => {
       <div className={styles['tedi-rating__items']} onMouseLeave={() => setHoverValue(null)}>
         {positions.map((position) => {
           const active = isItemActive(position);
+          const isEndpoint = position === 1 || position === total;
+          const showCaption = !!itemLabels?.[position - 1] && (type === 'icon' || (type === 'number' && isEndpoint));
           return (
             <label
               key={position}
@@ -242,21 +255,12 @@ export const Rating = (props: RatingProps): JSX.Element => {
               <span className={styles['tedi-rating__visual']} aria-hidden="true">
                 {renderVisual(position, active)}
               </span>
-              {type === 'icon' && itemLabels?.[position - 1] && (
-                <span className={styles['tedi-rating__caption']}>{itemLabels[position - 1]}</span>
-              )}
+              {showCaption && <span className={styles['tedi-rating__caption']}>{itemLabels?.[position - 1]}</span>}
             </label>
           );
         })}
       </div>
 
-      {type === 'number' && (itemLabels?.[0] || itemLabels?.[total - 1]) && (
-        <div className={styles['tedi-rating__endpoints']}>
-          <span>{itemLabels?.[0]}</span>
-          <span>{itemLabels?.[total - 1]}</span>
-        </div>
-      )}
-
       {type === 'star' && itemLabels?.some(Boolean) && (
         <div className={styles['tedi-rating__star-caption']}>
           {displayValue > 0 ? itemLabels[displayValue - 1] : null}

From e914dacd08f04598c154cab0e835aeb32b6792f0 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Sun, 4 Oct 2026 15:23:15 +0300
Subject: [PATCH 08/12] fix(rating): fix test coverage, fix accessibility bug
 #531

---
 component.manifest.json                       | 23 ++++++++++++++++---
 skills/tedi-react/SKILL.md                    |  2 +-
 skills/tedi-react/references/components.md    |  4 +++-
 skills/tedi-react/references/forms.md         |  2 ++
 .../components/form/rating/rating.stories.tsx |  4 +++-
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/component.manifest.json b/component.manifest.json
index 97a58348b..9062d86b8 100644
--- a/component.manifest.json
+++ b/component.manifest.json
@@ -601,7 +601,9 @@
       "name": "TableOfContents",
       "category": "navigation",
       "sourcePath": "src/tedi/components/navigation/table-of-contents",
-      "status": [],
+      "status": [
+        "breakpointSupport"
+      ],
       "description": "Navigational table of contents for long pages or multistep forms, composed from nestable TableOfContents.Item entries.",
       "keyProps": [
         "activeId",
@@ -744,7 +746,9 @@
       "name": "Radio",
       "category": "form",
       "sourcePath": "src/tedi/components/form/radio",
-      "status": [],
+      "status": [
+        "breakpointSupport"
+      ],
       "description": "Single-select radio input with a label and helper text; supports a selectable card variant and grouping via Radio.Group.",
       "keyProps": [
         "id",
@@ -852,7 +856,9 @@
       "name": "Checkbox",
       "category": "form",
       "sourcePath": "src/tedi/components/form/checkbox",
-      "status": [],
+      "status": [
+        "breakpointSupport"
+      ],
       "description": "Checkbox input with a label and helper text; supports an indeterminate state, a selectable card variant, and grouping via Checkbox.Group.",
       "keyProps": [
         "id",
@@ -1157,6 +1163,17 @@
         "indicatorSemantics"
       ]
     },
+    {
+      "id": "form/rating/rating",
+      "name": null,
+      "category": "form",
+      "sourcePath": "src/tedi/components/form/rating/rating",
+      "status": [
+        "breakpointSupport"
+      ],
+      "description": null,
+      "keyProps": []
+    },
     {
       "id": "layout/sidenav",
       "name": "SideNav",
diff --git a/skills/tedi-react/SKILL.md b/skills/tedi-react/SKILL.md
index 7973820d7..af75aef1b 100644
--- a/skills/tedi-react/SKILL.md
+++ b/skills/tedi-react/SKILL.md
@@ -242,7 +242,7 @@ const [email, setEmail] = useState('');
 </Radio.Group>
 ```
 
-Form controls: `TextField`, `Select`, `Textarea`, `NumberField`, `Checkbox` (+ `Checkbox.Group`), `Radio` (+ `Radio.Group`), `Search`, `DateField`, `TimeField`, `Filter` (+ `FilterGroup`), `FileUpload`, `FileDropzone`. `ChoiceGroup` is **deprecated** — use `Radio.Group` / `Checkbox.Group`. Verify the roster and per-control usage against [references/forms.md](references/forms.md) and the installed package (see Authoritative Sources).
+Form controls: `TextField`, `Select`, `Textarea`, `NumberField`, `Checkbox` (+ `Checkbox.Group`), `Radio` (+ `Radio.Group`), `Search`, `Rating`, `DateField`, `TimeField`, `Filter` (+ `FilterGroup`), `FileUpload`, `FileDropzone`. `ChoiceGroup` is **deprecated** — use `Radio.Group` / `Checkbox.Group`. Verify the roster and per-control usage against [references/forms.md](references/forms.md) and the installed package (see Authoritative Sources).
 
 ## Theming
 
diff --git a/skills/tedi-react/references/components.md b/skills/tedi-react/references/components.md
index 46bad831b..f9d1d98fb 100644
--- a/skills/tedi-react/references/components.md
+++ b/skills/tedi-react/references/components.md
@@ -133,7 +133,9 @@ files. This is the part of this document worth maintaining by hand.
   keyboard-navigable (arrow keys) and form-submittable like any radio group. `value` is **1-based**
   (`0` = no rating), and `type` changes the fill: `star` / `number` fill cumulatively up to the
   value, while `icon` highlights only the single selected item (defaults to the five sentiment
-  faces at `count={5}`).
+  faces at `count={5}`). Pass `readOnly` for a compact aggregate summary (or `readOnlyVariant="scale"`
+  for a fractional star scale with `ratingsCount`), and `orientation` is breakpoint-aware
+  (`orientation="vertical" md={{ orientation: 'horizontal' }}`) for narrow layouts.
 
 ### Composition constraints
 
diff --git a/skills/tedi-react/references/forms.md b/skills/tedi-react/references/forms.md
index 6b7ddc823..095e74004 100644
--- a/skills/tedi-react/references/forms.md
+++ b/skills/tedi-react/references/forms.md
@@ -23,6 +23,7 @@ Orientation only. Verify the current roster against the installed package's barr
 | Radio | `boolean` (via onChange) | `Radio.Group`, card variant, segmented layout |
 | ChoiceGroup | `ChoiceGroupValue` | **Deprecated** — use `Radio.Group` / `Checkbox.Group` |
 | Search | `string` | Search button, onSearch callback |
+| Rating | `number` (1-based; `0` = none) | Star / number / icon scale, native `radiogroup`, `readOnly` summary/scale, breakpoint-aware `orientation`, `itemLabels` |
 | DateField | `Date \| Date[] \| DateRange` | Single/multiple/range, manual input, min/max, native picker, clearable, breakpoint-aware |
 | TimeField | `string` (`"HH:mm"`) | Wheel / grid picker, native fallback, stepMinutes, availableTimes, clearable |
 | Filter | `boolean \| string \| string[]` | Pill-shaped toggle / dropdown filter — single, multi-select, custom panel; pairs with `FilterGroup` |
@@ -456,6 +457,7 @@ TEDI form controls hand you the **parsed value**, not the raw DOM event. The con
 - **Select** calls `onChange` with the selected option object(s), or `null` when cleared.
 - **DateField** uses `onSelect`; the value shape follows the active `mode` (single `Date`, `Date[]`, or a range).
 - **TimeField / TimePicker** call `onChange` with a `"HH:mm"` 24-hour string (empty when cleared).
+- **Rating** calls `onChange` with the selected 1-based number (`0` means no rating).
 
 ## Disabled State
 
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index acc51b8c3..596555636 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -146,7 +146,9 @@ export const States: Story = {
             <table style={{ borderCollapse: 'collapse' }}>
               <thead>
                 <tr>
-                  <th />
+                  <th>
+                    <span className="sr-only">State</span>
+                  </th>
                   <th style={cell}>
                     <Text modifiers="bold">Default</Text>
                   </th>

From 9692d70f0d1f7e2ad4a1d8e63d613d3c2c082537 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Sun, 4 Oct 2026 16:32:16 +0300
Subject: [PATCH 09/12] feat(rating): cr fixes #531

---
 component.manifest.json                       | 12 ++++--
 .../components/form/rating/rating.spec.tsx    | 37 ++++++++++++++++---
 src/tedi/components/form/rating/rating.tsx    | 15 ++++----
 .../providers/label-provider/labels-map.ts    | 21 +++++++++--
 4 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/component.manifest.json b/component.manifest.json
index 9062d86b8..4ba38a4c3 100644
--- a/component.manifest.json
+++ b/component.manifest.json
@@ -1165,14 +1165,20 @@
     },
     {
       "id": "form/rating/rating",
-      "name": null,
+      "name": "Rating",
       "category": "form",
       "sourcePath": "src/tedi/components/form/rating/rating",
       "status": [
         "breakpointSupport"
       ],
-      "description": null,
-      "keyProps": []
+      "description": "Accessible rating scale (native radiogroup) with star, number, or icon fill; supports controlled/uncontrolled, a read-only summary/scale variant, and breakpoint-aware orientation.",
+      "keyProps": [
+        "label",
+        "type",
+        "value",
+        "onChange",
+        "count"
+      ]
     },
     {
       "id": "layout/sidenav",
diff --git a/src/tedi/components/form/rating/rating.spec.tsx b/src/tedi/components/form/rating/rating.spec.tsx
index c85c87aa3..3e3c3813e 100644
--- a/src/tedi/components/form/rating/rating.spec.tsx
+++ b/src/tedi/components/form/rating/rating.spec.tsx
@@ -20,25 +20,36 @@ describe('Rating', () => {
     expect(screen.getAllByRole('radio')).toHaveLength(10);
   });
 
+  it('falls back to the type default when count is not a positive integer', () => {
+    const { rerender } = render(<Rating label="Feedback" type="star" count={0} />);
+    expect(screen.getAllByRole('radio')).toHaveLength(5);
+
+    rerender(<Rating label="Feedback" type="star" count={-3} />);
+    expect(screen.getAllByRole('radio')).toHaveLength(5);
+
+    rerender(<Rating label="Feedback" type="star" count={3.5} />);
+    expect(screen.getAllByRole('radio')).toHaveLength(5);
+  });
+
   it('marks the selected radio from defaultValue (uncontrolled)', () => {
     render(<Rating label="Feedback" defaultValue={3} count={5} />);
-    expect(screen.getByRole('radio', { name: '3 of 5' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: '3/5' })).toBeChecked();
   });
 
   it('fires onChange and updates selection when an item is chosen', () => {
     const onChange = jest.fn();
     render(<Rating label="Feedback" count={5} onChange={onChange} />);
-    fireEvent.click(screen.getByRole('radio', { name: '4 of 5' }));
+    fireEvent.click(screen.getByRole('radio', { name: '4/5' }));
     expect(onChange).toHaveBeenCalledWith(4);
-    expect(screen.getByRole('radio', { name: '4 of 5' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: '4/5' })).toBeChecked();
   });
 
   it('respects the controlled value and does not self-update', () => {
     const onChange = jest.fn();
     render(<Rating label="Feedback" count={5} value={2} onChange={onChange} />);
-    fireEvent.click(screen.getByRole('radio', { name: '5 of 5' }));
+    fireEvent.click(screen.getByRole('radio', { name: '5/5' }));
     expect(onChange).toHaveBeenCalledWith(5);
-    expect(screen.getByRole('radio', { name: '2 of 5' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: '2/5' })).toBeChecked();
   });
 
   it('uses itemLabels as accessible names', () => {
@@ -54,7 +65,7 @@ describe('Rating', () => {
     radios.forEach((radio) => expect(radio).toHaveAccessibleName(/.+/));
     expect(screen.getByRole('radio', { name: 'Low' })).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'High' })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: '5 of 10' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: '5/10' })).toBeInTheDocument();
   });
 
   it('disables every radio when disabled', () => {
@@ -71,6 +82,11 @@ describe('Rating', () => {
       expect(summary).toHaveAccessibleName(/^Teenuse hinnang: 3[.,]5\/5 - 271 hindajat$/);
     });
 
+    it('uses the singular rater form when there is exactly one rating', () => {
+      renderWithLabels(<Rating label="Hinnang" count={5} value={4} ratingsCount={1} readOnly />);
+      expect(screen.getByRole('img')).toHaveAccessibleName('Hinnang: 4/5 - 1 hindaja');
+    });
+
     it('omits the rater count when ratingsCount is not provided', () => {
       renderWithLabels(<Rating label="Hinnang" count={5} value={4} readOnly />);
       expect(screen.getByRole('img')).toHaveAccessibleName('Hinnang: 4/5');
@@ -100,6 +116,15 @@ describe('Rating', () => {
       expect(container.querySelectorAll('.tedi-rating__star-partial-fill')).toHaveLength(0);
     });
 
+    it('renders an unselected visual for a zero rating so it agrees with the 0/total summary', () => {
+      const zero = renderWithLabels(<Rating label="Hinnang" type="icon" count={5} value={0} readOnly />);
+      expect(zero.getByRole('img')).toHaveAccessibleName('Hinnang: 0/5');
+      expect(zero.container.querySelector('.tedi-rating__circle--filled')).toBeNull();
+
+      const rated = renderWithLabels(<Rating label="Hinnang" type="icon" count={5} value={3} readOnly />);
+      expect(rated.container.querySelector('.tedi-rating__circle--filled')).not.toBeNull();
+    });
+
     it('does not render the interactive scale in readOnly mode', () => {
       const onChange = jest.fn();
       renderWithLabels(<Rating label="Hinnang" count={5} value={2} ratingsCount={10} readOnly onChange={onChange} />);
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index ba9918472..30df0b3c1 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -110,7 +110,8 @@ export const Rating = (props: RatingProps): JSX.Element => {
   const { getLabel, locale } = useLabels();
   const generatedName = useId();
   const groupName = name ?? generatedName;
-  const total = count ?? (type === 'number' ? 10 : 5);
+  const defaultCount = type === 'number' ? 10 : 5;
+  const total = count !== undefined && Number.isInteger(count) && count > 0 ? count : defaultCount;
 
   const isControlled = value !== undefined;
   const [internalValue, setInternalValue] = useState(defaultValue);
@@ -133,13 +134,12 @@ export const Rating = (props: RatingProps): JSX.Element => {
   const isItemActive = (position: number): boolean =>
     type === 'icon' ? position === displayValue : position <= displayValue;
 
-  const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position} of ${total}`;
+  // Language-neutral fallback (matches the read-only `value/total` summary format) when no itemLabels given.
+  const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position}/${total}`;
 
   const positions = Array.from({ length: total }, (_, index) => index + 1);
 
   const renderVisual = (position: number, active: boolean): React.ReactNode => {
-    // A selected star stays filled even when disabled (CSS tints it grey); `filledActive` only drives
-    // the icon's white glyph, which must drop to grey when disabled.
     const filledActive = active && !disabled;
     if (type === 'star') {
       return (
@@ -171,6 +171,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
         : '';
     const summary = `${valueText}${countText}`;
     const iconPosition = Math.min(total, Math.max(1, Math.round(currentValue)));
+    const hasValue = currentValue > 0;
     const isStarScale = type === 'star' && readOnlyVariant === 'scale';
     const readOnlyVisual = isStarScale ? (
       <span className={styles['tedi-rating__stars']}>
@@ -192,10 +193,10 @@ export const Rating = (props: RatingProps): JSX.Element => {
         })}
       </span>
     ) : type === 'star' ? (
-      <Icon name={starGlyph} filled color="inherit" size={24} className={styles['tedi-rating__star']} />
+      <Icon name={starGlyph} filled={hasValue} color="inherit" size={24} className={styles['tedi-rating__star']} />
     ) : type === 'icon' ? (
-      <span className={cn(styles['tedi-rating__circle'], styles['tedi-rating__circle--filled'])}>
-        <Icon name={resolvedIcons?.[iconPosition - 1] ?? 'circle'} color="white" size={18} />
+      <span className={cn(styles['tedi-rating__circle'], { [styles['tedi-rating__circle--filled']]: hasValue })}>
+        <Icon name={resolvedIcons?.[iconPosition - 1] ?? 'circle'} color={hasValue ? 'white' : 'inherit'} size={18} />
       </span>
     ) : null;
 
diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts
index 1264acd5a..914eec925 100644
--- a/src/tedi/providers/label-provider/labels-map.ts
+++ b/src/tedi/providers/label-provider/labels-map.ts
@@ -1467,9 +1467,24 @@ export const labelsMap = validateDefaultLabels({
   'rating.raters': {
     description: 'Suffix in the read-only Rating summary showing how many people rated, e.g. "271 hindajat"',
     components: ['Rating'],
-    et: (count: number) => `${count} hindajat`,
-    en: (count: number) => `${count} ratings`,
-    ru: (count: number) => `${count} оценок`,
+    et: (count: number) => `${count} ${count === 1 ? 'hindaja' : 'hindajat'}`,
+    en: (count: number) => `${count} ${count === 1 ? 'rating' : 'ratings'}`,
+    ru: (count: number) => {
+      const lastDigit = count % 10;
+      const lastTwoDigits = count % 100;
+      const isSingular = lastDigit === 1 && lastTwoDigits !== 11;
+      const isFew = lastDigit >= 2 && lastDigit <= 4 && (lastTwoDigits < 12 || lastTwoDigits > 14);
+
+      if (isSingular) {
+        return `${count} оценка`;
+      }
+
+      if (isFew) {
+        return `${count} оценки`;
+      }
+
+      return `${count} оценок`;
+    },
   },
 });
 

From 238c7281f89f1b265c48d2cd58017ccbf5e7931b Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Fri, 9 Oct 2026 10:08:06 +0300
Subject: [PATCH 10/12] fix(rating): applied design review changes #531 *
 specified vscode defaultformatter config

---
 .vscode/settings.json                         |  9 ++
 .../components/form/rating/rating.module.scss | 97 ++++++++++---------
 .../components/form/rating/rating.spec.tsx    | 59 ++++++++++-
 .../components/form/rating/rating.stories.tsx | 96 +++++++++---------
 src/tedi/components/form/rating/rating.tsx    | 74 ++++++++++----
 5 files changed, 220 insertions(+), 115 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ed814de1b..51bc26339 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,15 @@
   "i18n-ally.localesPaths": [],
   "i18n-ally.keystyle": "nested",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "eslint.format.enable": true,
   "eslint.alwaysShowStatus": true,
   "eslint.workingDirectories": [
diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index 61ebe0962..d9d9c0a93 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -59,26 +59,26 @@
 }
 
 .tedi-rating__visual {
+  position: relative;
   display: inline-flex;
 }
 
-.tedi-rating__input:focus-visible + .tedi-rating__visual {
-  border-radius: var(--button-radius-default);
-  box-shadow: 0 0 0 1px var(--general-effect-colors-focus-outset-inner-shadow),
-    0 0 0 3px var(--general-effect-colors-focus-outset-outer-shadow);
-}
-
 .tedi-rating__star {
+  position: relative; // paint above the absolutely positioned backdrop
   line-height: 1;
   color: var(--general-text-brand);
   text-align: center;
 }
 
 .tedi-rating--star .tedi-rating__visual {
-  align-items: center;
-  justify-content: center;
-  width: var(--feedback-star-size);
-  height: var(--feedback-star-size);
+  padding: var(--feedback-star-inner-spacing);
+}
+
+// Filled glyph stacked under the outlined one; transparent unless the star is hovered while unselected.
+.tedi-rating__star-backdrop {
+  position: absolute;
+  inset: var(--feedback-star-inner-spacing);
+  color: transparent;
 }
 
 .tedi-rating__circle {
@@ -88,40 +88,52 @@
   width: var(--button-sm-height);
   height: var(--button-sm-height);
   font-size: var(--body-small-regular-size);
-  color: var(--general-text-secondary);
+  color: var(--general-text-brand);
   background-color: var(--general-surface-primary);
   border: var(--tedi-borders-01) solid var(--general-border-secondary);
   border-radius: 50%;
 }
 
-.tedi-rating--icon .tedi-rating__circle,
-.tedi-rating--number .tedi-rating__circle {
-  color: var(--general-text-brand);
-}
-
-.tedi-rating__item--active .tedi-rating__circle,
+.tedi-rating__visual--selected .tedi-rating__circle,
 .tedi-rating__circle--filled {
   color: var(--general-text-white);
   background-color: var(--general-surface-brand-primary);
   border-color: var(--general-surface-brand-primary);
 }
 
-.tedi-rating--hovering .tedi-rating__item--active .tedi-rating__star,
-.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item:hover .tedi-rating__star {
-  color: var(--general-icon-brand-dark);
-}
-
-.tedi-rating--hovering .tedi-rating__item--active .tedi-rating__circle,
-.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item--active:hover .tedi-rating__circle {
-  background-color: var(--general-icon-brand-dark);
-  border-color: var(--general-icon-brand-dark);
+.tedi-rating:not(.tedi-rating--disabled) {
+  .tedi-rating__visual--hover,
+  .tedi-rating__item:hover > .tedi-rating__visual {
+    .tedi-rating__star {
+      color: var(--general-icon-brand-dark);
+    }
+
+    .tedi-rating__star-backdrop {
+      color: var(--general-surface-brand-quaternary);
+    }
+
+    .tedi-rating__circle {
+      color: var(--general-icon-brand-dark);
+      background-color: var(--general-surface-brand-quaternary);
+      border-color: var(--general-icon-brand-dark);
+    }
+
+    &.tedi-rating__visual--selected .tedi-rating__circle {
+      color: var(--general-text-white);
+      background-color: var(--general-icon-brand-dark);
+      border-color: var(--general-icon-brand-dark);
+    }
+  }
 }
 
-// Hover on an unselected circle - light-blue tint with a brand-dark border/number (per the states).
-.tedi-rating:not(.tedi-rating--disabled) .tedi-rating__item:not(.tedi-rating__item--active):hover .tedi-rating__circle {
-  color: var(--general-icon-brand-dark);
-  background-color: var(--general-surface-brand-quaternary);
-  border-color: var(--general-icon-brand-dark);
+.tedi-rating__input:focus-visible + .tedi-rating__visual::after {
+  position: absolute;
+  inset: -3px;
+  pointer-events: none;
+  content: '';
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--general-effect-colors-focus-outset-outer-shadow),
+    inset 0 0 0 3px var(--general-effect-colors-focus-outset-inner-shadow);
 }
 
 .tedi-rating__caption {
@@ -141,7 +153,7 @@
 }
 
 .tedi-rating--number:not(.tedi-rating--vertical) {
-  .tedi-rating__items {
+  .tedi-rating__items--captioned {
     row-gap: var(--layout-grid-gutters-24);
     padding-bottom: var(--layout-grid-gutters-24);
   }
@@ -156,28 +168,23 @@
   }
 }
 
-// Disabled colours map to Figma's form/rating/* tokens, which aren't in the published core yet.
-// TODO: drop the hex fallbacks once @tedi-design-system/core ships these semantic tokens.
 .tedi-rating--disabled {
-  // Unselected disabled star: outline drawn in the disabled border/stroke tone.
   .tedi-rating__star {
-    color: var(--form-rating-unselected-border-disabled, #e1e2e5);
+    color: var(--form-general-border-disabled);
   }
 
-  .tedi-rating__item--active .tedi-rating__star {
-    color: var(--form-rating-selected-background-disabled, #f0f0f2);
+  .tedi-rating__visual--selected .tedi-rating__star {
+    color: var(--form-general-background-disabled);
   }
 
   .tedi-rating__circle {
-    color: var(--form-rating-unselected-text-disabled, #9293a4);
-    background-color: var(--form-rating-unselected-background-disabled, #0000);
-    border-color: var(--form-rating-unselected-border-disabled, #e1e2e5);
+    color: var(--general-text-disabled);
+    background-color: transparent;
+    border-color: var(--form-general-border-disabled);
   }
 
-  .tedi-rating__item--active .tedi-rating__circle {
-    color: var(--form-rating-selected-text-disabled, #9293a4);
-    background-color: var(--form-rating-selected-background-disabled, #f0f0f2);
-    border-color: var(--form-rating-selected-border-disabled, #e1e2e5);
+  .tedi-rating__visual--selected .tedi-rating__circle {
+    background-color: var(--form-general-background-disabled);
   }
 }
 
diff --git a/src/tedi/components/form/rating/rating.spec.tsx b/src/tedi/components/form/rating/rating.spec.tsx
index 3e3c3813e..9c480e21a 100644
--- a/src/tedi/components/form/rating/rating.spec.tsx
+++ b/src/tedi/components/form/rating/rating.spec.tsx
@@ -68,6 +68,58 @@ describe('Rating', () => {
     expect(screen.getByRole('radio', { name: '5/10' })).toBeInTheDocument();
   });
 
+  describe('hover preview', () => {
+    const visuals = (container: HTMLElement) =>
+      Array.from(container.querySelectorAll<HTMLElement>('.tedi-rating__visual'));
+    const isSelected = (el: HTMLElement) => el.classList.contains('tedi-rating__visual--selected');
+    const isHovered = (el: HTMLElement) => el.classList.contains('tedi-rating__visual--hover');
+
+    it('marks the hovered range as hover and keeps only committed items in it selected', () => {
+      const { container } = render(<Rating label="Feedback" count={5} defaultValue={2} />);
+      fireEvent.mouseEnter(screen.getByRole('radio', { name: '4/5' }).closest('label') as HTMLElement);
+
+      const items = visuals(container);
+      expect(items.map(isHovered)).toEqual([true, true, true, true, false]);
+      expect(items.map(isSelected)).toEqual([true, true, false, false, false]);
+    });
+
+    it('shows committed items outside the hovered range as unselected, and restores them on leave', () => {
+      const { container } = render(<Rating label="Feedback" count={5} defaultValue={4} />);
+      const label = screen.getByRole('radio', { name: '2/5' }).closest('label') as HTMLElement;
+
+      fireEvent.mouseEnter(label);
+      expect(visuals(container).map(isSelected)).toEqual([true, true, false, false, false]);
+
+      fireEvent.mouseLeave(label.parentElement as HTMLElement);
+      expect(visuals(container).map(isSelected)).toEqual([true, true, true, true, false]);
+      expect(visuals(container).some(isHovered)).toBe(false);
+    });
+
+    it('previews only the hovered item for the icon type', () => {
+      const { container } = render(<Rating label="Feedback" type="icon" count={5} defaultValue={3} />);
+      fireEvent.mouseEnter(screen.getByRole('radio', { name: '3/5' }).closest('label') as HTMLElement);
+
+      const items = visuals(container);
+      expect(items.map(isHovered)).toEqual([false, false, true, false, false]);
+      expect(items.map(isSelected)).toEqual([false, false, true, false, false]);
+    });
+
+    it('keeps the current pick selected while hovering another icon', () => {
+      const { container } = render(<Rating label="Feedback" type="icon" count={5} defaultValue={3} />);
+      fireEvent.mouseEnter(screen.getByRole('radio', { name: '5/5' }).closest('label') as HTMLElement);
+
+      const items = visuals(container);
+      expect(items.map(isHovered)).toEqual([false, false, false, false, true]);
+      expect(items.map(isSelected)).toEqual([false, false, true, false, false]);
+    });
+
+    it('does not preview while disabled', () => {
+      const { container } = render(<Rating label="Feedback" count={5} disabled />);
+      fireEvent.mouseEnter(screen.getByRole('radio', { name: '3/5' }).closest('label') as HTMLElement);
+      expect(visuals(container).some(isHovered)).toBe(false);
+    });
+  });
+
   it('disables every radio when disabled', () => {
     render(<Rating label="Feedback" count={5} disabled />);
     screen.getAllByRole('radio').forEach((radio) => expect(radio).toBeDisabled());
@@ -116,13 +168,10 @@ describe('Rating', () => {
       expect(container.querySelectorAll('.tedi-rating__star-partial-fill')).toHaveLength(0);
     });
 
-    it('renders an unselected visual for a zero rating so it agrees with the 0/total summary', () => {
+    it('always renders the summary visual filled, even for a zero rating', () => {
       const zero = renderWithLabels(<Rating label="Hinnang" type="icon" count={5} value={0} readOnly />);
       expect(zero.getByRole('img')).toHaveAccessibleName('Hinnang: 0/5');
-      expect(zero.container.querySelector('.tedi-rating__circle--filled')).toBeNull();
-
-      const rated = renderWithLabels(<Rating label="Hinnang" type="icon" count={5} value={3} readOnly />);
-      expect(rated.container.querySelector('.tedi-rating__circle--filled')).not.toBeNull();
+      expect(zero.container.querySelector('.tedi-rating__circle--filled')).not.toBeNull();
     });
 
     it('does not render the interactive scale in readOnly mode', () => {
diff --git a/src/tedi/components/form/rating/rating.stories.tsx b/src/tedi/components/form/rating/rating.stories.tsx
index 596555636..7b6775f33 100644
--- a/src/tedi/components/form/rating/rating.stories.tsx
+++ b/src/tedi/components/form/rating/rating.stories.tsx
@@ -126,61 +126,65 @@ export const States: Story = {
   },
   render: () => {
     const types = ['star', 'number', 'icon'] as const;
-    // Rows are the item states. Each type gets its own compact Default / Selected table; the three
-    // tables sit side by side as columns from lg up and stack under each other on smaller screens.
     const rows: { label: string; state?: 'hover' | 'focus'; disabled?: boolean }[] = [
       { label: 'Default' },
       { label: 'Hover', state: 'hover' },
       { label: 'Disabled', disabled: true },
       { label: 'Focus', state: 'focus' },
     ];
-    const cell = { padding: '0.5rem 1rem', textAlign: 'left' as const };
+    const cell = { padding: '0.5rem 1rem', textAlign: 'left' as const, verticalAlign: 'middle' as const };
 
     return (
-      <div className="flex flex-column flex-lg-row gap-5 align-items-start">
-        {types.map((type) => (
-          <VerticalSpacing size={0.5} key={type}>
-            <Heading element="h3" modifiers="h5">
-              {type[0].toUpperCase() + type.slice(1)}
-            </Heading>
-            <table style={{ borderCollapse: 'collapse' }}>
-              <thead>
-                <tr>
-                  <th>
-                    <span className="sr-only">State</span>
+      <div style={{ overflowX: 'auto' }}>
+        <table style={{ borderCollapse: 'collapse' }}>
+          <thead>
+            <tr>
+              <td />
+              {types.map((type) => (
+                <th key={type} colSpan={2} scope="colgroup" style={cell}>
+                  <Heading element="h3" modifiers="h5">
+                    {type[0].toUpperCase() + type.slice(1)}
+                  </Heading>
+                </th>
+              ))}
+            </tr>
+            <tr>
+              <th>
+                <span className="sr-only">State</span>
+              </th>
+              {types.map((type) =>
+                ['Default', 'Selected'].map((column) => (
+                  <th key={`${type}-${column}`} scope="col" style={cell}>
+                    <Text modifiers="bold">{column}</Text>
                   </th>
-                  <th style={cell}>
-                    <Text modifiers="bold">Default</Text>
-                  </th>
-                  <th style={cell}>
-                    <Text modifiers="bold">Selected</Text>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((row) => (
-                  <tr key={row.label} id={row.state ? `rating-${row.state}-${type}` : undefined}>
-                    <th style={{ padding: '0.5rem 1rem 0.5rem 0', textAlign: 'left' }}>
-                      <Text modifiers="bold">{row.label}</Text>
-                    </th>
-                    {[0, 1].map((selected) => (
-                      <td key={selected} style={cell}>
-                        <Rating
-                          type={type}
-                          count={1}
-                          defaultValue={selected}
-                          disabled={row.disabled}
-                          icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
-                          label={`${type} ${row.label} ${selected ? 'selected' : 'default'}`}
-                        />
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </VerticalSpacing>
-        ))}
+                ))
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.label} id={row.state ? `rating-${row.state}` : undefined}>
+                <th scope="row" style={{ ...cell, paddingLeft: 0 }}>
+                  <Text modifiers="bold">{row.label}</Text>
+                </th>
+                {types.map((type) =>
+                  [0, 1].map((selected) => (
+                    <td key={`${type}-${selected}`} style={cell}>
+                      <Rating
+                        type={type}
+                        count={1}
+                        defaultValue={selected}
+                        disabled={row.disabled}
+                        icons={type === 'icon' ? ['sentiment_satisfied'] : undefined}
+                        label={`${type} ${row.label} ${selected ? 'selected' : 'default'}`}
+                      />
+                    </td>
+                  ))
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     );
   },
diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 30df0b3c1..9e4c8600e 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -3,7 +3,7 @@ import React, { useId, useState } from 'react';
 
 import { BreakpointSupport, useBreakpointProps } from '../../../helpers';
 import { useLabels } from '../../../providers/label-provider';
-import { Icon } from '../../base/icon/icon';
+import { Icon, IconSize } from '../../base/icon/icon';
 import styles from './rating.module.scss';
 
 export type RatingType = 'star' | 'number' | 'icon';
@@ -19,6 +19,11 @@ export interface RatingBreakpointProps {
   orientation?: 'horizontal' | 'vertical';
 }
 
+/** Star glyph size (matches `--feedback-star-size`). */
+const STAR_ICON_SIZE: IconSize = 24;
+/** Glyph size inside the circular number/icon items. */
+const CIRCLE_ICON_SIZE: IconSize = 18;
+
 const DEFAULT_ICONS = [
   'sentiment_very_dissatisfied',
   'sentiment_dissatisfied',
@@ -131,19 +136,34 @@ export const Rating = (props: RatingProps): JSX.Element => {
     onChange?.(next);
   };
 
-  const isItemActive = (position: number): boolean =>
-    type === 'icon' ? position === displayValue : position <= displayValue;
+  const isInRange = (position: number, target: number): boolean =>
+    type === 'icon' ? position === target : position <= target;
 
   // Language-neutral fallback (matches the read-only `value/total` summary format) when no itemLabels given.
   const itemLabel = (position: number): string => itemLabels?.[position - 1] || `${position}/${total}`;
 
   const positions = Array.from({ length: total }, (_, index) => index + 1);
 
-  const renderVisual = (position: number, active: boolean): React.ReactNode => {
-    const filledActive = active && !disabled;
+  const renderVisual = (position: number, selected: boolean): React.ReactNode => {
     if (type === 'star') {
       return (
-        <Icon name={starGlyph} filled={active} color="inherit" size={24} className={styles['tedi-rating__star']} />
+        <>
+          {/* Filled copy behind the glyph; tinted only on hover so the outlined star gets a light fill. */}
+          <Icon
+            name={starGlyph}
+            filled
+            color="inherit"
+            size={STAR_ICON_SIZE}
+            className={styles['tedi-rating__star-backdrop']}
+          />
+          <Icon
+            name={starGlyph}
+            filled={selected}
+            color="inherit"
+            size={STAR_ICON_SIZE}
+            className={styles['tedi-rating__star']}
+          />
+        </>
       );
     }
 
@@ -152,7 +172,7 @@ export const Rating = (props: RatingProps): JSX.Element => {
         {type === 'number' ? (
           position
         ) : (
-          <Icon name={resolvedIcons?.[position - 1] ?? 'circle'} color={filledActive ? 'white' : 'inherit'} size={18} />
+          <Icon name={resolvedIcons?.[position - 1] ?? 'circle'} color="inherit" size={CIRCLE_ICON_SIZE} />
         )}
       </span>
     );
@@ -171,7 +191,6 @@ export const Rating = (props: RatingProps): JSX.Element => {
         : '';
     const summary = `${valueText}${countText}`;
     const iconPosition = Math.min(total, Math.max(1, Math.round(currentValue)));
-    const hasValue = currentValue > 0;
     const isStarScale = type === 'star' && readOnlyVariant === 'scale';
     const readOnlyVisual = isStarScale ? (
       <span className={styles['tedi-rating__stars']}>
@@ -179,13 +198,19 @@ export const Rating = (props: RatingProps): JSX.Element => {
           const fill = Math.max(0, Math.min(1, currentValue - (position - 1))) * 100;
           return (
             <span key={position} className={styles['tedi-rating__star-partial']}>
-              <Icon name={starGlyph} color="inherit" size={24} className={styles['tedi-rating__star']} />
+              <Icon name={starGlyph} color="inherit" size={STAR_ICON_SIZE} className={styles['tedi-rating__star']} />
               {fill > 0 && (
                 <span
                   className={styles['tedi-rating__star-partial-fill']}
                   style={{ '--tedi-rating-star-fill': `${fill}%` } as React.CSSProperties}
                 >
-                  <Icon name={starGlyph} filled color="inherit" size={24} className={styles['tedi-rating__star']} />
+                  <Icon
+                    name={starGlyph}
+                    filled
+                    color="inherit"
+                    size={STAR_ICON_SIZE}
+                    className={styles['tedi-rating__star']}
+                  />
                 </span>
               )}
             </span>
@@ -193,10 +218,10 @@ export const Rating = (props: RatingProps): JSX.Element => {
         })}
       </span>
     ) : type === 'star' ? (
-      <Icon name={starGlyph} filled={hasValue} color="inherit" size={24} className={styles['tedi-rating__star']} />
+      <Icon name={starGlyph} filled color="inherit" size={STAR_ICON_SIZE} className={styles['tedi-rating__star']} />
     ) : type === 'icon' ? (
-      <span className={cn(styles['tedi-rating__circle'], { [styles['tedi-rating__circle--filled']]: hasValue })}>
-        <Icon name={resolvedIcons?.[iconPosition - 1] ?? 'circle'} color={hasValue ? 'white' : 'inherit'} size={18} />
+      <span className={cn(styles['tedi-rating__circle'], styles['tedi-rating__circle--filled'])}>
+        <Icon name={resolvedIcons?.[iconPosition - 1] ?? 'circle'} color="inherit" size={CIRCLE_ICON_SIZE} />
       </span>
     ) : null;
 
@@ -228,19 +253,24 @@ export const Rating = (props: RatingProps): JSX.Element => {
         styles[`tedi-rating--${type}`],
         { [styles['tedi-rating--vertical']]: orientation === 'vertical' },
         { [styles['tedi-rating--disabled']]: disabled },
-        { [styles['tedi-rating--hovering']]: isHovering },
         className
       )}
     >
-      <div className={styles['tedi-rating__items']} onMouseLeave={() => setHoverValue(null)}>
+      <div
+        className={cn(styles['tedi-rating__items'], {
+          [styles['tedi-rating__items--captioned']]: type !== 'star' && itemLabels?.some(Boolean),
+        })}
+        onMouseLeave={() => setHoverValue(null)}
+      >
         {positions.map((position) => {
-          const active = isItemActive(position);
+          const previewed = isHovering && isInRange(position, hoverValue as number);
+          const selected = isInRange(position, currentValue) && (!isHovering || previewed || type === 'icon');
           const isEndpoint = position === 1 || position === total;
           const showCaption = !!itemLabels?.[position - 1] && (type === 'icon' || (type === 'number' && isEndpoint));
           return (
             <label
               key={position}
-              className={cn(styles['tedi-rating__item'], { [styles['tedi-rating__item--active']]: active })}
+              className={styles['tedi-rating__item']}
               onMouseEnter={interactive ? () => setHoverValue(position) : undefined}
             >
               <input
@@ -253,8 +283,14 @@ export const Rating = (props: RatingProps): JSX.Element => {
                 onChange={() => setValue(position)}
                 aria-label={itemLabel(position)}
               />
-              <span className={styles['tedi-rating__visual']} aria-hidden="true">
-                {renderVisual(position, active)}
+              <span
+                className={cn(styles['tedi-rating__visual'], {
+                  [styles['tedi-rating__visual--selected']]: selected,
+                  [styles['tedi-rating__visual--hover']]: previewed,
+                })}
+                aria-hidden="true"
+              >
+                {renderVisual(position, selected)}
               </span>
               {showCaption && <span className={styles['tedi-rating__caption']}>{itemLabels?.[position - 1]}</span>}
             </label>

From 15372d62cdd7bc304abe9fac7b86dea252d67a92 Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Fri, 9 Oct 2026 10:34:16 +0300
Subject: [PATCH 11/12] fix(rating): increased star style specificity #531 *
 added RU pluralism helper to labels-map

---
 .../components/form/rating/rating.module.scss |  4 +-
 .../providers/label-provider/labels-map.ts    | 51 +++++++------------
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/tedi/components/form/rating/rating.module.scss b/src/tedi/components/form/rating/rating.module.scss
index d9d9c0a93..aea0e7273 100644
--- a/src/tedi/components/form/rating/rating.module.scss
+++ b/src/tedi/components/form/rating/rating.module.scss
@@ -63,7 +63,7 @@
   display: inline-flex;
 }
 
-.tedi-rating__star {
+.tedi-rating .tedi-rating__star {
   position: relative; // paint above the absolutely positioned backdrop
   line-height: 1;
   color: var(--general-text-brand);
@@ -75,7 +75,7 @@
 }
 
 // Filled glyph stacked under the outlined one; transparent unless the star is hovered while unselected.
-.tedi-rating__star-backdrop {
+.tedi-rating .tedi-rating__star-backdrop {
   position: absolute;
   inset: var(--feedback-star-inner-spacing);
   color: transparent;
diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts
index 914eec925..e26303513 100644
--- a/src/tedi/providers/label-provider/labels-map.ts
+++ b/src/tedi/providers/label-provider/labels-map.ts
@@ -4,6 +4,17 @@ import type { MuiPickersAdapter } from '@mui/x-date-pickers/internals/models';
 
 import type { DatepickerValue, TimePickerValue } from '../../../../src/community/components/form/pickers';
 
+const ruPluralRules = new Intl.PluralRules('ru');
+
+/**
+ * Picks the Russian plural form for `count` (1 файл, 2 файла, 5 файлов; 21 → one, 11–14 → many).
+ * Fractions (`other`) take the genitive singular, the same as `few`.
+ */
+const pluralizeRu = (count: number, forms: { one: string; few: string; many: string }): string => {
+  const category = ruPluralRules.select(count);
+  return category === 'one' ? forms.one : category === 'many' ? forms.many : forms.few;
+};
+
 type LabelBaseEntry = {
   description?: string;
   components?: string[];
@@ -539,22 +550,12 @@ export const labelsMap = validateDefaultLabels({
     components: ['FileDropzone', 'FileUpload'],
     et: (files: number) => (files === 1 ? `${files} fail valitud` : `${files} faili valitud`),
     en: (files: number) => (files === 1 ? `${files} file selected` : `${files} files selected`),
-    ru: (files: number) => {
-      const lastDigit = files % 10;
-      const lastTwoDigits = files % 100;
-      const isSingular = lastDigit === 1 && lastTwoDigits !== 11;
-      const isFew = lastDigit >= 2 && lastDigit <= 4 && (lastTwoDigits < 12 || lastTwoDigits > 14);
-
-      if (isSingular) {
-        return `${files} выбранный файл`;
-      }
-
-      if (isFew) {
-        return `${files} выбранных файла`;
-      }
-
-      return `${files} выбранных файлов`;
-    },
+    ru: (files: number) =>
+      pluralizeRu(files, {
+        one: `${files} выбранный файл`,
+        few: `${files} выбранных файла`,
+        many: `${files} выбранных файлов`,
+      }),
   },
   'modal.close': {
     description: 'Label for modals close button',
@@ -1469,22 +1470,8 @@ export const labelsMap = validateDefaultLabels({
     components: ['Rating'],
     et: (count: number) => `${count} ${count === 1 ? 'hindaja' : 'hindajat'}`,
     en: (count: number) => `${count} ${count === 1 ? 'rating' : 'ratings'}`,
-    ru: (count: number) => {
-      const lastDigit = count % 10;
-      const lastTwoDigits = count % 100;
-      const isSingular = lastDigit === 1 && lastTwoDigits !== 11;
-      const isFew = lastDigit >= 2 && lastDigit <= 4 && (lastTwoDigits < 12 || lastTwoDigits > 14);
-
-      if (isSingular) {
-        return `${count} оценка`;
-      }
-
-      if (isFew) {
-        return `${count} оценки`;
-      }
-
-      return `${count} оценок`;
-    },
+    ru: (count: number) =>
+      pluralizeRu(count, { one: `${count} оценка`, few: `${count} оценки`, many: `${count} оценок` }),
   },
 });
 

From c88bb2c96976b9d9394879dc5cd1e2b73a7c7d0e Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Fri, 9 Oct 2026 10:55:10 +0300
Subject: [PATCH 12/12] docs(rating): readOnly description improvement #531

---
 src/tedi/components/form/rating/rating.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tedi/components/form/rating/rating.tsx b/src/tedi/components/form/rating/rating.tsx
index 9e4c8600e..38117ace2 100644
--- a/src/tedi/components/form/rating/rating.tsx
+++ b/src/tedi/components/form/rating/rating.tsx
@@ -68,7 +68,8 @@ export interface RatingProps extends BreakpointSupport<RatingBreakpointProps> {
    */
   disabled?: boolean;
   /**
-   * Show a compact read-only summary (visual + `{value}/{count}` text) instead of the interactive scale.
+   * Show a compact read-only summary (visual + `{value}/{count}` text; text only for `type="number"`) instead
+   * of the interactive scale.
    * @default false
    */
   readOnly?: boolean;