prime-ui-kit 0.14.0 → 0.16.0

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

@@ -1,8 +1,6 @@
 /** The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. */
 import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Task = { id: string; title: string; due: string; label: string };
 
 const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
@@ -37,7 +35,6 @@ export default function KanbanVariantsExample() {
       <div>
         <Kanban.Root
           aria-label={`Задачи релиза: ${variant}`}
-          className={styles.board}
           variant={variant}
           columns={COLUMNS}
           items={TASKS}

package/src/components/kbd/COMPONENT.md

@@ -60,17 +60,21 @@ Minimum width equals the height, so single-character keys are square.
 | size | `size`, else the surrounding control, else `m` | `data-size` (nominal), `data-tier` (visual tier, drives every dimension) |
 
 ## Layout & spacing
-- Inline-flex, centered content, never shrinks, `vertical-align: middle`.
-- Keys of one chord: `gap: var(--prime-space-1)`; an optional «+» between them is `aria-hidden`.
-- In a hotkey list: action left, keys right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
+- Inline-flex, centered content, never shrinks, `vertical-align: middle`. The key owns its line box; a kit `Icon` (or a raw svg) inside takes the tier icon size.
+- Keys of one chord sit 4px apart; an optional «+» between them is `aria-hidden`.
+- In a hotkey list: a `DescriptionList` — the action is the label, its keys the value.
 - In a field, put the key in `Input.InlineAffix side="end"`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Renders a native `<kbd>`; its text is read as is.
 - Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
 - A visual «+» between keys gets `aria-hidden="true"`.
@@ -85,8 +89,8 @@ No `labels`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. |
 | [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
-| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. |
-| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: action on the left, its keys on the right, an icon inside a key. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. |
+| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. |
 
 ## Mistakes
 - `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
@@ -95,5 +99,5 @@ No `labels`.
 - A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/chipTier` (the Badge tiers)
 - **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)

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

@@ -14,24 +14,5 @@
   align-items: center;
   justify-content: center;
   gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-/* shortcut-list.tsx: action left, keys right. */
-.list {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-  margin: 0;
-}
-
-.listRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-4);
-}
-
-.listRow dd {
-  margin: 0;
+  width: min(100%, var(--prime-layout-form-width-s));
 }

package/src/components/kbd/examples/in-controls.tsx

