prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/components/example-frame/COMPONENT.md

@@ -21,9 +21,11 @@ import { ExampleFrame } from "prime-ui-kit";
 
 ## Anatomy
 ```
-ExampleFrame               frame: toolbar + preview stage or code pane
+ExampleFrame               frame: toolbar + the pane (a region swap between preview and code)
 ├─ (toolbar)               SegmentedControl Preview / Code, theme Button, copy Button, device SegmentedControl
-└─ (stage)                 children, laid out by previewLayout
+└─ (pane)
+   ├─ (stage)              preview: a sideways ScrollContainer with children, laid out by previewLayout
+   └─ (code pane)          code: a focusable ScrollContainer section with the CodeBlock
 ```
 
 ## API
@@ -36,7 +38,7 @@ ExampleFrame               frame: toolbar + preview stage or code pane
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `code` | `string` | — (required) | Source shown on the code pane (TS / TSX highlighting via CodeBlock) and copied by the copy button. |
-| `previewLayout` | `"default" \| "stack" \| "stack-narrow" \| "full" \| "row" \| "matrix"` | `"default"` | How the preview lays out its children, so snippets need no wrapper divs (see Variants). |
+| `previewLayout` | `"default" \| "stack" \| "stack-narrow" \| "full" \| "row" \| "matrix" \| "matrix-wide"` | `"default"` | How the preview lays out its children, so snippets need no wrapper divs (see Variants). |
 | `viewport` | `"desktop" \| "tablet" \| "mobile"` | — | Preview width (controlled). |
 | `defaultViewport` | `"desktop" \| "tablet" \| "mobile"` | `"desktop"` | Initial preview width (uncontrolled). |
 | `onViewportChange` | `(viewport: "desktop" \| "tablet" \| "mobile") => void` | — | Called with the new width from the device switch. |
@@ -55,11 +57,12 @@ ExampleFrame               frame: toolbar + preview stage or code pane
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `default` | single block centered in the stage | one component | yes |
-| `stack` | centered column, gap 16, children capped at 640px (`10 × --prime-space-16`) so `width: 100%` blocks stay centered; a child with `fullWidth` or a table stretches | several blocks one under another | |
+| `stack` | centered column, gap 16, children capped at the stack measure (`10 × --prime-space-16`) so `width: 100%` blocks stay centered; a child with `fullWidth` or a table stretches | several blocks one under another | |
 | `stack-narrow` | column, children capped at `7 × --prime-space-16` and centered | forms and narrow columns | |
 | `full` | column, gap 16, every child takes the whole stage width | page structure: app shells, page regions | |
 | `row` | centered wrapping row, gap 12, extra vertical padding | a few buttons or controls side by side | |
-| `matrix` | centered grid of labelled cells: each direct child is a row, its children are cells (specimen above its caption); columns (up to 12) line up across rows, are never narrower than their content and grow to 320 / 160 / 128px for 1 / 2 / 3+ columns, so width-less specimens (Slider, `width: 100%` blocks) get a real cell; scrolls when wider than the stage | variant, size and state matrices | |
+| `matrix` | centered grid of labelled cells: each direct child is a row, its children are cells (specimen above its caption); columns (up to 12) line up across rows, are never narrower than their content and grow to 320 / 160 / 128px for 1 / 2 / 3+ columns, so width-less specimens (Slider, `width: 100%` blocks) get a real cell; centered vertically too; when the grid is wider than the stage (a phone frame) each row wraps its cells, centered (`data-matrix-wrap` on the stage) | variant, size and state matrices | |
+| `matrix-wide` | the same rows of labelled cells, one cell under another, each as wide as the stage up to the stack measure (`10 × --prime-space-16`), the caption under the specimen | matrices of specimens as wide as their container: tabs, toolbars, tables | |
 
 ### viewport
 | Value | Looks like | Use when | Default |
@@ -74,12 +77,17 @@ ExampleFrame               frame: toolbar + preview stage or code pane
 | `light` | stage and code pane in the light theme | default | yes |
 | `dark` | stage and code pane in the dark theme (`data-theme="dark"`), switched without color transitions | checking dark mode | |
 
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `showThemeToggle` | the light / dark button in the toolbar; off, the frame keeps its `colorScheme` and shows no toggle | a page that owns the theme of its frames, or a demo that only reads in one scheme | on |
+
 Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above its host) with a `border-subtle` hairline and `radius-xl`; the stage and code pane are wells with `radius-l` (16 − 4 padding = 12). Both wells carry `data-theme`, so each is a page of its own: layer 0 of its scheme, and surfaces in the example count from there.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| pane | toolbar switch (internal, starts at Preview) | preview stage or code pane is rendered; the device switch shows only with the preview |
