prime-ui-kit 0.14.0 → 0.16.0

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

@@ -6,26 +6,6 @@
   gap: var(--prime-space-5);
 }
 
-/* A colored strip: buttons with tone="inherit" take its text color. */
-.accentHost,
-.inverseHost {
-  display: flex;
-  align-items: center;
-  gap: var(--prime-space-2);
-  padding: var(--prime-space-2) var(--prime-space-2) var(--prime-space-2) var(--prime-space-4);
-  border-radius: var(--prime-radius-l);
-}
-
-.accentHost {
-  background: var(--prime-color-accent-default);
-  color: var(--prime-color-accent-fg);
-}
-
-.inverseHost {
-  background: var(--prime-color-bg-inverse);
-  color: var(--prime-color-text-inverse);
-}
-
 /* A row of round buttons. */
 .row {
   display: flex;
@@ -34,7 +14,14 @@
   gap: var(--prime-space-3);
 }
 
-/* A listing cover with its round actions at the top end. */
+/* align.tsx: a column of full-width actions, as wide as a side panel. */
+.column {
+  display: grid;
+  gap: var(--prime-space-1);
+  width: min(100%, var(--prime-layout-form-width-s));
+}
+
+/* A listing cover with its round actions at the top end and a glass action at the bottom. */
 .cover {
   position: relative;
 }
@@ -43,12 +30,14 @@
   position: absolute;
   inset-block-start: var(--prime-space-2);
   inset-inline-end: var(--prime-space-2);
-  z-index: 1;
+  z-index: var(--prime-z-raised);
   display: flex;
   gap: var(--prime-space-2);
 }
 
