prime-ui-kit 0.15.0 → 0.16.0

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

@@ -1,9 +1,7 @@
 /** Loading and empty: placeholder rows in the rows' geometry cross-fade into the dialogs; a new workspace without dialogs shows its own empty state with an action — `loading`, `empty`. */
-import { Avatar, Button, Card, ChatList, EmptyPage, hueOf, Icon } from "prime-ui-kit";
+import { Avatar, Button, Card, ChatList, EmptyPage, hueOf, Icon, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 const NOW = new Date(2026, 9, 14, 15, 0);
 
 const DIALOGS = [
@@ -59,19 +57,17 @@ export default function ChatListStatesExample() {
   }, [loading]);
 
   return (
-    <>
-      <div className={styles.stage}>
-        <div className={styles.bar}>
-          <Button.Root
-            variant="soft"
-            tone="neutral"
-            loading={loading}
-            onClick={() => setLoading(true)}
-          >
-            Обновить
-          </Button.Root>
-        </div>
-        <Card.Root className={styles.short}>
+    <div>
+      <div>
+        <Button.Root
+          variant="soft"
+          tone="neutral"
+          loading={loading}
+          onClick={() => setLoading(true)}
+        >
+          Обновить
+        </Button.Root>
+        <Card.Root>
           <ChatList.Root
             items={loading ? [] : DIALOGS}
             getKey={(item) => item.id}
@@ -80,28 +76,36 @@ export default function ChatListStatesExample() {
             renderItem={renderDialog}
           />
         </Card.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          loading
+        </Typography>
+      </div>
+      <div>
+        <Card.Root>
+          <ChatList.Root
+            items={[] as Dialog[]}
+            getKey={(item) => item.id}
+            renderItem={renderDialog}
+            empty={
+              <EmptyPage.Root layout="compact">
+                <EmptyPage.Icon>
+                  <Icon name="object.message" />
+                </EmptyPage.Icon>
+                <EmptyPage.Title>Диалогов пока нет</EmptyPage.Title>
+                <EmptyPage.Description>
+                  Клиенты появятся здесь, когда напишут в чат на сайте.
+                </EmptyPage.Description>
+                <EmptyPage.Actions>
+                  <Button.Root variant="soft">Настроить виджет</Button.Root>
+                </EmptyPage.Actions>
+              </EmptyPage.Root>
+            }
+          />
+        </Card.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          empty
+        </Typography>
       </div>
-      <Card.Root className={styles.short}>
-        <ChatList.Root
-          items={[] as Dialog[]}
-          getKey={(item) => item.id}
-          renderItem={renderDialog}
-          empty={
-            <EmptyPage.Root layout="compact">
-              <EmptyPage.Icon>
-                <Icon name="object.message" />
-              </EmptyPage.Icon>
-              <EmptyPage.Title>Диалогов пока нет</EmptyPage.Title>
-              <EmptyPage.Description>
-                Клиенты появятся здесь, когда напишут в чат на сайте.
-              </EmptyPage.Description>
-              <EmptyPage.Actions>
-                <Button.Root variant="soft">Настроить виджет</Button.Root>
-              </EmptyPage.Actions>
-            </EmptyPage.Root>
-          }
-        />
-      </Card.Root>
-    </>
+    </div>
   );
 }

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

@@ -28,7 +28,7 @@ Checkbox.Root          field grid; ref and input props go to the native input
 │  └─ Checkbox.Label   the visible text (optional)
 └─ hint | error        support text under the text column (`hint`, `error`)
 
-Checkbox.Indicator     the box alone, no input — a mark inside option / menu rows (used without Root)
+Checkbox.Indicator     the box alone, no input — a mark inside option / menu rows and toggle tiles (used without Root)
 ```
 `<Checkbox.Root aria-label="…" />` without `Checkbox.Label` is a valid bare control (table rows).
 
@@ -45,8 +45,10 @@ Checkbox.Indicator     the box alone, no input — a mark inside option / menu r
 | `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
 | `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle (not while `readOnly`). |
 | `indeterminate` | `boolean` | `false` | Mixed state (a partial «select all»): a bar instead of the check; wins over `checked` visually and sets the native `indeterminate`. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the box, the text and the gap. Without it the tier of its host (a form, a panel, a table), else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the box, the text and the gap. Without it the tier of its host (a form, a panel, a table), else `m`. |
 | `shape` | `"square" \| "circle"` | `"square"` | Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). Size, the check draw-in, the indeterminate bar and states are the same. |
+| `optional` | `boolean` | `false` | Muted `labels.optional` after the label text; the field may stay off. |
+| `labels` | `Partial<CheckboxLabels>` | — | Built-in strings, see Labels. |
 | `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it. |
@@ -56,13 +58,17 @@ Checkbox.Indicator     the box alone, no input — a mark inside option / menu r
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `children` | `ReactNode` | — | `Checkbox.Label`. Without it only the box renders — give the root an `aria-label`. |
 | `className` | `string` | — | Class on the field `<div>`. |
-| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size" \| "checked" \| "defaultChecked" \| "onChange">` | — | `name`, `value`, `required`, `aria-label`, `onBlur`… on the native input. |
+| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size" \| "checked" \| "defaultChecked" \| "onChange">` | — | `name`, `value`, `required` (also a red `*` after the text), `aria-label`, `onBlur`… on the native input. |
 
 ### Checkbox.Label
 `ref` → `HTMLSpanElement`. The visible text in the text column of the label row. Native `<span>` props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+
 ### Checkbox.Indicator
-`ref` → `HTMLSpanElement`. The box alone, without an input (`aria-hidden`, no focus or clicks) for rows that carry the state themselves: `role="option"` + `aria-selected`, `role="menuitemcheckbox"` + `aria-checked`.
+`ref` → `HTMLSpanElement`. The box alone, without an input (`aria-hidden`, no focus or clicks) for rows that carry the state themselves: `role="option"` + `aria-selected`, `role="menuitemcheckbox"` + `aria-checked`, a toggle `<button>` + `aria-pressed`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -101,6 +107,7 @@ The circle changes only the outline (`--prime-radius-full`); the check draw-in,
 | `indeterminate` | accent box with a horizontal bar | a parent checkbox over a partially selected group | `false` |
 | `invalid` | danger ring on the unchecked box | the message is shown elsewhere; otherwise pass `error` | `false` |
 | `disabled` | muted box, dimmed text and hint | the option is unavailable | `false` |
+| `optional` | muted `labels.optional` after the text | a form where most fields are required | `false` |
 
 **Combinations**
 - `indeterminate` only on a parent checkbox that controls a group; leaf options never use it.
@@ -123,40 +130,46 @@ Root also carries `data-size`; the box carries `data-shape`. Controlled: `checke
 
 ## Layout & spacing
 - Grid `[box][text]`; the hint or error sits under the text column, not under the box.
-- Checkboxes in a vertical list: gap `--prime-space-3`; separate fields: `--prime-space-5`; group → actions `--prime-space-8`.
+- Checkboxes in a column: a label-less [Fieldset](../fieldset/COMPONENT.md) stacks them at the form rhythm (name it with `aria-label`); the form around the group spaces it from its actions.
 - Long labels wrap (`overflow-wrap: anywhere`); the field shrinks to its content with `max-width: 100%`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus to the checkbox. |
 | `Space` | Toggles it. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - A native `<input type="checkbox">` (visually hidden over the box, so validation bubbles point at it), wrapped by the `<label>` row.
 - `aria-invalid` is set when invalid; `aria-describedby` = your ids + the hint or the error id.
 - Without visible text, pass `aria-label` on `Checkbox.Root` (it lands on the input).
-- `required` goes to the native input; no asterisk is drawn — state it in the text or the hint.
-- `Checkbox.Indicator` is `aria-hidden`; the host row carries `aria-selected` / `aria-checked`.
+- `required` goes to the native input and draws a red `*` after the text; the `*` is `aria-hidden`, the input reports the requirement.
+- `Checkbox.Indicator` is `aria-hidden`; the host row carries `aria-selected` / `aria-checked` / `aria-pressed`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-No `labels`.
+| Key | Default | Used for |
+|---|---|---|
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
 
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A checkbox with its label; a click anywhere on the row toggles it. |
+| [overview.tsx](examples/overview.tsx) | A checkbox with its label; a click anywhere on the row toggles it — `Checkbox.Label`, `defaultChecked`. |
 | [variants.tsx](examples/variants.tsx) | The rounded square next to the circle, in three states — `shape`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size; the box and the text follow the control tier — `size`. |
-| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `checked`, `indeterminate`, `readOnly`, `invalid`, `disabled`. |
-| [without-label.tsx](examples/without-label.tsx) | Bare boxes in table rows, named by `aria-label` and submitted with `name` and `value`. |
-| [indicator.tsx](examples/indicator.tsx) | The box alone in a multi-select list: the option row carries `aria-selected`, the box only shows it — `Checkbox.Indicator`. |
+| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `defaultChecked`, `indeterminate`, `readOnly`, `invalid`, `disabled`. |
+| [without-label.tsx](examples/without-label.tsx) | Bare boxes in table rows, named for assistive tech and submitted with the form — `aria-label`, `name`, `value`. |
+| [indicator.tsx](examples/indicator.tsx) | The box alone on selectable tiles: the toggle button carries `aria-pressed`, the box only shows it — `Checkbox.Indicator`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the selection; «select all» turns indeterminate on a partial one — `checked`, `onCheckedChange`, `indeterminate`. |
-| [in-form.tsx](examples/in-form.tsx) | Consent in a sign-up form: a hint under the text, an error after a submit without the tick — `required`, `hint`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | Consent in a sign-up form: the required tick and an optional subscription, a hint under the text, an error after a submit without the tick — `required`, `optional`, `hint`, `error`. |
 
 ## Mistakes
 - `<Checkbox.Root onChange={…}>` → use `onCheckedChange={(checked) => …}`.
@@ -167,5 +180,5 @@ No `labels`.
 - `style` on `Checkbox.Root` expecting to style the field → it goes to the hidden input; use `className`.
 
 ## Related
-- **Built from:** [Hint](../hint/COMPONENT.md) (`hint`, `error`); the row is a native `<label>`
+- **Built from:** [Label](../label/COMPONENT.md) (the `required` / `optional` marks), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [VisuallyHidden](../visually-hidden/COMPONENT.md); the row is a native `<label>`
 - **See also:** [Radio](../radio/COMPONENT.md), [Switch](../switch/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md); `Checkbox.Indicator` inside [Select](../select/COMPONENT.md) and [TagSelect](../tag-select/COMPONENT.md) rows

package/dist/skill/reference/components/checkbox/examples/controlled.tsx

@@ -1,5 +1,5 @@
 /** The parent owns the selection; «select all» turns indeterminate on a partial one — `checked`, `onCheckedChange`, `indeterminate`. */
-import { Checkbox } from "prime-ui-kit";
+import { Checkbox, Fieldset } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -11,7 +11,7 @@ export default function CheckboxControlledExample() {
   const all = selected.length === DOCUMENTS.length;
 
   return (
-    <div className={styles.list}>
+    <Fieldset aria-label="Документы к отправке">
       <Checkbox.Root
         checked={all}
         indeterminate={selected.length > 0 && !all}
@@ -22,20 +22,22 @@ export default function CheckboxControlledExample() {
         </Checkbox.Label>
       </Checkbox.Root>
       <div className={styles.nested}>
-        {DOCUMENTS.map((document) => (
-          <Checkbox.Root
-            key={document}
-            checked={selected.includes(document)}
-            onCheckedChange={(checked) =>
-              setSelected((current) =>
-                checked ? [...current, document] : current.filter((item) => item !== document),
-              )
-            }
-          >
-            <Checkbox.Label>{document}</Checkbox.Label>
-          </Checkbox.Root>
-        ))}
+        <Fieldset aria-label="Документы">
+          {DOCUMENTS.map((document) => (
+            <Checkbox.Root
+              key={document}
+              checked={selected.includes(document)}
+              onCheckedChange={(checked) =>
+                setSelected((current) =>
+                  checked ? [...current, document] : current.filter((item) => item !== document),
+                )
+              }
+            >
+              <Checkbox.Label>{document}</Checkbox.Label>
+            </Checkbox.Root>
+          ))}
+        </Fieldset>
       </div>
-    </div>
+    </Fieldset>
   );
 }

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

@@ -6,68 +6,26 @@
   gap: var(--prime-space-3);
 }
 
-/* controlled.tsx: «select all» above its options. */
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-}
-
-/* Child options sit under the parent's text column. */
+/* controlled.tsx: 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));
 }
 
-/* in-form.tsx: choices, then actions (group → actions 32). */
+/* in-form.tsx: the choices (a Fieldset), then the actions — group → actions 32. */
 .form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-4);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-.formActions {
-  display: flex;
-  margin-top: var(--prime-space-4);
-}
-
-/* indicator.tsx: a listbox panel with full-width option rows (panel tokens, row hover wash). */
-.optionList {
-  box-sizing: border-box;
   display: grid;
-  width: min(100%, var(--prime-panel-min-width));
-  padding: var(--prime-panel-padding);
-  border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-layer-floating-bg);
-  box-shadow: var(--prime-shadow-overlay);
-}
-
-.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);
+  justify-items: start;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
-.option[aria-disabled="true"] {
-  cursor: default;
-}
-
-@media (hover: hover) {
-  .option:not([aria-disabled="true"]):hover {
-    background: var(--prime-color-fill-subtle);
-  }
-}
-
-.option:focus-visible {
-  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
-  outline-offset: var(--prime-focus-offset-inset);
+/* indicator.tsx: selectable tiles in a fluid grid. */
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
+    );
+  gap: var(--prime-space-4);
+  width: 100%;
 }

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

@@ -1,5 +1,5 @@
-/** 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";
+/** Consent in a sign-up form: the required tick and an optional subscription, a hint under the text, an error after a submit without the tick — `required`, `optional`, `hint`, `error`. */
+import { Button, Checkbox, Fieldset } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -15,20 +15,20 @@ export default function CheckboxInFormExample() {
 
   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>
+      <Fieldset>
+        <Checkbox.Root
+          name="terms"
+          required
+          error={error}
+          onCheckedChange={(checked) => checked && setError(undefined)}
+        >
+          <Checkbox.Label>Принимаю условия оферты</Checkbox.Label>
+        </Checkbox.Root>
+        <Checkbox.Root name="news" optional hint="Не чаще раза в месяц, отписаться можно в профиле">
+          <Checkbox.Label>Получать новости продукта</Checkbox.Label>
+        </Checkbox.Root>
+      </Fieldset>
+      <Button.Root type="submit">Создать аккаунт</Button.Root>
     </form>
   );
 }

package/dist/skill/reference/components/checkbox/examples/indicator.tsx

@@ -1,80 +1,35 @@
-/** 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";
+/** The box alone on selectable tiles: the toggle button carries `aria-pressed`, the box only shows it — `Checkbox.Indicator`. */
+import { Card, Checkbox } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const CITIES: { value: string; label: string; disabled?: boolean }[] = [
-  { value: "msk", label: "Москва" },
-  { value: "spb", label: "Санкт-Петербург" },
-  { value: "kzn", label: "Казань" },
-  { value: "tver", label: "Тверь · закрыт", disabled: true },
+const MODULES = [
+  { value: "crm", label: "CRM и сделки", price: "2 400 ₽" },
+  { value: "stock", label: "Складской учёт", price: "1 900 ₽" },
+  { value: "edo", label: "Электронный документооборот", price: "1 200 ₽" },
 ];
 
-/** One tab stop: arrows move the focused row (wrapping), Home / End jump to the ends. */
-function nextIndex(key: string, index: number, count: number): number | null {
-  if (key === "ArrowDown") return (index + 1) % count;
-  if (key === "ArrowUp") return (index - 1 + count) % count;
-  if (key === "Home") return 0;
-  if (key === "End") return count - 1;
-  return null;
-}
-
 export default function CheckboxIndicatorExample() {
-  const [selected, setSelected] = React.useState<string[]>(["msk"]);
-  const [active, setActive] = React.useState(0);
-  const optionRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  const [selected, setSelected] = React.useState<string[]>(["crm"]);
 
-  const toggle = (city: (typeof CITIES)[number]) => {
-    if (city.disabled) return;
+  const toggle = (value: string) =>
     setSelected((current) =>
-      current.includes(city.value)
-        ? current.filter((item) => item !== city.value)
-        : [...current, city.value],
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
     );
-  };
 
   return (
-    <div
-      role="listbox"
-      aria-label="Города доставки"
-      aria-multiselectable
-      className={styles.optionList}
-      onKeyDown={(event) => {
-        const next = nextIndex(event.key, active, CITIES.length);
-        if (next === null) return;
-        event.preventDefault();
-        setActive(next);
-        optionRefs.current[next]?.focus();
-      }}
-    >
-      {CITIES.map((city, index) => {
-        const isSelected = selected.includes(city.value);
+    <div className={styles.tiles}>
+      {MODULES.map((module) => {
+        const pressed = selected.includes(module.value);
         return (
-          <div
-            key={city.value}
-            ref={(node) => {
-              optionRefs.current[index] = node;
-            }}
-            role="option"
-            aria-selected={isSelected}
-            aria-disabled={city.disabled || undefined}
-            tabIndex={index === active ? 0 : -1}
-            className={styles.option}
-            onFocus={() => setActive(index)}
-            onClick={() => toggle(city)}
-            onKeyDown={(event) => {
-              if (event.key === " " || event.key === "Enter") {
-                event.preventDefault();
-                toggle(city);
-              }
-            }}
-          >
-            <Checkbox.Indicator checked={isSelected} disabled={city.disabled} />
-            <Typography as="span" variant="body-m" tone={city.disabled ? "muted" : undefined}>
-              {city.label}
-            </Typography>
-          </div>
+          <Card.Root key={module.value} variant="mini" asChild>
+            <button type="button" aria-pressed={pressed} onClick={() => toggle(module.value)}>
+              <Checkbox.Indicator checked={pressed} />
+              <Card.Label>{module.label}</Card.Label>
+              <Card.Meta>{module.price} в месяц</Card.Meta>
+            </button>
+          </Card.Root>
         );
       })}
     </div>

package/dist/skill/reference/components/checkbox/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** A checkbox with its label; a click anywhere on the row toggles it. */
+/** A checkbox with its label; a click anywhere on the row toggles it — `Checkbox.Label`, `defaultChecked`. */
 import { Checkbox } from "prime-ui-kit";
 
 export default function CheckboxOverviewExample() {

package/dist/skill/reference/components/checkbox/examples/states.tsx

@@ -1,4 +1,4 @@
-/** Every state side by side, each labelled by its prop — `checked`, `indeterminate`, `readOnly`, `invalid`, `disabled`. */
+/** Every state side by side, each labelled by its prop — `defaultChecked`, `indeterminate`, `readOnly`, `invalid`, `disabled`. */
 import { Checkbox } from "prime-ui-kit";
 
 export default function CheckboxStatesExample() {

package/dist/skill/reference/components/checkbox/examples/without-label.tsx

@@ -1,4 +1,4 @@
-/** Bare boxes in table rows, named by `aria-label` and submitted with `name` and `value`. */
+/** Bare boxes in table rows, named for assistive tech and submitted with the form — `aria-label`, `name`, `value`. */
 import { Checkbox } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/code-block/COMPONENT.md

@@ -23,8 +23,8 @@ import { CodeBlock } from "prime-ui-kit";
 
 ## Anatomy
 ```
-CodeBlock        <pre>; variant, colorScheme (data-theme)
-└─ code          <code> with highlighted tokens from the `code` string
+CodeBlock        <pre> (a ScrollContainer when `soft`); variant, colorScheme (data-theme)
+└─ code          <code>: the tokens of the `code` string as text in coloured spans
 ```
 
 ## API
@@ -32,7 +32,7 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 <!-- 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`.
+`ref` → `HTMLPreElement`. Renders `<pre><code>`: the tokens of `code` as text in coloured spans, never as HTML. A `soft` block scrolls sideways through ScrollContainer.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -40,7 +40,7 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — a filled panel (one ladder step off its host) 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. |
+| `…rest` | `Omit<HTMLAttributes<HTMLPreElement>, "children">` | — | `className`, `aria-label` and the other `<pre>` attributes. |
 
 ## Variants
 
@@ -54,8 +54,8 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | — (omitted) | token colors and fill follow the page theme | normal case | yes |
-| `light` | light palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a light sample inside a dark page | |
-| `dark` | dark palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a terminal-like sample inside a light page | |
+| `light` | light palette; a soft block becomes a floating surface of that scheme and paints its ground | a light sample inside a dark page | |
+| `dark` | dark palette; a soft block becomes a floating surface of that scheme and paints its ground | a terminal-like sample inside a light page | |
 
 Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX tags blue, comments muted italic — palette text tokens, readable in both themes.
 
@@ -63,23 +63,27 @@ Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX t
 | State | Driven by | DOM |
 |---|---|---|
 | treatment | `variant` | `data-variant` (always set) |
-| fixed scheme | `colorScheme` | `data-theme` re-scopes the palette for the block |
+| fixed scheme | `colorScheme` | `data-theme` re-scopes the palette for the block; a soft block adds `data-depth="floating"` |
 | 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`.
-- Constrain the column (`--prime-layout-reading-max-width` for docs), not the block.
+- `max-width: 100%`; the block takes the column width and long lines scroll horizontally inside it (`white-space: pre`, tab size 2), with the kit's thin scrollbar.
+- Heading / text → code block: space step 2–4 (8–16px).
+- Constrain the column (PageContent `maxWidth="readable"` for docs), not the block.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focuses a `soft` block so overflowing code can be scrolled. |
 | `←` · `→` | Scroll a focused block horizontally. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Native `<pre>` / `<code>`; screen readers read the text.
 - A `soft` block is a Tab stop (`tabIndex=0`); pass `tabIndex={-1}` when it never overflows.
 - Give standalone blocks an `aria-label` («Команда установки»).
@@ -95,7 +99,7 @@ No `labels`.
 | [overview.tsx](examples/overview.tsx) | An API response sample on a filled panel, named for screen readers — `code`, `aria-label`. |
 | [variants.tsx](examples/variants.tsx) | A filled 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. |
+| [narrow.tsx](examples/narrow.tsx) | In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys — `aria-label`. |
 
 ## Mistakes
 - Passing JSX children → pass the source string to `code`.
@@ -104,5 +108,5 @@ No `labels`.
 - Wrapping a soft block in another box → the block is already a filled panel.
 
 ## Related
-- **Built from:** —
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md)
 - **See also:** [Kbd](../kbd/COMPONENT.md), [ExampleFrame](../example-frame/COMPONENT.md), [Typography](../typography/COMPONENT.md)

package/dist/skill/reference/components/code-block/examples/examples.module.css

@@ -9,13 +9,16 @@
 /* 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));
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
+    );
   gap: var(--prime-space-4);
   width: 100%;
 }
 
 /* narrow.tsx: a column narrower than the line. */
 .narrow {
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
   min-width: 0;
 }

package/dist/skill/reference/components/code-block/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys. */
+/** In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys — `aria-label`. */
 import { CodeBlock } from "prime-ui-kit";
 
 import styles from "./examples.module.css";