prime-ui-kit 0.15.0 → 0.16.0

package/src/components/button-group/COMPONENT.md

@@ -25,7 +25,7 @@ import { ButtonGroup } from "prime-ui-kit";
 ## Anatomy
 ```
 ButtonGroup.Root            field frame: label row · group · support row (hint | error)
-└─ (group)                  <div role="group">; size and orientation for every segment
+└─ (group)                  <div role="group">: a row is the switcher row, a column stacks
    └─ ButtonGroup.Item      one segment, a native <button>; optional pressed toggle
       └─ ButtonGroup.Icon   decorative icon wrapper (aria-hidden), sized to the tier
 ```
@@ -36,13 +36,13 @@ The root is a field root: `className`, `ref` and the native attributes land on t
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ButtonGroup.Root
-`ref` → `HTMLDivElement` (the field frame). The field: label · `<div role="group">` with the segments · support row; sets the tier and orientation of every segment and passes the tier to nested icons. The frame hugs the group unless `fullWidth`.
+`ref` → `HTMLDivElement` (the field frame). The field: label · `<div role="group">` with the segments (a row scrolls as a switcher, a column stacks) · support row; sets the tier and orientation of every segment. The frame hugs the group unless `fullWidth`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Control tier of every segment: height 28 · 32 · 36 · 40 · 48, padding, text, icon. Without it the tier of its host (a toolbar, a panel), else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Control tier of every segment: height 28 · 32 · 36 · 40 · 48, padding, text, icon. Without it the tier of its host (a toolbar, a panel), else `m`. |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the segments; `vertical` stretches them to the widest. |
-| `fullWidth` | `boolean` | — | Stretches the group; horizontal segments share the width equally. |
+| `fullWidth` | `boolean` | — | Stretches the group; horizontal segments tend to equal widths but never get narrower than their label (the row scrolls instead). |
 | `label` | `ReactNode` | — | Heading above the control; names the `group` (`aria-labelledby`). Without it give the root an `aria-label`. |
 | `required` | `boolean` | `false` | Red `*` after the label and `aria-required` on the `group`. |
 | `optional` | `boolean` | `false` | Muted marker after the label (`labels.optional`). |
@@ -61,10 +61,9 @@ The root is a field root: `className`, `ref` and the native attributes land on t
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `pressed` | `boolean` | — | Toggle state: `aria-pressed` and `data-state="active" \| "inactive"`. Leave it out for a plain action segment. |
-| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Native button type. |
 | `disabled` | `boolean` | — | Native disabled; a disabled `Fieldset` around the group sets it too. |
 | `children` | `ReactNode` | — | Label and `ButtonGroup.Icon`. Only icons → square segment; give it `aria-label`. |
-| `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `onClick`, `className`, `aria-*` and the other button attributes. |
+| `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `type` (`"button"` unless set: `"submit"` / `"reset"` in a form), `onClick`, `className`, `aria-*` and the other button attributes. |
 
 ### ButtonGroup.Icon
 `ref` → `HTMLSpanElement`. Decorative icon wrapper (`aria-hidden`) sized to the group tier.