-.hostText {
-  flex: 1;
-  min-width: 0;
+.coverGallery {
+  position: absolute;
+  inset-block-end: var(--prime-space-2);
+  inset-inline-start: var(--prime-space-2);
+  z-index: var(--prime-z-raised);
 }

package/dist/skill/reference/components/button/examples/label-morph.tsx

@@ -1,4 +1,4 @@
-/** A new label flows into the button letter by letter while the width glides: save, then saved; a step flow that turns green once paid — `children`, `loading`, `tone`. */
+/** A new label flows into the button letter by letter while the width glides: save, then saved; a step flow that turns green once paid — `loading`, `tone`. */
 import { Button } from "prime-ui-kit";
 import * as React from "react";
 

package/dist/skill/reference/components/button/examples/on-colored-host.tsx

@@ -1,28 +1,28 @@
-/** Actions on a colored strip take its text color: a ghost icon close and a soft action — `tone="inherit"`. */
-import { Button, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Actions on a solid banner take its text color: a soft action and a ghost one beside it — `tone="inherit"`. */
+import { Banner, Button } from "prime-ui-kit";
 
 const HOSTS = [
-  { className: styles.accentHost, text: "Доступна новая версия редактора" },
-  { className: styles.inverseHost, text: "Режим только для чтения" },
-];
+  { tone: "accent", text: "Доступна новая версия редактора", action: "Обновить", later: "Позже" },
+  { tone: "neutral", text: "Режим только для чтения", action: "Запросить доступ", later: "Скрыть" },
+] as const;
 
 export default function ButtonOnColoredHostExample() {
   return (
     <>
-      {HOSTS.map(({ className, text }) => (
-        <div key={text} className={className}>
-          <span className={styles.hostText}>{text}</span>
-          <Button.Root variant="soft" tone="inherit" size="s">
-            Обновить
-          </Button.Root>
-          <Button.Root variant="ghost" tone="inherit" size="s" aria-label="Закрыть">
-            <Button.Icon>
-              <Icon name="action.close" />
-            </Button.Icon>
-          </Button.Root>
-        </div>
+      {HOSTS.map(({ tone, text, action, later }) => (
+        <Banner.Root key={text} variant="solid" tone={tone}>
+          <Banner.Content>
+            <Banner.Title>{text}</Banner.Title>
+          </Banner.Content>
+          <Banner.Actions>
+            <Button.Root variant="soft" tone="inherit">
+              {action}
+            </Button.Root>
+            <Button.Root variant="ghost" tone="inherit">
+              {later}
+            </Button.Root>
+          </Banner.Actions>
+        </Banner.Root>
       ))}
     </>
   );

package/dist/skill/reference/components/button/examples/over-media.tsx

@@ -1,4 +1,4 @@
-/** Buttons over a listing's cover stand on the media shade; a failed upload turns its disk danger — `variant`, `shape`, `tone`. */
+/** Buttons over a listing's cover: round actions on the media shade, a labelled one on glass; a failed upload turns its disk danger — `variant`, `shape`, `tone`. */
 import { Button, Icon, Thumbnail } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -31,6 +31,12 @@ export default function ButtonOverMediaExample() {
           </Button.Icon>
         </Button.Root>
       </div>
+      <Button.Root variant="glass" tone="neutral" className={styles.coverGallery}>
+        <Button.Icon>
+          <Icon name="object.image" />
+        </Button.Icon>
+        Все 12 фото
+      </Button.Root>
     </div>
   );
 }

package/dist/skill/reference/components/button/examples/toggle.tsx

@@ -1,17 +1,9 @@
-/** A toggle in a toolbar: the favourite mark turns the button on with the selected fill and back off — `pressed`. */
+/** A toggle in a toolbar keeps its own state: the favourite mark turns the button on with the selected fill and back off — `defaultPressed`. */
 import { Button, Icon } from "prime-ui-kit";
-import * as React from "react";
 
 export default function ButtonToggleExample() {
-  const [favorite, setFavorite] = React.useState(true);
-
   return (
-    <Button.Root
-      variant="ghost"
-      tone="neutral"
-      pressed={favorite}
-      onClick={() => setFavorite((value) => !value)}
-    >
+    <Button.Root variant="ghost" tone="neutral" defaultPressed>
       <Button.Icon>
         <Icon name="status.favorite" />
       </Button.Icon>

package/dist/skill/reference/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.
@@ -152,12 +158,12 @@ Group attributes: `data-size`, `data-orientation="vertical"` (only when vertical
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Related actions joined into one bar with a group name — `aria-label`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier, 28 to 48 px high, set once on the root — `size`. |
-| [states.tsx](examples/states.tsx) | A plain segment, a toggled one and a disabled one — `pressed`, `disabled`. |
+| [states.tsx](examples/states.tsx) | A plain segment, a toggled one, a disabled one and a group in error — `pressed`, `disabled`, `invalid`. |
 | [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`. |
-| [in-form.tsx](examples/in-form.tsx) | A task form: the priority toggles are a labelled field checked on submit, and native submit and reset segments sit in one group — `label`, `required`, `error`, `type`. |
+| [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
 - `size` on each `ButtonGroup.Item` → set `size` once on `Root`.
@@ -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/dist/skill/reference/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/dist/skill/reference/components/button-group/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** A task form: the priority toggles are a labelled field checked on submit, and native submit and reset segments sit in one group — `label`, `required`, `error`, `type`. */
+/** 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`. */
 import { ButtonGroup, Input } from "prime-ui-kit";
 import * as React from "react";
 
@@ -10,8 +10,11 @@ const PRIORITIES = [
   { value: "high", label: "Высокий" },
 ];
 
+const REMINDERS = ["За час", "За день"];
+
 export default function ButtonGroupInFormExample() {
   const [priority, setPriority] = React.useState("");
+  const [reminder, setReminder] = React.useState("");
   const [error, setError] = React.useState<string>();
 
   return (
@@ -24,6 +27,7 @@ export default function ButtonGroupInFormExample() {
       }}
       onReset={() => {
         setPriority("");
+        setReminder("");
         setError(undefined);
       }}
     >
@@ -32,7 +36,12 @@ export default function ButtonGroupInFormExample() {
           <Input.Field name="title" defaultValue="Подготовить акт сверки для «Северного ветра»" />
         </Input.Wrapper>
       </Input.Root>
-      <ButtonGroup.Root label="Приоритет" required error={error}>
+      <ButtonGroup.Root
+        label="Приоритет"
+        required
+        hint="Высокий поднимает задачу в начало списка"
+        error={error}
+      >
         {PRIORITIES.map((option) => (
           <ButtonGroup.Item
             key={option.value}
@@ -46,6 +55,17 @@ export default function ButtonGroupInFormExample() {
           </ButtonGroup.Item>
         ))}
       </ButtonGroup.Root>
+      <ButtonGroup.Root label="Напомнить" optional>
+        {REMINDERS.map((option) => (
+          <ButtonGroup.Item
+            key={option}
+            pressed={reminder === option}
+            onClick={() => setReminder(reminder === option ? "" : option)}
+          >
+            {option}
+          </ButtonGroup.Item>
+        ))}
+      </ButtonGroup.Root>
       <ButtonGroup.Root aria-label="Создать задачу или очистить форму">
         <ButtonGroup.Item type="submit">Создать</ButtonGroup.Item>
         <ButtonGroup.Item type="reset">Очистить</ButtonGroup.Item>

package/dist/skill/reference/components/button-group/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A plain segment, a toggled one and a disabled one — `pressed`, `disabled`. */
+/** A plain segment, a toggled one, a disabled one and a group in error — `pressed`, `disabled`, `invalid`. */
 import { ButtonGroup, Typography } from "prime-ui-kit";
 
 export default function ButtonGroupStatesExample() {
@@ -28,6 +28,15 @@ export default function ButtonGroupStatesExample() {
           disabled
         </Typography>
       </div>
+      <div>
+        <ButtonGroup.Root aria-label="Статус задачи" invalid>
+          <ButtonGroup.Item>Открыта</ButtonGroup.Item>
+          <ButtonGroup.Item>В работе</ButtonGroup.Item>
+        </ButtonGroup.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          invalid
+        </Typography>
+      </div>
     </div>
   );
 }

package/dist/skill/reference/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,14 +204,15 @@ 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`. |
-| [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 and a reference line — `variant`, `Card.Delta`, `Card.Meta`. |
+| [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`. |
 | [interactive.tsx](examples/interactive.tsx) | Whole cards as links to their reports: one tab stop each, a lift on hover, a press and the focus ring — `asChild`. |
 | [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
 | [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
 | [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. |
+| [screen.tsx](examples/screen.tsx) | A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.

package/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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>
   );
 }