prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,65 +1,69 @@
-.sizes {
+/* Layout of the Checkbox scenarios: semantic tokens only. */
+
+/* without-label.tsx: boxes in one row. */
+.row {
   display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: var(--prime-space-8);
+  gap: var(--prime-space-3);
 }
 
-.sizeCell {
+/* controlled.tsx: «select all» above its options. */
+.list {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
+  gap: var(--prime-space-3);
 }
 
-.stack {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
+/* Child options sit under the parent's text column. */
+.nested {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  padding-inline-start: calc(var(--prime-control-m-choice) + var(--prime-control-m-gap));
 }
 
-.row {
+/* in-form.tsx: choices, then actions (group → actions 32). */
+.form {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-space-3);
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
-.column {
-  display: grid;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+.formActions {
+  display: flex;
+  margin-top: var(--prime-space-4);
 }
 
-.list {
+/* indicator.tsx: a listbox panel with full-width option rows (panel tokens, row hover wash). */
+.optionList {
+  box-sizing: border-box;
   display: grid;
-  gap: var(--prime-space-3);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+  width: min(100%, var(--prime-panel-min-width));
+  padding: var(--prime-panel-padding);
+  border-radius: var(--prime-panel-radius);
+  background: var(--prime-color-bg-raised);
+  box-shadow: var(--prime-shadow-overlay);
 }
 
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-control-m-gap);
+  min-height: var(--prime-control-m-item-height);
+  padding-inline: var(--prime-control-m-field-padding-x);
+  border-radius: var(--prime-panel-item-radius);
+  cursor: pointer;
+  transition: background-color var(--prime-motion-duration-xfast)
+    var(--prime-motion-easing-standard);
 }
 
-.group {
-  display: grid;
-  gap: var(--prime-space-3);
-  min-width: 0;
-  /* Native fieldset reset. */
-  margin: 0;
-  padding: 0;
-  border: 0;
+@media (hover: hover) {
+  .option:hover {
+    background: var(--prime-color-fill-subtle);
+  }
 }
 
-/* Child options sit under the parent's text column. */
-.nested {
-  display: grid;
-  gap: var(--prime-space-3);
-  padding-inline-start: calc(var(--prime-control-m-choice) + var(--prime-control-m-gap));
+.option:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset-inset);
 }

package/src/components/checkbox/examples/in-form.tsx

@@ -0,0 +1,34 @@
+/** Consent in a sign-up form: a hint under the text, an error after a submit without the tick — `required`, `hint`, `error`. */
+import { Button, Checkbox } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function CheckboxInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const accepted = new FormData(event.currentTarget).get("terms") === "on";
+    setError(accepted ? undefined : "Без согласия мы не сможем создать аккаунт");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Checkbox.Root
+        name="terms"
+        required
+        error={error}
+        onCheckedChange={(checked) => checked && setError(undefined)}
+      >
+        <Checkbox.Label>Принимаю условия оферты</Checkbox.Label>
+      </Checkbox.Root>
+      <Checkbox.Root name="news" hint="Не чаще раза в месяц, отписаться можно в профиле">
+        <Checkbox.Label>Получать новости продукта</Checkbox.Label>
+      </Checkbox.Root>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Создать аккаунт</Button.Root>
+      </div>
+    </form>
+  );
+}

package/src/components/checkbox/examples/indicator.tsx

@@ -0,0 +1,54 @@
+/** The box alone in a multi-select list: the option row carries `aria-selected`, the box only shows it — `Checkbox.Indicator`. */
+import { Checkbox, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const CITIES = [
+  { value: "msk", label: "Москва" },
+  { value: "spb", label: "Санкт-Петербург" },
+  { value: "kzn", label: "Казань" },
+];
+
+export default function CheckboxIndicatorExample() {
+  const [selected, setSelected] = React.useState<string[]>(["msk"]);
+
+  const toggle = (value: string) =>
+    setSelected((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+    );
+
+  return (
+    <div
+      role="listbox"
+      aria-label="Города доставки"
+      aria-multiselectable
+      className={styles.optionList}
+    >
+      {CITIES.map((city) => {
+        const isSelected = selected.includes(city.value);
+        return (
+          <div
+            key={city.value}
+            role="option"
+            aria-selected={isSelected}
+            tabIndex={0}
+            className={styles.option}
+            onClick={() => toggle(city.value)}
+            onKeyDown={(event) => {
+              if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                toggle(city.value);
+              }
+            }}
+          >
+            <Checkbox.Indicator checked={isSelected} />
+            <Typography as="span" variant="body-m">
+              {city.label}
+            </Typography>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+/** A checkbox with its label; a click anywhere on the row toggles it. */
+import { Checkbox } from "prime-ui-kit";
+
+export default function CheckboxOverviewExample() {
+  return (
+    <Checkbox.Root defaultChecked>
+      <Checkbox.Label>Присылать счета на почту</Checkbox.Label>
+    </Checkbox.Root>
+  );
+}

package/src/components/checkbox/examples/sizes.tsx

@@ -1,21 +1,16 @@
-/** All five size tiers of a checked checkbox side by side. Use it to pick the tier that matches the neighbouring controls. */
-import { Checkbox, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Every size; the box and the text follow the control tier — `size`. */
+import { Checkbox } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function CheckboxSizesExample() {
   return (
-    <div className={styles.sizes}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.sizeCell}>
+        <div key={size}>
           <Checkbox.Root size={size} defaultChecked>
-            <Checkbox.Label>Подпись</Checkbox.Label>
+            <Checkbox.Label>{size}</Checkbox.Label>
           </Checkbox.Root>
-          <Typography.Root as="span" variant="caption" tone="muted">
-            {size}
-          </Typography.Root>
         </div>
       ))}
     </div>

package/src/components/checkbox/examples/states.tsx

@@ -1,29 +1,48 @@
-/** Unchecked, checked, indeterminate, invalid and disabled checkboxes. Use it as a reference for every visual state. */
+/** Every state side by side, each labelled by its prop — `checked`, `indeterminate`, `invalid`, `disabled`. */
 import { Checkbox } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function CheckboxStatesExample() {
   return (
-    <div className={styles.stack}>
-      <Checkbox.Root>
-        <Checkbox.Label>Не отмечен</Checkbox.Label>
-      </Checkbox.Root>
-      <Checkbox.Root defaultChecked>
-        <Checkbox.Label>Отмечен</Checkbox.Label>
-      </Checkbox.Root>
-      <Checkbox.Root indeterminate>
-        <Checkbox.Label>Частично (indeterminate)</Checkbox.Label>
-      </Checkbox.Root>
-      <Checkbox.Root invalid>
-        <Checkbox.Label>Ошибка</Checkbox.Label>
-      </Checkbox.Root>
-      <Checkbox.Root disabled>
-        <Checkbox.Label>Недоступен</Checkbox.Label>
-      </Checkbox.Root>
-      <Checkbox.Root disabled defaultChecked>
-        <Checkbox.Label>Недоступен, отмечен</Checkbox.Label>
-      </Checkbox.Root>
-    </div>
+    <>
+      <div>
+        <div>
+          <Checkbox.Root>
+            <Checkbox.Label>unchecked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Label>checked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root indeterminate>
+            <Checkbox.Label>indeterminate</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root invalid>
+            <Checkbox.Label>invalid</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Checkbox.Root disabled>
+            <Checkbox.Label>disabled</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root disabled defaultChecked>
+            <Checkbox.Label>disabled · checked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root disabled indeterminate>
+            <Checkbox.Label>disabled · indeterminate</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      </div>
+    </>
   );
 }

package/src/components/checkbox/examples/without-label.tsx

@@ -1,4 +1,4 @@
-/** Checkboxes with no visible text, named via aria-label and submitted with name/value. Use it in table rows where the row itself explains the choice. */
+/** Bare boxes in table rows, named by `aria-label` and submitted with `name` and `value`. */
 import { Checkbox } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -6,12 +6,8 @@ import styles from "./examples.module.css";
 export default function CheckboxWithoutLabelExample() {
   return (
     <div className={styles.row}>
-      <Checkbox.Root aria-label="Выбрать заказ №1042" name="orders" value="1042">
-        <Checkbox.Label />
-      </Checkbox.Root>
-      <Checkbox.Root aria-label="Выбрать заказ №1043" name="orders" value="1043" defaultChecked>
-        <Checkbox.Label />
-      </Checkbox.Root>
+      <Checkbox.Root aria-label="Выбрать заказ №1042" name="orders" value="1042" />
+      <Checkbox.Root aria-label="Выбрать заказ №1043" name="orders" value="1043" defaultChecked />
     </div>
   );
 }

package/src/components/code-block/COMPONENT.md

@@ -1,110 +1,108 @@
 # CodeBlock
 
 **Category:** data-display
+**Kind:** primitive
 
 > A static TypeScript / TSX snippet with syntax highlighting, on a sunken panel or bare inside a host.
 
 ## When to use
-- Code samples in docs, settings ("API key usage") and onboarding.
+- Code samples in docs, settings («API key usage») and onboarding.
 - Shell commands and config fragments (long lines scroll inside).
 - An API response sample next to its description.
 
 ## When not to use
 - A keyboard key or shortcut → use [Kbd](../kbd/COMPONENT.md).
 - Editable code or text → use [Textarea](../textarea/COMPONENT.md).
-- An inline identifier inside a sentence → use a plain `<code>` element in text ([Typography](../typography/COMPONENT.md)).
+- An inline identifier inside a sentence → [Typography](../typography/COMPONENT.md) `variant="code"`.
 - A live preview with a code tab → use [ExampleFrame](../example-frame/COMPONENT.md).
 
 ## Import
 ```tsx
 import { CodeBlock } from "prime-ui-kit";
 ```
-Exported types: `CodeBlockRootProps`, `CodeBlockVariant`, `CodeBlockColorScheme`.
+
+## Anatomy
+```
+CodeBlock        <pre>; variant, colorScheme (data-theme)
+└─ code          <code> with highlighted tokens from the `code` string
+```
 
 ## API
 
-### CodeBlock.Root
-Renders `<pre><code>…</code></pre>`. Forwards `ref` to the `<pre>`. No `asChild`. Leaf component.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### CodeBlock
+`ref` → `HTMLPreElement`. Renders `<pre><code>`; the markup comes from the escaped, highlighted `code`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `code` | `string` | — (required) | TS/TSX source; trailing whitespace is trimmed, then highlighted (the source is escaped). |
-| `variant` | `"soft" \| "ghost"` (`CodeBlockVariant`) | `"soft"` | Treatment. |
-| `colorScheme` | `"light" \| "dark"` (`CodeBlockColorScheme`) | — (follows the page theme) | Forces a theme for this block only (`data-theme` on the `<pre>`). |
-| `tabIndex` | `number` | `0` for `soft`, none for `ghost` | Keeps a scrolling soft block reachable from the keyboard; pass `-1` when it never overflows. |
-| `className` | `string` | — | Extra class on the `<pre>`. |
-
-+ native `<pre>` props except `children` and `dangerouslySetInnerHTML` (the markup is produced by the component).
+| `code` | `string` | — (required) | TS / TSX source; trailing whitespace is trimmed, then highlighted. |
+| `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — sunken panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. |
+| `colorScheme` | `"light" \| "dark"` | — | Fixes the theme for this block only (`data-theme`). Omit to follow the page theme. |
+| `tabIndex` | `number` | — | Default `0` for `soft` (a scrolling block stays reachable from the keyboard), none for `ghost`; pass `-1` when it never overflows. |
+| `…rest` | `Omit<HTMLAttributes<HTMLPreElement>, "children" \| "dangerouslySetInnerHTML">` | — | `className`, `aria-label` and the other `<pre>` attributes. |
 
 ## Variants
 
 ### variant
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `soft` | `fill-muted` panel, radius 8, padding 12 × 16, `code` text role (13/20 mono), horizontal scroll, Tab stop | Standalone snippets anywhere | yes |
-| `ghost` | Bare `pre`: no padding, transparent, font size and line height inherited from the host | Inside a host that draws its own panel (a tinted callout, a custom card) | |
+| `soft` | `fill-muted` panel, radius 8, padding 12 × 16, `code` text role, horizontal scroll, Tab stop | standalone snippets anywhere | yes |
+| `ghost` | bare `pre`: no padding, transparent, type inherited from the host | inside a host that draws its own panel | |
 
 ### colorScheme
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| unset | Token colors and fill follow the page theme | Normal case | yes |
-| `light` | Light palette for the block; soft fill switches to `bg-raised` of that scheme | A light code sample inside a dark page | |
-| `dark` | Dark palette for the block; soft fill switches to `bg-raised` of that scheme | A dark "terminal" sample inside a light page | |
+| — (omitted) | token colors and fill follow the page theme | normal case | yes |
+| `light` | light palette; the soft fill becomes that scheme's `bg-raised` | a light sample inside a dark page | |
+| `dark` | dark palette; the soft fill becomes that scheme's `bg-raised` | a terminal-like sample inside a light page | |
 
-Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX tags blue, comments muted italic — all from palette text tokens, so they pass contrast in both themes.
-
-**Combinations**
-- Recommended: `soft` with no `colorScheme`; `aria-label` on blocks that are the only content of a region.
-- Allowed but rare: `soft` + `colorScheme="dark"` for a terminal look; `ghost` inside a custom panel.
-- Avoid: `ghost` on a bare page (no box, no padding, nothing separates the code); several forced schemes on one screen.
-
-**Sizes**
-CodeBlock has no `size`: `soft` uses the `code` text role, `ghost` inherits the host's type.
+Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX tags blue, comments muted italic — palette text tokens, readable in both themes.
 
 ## States
-| State / attribute | Driven by | Notes |
+| State | Driven by | DOM |
 |---|---|---|
-| `data-variant` | `variant` | Always set (default `soft`). |
-| `data-theme="light" \| "dark"` | `colorScheme` | Re-scopes the palette for the block. |
-| focus-visible | keyboard focus on a `soft` block | Inset focus ring. |
-
-No interactive state; `code` is the only content and can come from state (re-highlighted on change).
+| treatment | `variant` | `data-variant` (always set) |
+| fixed scheme | `colorScheme` | `data-theme` re-scopes the palette for the block |
+| focus-visible | keyboard focus on a `soft` block | inset focus ring |
 
 ## Layout & spacing
 - `max-width: 100%`; the block takes the column width and long lines scroll horizontally (`white-space: pre`, tab size 2).
 - Heading / text → code block: `--prime-space-2` to `--prime-space-4`.
-- Width comes from the layout; constrain the column (`max-width: var(--prime-layout-reading-max-width)` for docs), not the block.
+- Constrain the column (`--prime-layout-reading-max-width` for docs), not the block.
 
 ## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses a `soft` block so overflowing code can be scrolled. |
+| `←` · `→` | Scroll a focused block horizontally. |
+
+### ARIA
 - Native `<pre>` / `<code>`; screen readers read the text.
-- A `soft` block is focusable (`tabIndex=0`) so overflowing content can be scrolled with arrow keys; pass `tabIndex={-1}` when it never overflows.
-- Give standalone blocks an `aria-label` ("Команда установки").
-- No `labels` keys.
+- A `soft` block is a Tab stop (`tabIndex=0`); pass `tabIndex={-1}` when it never overflows.
+- Give standalone blocks an `aria-label` («Команда установки»).
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [variants.tsx](examples/variants.tsx) | `soft` vs `ghost` inside a host panel | Choosing the treatment |
-| [color-scheme.tsx](examples/color-scheme.tsx) | `colorScheme="light"` and `"dark"` | A fixed-scheme sample |
-| [surfaces.tsx](examples/surfaces.tsx) | One-line command on canvas, card and floating layer | Checking contrast on any surface |
-| [controlled.tsx](examples/controlled.tsx) | `code` from state switched by a ButtonGroup | Alternative snippets |
-| [long-lines.tsx](examples/long-lines.tsx) | Long shell command scrolling inside a narrow column | Commands and configs |
-| [api-docs.tsx](examples/api-docs.tsx) | Heading, description and response sample | Docs and integration guides |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { CodeBlock } from "prime-ui-kit";
+No `labels`.
 
-export function InstallCommand() {
-  return <CodeBlock.Root code="bun add prime-ui-kit" aria-label="Команда установки" />;
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. |
+| [variants.tsx](examples/variants.tsx) | A sunken panel and a bare block that takes type and background from its host — `variant`. |
+| [color-scheme.tsx](examples/color-scheme.tsx) | A block fixed to one scheme looks the same in both page themes — `colorScheme`. |
+| [narrow.tsx](examples/narrow.tsx) | In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys. |
 
 ## Mistakes
 - Passing JSX children → pass the source string to `code`.
-- `<pre style={{ background: … }}>` for code → use `CodeBlock.Root`.
-- `variant="ghost"` directly on the page → use `soft`, or wrap `ghost` in a panel.
-- Wrapping a soft block in another bordered box → the block is already a filled panel.
+- A hand-styled `<pre>` for code → use `CodeBlock`.
+- `variant="ghost"` directly on the page → use `soft`, or put `ghost` inside a panel.
+- Wrapping a soft block in another box → the block is already a filled panel.
+
 ## Related
-- [Kbd](../kbd/COMPONENT.md) — keys and shortcuts.
-- [ExampleFrame](../example-frame/COMPONENT.md) — live preview with source.
-- [Typography](../typography/COMPONENT.md) — headings and text around code.
+- **Built from:** —
+- **See also:** [Kbd](../kbd/COMPONENT.md), [ExampleFrame](../example-frame/COMPONENT.md), [Typography](../typography/COMPONENT.md)

package/src/components/code-block/examples/color-scheme.tsx

@@ -1,6 +1,5 @@
-/** Without `colorScheme` the block follows the page theme; `light` / `dark` fix the scheme for the block only. Use a fixed scheme for a code sample that must look the same in both themes. */
-
-import { CodeBlock, Typography } from "prime-ui-kit";
+/** A block fixed to one scheme looks the same in both page themes — `colorScheme`. */
+import { CodeBlock } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -10,18 +9,8 @@ export const isReady = (status: "idle" | "busy") => status === "idle";`;
 export default function CodeBlockColorSchemeExample() {
   return (
     <div className={styles.grid}>
-      <div className={styles.cell}>
-        <Typography.Root variant="caption" tone="muted">
-          colorScheme=&quot;light&quot;
-        </Typography.Root>
-        <CodeBlock.Root code={SAMPLE} colorScheme="light" />
-      </div>
-      <div className={styles.cell}>
-        <Typography.Root variant="caption" tone="muted">
-          colorScheme=&quot;dark&quot;
-        </Typography.Root>
-        <CodeBlock.Root code={SAMPLE} colorScheme="dark" />
-      </div>
+      <CodeBlock code={SAMPLE} colorScheme="light" aria-label="Светлая схема" />
+      <CodeBlock code={SAMPLE} colorScheme="dark" aria-label="Тёмная схема" />
     </div>
   );
 }

package/src/components/code-block/examples/examples.module.css

@@ -1,52 +1,21 @@
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
-  gap: var(--prime-space-4);
-  width: 100%;
-}
-
-.cell {
-  display: grid;
-  align-content: start;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* A host that draws its own panel (its type comes from Typography caption): a ghost CodeBlock
- * inherits the host's type and background. */
-.host {
-  padding: var(--prime-space-3) var(--prime-space-4);
-  overflow-x: auto;
-  border-radius: var(--prime-radius-m);
-  background: var(--prime-color-accent-soft);
-}
+/* Layout of the CodeBlock scenarios: semantic tokens only. */
 
+/* overview.tsx: a reading-width column. */
 .column {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: 100%;
-  min-width: 0;
-}
-
-.narrow {
-  display: grid;
-  gap: var(--prime-space-2);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+  width: min(100%, var(--prime-layout-reading-max-width));
   min-width: 0;
 }
 
-/* Heading → text 8, text → code 16: the code sits in its own row of the outer grid. */
-.doc {
+/* color-scheme.tsx: two blocks side by side, stacked when narrow. */
+.grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
   gap: var(--prime-space-4);
   width: 100%;
-  max-width: var(--prime-layout-reading-max-width);
-  min-width: 0;
 }
 
-.docText {
-  display: grid;
-  gap: var(--prime-space-2);
+/* narrow.tsx: a column narrower than the line. */
+.narrow {
+  width: min(100%, var(--prime-modal-width-s));
   min-width: 0;
 }

package/src/components/code-block/examples/{long-lines.tsx → narrow.tsx}

@@ -1,15 +1,14 @@
-/** The block takes the column width and a long line scrolls inside it (Tab, then arrow keys). Use for shell commands and configs that must not wrap. */
-
+/** In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys. */
 import { CodeBlock } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const LONG_LINE = `docker run --rm -e NODE_ENV=production -p 8080:8080 -v "$(pwd)/data:/app/data" registry.example.com/billing-api:latest --config /app/data/config.yml`;
 
-export default function CodeBlockLongLinesExample() {
+export default function CodeBlockNarrowExample() {
   return (
     <div className={styles.narrow}>
-      <CodeBlock.Root code={LONG_LINE} aria-label="Команда запуска контейнера" />
+      <CodeBlock code={LONG_LINE} aria-label="Команда запуска контейнера" />
     </div>
   );
 }

package/src/components/code-block/examples/overview.tsx

@@ -0,0 +1,19 @@
+/** An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. */
+import { CodeBlock } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const RESPONSE = `{
+  "id": "ord_8f2a",
+  "total": 14990,
+  "currency": "RUB",
+  "items": [{ "sku": "sku-12", "qty": 2 }]
+}`;
+
+export default function CodeBlockOverviewExample() {
+  return (
+    <div className={styles.column}>
+      <CodeBlock code={RESPONSE} aria-label="Пример ответа GET /orders/:id" />
+    </div>
+  );
+}