@@ -96,7 +95,7 @@ A group lines up with Button, Input, Select and SegmentedControl of the same `si
 ### pressed
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| — (omitted) | `fill-muted` fill, secondary text; hover `fill-muted-hover` + primary text; active `fill-strong` | plain actions | yes |
+| — (omitted) | `fill-muted` fill, secondary text; hover `fill-muted-hover` + primary text | plain actions | yes |
 | `true` | `accent-soft` fill, accent text | the active toggle / selected option | |
 | `false` | same as plain, but `aria-pressed="false"` | the non-active members of a toggle set | |
 
@@ -105,7 +104,7 @@ Segments have no borders: they sit on the neutral fill and are separated by a 1p
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `fullWidth` | group fills the row, segments `flex: 1` | plan pickers in narrow columns | off |
+| `fullWidth` | group fills the row; segments tend to equal widths (`flex: 1 1 0`) but never get narrower than their label, the row scrolls instead | plan pickers in narrow columns | off |
 | icon-only (only `ButtonGroup.Icon` inside an Item) | square segment, width = height | toolbars; needs `aria-label` | — |
 
 Do not mix action segments and toggle segments in one group, and do not put the primary action inside the group — place a [Button](../button/COMPONENT.md) of the same size next to it.
@@ -113,28 +112,35 @@ Do not mix action segments and toggle segments in one group, and do not put the
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| hover / active | pointer | hover `fill-muted-hover` + primary text; active `fill-strong` + `scale(var(--prime-motion-press-scale))` (`-compact` for icon-only segments); disabled never scales |
-| pressed | `pressed` | `aria-pressed`, `data-state="active" \| "inactive"` |
+| hover / press | pointer | hover `fill-muted-hover` + primary text; a press scales the segment to `--prime-motion-press-scale` (`-compact` for icon-only segments, `internal/press`) and keeps its fill; disabled never scales |
+| pressed | `pressed` | `aria-pressed` (the look is styled from it), `data-state="active" \| "inactive"` |
 | disabled | `disabled` on an Item, or a disabled `Fieldset` around the group | native `:disabled`: `fill-muted` + `text-disabled`, `cursor: not-allowed` |
-| focus-visible | keyboard | outer focus ring, the segment is raised above neighbours (`z-index: 1`) |
+| focus-visible | keyboard | in a row the ring is inside the segment (the row scrolls, it clips); in a column the outer ring; the segment is raised above its neighbours |
 | invalid | `invalid` or non-empty `error` | group `data-invalid="true"` + `aria-invalid="true"`, an inset danger ring on every segment; the error replaces the hint; the segments shake once when an error arrives |
 | required | `required` | red `*` after the label, `aria-required="true"` on the group |
+| optional | `optional` | a muted `labels.optional` marker after the label |
+| support row reserved | `reserveSupportRow` | the support row stays rendered while empty, so an error arriving shifts nothing |
+| overflow | a row wider than its container | the row scrolls inside itself with faded edges (`data-overflow-start` / `data-overflow-end`), never wraps or truncates |
 
 Group attributes: `data-size`, `data-orientation="vertical"` (only when vertical), `data-full-width`. Item attributes: `data-icon-only`, `data-leading-icon`, `data-trailing-icon` (optical padding `padX − 4px` on the icon side). Selection is always owned by the parent: keep the value in state and set `pressed`.
 
 ## Layout & spacing
-- Groups in a toolbar: `gap: var(--prime-space-3)`; push the primary Button to the end with a flexible spacer.
-- `max-width: 100%`; labels do not wrap. Use `fullWidth` in narrow columns.
+- Groups in a toolbar: one tier gap between controls; push the primary Button to the end with a flexible spacer.
+- A row is a switcher (foundation §9): `max-width: 100%`, labels never wrap or truncate, and segments that do not fit scroll inside the row. Its host gives it a bounded width (`min-width: 0` on a flex child). Use `fullWidth` in narrow columns.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus between segments; a disabled one is skipped. |
 | `Enter` · `Space` | Presses the segment (native `<button>`). |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The group element is `role="group"`, named by `label` (`aria-labelledby`); without a label give the root `aria-label`. Set `role="toolbar"` on the outer container of several groups.
 - Hint and error are linked through `aria-describedby`; an error sets `aria-invalid="true"`, `required` sets `aria-required="true"`.
 - Toggle segments expose `aria-pressed`; in a toggle set pass `pressed={false}` to the inactive ones.
@@ -156,7 +162,7 @@ Group attributes: `data-size`, `data-orientation="vertical"` (only when vertical
 | [with-icon.tsx](examples/with-icon.tsx) | An icon before the label and square icon-only segments — `ButtonGroup.Icon`, `aria-label`. |
 | [orientation.tsx](examples/orientation.tsx) | A row of segments and a column of related options — `orientation`. |
 | [full-width.tsx](examples/full-width.tsx) | The group fills its column and the segments share the width equally — `fullWidth`. |
-| [controlled.tsx](examples/controlled.tsx) | One of several: the active segment lives in parent state and gets `pressed`. |
+| [controlled.tsx](examples/controlled.tsx) | One of several: the active segment lives in parent state — `pressed`. |
 | [in-form.tsx](examples/in-form.tsx) | A task form: the priority toggles are a labelled field checked on submit, an optional reminder, and native submit and reset segments in one group — `label`, `required`, `hint`, `error`, `optional`, `type`. |
 
 ## Mistakes
@@ -168,5 +174,5 @@ Group attributes: `data-size`, `data-orientation="vertical"` (only when vertical
 - A `Label` + `Hint` pair wired by hand around a toggle set in a form → `label`, `hint`, `error` on the root.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md) (`internal/SwitcherScroller`, a row), [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [VisuallyHidden](../visually-hidden/COMPONENT.md); `internal/press`
 - **See also:** [Button](../button/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Tabs](../tabs/COMPONENT.md)

package/src/components/button-group/examples/controlled.tsx

@@ -1,4 +1,4 @@
-/** One of several: the active segment lives in parent state and gets `pressed`. */
+/** One of several: the active segment lives in parent state — `pressed`. */
 import { ButtonGroup } from "prime-ui-kit";
 import * as React from "react";
 

package/src/components/card/COMPONENT.md

@@ -100,8 +100,15 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-### Card.Label · Card.Value · Card.Delta
-`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates), the value (tabular, sized by the template and the card width) and the change.
+### Card.Label · Card.Value
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates) and the value (tabular, sized by the template and the card width).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Delta
+`ref` → `HTMLSpanElement`. The change of a metric beside its value.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -163,7 +170,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 Without `asChild` a card is static: no hover, focus or press of its own. With it: `data-interactive` on the element.
 
 ## Layout & spacing
-- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own `repeat(auto-fit, minmax(min(100%, 14rem), 1fr))`, gap `--prime-space-4`.
+- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
 - Radius `--prime-card-radius`, no border. In `panel` and `list` the `Header` is a padded zone with a faint inset hairline below; in `stat-trend` it can pair a leading Badge or icon with a compact `Card.Value`.
 - Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
 - Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
@@ -174,12 +181,16 @@ Without `asChild` a card is static: no hover, focus or press of its own. With it
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | A card with `asChild` is one stop: focus lands on the whole link or button. |
-| `Enter` | Opens the link or presses the button of a card with `asChild`. |
+| `Enter` · `Space` | Opens the link (`Enter`) or presses the button (`Enter`, `Space`) of a card with `asChild`. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - With `asChild` the card is the link or button itself; its name is the text of its parts. Nothing interactive may sit inside it — put row actions next to the card instead.
 - `Card.Root` is a plain `<div>`; give it `role="region"` + `aria-labelledby` only when it is a landmark-worthy block.
 - `Card.Title` renders `<h3>`; directly under the page title pass `as="h2"`.
@@ -193,7 +204,7 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A company settings panel: a header, fields on the surface fill and buttons in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. |
+| [overview.tsx](examples/overview.tsx) | A company settings form on a card: a header, fields on the surface fill and the submit button in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. |
 | [variants.tsx](examples/variants.tsx) | KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change in every tone and a reference line — `variant`, `Card.Delta`, `tone`, `Card.Meta`. |
 | [kpi-media.tsx](examples/kpi-media.tsx) | A KPI with a sparkline or a fill level in the bottom slot of `mini` — `Card.Media`. |
 | [panel-chart.tsx](examples/panel-chart.tsx) | A chart widget: a header with a short description and a period switch, and a Sparkline with the period total over its chart — `Card.Header`, `Card.Description`, `Card.Body`. |

package/src/components/card/examples/content-templates.tsx

@@ -39,7 +39,13 @@ export default function CardContentTemplatesExample() {
                 <Typography as="span" variant="body-m" truncate>
                   {e.text}
                 </Typography>
-                <Typography as="span" variant="caption" tone="muted" className={styles.listMeta}>
+                <Typography
+                  as="span"
+                  variant="caption"
+                  tone="muted"
+                  numeric="tabular"
+                  className={styles.listMeta}
+                >
                   {e.time}
                 </Typography>
               </span>
@@ -50,7 +56,7 @@ export default function CardContentTemplatesExample() {
 
       <Card.Root variant="cover">
         <Card.Media aria-hidden>
-          <div className={styles.cover} />
+          <img src="https://picsum.photos/seed/autumn-campaign/640/320" alt="" />
         </Card.Media>
         <Card.Body>
           <Card.Title>Кампания «Осень»</Card.Title>

package/src/components/card/examples/examples.module.css

@@ -1,6 +1,9 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-14) * 4)), 1fr));
+  grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
+    );
   gap: var(--prime-space-4);
   width: 100%;
   min-width: 0;
@@ -28,14 +31,6 @@
   width: min(100%, calc(var(--prime-space-24) * 6));
 }
 
