prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/components/popover/examples/sizes.tsx

@@ -1,36 +1,41 @@
-/** Every size tier with a header and actions; the panel takes the tier of its trigger — `size`. */
-import { Button, Popover } from "prime-ui-kit";
+/** Every size tier with a header and actions; the tier is the panel's own, set on `Popover.Content`, not taken from its trigger — `size`. */
+import { Button, Popover, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function PopoverSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <Popover.Root key={size}>
-          <Popover.Trigger>
-            <Button.Root variant="soft" tone="neutral" size={size}>
-              {size}
-            </Button.Root>
-          </Popover.Trigger>
-          <Popover.Content size={size}>
-            <Popover.Header>
-              <Popover.Title>Сохранить фильтр?</Popover.Title>
-              <Popover.Description>Он появится в списке слева.</Popover.Description>
-            </Popover.Header>
-            <Popover.Actions>
-              <Popover.Close>
-                <Button.Root variant="ghost" tone="neutral" size={size}>
-                  Отмена
-                </Button.Root>
-              </Popover.Close>
-              <Popover.Close>
-                <Button.Root size={size}>Сохранить</Button.Root>
-              </Popover.Close>
-            </Popover.Actions>
-          </Popover.Content>
-        </Popover.Root>
+        <div key={size}>
+          <Popover.Root>
+            <Popover.Trigger>
+              <Button.Root variant="soft" tone="neutral" size={size}>
+                Сохранить фильтр
+              </Button.Root>
+            </Popover.Trigger>
+            <Popover.Content size={size}>
+              <Popover.Header>
+                <Popover.Title>Сохранить фильтр?</Popover.Title>
+                <Popover.Description>Он появится в списке слева.</Popover.Description>
+              </Popover.Header>
+              <Popover.Actions>
+                <Popover.Close>
+                  <Button.Root variant="ghost" tone="neutral" size={size}>
+                    Отмена
+                  </Button.Root>
+                </Popover.Close>
+                <Popover.Close>
+                  <Button.Root size={size}>Сохранить</Button.Root>
+                </Popover.Close>
+              </Popover.Actions>
+            </Popover.Content>
+          </Popover.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/dist/skill/reference/components/popover/examples/width.tsx

@@ -0,0 +1,45 @@
+/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps; a table of limits takes the width it needs — `width`. */
+import { Button, DescriptionList, Popover, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LIMITS = [
+  { term: "Пользователи", value: "до 10 на рабочее пространство" },
+  { term: "Хранилище", value: "50 ГБ на команду, файлы до 2 ГБ" },
+  { term: "Поддержка", value: "приоритетная, ответ в течение 4 часов" },
+];
+
+export default function PopoverWidthExample() {
+  return (
+    <div className={styles.narrowColumn}>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button.Root variant="soft" tone="neutral" fullWidth>
+            Условия тарифа
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content width="trigger">
+          <Typography variant="body-s" tone="secondary">
+            До 10 пользователей, 50 ГБ хранилища и приоритетная поддержка.
+          </Typography>
+        </Popover.Content>
+      </Popover.Root>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button.Root variant="ghost" tone="neutral" fullWidth>
+            Все лимиты
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content width="content">
+          <DescriptionList.Root>
+            {LIMITS.map((limit) => (
+              <DescriptionList.Item key={limit.term} label={limit.term}>
+                {limit.value}
+              </DescriptionList.Item>
+            ))}
+          </DescriptionList.Root>
+        </Popover.Content>
+      </Popover.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/progress-bar/COMPONENT.md

@@ -39,40 +39,27 @@ ProgressBar              <div>; size, tone (value mode), aria-busy while loading
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ProgressBar
-`ref` → `HTMLDivElement` (the root). Props of both modes; pass either `value` (value mode) or `segments` (segments mode), never both.
+`ref` → `HTMLDivElement` (the root). Pass `value` (value mode: a native `<progress>`, transparent, under the drawn line) or `segments` (segments mode: a `role="group"` bar of parts described by the legend or the distribution text; `layout="rows"` — an `<ol>`), never both.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Line thickness 4 → 8 px (`--prime-control-<tier>-track`, shared with Slider) and label type. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Line thickness 4 → 8 px (`--prime-control-<tier>-track`, shared with Slider) and label type. Without it the tier of its host, else `m`. |
 | `label` | `string` | — | Visible label above the line and its accessible name; a value bar without it needs `aria-label`. |
 | `showValue` | `boolean` | `false` | Shows the rounded filled percentage at the end of the label row (`aria-hidden`); `bar` layout only. |
 | `loading` | `boolean` | `false` | The data is on its way: a Skeleton in the bar's geometry cross-fades into the data; the label stays. Pass the last known `value` or `segments` (or `0` / `[]`). |
+| `value` | `number` | — | Value mode: the current value, clamped to `0…max`. |
+| `max` | `number` | `100` (value mode), the sum of the parts (segments mode) | Value mode: top of the scale. Segments mode: total capacity; a `max` above the sum of the parts leaves the rest as track. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Value mode: fill color, telling the outcome. |
+| `steps` | `boolean` | `false` | Value mode: draws the scale as `max` equal cells (2–12), each filled whole; `value` rounds to a cell. For a level out of a few: password strength, onboarding steps. |
+| `segments` | `ProgressSegment[]` | — | Segments mode: parts in order, `{ value, label?, tone? \| color? }`: `tone` names a meaning (default `accent`), `color` a category, as in its charts. Each part's width is its share of `max`. |
+| `segmentGap` | `"none" \| "hairline"` | `"none"` | Segments mode: `none` — one continuous pill; `hairline` — every part and the rest are separate pills. `bar` layout. |
+| `legend` | `boolean` | `false` | Segments mode: a legend under the bar, one row per part: color · name · value · share; it becomes the group's description. `bar` layout. |
+| `formatValue` | `(value: number) => string` | Russian digit groups | Segments mode: display of a part's value in the legend and the rows («1 840 000 ₽»). |
+| `layout` | `"bar" \| "rows"` | `"bar"` | Segments mode: `bar` — every part in one bar; `rows` — a ranking: an `<ol>`, one row per part with label · value · share over its own bar. |
+| `scale` | `"sum" \| "max" \| "first"` | `"sum"` | Segments mode: `rows` only: what 100% is. `sum` — bars and shares of the total (`max` raises it); `max` — the leader is a full bar, shares stay of the total; `first` — bars and shares against the first row (a funnel). |
+| `labels` | `Partial<ProgressBarLabels>` | — | Segments mode: built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className`, `data-*` and the other div attributes on the root; `aria-label` names the bar when there is no `label`. |
 
-### ProgressBar · value mode
-A native `<progress>` (transparent, for assistive tech) under the drawn line.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `value` | `number` | — (required) | The current value, clamped to `0…max`. |
-| `max` | `number` | `100` | Top of the scale. |
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Fill color, telling the outcome. |
-| `steps` | `boolean` | `false` | Draws the scale as `max` equal cells (2–12), each filled whole; `value` rounds to a cell. For a level out of a few: password strength, onboarding steps. |
-
-### ProgressBar · segments mode
-A `role="group"` bar of parts, named by `label` and described by the legend or the distribution text; with `layout="rows"` an `<ol>` named by `label`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `segments` | `ProgressSegment[]` | — (required) | Parts in order, `{ value, label?, tone? \| color? }`: `tone` names a meaning (default `accent`), `color` a category, as in its charts. Each part's width is its share of `max`. |
-| `max` | `number` | — | Total capacity. Default: the sum of the parts; a larger `max` leaves the rest as track. |
-| `segmentGap` | `"none" \| "hairline"` | `"none"` | `none` — one continuous pill; `hairline` — every part and the rest are separate pills. `bar` layout. |
-| `legend` | `boolean` | `false` | A legend under the bar, one row per part: color · name · value · share; it becomes the group's description. `bar` layout. |
-| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a part's value in the legend and the rows («1 840 000 ₽»). |
-| `layout` | `"bar" \| "rows"` | `"bar"` | `bar` — every part in one bar; `rows` — a ranking: an `<ol>`, one row per part with label · value · share over its own bar. |
-| `scale` | `"sum" \| "max" \| "first"` | `"sum"` | `rows` only: what 100% is. `sum` — bars and shares of the total (`max` raises it); `max` — the leader is a full bar, shares stay of the total; `first` — bars and shares against the first row (a funnel). |
-| `labels` | `Partial<ProgressBarLabels>` | — | Built-in strings, see Labels. |
-
 ## Variants
 
 ### tone (value mode or each segment)
@@ -126,6 +113,7 @@ A `role="group"` bar of parts, named by `label` and described by the legend or t
 | `showValue` | secondary `NN%` at the end of the header | uploads, quotas — the user tracks the number | `false` |
 | `legend` | rows of swatch · name · value · share under the bar | a distribution the reader compares in numbers | `false` |
 | `loading` | a Skeleton bar (and legend or row lines) in the same geometry | the data is on its way | `false` |
+| `steps` | `max` equal cells (2–12), each filled whole | a level out of a few: password strength, an onboarding step | `false` |
 
 ## States
 | State | Driven by | DOM |
@@ -134,7 +122,7 @@ A `role="group"` bar of parts, named by `label` and described by the legend or t
 | value | `value`, `max` | native `value` / `max`; the drawn pill slides by `translate` over `slow` + `standard`, RTL aware |
 | segments | `segments`, `max`, `segmentGap` | `data-segment-gap` on the group, `data-tone` or `data-color` per part; widths animate by `flex-grow` over `slow` |
 | rows | `layout="rows"`, `scale` | `data-layout="rows"` on the root, an `<ol>`; each bar slides like the value pill |
-| loading | `loading` | `aria-busy` on the root; Skeletons in place of the bar, the legend or the rows; the data cross-fades in (`swapMotion`) |
+| loading | `loading` | `aria-busy` on the root; Skeletons in place of the bar, the legend or the rows; the data cross-fades in and the height glides (`RegionSwap`) |
 | steps | `steps` (value mode) | `data-steps="true"` on the bar; `max` cells (2–12), filled ones `data-filled`; a cell fills from its start edge (`base` · emphasized), cells of one change go half a stagger step apart — from the start when filling, from the end when emptying |
 | empty segments | `segments` empty or all `0` | only the track; accessible text `labels.empty` / `labels.allEmpty` |
 | reduced motion | `prefers-reduced-motion` | fill, widths and cells change instantly |
@@ -146,14 +134,18 @@ Always controlled: pass the current `value` or `segments` on every render.
 - Label → line: the tier `label-gap` (`--prime-space-1` xs/s, `--prime-space-2` m–xl). The label is primary, medium weight; the percentage secondary, tabular numbers.
 - Bar → legend `--prime-space-3` (12). Rows (`layout="rows"`) are 12 apart, each header 4 above its bar: the label (secondary, truncates) takes the free width, the value (primary, medium) and the share (muted, at least 4ch) line up at the end in tabular numbers.
 - `hairline` gaps and `steps` cells are ¾ of the line thickness apart.
-- Stack several bars with `--prime-space-4`–`--prime-space-5`.
+- Stack several bars 16–20 apart (a gap on their parent).
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Value mode: native `<progress>` — role `progressbar` with value and max.
 - Segments mode: `role="group"`; its text lists the shares of `max` («Видео: 38%, Документы: 21%»). With `label` (or `aria-label`) the group is named by it and described by the distribution — or by the legend when `legend` is on; without a name the distribution is the name.
 - Rows: an `<ol>` named by `label`; each row reads as text («Москва 1 284 52%»), the bars are `aria-hidden`.
@@ -177,7 +169,7 @@ No keyboard interaction.
 | [sizes.tsx](examples/sizes.tsx) | Every tier: the line grows from 4 to 8 px like the Slider track — `size`. |
 | [states.tsx](examples/states.tsx) | Loading takes the bar's own geometry, so the data lands without a jump — `loading`. |
 | [custom-max.tsx](examples/custom-max.tsx) | A scale of steps instead of percent: 3 of 5 profile steps — `max`. |
-| [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. |
+| [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list with its own spoken text — `segments`, `segmentGap`, `max`, `labels`. |
 | [legend.tsx](examples/legend.tsx) | Shares of categories in their chart colors with a legend of color · name · value · share — `color`, `legend`, `formatValue`. |
 | [ranking.tsx](examples/ranking.tsx) | Rankings as rows of label · value · share over a bar: top cities against the leader and a funnel against its first step — `layout`, `scale`. |
 | [steps.tsx](examples/steps.tsx) | The scale as whole cells that fill one after another: 2 of 5 onboarding steps, forward and back — `steps`, `max`. |
@@ -195,5 +187,5 @@ No keyboard interaction.
 - A grey box while the data loads → `loading` draws the Skeleton in the bar's geometry.
 
 ## Related
-- **Built from:** [Skeleton](../skeleton/COMPONENT.md)
+- **Built from:** [Skeleton](../skeleton/COMPONENT.md), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ProgressCircle](../progress-circle/COMPONENT.md), [Slider](../slider/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md), [Spinner](../spinner/COMPONENT.md)

package/dist/skill/reference/components/progress-bar/examples/examples.module.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-5);
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
   min-width: 0;
 }
 

package/dist/skill/reference/components/progress-bar/examples/segments.tsx

@@ -1,4 +1,4 @@
-/** Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. */
+/** Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list with its own spoken text — `segments`, `segmentGap`, `max`, `labels`. */
 import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -26,7 +26,7 @@ export default function ProgressBarSegmentsExample() {
         label="Хранилище: 71 из 100 ГБ"
         showValue
       />
-      <ProgressBar segments={[]} label="Нет данных за период" />
+      <ProgressBar segments={[]} label="Заявки за ноябрь" labels={{ empty: "Заявок пока нет" }} />
     </div>
   );
 }

package/dist/skill/reference/components/progress-circle/COMPONENT.md

@@ -41,38 +41,25 @@ with legend:             <div data-legend> — a row: the ring box + <ul> legend
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ProgressCircle
-`ref` → `HTMLDivElement` (the root). Props of both modes; pass either `value` (value mode) or `segments` (segments mode), never both.
+`ref` → `HTMLDivElement` (the root). Pass `value` (value mode: the svg is `role="progressbar"`, a track and one round-capped arc from the top) or `segments` (segments mode: the svg is `role="group"`, parts clockwise from the top), never both.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Diameter 24 · 32 · 48 · 64 · 80 px; the stroke is 1/12 of it. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Diameter 24 · 32 · 48 · 64 · 80 px; the stroke is 1/12 of it. Without it the ring takes the tier of a sized host. |
 | `children` | `ReactNode` | — | Content in the center (number, percent, `Icon`): text from `m`, an icon from `s`, nothing on `xs`. A string or number also becomes `aria-valuetext`. |
 | `aria-label` | `string` | — | Accessible name of the ring (set on the svg). Always pass it. |
 | `loading` | `boolean` | `false` | The data is on its way: a Skeleton ring of the same diameter and stroke (and legend lines) that cross-fades into the data; the inner content waits, the root is `aria-busy`. |
+| `value` | `number \| null` | — | Value mode: the current value, clamped to `0…max`; it glides to a new value (`base`). `null` — under way, the share unknown: a quarter arc that always turns, no `aria-valuenow`. |
+| `spin` | `boolean` | `false` | Value mode: the ring turns at any share (one turn = 3 × `--prime-motion-loop`; slower under reduced motion, never still) and the arc never drops under 8%: a sync whose share grows. `null` always turns. |
+| `max` | `number` | `100` (value mode), the sum of the parts (segments mode) | Value mode: top of the scale. Segments mode: total capacity; the sum of the parts closes the ring, a larger `max` leaves the rest as track. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info" \| "inherit"` | `"accent"` | Value mode: arc color, telling the outcome. `inherit` — the arc in the host's text color over a 32% track of it, for a ring on a colored host or over media. |
+| `segments` | `ProgressSegment[]` | — | Segments mode: parts in order, `{ value, label?, tone? \| color? }`: `tone` names a meaning (default `accent`), `color` a category — its step of the chart palette. Each part's length is its share of `max`. |
+| `segmentGap` | `"none" \| "hairline"` | `"none"` | Segments mode: `none` — one continuous ring; `hairline` — every part and the rest are separate round arcs. |
+| `legend` | `boolean` | `false` | Segments mode: a legend beside the ring (below it when narrow), one row per part: color · name · value · share; with `aria-label` it becomes the group's description. The root turns into the row of ring and legend. |
+| `formatValue` | `(value: number) => string` | Russian digit groups | Segments mode: display of a part's value in the legend («38 ГБ»). |
+| `labels` | `Partial<ProgressCircleLabels>` | — | Segments mode: built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className`, `data-*` and the other div attributes on the root. |
 
-### ProgressCircle · value mode
-The svg is `role="progressbar"`: a track and one round-capped arc from 12 o'clock.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `value` | `number \| null` | — (required) | The current value, clamped to `0…max`; it glides to a new value (`base`). `null` — under way, the share unknown: a quarter arc that always turns, no `aria-valuenow`. |
-| `spin` | `boolean` | `false` | The ring turns at any share (one turn = 3 × `--prime-motion-loop`; slower under reduced motion, never still) and the arc never drops under 8%: a sync whose share grows. `null` always turns. |
-| `max` | `number` | `100` | Top of the scale. |
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info" \| "inherit"` | `"accent"` | Arc color, telling the outcome. `inherit` — the arc in the host's text color over a 32% track of it, for a ring on a colored host or over media. |
-
-### ProgressCircle · segments mode
-The svg is `role="group"`: parts clockwise from the top, described by the legend or the distribution text.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `segments` | `ProgressSegment[]` | — (required) | Parts in order, `{ value, label?, tone? \| color? }`: `tone` names a meaning (default `accent`), `color` a category — its step of the chart palette. Each part's length is its share of `max`. |
-| `max` | `number` | — | Total capacity. Default: the sum of the parts (they close the ring); a larger `max` leaves the rest as track. |
-| `segmentGap` | `"none" \| "hairline"` | `"none"` | `none` — one continuous ring; `hairline` — every part and the rest are separate round arcs. |
-| `legend` | `boolean` | `false` | A legend beside the ring (below it when the row is narrow), one row per part: color · name · value · share; it becomes the group's description. The root turns into the row of ring and legend. |
-| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a part's value in the legend («38 ГБ»). |
-| `labels` | `Partial<ProgressCircleLabels>` | — | Built-in strings, see Labels. |
-
 ## Variants
 
 ### size
@@ -80,7 +67,7 @@ The svg is `role="group"`: parts clockwise from the top, described by the legend
 |---|---|---|---|
 | `xs` | 24 diameter, no inner content | inline in text or table cells | |
 | `s` | 32 diameter, an icon 16 in the center, no text | list rows, compact cards | |
-| `m` | 48 diameter, inner text 12/16, icon 20 | KPI tiles | yes |
+| `m` | 48 diameter, inner text 12/16, icon 20 | KPI tiles | the host tier, else `m` |
 | `l` | 64 diameter, inner text 16/24, icon 24 | dashboard cards | |
 | `xl` | 80 diameter, inner text 18/24, icon 32 | hero metrics, breakdowns | |
 
@@ -128,13 +115,13 @@ The stroke is always 1/12 of the diameter (the kit ring's `data` weight). These
 | icon change | a new icon in `children` (another `name`) | the old one shrinks to 0.6 and fades, the new one grows in (`fast`) and plays its gesture once; a changing number updates in place |
 | segments | `segments`, `max`, `segmentGap` | `data-segment-gap` on the svg, `data-tone` or `data-color` on every arc and cap; arcs glide by dash, caps by `rotate` |
 | legend | `legend` | `data-legend` on the root, which becomes a wrapping row of the ring and the `<ul>` |
-| loading | `loading` | `aria-busy` on the root; a Skeleton ring (mask of the stroke) and legend lines; the data cross-fades in (`swapMotion`) |
+| loading | `loading` | `aria-busy` on the root; a Skeleton ring (mask of the stroke) and legend lines; the data cross-fades in (`RegionSwap`) |
 | reduced motion | `prefers-reduced-motion` | arcs and icons change instantly; a turning ring turns twice as slow and never stops |
 
 Always controlled: pass the current `value` or `segments`.
 
 ## Layout & spacing
-- `display: inline-flex`, never shrinks (with `legend` the root is a block `flex` row); a caption sits next to it with `--prime-space-3` or under it with `--prime-space-2`.
+- `display: inline-flex`, never shrinks (with `legend` the root is a block `flex` row); a caption sits 12 beside it or 8 under it (a gap on their parent).
 - Diameters sit on the 4px grid (`--prime-space-6…20`); the ring is placed in CSS (an svg without a viewBox), lengths along it are percent of the circle.
 - Inner content sits in the hole (5/6 of the diameter, clipped), primary, medium weight, tabular numbers.
 - With `legend` the root is a wrapping row: the ring and the legend `--prime-space-5` (20) apart; the legend takes the rest of the row (basis 192) and drops below the ring when that does not fit.
@@ -143,12 +130,16 @@ Always controlled: pass the current `value` or `segments`.
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Value mode: the svg is `role="progressbar"` with `aria-valuenow` / `-min` / `-max`; a string or number child becomes `aria-valuetext`. With `value={null}` there is no `aria-valuenow` — the share is unknown.
 - The turn never stops under reduced motion (twice as slow): it is the only sign the work goes on.
-- Segments mode: the svg is `role="group"`; with `aria-label` it is described by the distribution («Видео: 38%, Документы: 21%») or by the legend, without it the distribution is its name.
+- Segments mode: the svg is `role="group"`; with `aria-label` it is named by it and the text in the centre («Хранилище, 72%») and described by the distribution («Видео: 38%, Документы: 21%») or by the legend, without it the distribution is its name.
 - A category color always sits beside its name in the legend, so color is never the only cue.
 - While `loading` the root is `aria-busy` and the Skeletons are `aria-hidden`.
 - Always pass `aria-label`: a caption next to the ring is not linked to it.
@@ -171,8 +162,9 @@ No keyboard interaction.
 | [states.tsx](examples/states.tsx) | Loading is a Skeleton ring of the same diameter and stroke; the number in the centre waits for the data — `loading`. |
 | [inner-content.tsx](examples/inner-content.tsx) | The center holds a percentage, a count on its own scale or an icon — `children`, `max`. |
 | [under-way.tsx](examples/under-way.tsx) | An import whose share is not known yet turns a quarter arc, then fills and swaps its icon; a sync turns while its share grows — `value`, `spin`, `children`. |
-| [segments.tsx](examples/segments.tsx) | Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list — `segments`, `segmentGap`. |
+| [segments.tsx](examples/segments.tsx) | Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list with its own spoken text — `segments`, `segmentGap`, `labels`. |
 | [legend.tsx](examples/legend.tsx) | A ring of category shares with a legend beside it, in the categories' chart colors — `color`, `legend`, `formatValue`. |
+| [on-color.tsx](examples/on-color.tsx) | A ring on a colored host takes the host's text color — `tone`. |
 
 ## Mistakes
 - No `aria-label` (even with a visible caption) → screen readers get an unnamed progressbar.
@@ -185,5 +177,5 @@ No keyboard interaction.
 - Categories painted with `tone` → use `color`; a hand-built legend beside the ring → `legend`.
 
 ## Related
-- **Built from:** [Skeleton](../skeleton/COMPONENT.md), `internal/ring` (the ring drawing, shared with Spinner and the circle Button), `internal/glyphSwap` (the center cross-fade)
+- **Built from:** [Skeleton](../skeleton/COMPONENT.md), `internal/ring` (the ring drawing, shared with Spinner and the circle Button), `internal/glyphSwap` (the center cross-fade), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ProgressBar](../progress-bar/COMPONENT.md), [Card](../card/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), [Button](../button/COMPONENT.md)

package/dist/skill/reference/components/progress-circle/examples/examples.module.css

@@ -11,7 +11,7 @@
 
 /* A dashboard card as wide as a short form: the legend sits beside the ring or drops under it. */
 .card {
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .item {

package/dist/skill/reference/components/progress-circle/examples/on-color.tsx

@@ -0,0 +1,16 @@
+/** A ring on a colored host takes the host's text color — `tone`. */
+import { Banner, ProgressCircle } from "prime-ui-kit";
+
+export default function ProgressCircleOnColorExample() {
+  return (
+    <Banner.Root variant="solid" tone="info">
+      <Banner.Content>
+        <Banner.Icon>
+          <ProgressCircle size="xs" value={64} tone="inherit" aria-label="Экспорт отчёта" />
+        </Banner.Icon>
+        <Banner.Title>Экспорт отчёта за квартал</Banner.Title>
+        <Banner.Description>Готово 64%, файл придёт на почту.</Banner.Description>
+      </Banner.Content>
+    </Banner.Root>
+  );
+}

package/dist/skill/reference/components/progress-circle/examples/segments.tsx

@@ -1,4 +1,4 @@
-/** Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list — `segments`, `segmentGap`. */
+/** Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list with its own spoken text — `segments`, `segmentGap`, `labels`. */
 import { ProgressCircle, type ProgressSegment, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -54,9 +54,14 @@ export default function ProgressCircleSegmentsExample() {
         </Typography>
       </div>
       <div className={styles.item}>
-        <ProgressCircle size="xl" segments={[]} aria-label="Нет данных" />
+        <ProgressCircle
+          size="xl"
+          segments={[]}
+          aria-label="Заявки за ноябрь"
+          labels={{ empty: "Заявок пока нет" }}
+        />
         <Typography as="span" variant="caption" tone="muted">
-          Нет данных
+          Заявки за ноябрь
         </Typography>
       </div>
     </div>

package/dist/skill/reference/components/progress-circle/examples/variants.tsx

@@ -8,6 +8,7 @@ const TONES = [
   { tone: "danger", label: "Сбой импорта", value: 20 },
   { tone: "info", label: "Синхронизация", value: 30 },
   { tone: "neutral", label: "Индексация", value: 55 },
+  { tone: "inherit", label: "Экспорт", value: 64 },
 ] as const;
 
 export default function ProgressCircleVariantsExample() {

package/dist/skill/reference/components/radio/COMPONENT.md

@@ -11,7 +11,7 @@
 - A required one-of-many question in a form.
 
 ## When not to use
-- 2–4 short view modes or filters that apply instantly → use [SegmentedControl](../segmented-control/COMPONENT.md) instead.
+- 2–5 short view modes or filters that apply instantly → use [SegmentedControl](../segmented-control/COMPONENT.md) instead.
 - A long list (8+ options) or limited space → use [Select](../select/COMPONENT.md) instead.
 - Independent yes/no options → use [Checkbox](../checkbox/COMPONENT.md) instead.
 - A single on/off setting → use [Switch](../switch/COMPONENT.md) instead.
@@ -42,7 +42,7 @@ Radio.Group             field: group label → role="radiogroup" → hint | erro
 | `defaultValue` | `string` | — | Initial value when uncontrolled. |
 | `onValueChange` | `(value: string) => void` | — | Called with the value of the newly chosen option. |
 | `name` | `string` | — | Native `name` shared by the radios; generated when omitted. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of every circle, text, the label and the hint. Without it the group takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of every circle, text, the label and the hint. Without it the group takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. |
 | `label` | `ReactNode` | — | Group heading above the options; names the radiogroup through `aria-labelledby`. Without it, pass `aria-label`. |
 | `required` | `boolean` | `false` | Red `*` after the label, native `required` on the radios and `aria-required` on the group. |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
@@ -54,6 +54,7 @@ Radio.Group             field: group label → role="radiogroup" → hint | erro
 | `labels` | `Partial<RadioGroupLabels>` | — | Built-in strings, see Labels. |
 | `id` | `string` | — | Id of the `role="radiogroup"` element (generated when omitted); also the default `name`. |
 | `aria-label / aria-labelledby / aria-describedby` | `string` | — | Name and description of the radiogroup (`aria-describedby` is merged before the hint / error ids). |
+| `children` | `ReactNode` | — | The `Radio.Root` options. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange" \| "dir">` | — | `className`, `data-*` and the other attributes of the field frame `<div>`. |
 
 ### Radio.Root
@@ -71,6 +72,10 @@ Radio.Group             field: group label → role="radiogroup" → hint | erro
 ### Radio.Label
 `ref` → `HTMLSpanElement`. The visible text in the text column of the option row. Native `<span>` props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+
 ## Variants
 No `variant` / `tone` / `color`.
 
@@ -118,13 +123,15 @@ The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `ari
 
 ## Layout & spacing
 - Group label → options: the tier `label-gap`; options → hint / error: the tier `hint-gap` (the same rhythm as fields).
-- Options inside a group: gap `--prime-space-2`; group → group: `--prime-space-8`.
+- Options inside a group: gap `--prime-space-2`; groups in a form stand in a [Fieldset](../fieldset/COMPONENT.md), which sets the rhythm between them.
 - An option hint aligns with the text column, not with the circle.
 - Long labels wrap; horizontal rows wrap at narrow widths.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focuses the selected option (or the first one when nothing is selected). |
@@ -132,6 +139,8 @@ The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `ari
 | `Space` | Selects the focused option. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `Radio.Group` is `role="radiogroup"`, named by its `label` through `aria-labelledby`, or by `aria-label`.
 - `aria-required`, `aria-invalid` and `aria-orientation` sit on the group; the group hint or error is in its `aria-describedby`.
 - Every option is a native `<input type="radio">` with the shared `name`; an option `hint` is linked through `aria-describedby`.
@@ -152,6 +161,7 @@ The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `ari
 | [group.tsx](examples/group.tsx) | A required group with option descriptions and the group's error under the options — `label`, `required`, `hint`, `error`. |
 | [orientation.tsx](examples/orientation.tsx) | Options stacked in a column and laid out in a wrapping row — `orientation`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the chosen plan and shows it in the hint — `value`, `onValueChange`. |
+| [in-form.tsx](examples/in-form.tsx) | Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. |
 
 ## Mistakes
 - `Radio.Root` outside `Radio.Group` → it throws; every option needs the group.
@@ -161,5 +171,5 @@ The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `ari
 - Eight or more options → use `Select`.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (group label), [Hint](../hint/COMPONENT.md) (`hint`, `error`, option hints); option rows are native `<label>` elements
+- **Built from:** [Label](../label/COMPONENT.md) (group label), [Hint](../hint/COMPONENT.md) (`hint`, `error`, option hints), [VisuallyHidden](../visually-hidden/COMPONENT.md); option rows are native `<label>` elements
 - **See also:** [Checkbox](../checkbox/COMPONENT.md), [Switch](../switch/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md)

package/dist/skill/reference/components/radio/examples/examples.module.css

@@ -0,0 +1,14 @@
+/* Layout of the Radio scenarios: semantic tokens only. */
+
+/* in-form.tsx: groups, then actions (group → actions 32). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: min(100%, var(--prime-layout-form-width-s));
+}
+
+.formActions {
+  display: flex;
+  margin-top: var(--prime-space-2);
+}

package/dist/skill/reference/components/radio/examples/in-form.tsx

@@ -0,0 +1,45 @@
+/** Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. */
+import { Button, Radio } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function RadioInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const chosen = new FormData(event.currentTarget).get("delivery");
+    setError(chosen ? undefined : "Выберите способ доставки");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Radio.Group
+        label="Способ доставки"
+        name="delivery"
+        required
+        error={error}
+        onValueChange={() => setError(undefined)}
+      >
+        <Radio.Root value="courier">
+          <Radio.Label>Курьером до склада</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="pickup">
+          <Radio.Label>Самовывоз с терминала</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <Radio.Group label="Упаковка" name="packing" optional>
+        <Radio.Root value="pallet">
+          <Radio.Label>На паллетах</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="crate">
+          <Radio.Label>В обрешётке</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Оформить заказ</Button.Root>
+      </div>
+    </form>
+  );
+}