@@ -1,4 +1,4 @@
-/** Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. */
+/** Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. */
 import { Button, Input, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -16,7 +16,7 @@ export default function KbdInControlsExample() {
         </span>
       </Button.Root>
       <Button.Root tone="neutral">
-        Отправить
+        Применить
         <Kbd size="xs" aria-label="Enter" title="Enter">
           ↵
         </Kbd>

package/src/components/kbd/examples/shortcut-list.tsx

@@ -1,5 +1,5 @@
-/** A hotkey reference: action on the left, its keys on the right, an icon inside a key. */
-import { Icon, Kbd, Typography } from "prime-ui-kit";
+/** A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. */
+import { DescriptionList, Icon, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -14,36 +14,24 @@ const SHORTCUTS = [
 
 export default function KbdShortcutListExample() {
   return (
-    <dl className={styles.list}>
+    <DescriptionList.Root>
       {SHORTCUTS.map((item) => (
-        <div key={item.action} className={styles.listRow}>
-          <dt>
-            <Typography as="span" variant="body-m">
-              {item.action}
-            </Typography>
-          </dt>
-          <dd className={styles.chord}>
+        <DescriptionList.Item key={item.action} label={item.action}>
+          <span className={styles.chord}>
             {item.keys.map((key) => (
               <Kbd key={key} aria-label={KEY_NAMES[key]} title={KEY_NAMES[key]}>
                 {key}
               </Kbd>
             ))}
-          </dd>
-        </div>
+          </span>
+        </DescriptionList.Item>
       ))}
-      <div className={styles.listRow}>
-        <dt>
-          <Typography as="span" variant="body-m">
-            Закрыть окно
-          </Typography>
-        </dt>
-        <dd className={styles.chord}>
-          <Kbd>
-            <Icon name="action.close" />
-            Esc
-          </Kbd>
-        </dd>
-      </div>
-    </dl>
+      <DescriptionList.Item label="Закрыть окно">
+        <Kbd>
+          <Icon name="action.close" />
+          Esc
+        </Kbd>
+      </DescriptionList.Item>
+    </DescriptionList.Root>
   );
 }

package/src/components/label/COMPONENT.md

@@ -6,7 +6,7 @@
 > Field label (native `<label>`) with required and optional markers.
 
 ## When to use
-- Above a control that has no built-in `label` prop: a custom control, or a hand-built field where you wire the ids yourself.
+- Above a control that has no built-in `label` prop (an embedded `Datepicker.Panel`, a custom control), where you wire the ids yourself.
 - When a label needs an icon (`Label.Icon`) or an inline clarification (`Label.Description`).
 
 ## When not to use
@@ -37,19 +37,28 @@ Label.Root            <label>: text, then the required `*` or the optional marke
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Size of the paired field: xs/s 12/16 · m 13/20 · l/xl 14/20, weight 500. Without it the tier of its host, else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Size of the paired field: xs/s 12/16 · m 13/20 · l/xl 14/20, weight 500. Without it the tier of its host, else `m`; the label provides its tier to the icons inside. |
 | `required` | `boolean` | — | Appends a red `*` (`aria-hidden`). Put native `required` on the control itself. |
 | `optional` | `boolean` | — | Appends the muted optional marker (`labels.optional`). |
-| `disabled` | `boolean` | — | Disabled color for the text and the markers, `aria-disabled`. |
+| `disabled` | `boolean` | — | Disabled color for the text and the markers, `aria-disabled`. A disabled `Fieldset` around the label sets it too. |
+| `secondary` | `boolean` | — | Quieter: secondary text on one line, cut with an ellipsis — a column heading under the group's own label (FieldList). |
 | `labels` | `Partial<LabelLabels>` | — | Built-in strings, see Labels. |
 | `htmlFor` | `string` | — | Id of a native control. For a custom control give the label an `id` and set `aria-labelledby` on the control. |
 | `…rest` | `Omit<LabelHTMLAttributes<HTMLLabelElement>, "size">` | — | `id`, `className` and the other label attributes. |
 
 ### Label.Icon
-`ref` → `HTMLSpanElement`. A muted, non-shrinking icon slot (`aria-hidden`) before the text; kit icons take the label size. Native `<span>` props.
+`ref` → `HTMLSpanElement`. A muted, non-shrinking `<span>` icon slot (`aria-hidden`) before the text; kit icons take the label size.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
 
 ### Label.Description
-`ref` → `HTMLSpanElement`. Regular-weight muted text in the same line (units, context); part of the accessible name. Native `<span>` props.
+`ref` → `HTMLSpanElement`. A regular-weight muted `<span>` in the same line (units, context); part of the accessible name.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
 
 ## Variants
 Label has no `variant` or `tone`.
@@ -70,7 +79,8 @@ Label has no `variant` or `tone`.
 |---|---|---|---|
 | `required` | Red `*` right after the text | Most fields are optional — mark the required ones | — |
 | `optional` | Muted regular «необязательно» right after the text | Most fields are required — mark the optional ones | — |
-| `disabled` | Text, `*`, marker, description and icon in disabled color | The paired control is disabled | — |
+| `disabled` | Text, `*`, marker, description and icon in disabled color | The paired control is disabled (a disabled `Fieldset` around sets it) | — |
+| `secondary` | Secondary text on one line, cut with an ellipsis | A column heading under the group's own label (FieldList) | — |
 
 **Combinations**
 - Recommended: mark the minority of fields in a form; `Label.Description` for units («₽, без НДС»).
@@ -80,21 +90,26 @@ Label has no `variant` or `tone`.
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| disabled | `disabled` | `data-disabled="true"`, `aria-disabled="true"` |
-| size | `size` | `data-size` |
+| disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"`, `aria-disabled="true"` |
+| secondary | `secondary` | `data-secondary="true"` |
+| size | `size`, else the host tier | `data-size` |
 
-The label has no hover or focus state; clicking it focuses the control bound with `htmlFor`.
+The label has no hover or focus state; clicking it focuses the control bound with `htmlFor`. Its color eases between the states. Disabled sets `--label-dimmed`, which every marker and the description read; a field frame sets it on its label when the native control inside is disabled and nothing passed `disabled` (a state only CSS sees).
 
 ## Layout & spacing
-- Label → field: the tier `label-gap` (`--prime-control-<size>-label-gap`: `--prime-space-1` on xs/s, `--prime-space-2` on m–xl) — the same gap fields use for their built-in label.
+- Label → field: the tier `--field-label-gap` (4 on xs/s, 8 on m–xl) — the same gap fields use for their built-in label. The text comes from the field tier (`--field-label-size`, `--field-label-lh`).
 - Inline-flex, wraps long text (`overflow-wrap: anywhere`); markers are separated by `--prime-space-1`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Bind with `htmlFor` to a native control, or set `id` on the label and `aria-labelledby` on a custom control (a `role="radiogroup"`, a `fieldset` of cells).
 - The `*` is `aria-hidden`; requiredness must come from the control (`required`).
 - The optional marker and `Label.Description` are visible text and part of the accessible name; `Label.Icon` is `aria-hidden`.
@@ -109,7 +124,7 @@ No keyboard interaction.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A standalone label above a hand-built field, linked to its input through `htmlFor` and `id`. |
+| [overview.tsx](examples/overview.tsx) | A label above a calendar that has no label of its own, naming it through `id` and `aria-labelledby` — `id`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size; the label takes the size of the field below it — `size`. |
 | [states.tsx](examples/states.tsx) | A default label next to a disabled one; the markers dim with the text — `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A muted icon before the text, sized by the label — `Label.Icon`. |

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

@@ -1,16 +1,8 @@
 /* Layout of the Label scenarios: semantic tokens only. */
 
-/* overview.tsx: label → control gap of the m tier, like a field's own label. */
+/* overview.tsx, structure.tsx: a label above what it names, at the m-tier label gap. */
 .field {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  display: grid;
+  justify-items: start;
   gap: var(--prime-control-m-label-gap);
 }
-
-/* structure.tsx: one label per row, its caption under it. */
-.structure {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-4);
-}

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

@@ -1,20 +1,16 @@
-/** A standalone label above a hand-built field, linked to its input through `htmlFor` and `id`. */
-import { Input, Label } from "prime-ui-kit";
+/** A label above a calendar that has no label of its own, naming it through `id` and `aria-labelledby` — `id`. */
+import { Datepicker, Label } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function LabelOverviewExample() {
-  const inputId = React.useId();
+  const labelId = React.useId();
 
   return (
     <div className={styles.field}>
-      <Label.Root htmlFor={inputId}>Название проекта</Label.Root>
-      <Input.Root id={inputId}>
-        <Input.Wrapper>
-          <Input.Field defaultValue="Редизайн личного кабинета" />
-        </Input.Wrapper>
-      </Input.Root>
+      <Label.Root id={labelId}>Дата отгрузки</Label.Root>
+      <Datepicker.Panel mode="single" role="group" aria-labelledby={labelId} />
     </div>
   );
 }

package/src/components/label/examples/structure.tsx

@@ -5,7 +5,7 @@ import styles from "./examples.module.css";
 
 export default function LabelStructureExample() {
   return (
-    <div className={styles.structure}>
+    <>
       <div className={styles.field}>
         <Label.Root required>ИНН</Label.Root>
         <Typography as="span" variant="caption" tone="muted">
@@ -27,6 +27,6 @@ export default function LabelStructureExample() {
           Label.Description
         </Typography>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -9,9 +9,11 @@
 - Navigation to another page or URL inside text, cards, forms and footers.
 - Secondary navigation next to a Button of the same size («Войти по паролю» beside «Продолжить»).
 - Quiet service links in footers and metadata (`tone="neutral"`).
+- A trail of links, such as the path to the current page (`tone="muted"`).
+- A link inside running text (`inline`): it takes the text's type and keeps its underline.
 - External links (`target="_blank"` + `rel="noopener noreferrer"`).
 - A router link with the link look (`asChild` around the router's `<Link>`).
-- An inline action inside running text that must read as a link («Отправить ещё раз», «выберите файл») — `asChild` around a `<button type="button">`.
+- An inline action inside running text that must read as a link («Отправить ещё раз», «выберите файл») — `asChild inline` around a `<button type="button">`.
 
 ## When not to use
 - An action without a URL outside running text (save, open a dialog) → use [Button](../button/COMPONENT.md) with `variant="ghost"`.
@@ -26,7 +28,7 @@ import { LinkButton } from "prime-ui-kit";
 
 ## Anatomy
 ```
-LinkButton   <a> (without href when disabled, or the child with asChild); tone, size; size tier for nested icons
+LinkButton   <a href> (without href when disabled, or the child with asChild); tone, size, inline; size tier for nested icons
 └─ children  text and optional Icon before or after it
 ```
 
@@ -39,12 +41,14 @@ LinkButton   <a> (without href when disabled, or the child with asChild); tone,
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"accent" \| "neutral"` | `"accent"` | `accent` — a regular link; `neutral` — secondary text, primary on hover, for footers and metadata. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Control tier: text 12 · 13 · 14 · 16 · 18, line height and icon size. Without it the tier of its host (a form, a panel, a hint), else `m`. |
-| `disabled` | `boolean` | `false` | Renders `<a role="link" aria-disabled="true" tabIndex={-1}>` without `href` and swallows the click; `id`, `aria-*` and the other native props stay. |
-| `asChild` | `boolean` | `false` | Merges the link look onto its single child instead of rendering `<a>`: a router link, or a `<button type="button">` for an inline action that is not navigation. `disabled` becomes `aria-disabled` and swallows the click. |
-| `children` | `ReactNode` | — | Text and optional `Icon`s before or after it; the text is the accessible name. |
-| `…rest` | `AnchorHTMLAttributes<HTMLAnchorElement>` | — | `href`, `target`, `rel`, `download`, `onClick`, `className`, `aria-*` and the other anchor attributes. |
+| `href` | `string` | — | The destination. Required without `asChild`; with `asChild` the child carries its own target. |
+| `tone` | `"accent" \| "neutral" \| "muted"` | `"accent"` | `accent` — a regular link; `neutral` — secondary text for footers and metadata; `muted` — muted text with no underline, for trails such as a breadcrumb. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Control tier: text 12 · 13 · 14 · 16 · 18, line height and icon size. Without it the tier of its host (a form, a panel, a hint), else `m`. |
+| `inline` | `boolean` | `false` | A link inside running text: it takes the text's type, wraps with it and keeps its underline drawn. |
+| `disabled` | `boolean` | `false` | Renders `<a role="link" aria-disabled="true">` without `href`, out of the Tab order, and swallows the click; `id`, `aria-*` and the other native props stay. |
+| `asChild` | `boolean` | `false` | Merges the link look onto its single child instead of rendering `<a>`: a router link, or a `<button type="button">` for an inline action that is not navigation. |
+| `children` | `ReactNode` | — | Text and optional `Icon`s before or after it; the text is the accessible name. With `asChild`, the one child element. |
+| `…rest` | `Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">` | — | `target`, `rel`, `download`, `onClick`, `className`, `aria-*` and the other anchor attributes. |
 
 ## Variants
 
@@ -53,6 +57,7 @@ LinkButton   <a> (without href when disabled, or the child with asChild); tone,
 |---|---|---|---|
 | `accent` | accent text, medium weight; on hover `accent-hover` and an underline appears | regular links in text, forms and cards | yes |
 | `neutral` | secondary text; on hover primary text + underline | footers, metadata, dense service navigation | |
+| `muted` | muted text; on hover primary text, never underlined | trails: the path to the current page | |
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -68,6 +73,7 @@ Match the link size to the surrounding text or to the Button it sits next to. Av
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
+| `inline` | the running text's size, line height and weight; wraps with the text; underline always drawn | a link inside a sentence | off |
 | `disabled` | `text-disabled`, no underline, `cursor: not-allowed` | a destination is temporarily unavailable | off |
 | `asChild` | the link look on the child (router link, `<button>`; button chrome removed) | router links; inline actions in text | off |
 
@@ -76,31 +82,37 @@ Match the link size to the surrounding text or to the Button it sits next to. Av
 |---|---|---|
 | hover | pointer | hover color + underline (`text-decoration-color: currentColor`) |
 | focus-visible | keyboard | outer focus ring with `--prime-focus-offset`, radius `--prime-radius-xs` |
-| disabled | `disabled` | `<a role="link">` without `href`, `aria-disabled="true"`, `tabIndex=-1`, `data-disabled="true"`; with `asChild` the child gets `aria-disabled="true"` and `data-disabled="true"`, keeps its own focusability, and its click is swallowed |
+| disabled | `disabled` | `<a role="link">` without `href` (so out of the Tab order), `aria-disabled="true"`, `data-disabled="true"`; with `asChild` the child gets `aria-disabled="true"`, `data-disabled="true"` and `tabIndex=-1`, a link child loses its `href`, and its click is swallowed |
 
-Root attributes: `data-size`, `data-tone`, `data-disabled` (only when disabled).
+Root attributes: `data-size`, `data-tone`, `data-inline` (only when inline), `data-disabled` (only when disabled).
 
 Motion: the color and the underline fade in over `fast` (the underline is always drawn, transparent at rest, 1px thick and 3px below the text).
 
 ## Layout & spacing
-- Inline in text: put a space before it (`{" "}`) and keep the text's size.
-- Next to a Button: same `size`, `justify-content: space-between` or `gap: var(--prime-space-3)`.
-- Footer link rows: `gap: var(--prime-space-2) var(--prime-space-4)`, wrap allowed.
-- `max-width: 100%`; `display: inline-flex` with icon and text centered.
+- Inline in text: `inline`, with a space before it (`{" "}`); the link takes the text's type.
+- Next to a Button: same `size`, 12px apart or pushed to the far edge.
+- Footer link rows: 8px between rows, 16px between links, wrap allowed.
+- `max-width: 100%`; `display: inline-flex` with icon and text centered (`inline`: `display: inline`).
+- Text, line height and icon come from the shared tier table (`internal/fieldTier`).
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
-| `Enter` | Follows the link (native `<a>`). |
-| `Tab` | Moves focus; a disabled link is skipped. |
+| `Enter` | Follows the link (native `<a>`). With `asChild` on a `<button>`, `Enter` and `Space` run its action. |
+| `Tab` | Moves focus; a disabled link is skipped, the `asChild` child too (`tabIndex=-1`). |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - A native `<a>`: announced as a link, named by its text.
 - The disabled state is a non-focusable `<a role="link" aria-disabled="true">` without `href`; it keeps `id` and `aria-*`.
 - With `asChild` the child gives the role and name: a router link, or a `<button>` for an action.
 - Icons are decorative; say «новая вкладка» in the text or `aria-label` for external links.
+- `inline` keeps the underline drawn, so a link in text never rests on color alone.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -110,8 +122,8 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A link inside running text that keeps the text's size — `href`. |
-| [variants.tsx](examples/variants.tsx) | A regular link and a quiet one for footers and metadata — `tone`. |
+| [overview.tsx](examples/overview.tsx) | A link inside running text takes the text's type and keeps its underline — `href`, `inline`. |
+| [variants.tsx](examples/variants.tsx) | A regular link, a quiet one for footers and metadata, a muted one for trails — `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; text and icon follow the control tier, xs 12 to xl 18 — `size`. |
 | [states.tsx](examples/states.tsx) | A disabled link drops `href` and leaves the Tab order, in both tones — `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | An icon before or after the text; `Icon` without a size takes the link tier — `Icon`. |
@@ -119,10 +131,11 @@ No `labels`.
 | [as-child.tsx](examples/as-child.tsx) | The link look on a button for an inline action that is not navigation — `asChild`. |
 
 ## Mistakes
-- `<LinkButton onClick={save}>` without `href` → an `<a>` without a URL is not a button: use `<Button.Root variant="ghost">`, or `<LinkButton asChild><button type="button">` inside running text.
+- `<LinkButton onClick={save}>` without `href` → an `<a>` without a URL is not a button (the type requires `href`): use `<Button.Root variant="ghost">`, or `<LinkButton asChild inline><button type="button">` inside running text.
+- A link in a sentence without `inline` → it keeps the control tier and hides its underline at rest; add `inline`.
 - `target="_blank"` without `rel="noopener noreferrer"` → add `rel`.
 - Wrapping a LinkButton in an `<a>` → pass `href` directly.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/interactiveElement`, `internal/fieldClasses` (the tier table)
 - **See also:** [Button](../button/COMPONENT.md), [Breadcrumb](../breadcrumb/COMPONENT.md), [Typography](../typography/COMPONENT.md)

package/src/components/link-button/examples/as-child.tsx

@@ -8,7 +8,7 @@ export default function LinkButtonAsChildExample() {
   return (
     <Typography variant="body-m" tone="secondary">
       {sent ? "Письмо отправлено повторно." : "Не пришло письмо со счётом?"}{" "}
-      <LinkButton asChild>
+      <LinkButton asChild inline>
         <button type="button" onClick={() => setSent(true)}>
           Отправить ещё раз
         </button>

package/src/components/link-button/examples/external-link.tsx

@@ -5,7 +5,7 @@ export default function LinkButtonExternalLinkExample() {
   return (
     <Typography variant="body-m" tone="secondary">
       Тарифы и лимиты описаны в{" "}
-      <LinkButton href="https://example.com/docs" target="_blank" rel="noopener noreferrer">
+      <LinkButton href="https://example.com/docs" target="_blank" rel="noopener noreferrer" inline>
         документации (новая вкладка)
       </LinkButton>
       .

package/src/components/link-button/examples/overview.tsx

@@ -1,11 +1,13 @@
-/** A link inside running text that keeps the text's size — `href`. */
+/** A link inside running text takes the text's type and keeps its underline — `href`, `inline`. */
 import { LinkButton, Typography } from "prime-ui-kit";
 
 export default function LinkButtonOverviewExample() {
   return (
     <Typography variant="body-m" tone="secondary">
       Ссылка для входа отправлена на почту. Не пришло письмо?{" "}
-      <LinkButton href="#resend">Отправить ещё раз</LinkButton>
+      <LinkButton href="#resend" inline>
+        Отправить ещё раз
+      </LinkButton>
     </Typography>
   );
 }

package/src/components/link-button/examples/variants.tsx

@@ -1,7 +1,7 @@
-/** A regular link and a quiet one for footers and metadata — `tone`. */
+/** A regular link, a quiet one for footers and metadata, a muted one for trails — `tone`. */
 import { LinkButton, Typography } from "prime-ui-kit";
 
-const TONES = ["accent", "neutral"] as const;
+const TONES = ["accent", "neutral", "muted"] as const;
 
 export default function LinkButtonVariantsExample() {
   return (