-.cover {
-  background: linear-gradient(
-    135deg,
-    var(--prime-color-accent-soft) 0%,
-    var(--prime-color-palette-sky-soft) 100%
-  );
-}
-
 .listRow {
   display: flex;
   align-items: center;
@@ -46,11 +41,4 @@
 
 .listMeta {
   flex: none;
-  font-variant-numeric: tabular-nums;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
 }

package/src/components/card/examples/overview.tsx

@@ -1,39 +1,39 @@
-/** A company settings panel: a header, fields on the surface fill and buttons in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. */
-import { Button, Card, Input, Switch } from "prime-ui-kit";
+/** A company settings form on a card: a header, fields on the surface fill and the submit button in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. */
+import { Button, Card, Fieldset, Input, Switch } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function CardOverviewExample() {
   return (
-    <div className={styles.panel}>
+    <form className={styles.panel} onSubmit={(event) => event.preventDefault()}>
       <Card.Root variant="panel">
         <Card.Header>
           <Card.Title>Профиль компании</Card.Title>
         </Card.Header>
         <Card.Body>
-          <div className={styles.form}>
+          <Fieldset>
             <Input.Root label="Название" required>
               <Input.Wrapper>
-                <Input.Field defaultValue="ООО «Прайм»" />
+                <Input.Field name="name" defaultValue="ООО «Прайм»" />
               </Input.Wrapper>
             </Input.Root>
             <Input.Root label="Сайт" optional hint="Покажем в счетах и письмах">
               <Input.Wrapper>
-                <Input.Field placeholder="https://" />
+                <Input.Field name="site" type="url" placeholder="https://" />
               </Input.Wrapper>
             </Input.Root>
-            <Switch.Root defaultChecked>
+            <Switch.Root name="report" defaultChecked>
               <Switch.Label>Отправлять ежемесячный отчёт</Switch.Label>
             </Switch.Root>
-          </div>
+          </Fieldset>
         </Card.Body>
         <Card.Footer>
-          <Button.Root variant="ghost" tone="neutral">
+          <Button.Root type="reset" variant="ghost" tone="neutral">
             Отмена
           </Button.Root>
-          <Button.Root>Сохранить</Button.Root>
+          <Button.Root type="submit">Сохранить</Button.Root>
         </Card.Footer>
       </Card.Root>
-    </div>
+    </form>
   );
 }

package/src/components/card/examples/screen.tsx

@@ -140,7 +140,7 @@ const COLUMNS: DataTableColumn<Payment>[] = [
     cell: (row) => (
       <span className={styles.client}>
         {row.client}
-        {row.late ? <Badge.Root color="orange">С опозданием</Badge.Root> : null}
+        {row.late ? <Badge.Root tone="warning">С опозданием</Badge.Root> : null}
       </span>
     ),
   },
@@ -225,7 +225,14 @@ export default function CardScreenExample() {
 
             {/* The chart spans two rows beside the two panels and fills their height. */}
             <PageContent.Cell span={8} rows={2}>
-              <ChartFrame.Root series={BILLING_SERIES} formatValue={formatMillionsShort}>
+              <ChartFrame.Root
+                series={BILLING_SERIES}
+                formatValue={formatMillionsShort}
+                rows={BILLING[period].map((row) => ({
+                  label: row.label,
+                  values: { invoiced: row.invoiced, paid: row.paid },
+                }))}
+              >
                 <ChartFrame.Header>
                   <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
                   <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
@@ -290,12 +297,6 @@ export default function CardScreenExample() {
                   }}
                 />
                 <ChartFrame.Legend />
-                <ChartFrame.Table
-                  rows={BILLING[period].map((row) => ({
-                    label: row.label,
-                    values: { invoiced: row.invoiced, paid: row.paid },
-                  }))}
-                />
               </ChartFrame.Root>
             </PageContent.Cell>
 

package/src/components/card/examples/variants.tsx

@@ -1,54 +1,81 @@
 /** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change in every tone and a reference line — `variant`, `Card.Delta`, `tone`, `Card.Meta`. */
-import { Badge, Card, Icon } from "prime-ui-kit";
+import { Badge, Card, Icon, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
+const TRENDS = [
+  {
+    tone: "success",
+    label: "Выручка за месяц",
+    value: "4,2 млн ₽",
+    delta: "+18% к сентябрю",
+    meta: "Лидов 1 240 · сделок 186",
+  },
+  {
+    tone: "danger",
+    label: "Отток",
+    value: "3,1%",
+    delta: "+0,6 п. п. за неделю",
+    meta: "Ушло 38 из 1 226 клиентов",
+  },
+  {
+    tone: "warning",
+    label: "Первый ответ поддержки",
+    value: "3,4 ч",
+    delta: "+40 мин — близко к SLA 4 ч",
+    meta: "Открыто 62 обращения",
+  },
+  {
+    tone: "neutral",
+    label: "Средний чек",
+    value: "38 900 ₽",
+    delta: "без изменений",
+    meta: "Оплачено 214 счетов",
+  },
+] as const;
 
 export default function CardVariantsExample() {
   return (
-    <div className={styles.grid}>
-      <Card.Root variant="mini">
-        <Card.Icon>
-          <Icon name="object.users" />
-        </Card.Icon>
-        <Card.Label>Активные сессии</Card.Label>
-        <Card.Value>1 248</Card.Value>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Header>
-          <Badge.Root color="green">SLA</Badge.Root>
-          <Card.Value>99,95%</Card.Value>
-        </Card.Header>
-        <Card.Description>Доступность API за 30 дней</Card.Description>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Выручка за месяц</Card.Label>
-        <Card.Value>4,2 млн ₽</Card.Value>
-        <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
-        <Card.Meta>Лидов 1 240 · сделок 186</Card.Meta>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Отток</Card.Label>
-        <Card.Value>3,1%</Card.Value>
-        <Card.Delta tone="danger">+0,6 п. п. за неделю</Card.Delta>
-        <Card.Meta>Ушло 38 из 1 226 клиентов</Card.Meta>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Первый ответ поддержки</Card.Label>
-        <Card.Value>3,4 ч</Card.Value>
-        <Card.Delta tone="warning">+40 мин — близко к SLA 4 ч</Card.Delta>
-        <Card.Meta>Открыто 62 обращения</Card.Meta>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Средний чек</Card.Label>
-        <Card.Value>38 900 ₽</Card.Value>
-        <Card.Delta>без изменений</Card.Delta>
-        <Card.Meta>Оплачено 214 счетов</Card.Meta>
-      </Card.Root>
-    </div>
+    <>
+      <div>
+        <div>
+          <Card.Root variant="mini">
+            <Card.Icon>
+              <Icon name="object.users" />
+            </Card.Icon>
+            <Card.Label>Активные сессии</Card.Label>
+            <Card.Value>1 248</Card.Value>
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            mini
+          </Typography>
+        </div>
+        <div>
+          <Card.Root variant="stat-trend">
+            <Card.Header>
+              <Badge.Root color="green">SLA</Badge.Root>
+              <Card.Value>99,95%</Card.Value>
+            </Card.Header>
+            <Card.Description>Доступность API за 30 дней</Card.Description>
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            stat-trend · Card.Header
+          </Typography>
+        </div>
+      </div>
+      <div>
+        {TRENDS.map((trend) => (
+          <div key={trend.tone}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>{trend.label}</Card.Label>
+              <Card.Value>{trend.value}</Card.Value>
+              <Card.Delta tone={trend.tone}>{trend.delta}</Card.Delta>
+              <Card.Meta>{trend.meta}</Card.Meta>
+            </Card.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              stat-trend · {trend.tone}
+            </Typography>
+          </div>
+        ))}
+      </div>
+    </>
   );
 }

package/src/components/chart-frame/COMPONENT.md

@@ -23,7 +23,7 @@ import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
 
 ## Anatomy
 ```
-ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series
+ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series, rows
 ├─ ChartFrame.Header         <div>; title column · actions
 │  ├─ ChartFrame.Title       <h3>; names the figure and the table
 │  ├─ ChartFrame.Description <p>; describes the figure
@@ -32,8 +32,8 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 │  └─ ChartFrame.Delta       <span>; change with a tone
 ├─ ChartFrame.Plot           <div>; fixed height, measured; Crossfade of plot / Skeleton / empty / error
 ├─ ChartFrame.Legend         <ul>; a toggle button per series: swatch · name · value
-├─ ChartFrame.Table          <table>; visually hidden data, ready state only
-└─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+├─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+└─ (data table)             <table> drawn by the root from `rows`; visually hidden, ready state only
 ```
 
 ## API
@@ -41,16 +41,17 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ChartFrame.Root
-`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series and which of them are hidden; every part reads them.
+`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series, the hidden ones and the data (`rows`); every part reads them.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `state` | `"ready" \| "loading" \| "empty" \| "error"` | `"ready"` | What the chart region shows: the plot, Skeletons while `loading`, the empty state, or the load error with a retry (`onRetry`). Changes cross-fade at the same height. |
 | `series` | `ChartFrameSeries[]` | `[]` | The series in drawing order, `{ id, label, color?, value? }`: legend entries, tooltip rows, table columns and `renderPlot` colors. `color` is a palette hue; `value` is the legend summary. |
+| `rows` | `ChartFrameRow[]` | — (required) | The chart's data, `{ label, values }` per point (`values` by series id, a missing one reads as «—»): a visually hidden table for screen readers in the `ready` state. |
 | `hiddenSeries` | `string[]` | — | Ids of the series turned off in the legend (controlled). |
 | `defaultHiddenSeries` | `string[]` | `[]` | Initially hidden series (uncontrolled). |
 | `onHiddenSeriesChange` | `(hiddenSeries: string[]) => void` | — | The legend turned a series on or off; gets the new list of hidden ids. |
-| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
+| `formatValue` | `(value: number) => string` | Russian digit groups | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
 | `onRetry` | `() => void \| Promise<void>` | — | Loads the data again from the `error` state and shows the retry button; a returned Promise keeps the button loading until it settles. |
 | `labels` | `Partial<ChartFrameLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other figure attributes. |
@@ -104,7 +105,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number \| "fill"` | `240, 160 under 30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
+| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
@@ -127,14 +128,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `point` | `{ x: number; y: number } \| null` | — | A point in `renderPlot` coordinates (the pointer, or the point the arrows reached): the tooltip floats right of it, left only without room; `null` hides it. Floating, it is `aria-hidden`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
-### ChartFrame.Table
-`ref` → `HTMLTableElement`. The chart's data as a visually hidden table for screen readers, named by the title: a row per point, a column per shown series. Present only in the `ready` state. A visible table is a `DataTable`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `rows` | `ChartFrameTableRow[]` | — (required) | `{ label, values }` per point; `values` by series id, a missing one reads as «—». |
-| `…rest` | `HTMLAttributes<HTMLTableElement>` | — | `className` and the other table attributes. |
-
 ## Variants
 
 ### Delta tone
@@ -165,26 +158,28 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; `ChartFrame.Table` present |
+| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; the data table present |
 | loading | `state="loading"` | `data-state="loading"` and `aria-busy` on the root; Skeletons of the value, the plot and the legend values; the title, actions and legend names stay |
 | empty | `state="empty"` | `data-state="empty"` on the root; EmptyPage `compact` (`role="status"`, `labels.empty`) in the plot's place |
 | error | `state="error"` | `data-state="error"` on the root; the value is a muted dash; EmptyPage `compact` `tone="danger"` (`role="alert"`, `labels.error`) with the retry button when `onRetry` is set; it waits for a returned Promise |
 | swap | `state` changes | the plot region cross-fades (Crossfade, the height stays); the value and legend values fade in from their Skeletons |
-| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"`, `data-hidden` on the entry: it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
+| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"` on the entry (the style hangs on it): it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
 | hover / press | pointer on a legend entry | hover fill (hover-capable pointers only), press scale |
 
 ## Layout & spacing
 - The root takes its container's width, card padding and radius, zones 16 px apart; on the page it carries the raised whisper, nested in a surface it is a flat tile one step deeper.
 - The header puts the title and the description in the first column and the actions at the end; under 24rem of panel width the actions drop under the description.
 - The plot is 240 px high (160 px under 30rem of panel width) unless `height` is set; it never changes height between states.
-- Legend entries wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
+- Legend entries are chips one `xs` control high and wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
 - `ChartFrame.Tooltip` is the floating layer of the ladder with the point's label over rows of swatch · series name · value. With `point` the kit places it like every anchored layer (`usePosition`): right of the point at its height, on the left only where the right has no room in the viewport, inside the viewport, following the plot on scroll. Without `point` the chart library positions it (Recharts `content`).
-- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted`; a class of your own still wins.
-- Works from 320 px; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
+- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted` (the plot area carries the caption role); a class of your own still wins.
+- Works in a 320 px column; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | The header actions, then the legend as one stop (the entry focused last), then the chart's own focusable marks. |
@@ -193,12 +188,14 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `Enter` · `Space` | Shows or hides the entry's series. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The root is a `<figure>` named by `ChartFrame.Title` and described by `ChartFrame.Description`; `aria-busy` while loading.
 - A legend entry is a button with `aria-pressed` — pressed while its series is shown; the legend list is named by `labels.legend`. A hidden series differs by the swatch's shape (a ring) and a quiet name, never by color alone.
-- `ChartFrame.Table` is a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
+- The root renders `rows` as a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
 - A `ChartFrame.Tooltip` with `point` is `aria-hidden` and passive (no focus, no presses; `Escape` hides it until the point moves): it repeats what the plot speaks — give a focusable plot an `aria-valuetext`, like the slider in the tooltip example.
 - The empty state is `role="status"`, the error `role="alert"` with the retry button.
-- The drawing is the library's: hide a decorative SVG (`aria-hidden`) when `ChartFrame.Table` carries the data; marks you make focusable need their own `aria-label`.
+- The drawing is the library's: hide a decorative SVG (`aria-hidden`), the data table carries the data; marks you make focusable need their own `aria-label`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -209,7 +206,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `error` | `"Не удалось загрузить график"` | Title of the error state. |
 | `retry` | `"Повторить"` | Text of the retry button in the error state. |
 | `legend` | `"Ряды графика"` | Accessible name of the legend. |
-| `category` | `"Период"` | Header of the first column of `ChartFrame.Table` (what a row is). |
+| `category` | `"Период"` | Header of the first column of the data table (what a row is). |
 
 ## Examples
 | Example | Shows |
@@ -217,14 +214,14 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | [overview.tsx](examples/overview.tsx) | Revenue by month as a hand-drawn SVG line chart in a dashboard panel: the headline with its change, a period switch, a legend that turns series off and a table for screen readers — `series`, `formatValue`, `renderPlot`. |
 | [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. |
 | [fill-height.tsx](examples/fill-height.tsx) | Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. |
-| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
+| [states.tsx](examples/states.tsx) | Loading, data, empty and error in the plot's place at one panel size; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | Lead sources with totals in the legend; the hidden series live in the page state and one button shows them all again — `hiddenSeries`, `onHiddenSeriesChange`. |
-| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. |
+| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `height`, `rows`. |
 
 ### With a chart library
 ```tsx
 // Recharts: explicit sizes from renderPlot, the kit tooltip body in `content`.
-<ChartFrame.Root series={SERIES} formatValue={formatRubles}>
+<ChartFrame.Root series={SERIES} rows={tableRows} formatValue={formatRubles}>
   <ChartFrame.Header>
     <ChartFrame.Title>Выручка</ChartFrame.Title>
   </ChartFrame.Header>
@@ -249,7 +246,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
     )}
   />
   <ChartFrame.Legend />
-  <ChartFrame.Table rows={tableRows} />
 </ChartFrame.Root>
 ```
 ECharts and Chart.js take the same `width`, `height` and `series[i].color`; their HTML tooltips are strings, so use their own tooltip there or `ChartFrame.Tooltip` with `point` from their hover event.
@@ -261,9 +257,9 @@ ECharts and Chart.js take the same `width`, `height` and `series[i].color`; thei
 - An empty chart with axes and no data → `state="empty"`.
 - A legend for a single series → the title already names it; leave `ChartFrame.Legend` out.
 - Two y-axes of different measures in one frame → two ChartFrames side by side.
-- The data only in the drawing → add `ChartFrame.Table`; screen readers cannot read a plot.
+- `rows` that leave points out of the drawing → pass every point the plot draws; screen readers read the table, not the plot.
 - A hand-drawn chart with its tooltip placed by hand (a `foreignObject`, clamped coordinates) → `ChartFrame.Tooltip` with `point`: it flips only when out of room and never jumps at the middle.
 
 ## Related
-- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline)
+- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline; its floating panel scrolls in a [ScrollContainer](../scroll-container/COMPONENT.md)), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Sparkline](../sparkline/COMPONENT.md), [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)