+| pane | toolbar switch (internal, starts at Preview) | preview stage or code pane is rendered; the switch cross-fades the two and glides the height (`internal/RegionSwap`); the device switch shows only with the preview |
 | viewport | `viewport` / `defaultViewport` | `data-viewport` on the preview viewport |
 | theme | `colorScheme` / `defaultColorScheme` | `data-theme` on the stage and code pane |
 | layout | `previewLayout` | `data-preview-layout` on the stage |
@@ -87,20 +95,24 @@ Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above
 
 ## Layout & spacing
 - The frame is `max-width: 100%`; long code lines scroll inside the code pane instead of widening the page. The code pane is at most `min(512px, 70vh)` high and scrolls both ways.
-- The stage is at least 160 high with `--prime-space-6` / `--prime-space-4` padding; content wider than it is clipped (`matrix` scrolls instead).
-- The toolbar wraps below 40rem of frame width; below 25rem the visible device labels are hidden (icons stay, each option keeps a screen-reader name).
+- The stage is at least 160 high with `--prime-space-6` / `--prime-space-4` padding; content wider than it scrolls inside it under edge shadows (`matrix` wraps its rows instead).
+- The toolbar wraps when it does not fit on one line; narrower than 8 × `--prime-space-20` (measured on the toolbar) the two switches stack, each across the toolbar with `fullWidth` segments. When even then the device titles do not fit, the device switch drops them by itself (icons stay, each option keeps its name).
 - The device width switches at once: `max-width` is layout, so it does not animate.
 - Stack frames one per demo block; spacing between blocks comes from the page.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the switches, the theme and copy buttons and the code pane. |
 | `ArrowLeft` · `ArrowRight` | Choose the pane or the width inside a switch (SegmentedControl). |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The pane and device switches are radio groups named by `labels.paneSwitch` and `labels.viewportSwitch`.
 - The theme and copy buttons are icon-only Buttons with `aria-label`; after copying the label becomes `labels.copied`.
 - The code pane is a focusable `section` with `aria-label` from `labels.codeRegion`, so keyboard users can scroll it.
@@ -128,7 +140,8 @@ Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A live example next to its source, with the pane, width, theme and copy controls — `code`, `previewLayout`. |
-| [controlled.tsx](examples/controlled.tsx) | Frames of one page share the preview width and theme: the parent owns both — `viewport`, `colorScheme`. |
+| [initial-view.tsx](examples/initial-view.tsx) | A matrix frame that opens at phone width in the dark theme with no theme switch and counts code copies — `previewLayout`, `defaultViewport`, `defaultColorScheme`, `showThemeToggle`, `onCopy`. |
+| [controlled.tsx](examples/controlled.tsx) | Frames of one page share the preview width and theme: the parent owns both — `viewport`, `onViewportChange`, `colorScheme`. |
 
 ## Mistakes
 - Wrapping several preview items in an extra `div` with flex styles → use `previewLayout="row"` or `"stack"`.
@@ -136,5 +149,5 @@ Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above
 - Expecting `colorScheme` to change the page theme → it only themes the frame's stage and code pane.
 
 ## Related
-- **Built from:** [SegmentedControl](../segmented-control/COMPONENT.md), [Button](../button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), Icon (`view.*`, `viewport.*`, `theme.*`, `action.copy`, `action.check`)
+- **Built from:** [SegmentedControl](../segmented-control/COMPONENT.md), [Button](../button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the stage, the code pane), Icon (`view.*`, `viewport.*`, `theme.*`, `action.copy`, `action.check`), [AppShell](../../layout/app-shell/COMPONENT.md) (its boundary: a header or a Sidebar in the preview stays in it); `internal/RegionSwap` (the pane switch)
 - **See also:** [Card](../card/COMPONENT.md)

package/dist/skill/reference/components/example-frame/examples/controlled.tsx

@@ -1,8 +1,8 @@
-/** Frames of one page share the preview width and theme: the parent owns both — `viewport`, `colorScheme`. */
+/** Frames of one page share the preview width and theme: the parent owns both — `viewport`, `onViewportChange`, `colorScheme`. */
 import { Button, ExampleFrame, type ExampleFrameViewport, Input } from "prime-ui-kit";
 import * as React from "react";
 
-const BUTTON_CODE = "<Button.Root>Сохранить</Button.Root>";
+const BUTTON_CODE = "<Button.Root>Создать счёт</Button.Root>";
 const INPUT_CODE = `<Input.Root label="Рабочая почта">
   <Input.Wrapper>
     <Input.Field placeholder="name@company.ru" />
@@ -22,7 +22,7 @@ export default function ExampleFrameControlledExample() {
         colorScheme={scheme}
         onColorSchemeChange={setScheme}
       >
-        <Button.Root>Сохранить</Button.Root>
+        <Button.Root>Создать счёт</Button.Root>
       </ExampleFrame>
       <ExampleFrame
         code={INPUT_CODE}

package/dist/skill/reference/components/example-frame/examples/initial-view.tsx

@@ -0,0 +1,44 @@
+/** A matrix frame that opens at phone width in the dark theme with no theme switch and counts code copies — `previewLayout`, `defaultViewport`, `defaultColorScheme`, `showThemeToggle`, `onCopy`. */
+import { Badge, ExampleFrame, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const STATUSES = [
+  { color: "gray", label: "Черновик" },
+  { color: "blue", label: "На ревью" },
+  { color: "green", label: "Опубликован" },
+] as const;
+
+const CODE = STATUSES.map(
+  ({ color, label }) => `<Badge.Root color="${color}">${label}</Badge.Root>`,
+).join("\n");
+
+export default function ExampleFrameInitialViewExample() {
+  const [copies, setCopies] = React.useState(0);
+
+  return (
+    <>
+      <ExampleFrame
+        code={CODE}
+        previewLayout="matrix"
+        defaultViewport="mobile"
+        defaultColorScheme="dark"
+        showThemeToggle={false}
+        onCopy={() => setCopies((count) => count + 1)}
+      >
+        <div>
+          {STATUSES.map(({ color, label }) => (
+            <div key={color}>
+              <Badge.Root color={color}>{label}</Badge.Root>
+              <Typography as="span" variant="caption" tone="muted">
+                {color}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </ExampleFrame>
+      <Typography variant="body-s" tone="secondary">
+        Код скопирован: {copies}
+      </Typography>
+    </>
+  );
+}

package/dist/skill/reference/components/field-list/COMPONENT.md

@@ -39,7 +39,7 @@ A leaf: rows come from `value` through `renderItem`, which returns one element p
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### FieldList
-Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editable list of records of one shape: column headings once, a row of fields per record (`<ol>`), remove per row, add under the rows; rows stack under 480 px.
+Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editable list of records of one shape: column headings once, a row of fields per record (`<ol>`), remove per row, add under the rows; rows stack in a container under 30rem.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -61,7 +61,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | `hint` | `ReactNode` | — | Help text under the list; hidden while `error` shows. |
 | `error` | `ReactNode` | — | A problem of the list as a whole («Добавьте хотя бы одну позицию»); a field's own error goes on that field. |
 | `disabled` | `boolean` | `false` | Disables every field, handle and button; a disabled `Fieldset` around it sets it too. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the headings, buttons and the kit fields that read the host tier. Without it the host tier, else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the headings, buttons and the kit fields that read the host tier. Without it the host tier, else `m`. |
 | `labels` | `Partial<FieldListLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `data-*` and the other attributes of the field frame `<div>` (field-root rule: `className`, `ref` and the rest → frame, `id` → control). |
 
@@ -98,18 +98,21 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | pinned row | `getLocked(item)` | `data-locked="true"` on the `<li>`; a lock, no remove button |
 | invalid | `error` (the list), a field's own `error` | the list's message under the add row; a field's under the field in its row |
 | disabled | `disabled` (or a disabled Fieldset) | `data-disabled="true"` on the frame; fields, handles and buttons disabled through the kit's disabled context |
-| stacked | container narrower than 480 px | heading row hidden, each row's fields in one column with their labels shown |
+| stacked | container narrower than 30rem | heading row hidden, each row's fields in one column with their labels shown |
+| rows come and go | the add button, a remove button, a new `value` | a row the data adds rises in once (`enterMotion`), a removed one closes up in place and the rows below glide up (`listPresence`); the heading row rises in with the first row and closes up with the last (`partPresence`); the first render stays still |
 
 ## Layout & spacing
 - Rows 12 apart (`--prime-space-3`); columns 12 apart; the heading row sits at the tier's label gap above the first row.
-- Every row and the heading row share one track list: `[lead] [columns] [end]`; the lead fits the grip, the end fits a remove button of the tier.
+- Every row and the heading row share one track list: `[lead] [columns] [end]`; the lead is one `xs` control wide (the grip or the lock), the end fits a remove button of the tier.
 - The handle, the lock and the remove button stand on the middle of the first line of fields, so a field's error under it grows the row downwards only.
 - The add button lines up with the first column of fields, 12 under the last row.
-- Under 480 px of its own width (a container query): rows stack, fields 16 apart inside a row, rows 24 apart.
+- Under 30rem of its own width (a container query): rows stack, fields 16 apart inside a row, rows 24 apart.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the fields of a row, then to its remove button and on. |
@@ -117,11 +120,14 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | `Alt + ↑` · `Alt + ↓` | With `reorderable`, moves the row up or down (from its handle). |
 
 ### ARIA
-- The rows are an `<ol>` named by the list `label` (`aria-labelledby`); the list gives each row its position.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- The rows are an `<ol role="list">` named by the list `label` (`aria-labelledby`); the list gives each row its position, and the role keeps it under `list-style: none` in WebKit.
 - The heading row is `aria-hidden`: each field in a cell carries its column heading as its own label, read but not shown on wide rows.
+- The `<ol>` is described by the list's `hint` and `error` (`aria-describedby`), which speak for every row.
 - In a narrow container the heading row goes and each field's label shows above it.
 - The remove button is «Удалить {row}», the handle «Переместить {row}»: the row's name from `getLabel`, else its number.
-- A pinned row has a lock in place of the handle and no remove button; without `reorderable` the lock is an image named «Закреплена».
+- A pinned row has a lock in place of the handle and no remove button; without `reorderable` the lock is Dnd's lock (an image named «Закреплена»).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -144,10 +150,11 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | [locked.tsx](examples/locked.tsx) | Specs of a plan on one line each: an icon picker and a color swatch take compact columns, the first three specs are pinned with a lock and the rest reorder below them — `getLocked`, `width`, `reorderable`. |
 | [base-row.tsx](examples/base-row.tsx) | A plan price and its changes by month in one table: the base price is the first, pinned row, each change is a row with its month and its price, and the unit sits in the field, not in a heading — `getLocked`, `width`. |
 | [limits.tsx](examples/limits.tsx) | Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. |
-| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. |
+| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. |
 | [states.tsx](examples/states.tsx) | The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the lines: it sums them under the list and puts the saved lines back on reset — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. |
+| [screen.tsx](examples/screen.tsx) | A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. |
 
 ## Mistakes
 - A `label` above every field of every row («Иконка», «Параметр», «Значение» four times) → a FieldList: the headings stand once, the fields take them as hidden labels.
@@ -160,5 +167,5 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 - A grip, a remove button and an add button drawn by hand around a `.map()` of fields → FieldList.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (add, remove), [Dnd](../dnd/COMPONENT.md) (`reorderable`: `Dnd.Sortable`, `Dnd.Handle`), [Label](../label/COMPONENT.md) (headings), `Icon` (lock), the field frame (label, hint, error)
+- **Built from:** [Button](../button/COMPONENT.md) (add, remove), [Dnd](../dnd/COMPONENT.md) (`reorderable`: `Dnd.Sortable`, `Dnd.Handle`; the lock of a pinned row), [Label](../label/COMPONENT.md) (headings), the field frame (label, [Hint](../hint/COMPONENT.md) for the hint and error), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Input](../input/COMPONENT.md), [Select](../select/COMPONENT.md) (icon-only trigger), [ColorPicker](../color-picker/COMPONENT.md) (`ColorPresets`), [Fieldset](../fieldset/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/dist/skill/reference/components/field-list/examples/errors.tsx

@@ -1,4 +1,4 @@
-/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. */
+/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. */
 import { Button, FieldList, type FieldListColumn, Input } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,7 +6,10 @@ import styles from "./examples.module.css";
 
 type Contact = { id: string; role: string; phone: string };
 
-const COLUMNS: FieldListColumn[] = [{ label: "Должность" }, { label: "Телефон", width: "m" }];
+const COLUMNS: FieldListColumn[] = [
+  { label: "Должность", required: true },
+  { label: "Телефон", width: "m", required: true },
+];
 
 const CONTACTS: Contact[] = [
   { id: "buyer", role: "Закупщик", phone: "+7 912 404-18-20" },

package/dist/skill/{patterns/record-editor.tsx → reference/components/field-list/examples/screen.tsx}

@@ -1,4 +1,4 @@
-/** A record editor: a plan's name, its specs, selling points and prices in one form — repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row. */
+/** A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. */
 import {
   Button,
   Card,
@@ -15,7 +15,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./record-editor.module.css";
+import styles from "./screen.module.css";
 
 type Spec = {
   id: string;
@@ -25,7 +25,6 @@ type Spec = {
   color: string;
   pinned?: boolean;
 };
-type Point = { id: string; text: string };
 type Period = { id: string; from: string; price: string; base?: boolean };
 
 const SPEC_COLUMNS: FieldListColumn[] = [
@@ -73,14 +72,6 @@ const SPECS: Spec[] = [
   { id: "sso", icon: "object.key", name: "Вход через SSO", value: "SAML, OIDC", color: "#14b8a6" },
 ];
 
-const POINT_COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
-
-const POINTS: Point[] = [
-  { id: "space", text: "Вся команда в одном пространстве" },
-  { id: "files", text: "Документы и вложения без ограничений по типу" },
-  { id: "api", text: "API и вебхуки для своих интеграций" },
-];
-
 const PRICE_COLUMNS: FieldListColumn[] = [{ label: "Действует" }, { label: "Цена", width: "m" }];
 
 const MONTHS = [
@@ -104,10 +95,9 @@ const SETUP_FEE = [
 const SAVE_MS = 900;
 const SAVED_MS = 2000;
 
-export default function RecordEditorPattern() {
+export default function FieldListScreenExample() {
   const formId = React.useId();
   const [specs, setSpecs] = React.useState(SPECS);
-  const [points, setPoints] = React.useState(POINTS);
   const [periods, setPeriods] = React.useState(PERIODS);
   const [nameError, setNameError] = React.useState<string>();
   const [saving, setSaving] = React.useState(false);
@@ -242,36 +232,6 @@ export default function RecordEditorPattern() {
           </Card.Root>
         </PageContent.Section>
 
-        <PageContent.Section layout="aside" label="Преимущества">
-          <Card.Root variant="panel">
-            <Card.Body>
-              <FieldList
-                aria-label="Преимущества"
-                disabled={saving}
-                columns={POINT_COLUMNS}
-                reorderable
-                max={6}
-                value={points}
-                onValueChange={setPoints}
-                getId={(point) => point.id}
-                getLabel={(point) => point.text}
-                createItem={() => ({ id: crypto.randomUUID(), text: "" })}
-                addLabel="Добавить преимущество"
-                renderItem={(point, row) => (
-                  <Input.Root>
-                    <Input.Wrapper>
-                      <Input.Field
-                        value={point.text}
-                        onChange={(event) => row.update({ text: event.target.value })}
-                      />
-                    </Input.Wrapper>
-                  </Input.Root>
-                )}
-              />
-            </Card.Body>
-          </Card.Root>
-        </PageContent.Section>
-
         <PageContent.Section layout="aside" label="Стоимость">
           <Card.Root variant="panel">
             <Card.Body className={styles.groups}>

package/dist/skill/reference/components/field-list/examples/sizes.tsx

@@ -1,5 +1,5 @@
 /** Every tier: the headings, the fields, the handle and the buttons follow the list's size — `size`. */
-import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import { FieldList, type FieldListColumn, Input, Typography } from "prime-ui-kit";
 
 type Contact = { id: string; name: string; phone: string };
 
@@ -11,32 +11,38 @@ const CONTACTS: Contact[] = [{ id: "buyer", name: "Анна Лебедева", p
 
 export default function FieldListSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <FieldList
-          key={size}
-          size={size}
-          label={size}
-          columns={COLUMNS}
-          defaultValue={CONTACTS}
-          getId={(contact) => contact.id}
-          getLabel={(contact) => contact.name}
-          renderItem={(contact) => (
-            <>
-              <Input.Root>
-                <Input.Wrapper>
-                  <Input.Field defaultValue={contact.name} />
-                </Input.Wrapper>
-              </Input.Root>
-              <Input.Root>
-                <Input.Wrapper>
-                  <Input.Field type="tel" defaultValue={contact.phone} />
-                </Input.Wrapper>
-              </Input.Root>
-            </>
-          )}
-        />
+        <div key={size}>
+          <div>
+            <FieldList
+              size={size}
+              label="Контакты покупателя"
+              columns={COLUMNS}
+              defaultValue={CONTACTS}
+              getId={(contact) => contact.id}
+              getLabel={(contact) => contact.name}
+              renderItem={(contact) => (
+                <>
+                  <Input.Root>
+                    <Input.Wrapper>
+                      <Input.Field defaultValue={contact.name} />
+                    </Input.Wrapper>
+                  </Input.Root>
+                  <Input.Root>
+                    <Input.Wrapper>
+                      <Input.Field type="tel" defaultValue={contact.phone} />
+                    </Input.Wrapper>
+                  </Input.Root>
+                </>
+              )}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/dist/skill/reference/components/field-list/examples/states.tsx

@@ -1,5 +1,5 @@
 /** The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. */
-import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import { FieldList, type FieldListColumn, Input, Typography } from "prime-ui-kit";
 
 type Stage = { id: string; name: string; days: string };
 
@@ -11,41 +11,47 @@ const STAGES: Stage[] = [
 ];
 
 const STATES = [
-  { label: "Этапы проекта", disabled: false },
-  { label: "disabled", disabled: true },
+  { caption: "default", disabled: false },
+  { caption: "disabled", disabled: true },
 ];
 
 export default function FieldListStatesExample() {
   return (
-    <>
+    <div>
       {STATES.map((state) => (
-        <FieldList
-          key={state.label}
-          label={state.label}
-          disabled={state.disabled}
-          reorderable
-          columns={COLUMNS}
-          defaultValue={STAGES}
-          getId={(stage) => stage.id}
-          getLabel={(stage) => stage.name}
-          createItem={() => ({ id: crypto.randomUUID(), name: "", days: "" })}
-          addLabel="Добавить этап"
-          renderItem={(stage) => (
-            <>
-              <Input.Root>
-                <Input.Wrapper>
-                  <Input.Field defaultValue={stage.name} />
-                </Input.Wrapper>
-              </Input.Root>
-              <Input.Root>
-                <Input.Wrapper>
-                  <Input.Field defaultValue={stage.days} inputMode="numeric" />
-                </Input.Wrapper>
-              </Input.Root>
-            </>
-          )}
-        />
+        <div key={state.caption}>
+          <div>
+            <FieldList
+              label="Этапы проекта"
+              disabled={state.disabled}
+              reorderable
+              columns={COLUMNS}
+              defaultValue={STAGES}
+              getId={(stage) => stage.id}
+              getLabel={(stage) => stage.name}
+              createItem={() => ({ id: crypto.randomUUID(), name: "", days: "" })}
+              addLabel="Добавить этап"
+              renderItem={(stage) => (
+                <>
+                  <Input.Root>
+                    <Input.Wrapper>
+                      <Input.Field defaultValue={stage.name} />
+                    </Input.Wrapper>
+                  </Input.Root>
+                  <Input.Root>
+                    <Input.Wrapper>
+                      <Input.Field defaultValue={stage.days} inputMode="numeric" />
+                    </Input.Wrapper>
+                  </Input.Root>
+                </>
+              )}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {state.caption}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

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

@@ -9,12 +9,13 @@
 - A long form split into groups («Реквизиты», «Контакты», «Уведомления»), each with a heading 16 above its fields.
 - Disabling every field of a form while its request runs: `disabled` on the group instead of `disabled` on each field.
 - A group that needs a native name for assistive tech (`<legend>`), e.g. a set of switches under one heading.
+- Without `label`: the plain field column of a form — the fields 20 apart and one `disabled` for all of them, instead of a hand-made stack.
 
 ## When not to use
 - One choice among options with a heading → [Radio](../radio/COMPONENT.md) `Radio.Group label`, a [SegmentedControl](../segmented-control/COMPONENT.md) or [ButtonGroup](../button-group/COMPONENT.md) `label`.
 - A bounded block with a surface (a settings panel) → [Card](../card/COMPONENT.md) `Card.Root`; a Fieldset inside it groups the fields.
 - A page section with a title and actions → [PageContent](../page-content/COMPONENT.md) sections.
-- A group of settings with a title and a trailing control (a «Сбросить» button, a master switch) → `Card.Root variant="panel"` with `Card.Header` (`Card.Title` + the control) and the Fieldset in `Card.Body`, named by the title (`aria-labelledby`), as the settings page pattern names its Fieldset by the section heading.
+- A group of settings with a title and a trailing control (a «Сбросить» button, a master switch) → `Card.Root variant="panel"` with `Card.Header` (`Card.Title` + the control) and the Fieldset in `Card.Body`, named by the title (`aria-labelledby`).
 - A single field's label → the field's own `label`.
 
 ## Import
@@ -40,7 +41,7 @@ A leaf: everything is a prop or a child. A row of two fields inside is the consu
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `label` | `ReactNode` | — | Group heading in the native `<legend>` (`title-s`); it names the group for assistive tech. Without it give the fieldset an `aria-label` when the group needs a name. |
+| `label` | `ReactNode` | — | Group heading in the native `<legend>` (`title-s`), the group name. Without it the fieldset is the plain field column of a form; give it an `aria-label` when the group needs a name. |
 | `description` | `ReactNode` | — | Secondary text under the heading (`body-s`, secondary), linked through `aria-describedby`. |
 | `disabled` | `boolean` | `false` | Disables every control inside, native and kit (they take their own disabled look, ARIA and keyboard); nested groups inherit it. Use it while the form's request runs. |
 | `children` | `ReactNode` | — (required) | The fields, stacked 20 apart; a row of two fields is the consumer's grid. |
@@ -56,7 +57,7 @@ Fieldset has no `variant`, `tone` or `size`: fields keep their own tier (or the
 
 **Combinations**
 - Recommended: groups 32 apart in the form, a `label` on each; `disabled={saving}` on every group and `loading` on the submit button outside them.
-- Allowed but rare: no `label` — a group only for `disabled`; give it an `aria-label` when the group itself needs a name.
+- Allowed: no `label` — the plain field column of a form (the rhythm and `disabled` without a heading); give it an `aria-label` when the group itself needs a name.
 - Pointless: a description without a heading.
 - Forbidden: a border, padding or fill added to the group — the group is made by proximity; use a Card when it needs a surface.
 
@@ -69,17 +70,21 @@ A Button inside a disabled group is disabled too (it reads the same context), so
 
 ## Layout & spacing
 - Heading → fields `--prime-space-4` (16); heading → description `--prime-space-1` (4); description → fields `--prime-space-4`; field → field `--prime-space-5` (20).
-- Group → group `--prime-space-8` (32) — set by the form around the groups.
+- Group → group 32 — set by the form around the groups.
 - `width: 100%`, `min-width: 0` (the native fieldset's `min-content` minimum is reset), so long values never widen the form.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the group's fields; the fields of a disabled group are skipped. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The native `<fieldset>` is a group (`role="group"`) named by the `<legend>` text from `label`; without a heading give it `aria-label`.
 - `description` is linked to the group through `aria-describedby`.
 - `disabled` disables the native controls inside and passes a context to kit controls: they set their own `disabled` / `aria-disabled` and drop out of the Tab order.
@@ -105,4 +110,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [Card](../card/COMPONENT.md) (a surface around the groups), [Input](../input/COMPONENT.md) (takes its disabled look from the group), [Button](../button/COMPONENT.md) (the submit with `loading`, outside the group), [LoginForm](../login-form/COMPONENT.md) (its fields wrapped in `Fieldset disabled` while signing in), [Radio](../radio/COMPONENT.md)
+- **See also:** [Card](../card/COMPONENT.md) (a surface around the groups), [Input](../input/COMPONENT.md) (takes its disabled look from the group), [Button](../button/COMPONENT.md) (the submit with `loading`, outside the group), [Radio](../radio/COMPONENT.md)

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

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