prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,69 +1,21 @@
-import { Button, Label, Tooltip } from "prime-ui-kit";
-import type * as React from "react";
+/** Every size tier next to buttons of the same tier; take the tier of the control it describes — `size`. */
+import { Button, Tooltip } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-function TooltipDemoItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className={styles.demoItem}>
-      <Label.Root size="s">{label}</Label.Root>
-      {children}
-    </div>
-  );
-}
-
-/** All four `Tooltip.Content` sizes on the same trigger button (mirrors `playground/snippets/tooltip/sizes.tsx`). */
 export default function TooltipSizesExample() {
   return (
-    <>
-      <TooltipDemoItem label="Size s">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="s">Tooltip s</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size m">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="m">Tooltip m</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size l">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="l">Tooltip l</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-      <TooltipDemoItem label="Size xl">
-        <Tooltip.Provider delayDuration={200}>
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
-                Hover
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="xl">Tooltip xl</Tooltip.Content>
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </TooltipDemoItem>
-    </>
+    <Tooltip.Provider>
+      {SIZES.map((size) => (
+        <Tooltip.Root key={size}>
+          <Tooltip.Trigger>
+            <Button.Root variant="soft" tone="neutral" size={size}>
+              {size}
+            </Button.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Content size={size}>Черновик сохранится на сервере</Tooltip.Content>
+        </Tooltip.Root>
+      ))}
+    </Tooltip.Provider>
   );
 }

package/src/components/tooltip/examples/toolbar.tsx

@@ -0,0 +1,35 @@
+/** A formatting toolbar in one group: after the first tooltip the neighbours open at once, each with its name and shortcut — `Tooltip.Provider`. */
+import { Button, Icon, Kbd, Tooltip } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const TOOLS = [
+  { icon: "format.bold", label: "Жирный", keys: "⌘B" },
+  { icon: "format.italic", label: "Курсив", keys: "⌘I" },
+  { icon: "format.underline", label: "Подчёркнутый", keys: "⌘U" },
+  { icon: "format.list", label: "Список", keys: "⌘⇧8" },
+  { icon: "format.link", label: "Ссылка", keys: "⌘K" },
+] as const;
+
+export default function TooltipToolbarExample() {
+  return (
+    <Tooltip.Provider>
+      <div className={styles.toolbar} role="toolbar" aria-label="Форматирование">
+        {TOOLS.map(({ icon, label, keys }) => (
+          <Tooltip.Root key={label}>
+            <Tooltip.Trigger>
+              <Button.Root variant="ghost" tone="neutral" size="s" aria-label={label}>
+                <Button.Icon>
+                  <Icon name={icon} />
+                </Button.Icon>
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="s" side="bottom">
+              {label} <Kbd>{keys}</Kbd>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        ))}
+      </div>
+    </Tooltip.Provider>
+  );
+}

package/src/components/typography/COMPONENT.md

@@ -1,127 +1,124 @@
 # Typography
 
-**Default choice for page copy:** start from **`body-default`** in `variant` unless the scenario clearly needs another reading role.
+**Category:** foundations
+**Kind:** primitive
 
-## About
+> Text roles of the Golos Text type scale applied to any text element, with reading-width guidance.
 
-Styled text with **semantic reading roles** (`variant`) wired to `typography.role` in tokens, plus optional axes: `weight`, `tracking`, italic, and `tone` for secondary color. Renders as the HTML tag you pick with **`as`**.
+## When to use
+- Page titles, section headings, card titles, body text, captions and inline code outside of components that style their own text.
+- Long-form reading content (articles, help pages) with semantic tags via `as`.
+- Emphasis inside running text: nested `as="span"` with another `weight`, `tracking` or `tone`.
+- Single-line names in fixed-width places (`truncate` + `title`).
 
-**When to use**
-
-- Body copy, headings, captions, and metrics where you want kit tokens instead of ad-hoc `font-size`.
-- `tone="muted"` for secondary explanations, hints, and legal lines.
-- Nested **`Typography.Root`** nodes with different `as` / `weight` inside one block (see `./examples/composition.tsx`, `./examples/05-inline-emphasis.tsx`).
-- `as="h1"`–`as="h6"` for heading levels that match the theme; keep a sensible outline order on the page.
-- `as` values that are landmarks (`main`, `article`, `section`, `header`, `footer`, …) when you need both semantics and typography on the same node — otherwise wrap landmarks in normal elements and put **`Typography.Root`** inside.
-
-**When not to use**
-
-- As a substitute for **button** or **link** chrome — use [Button](../button/COMPONENT.md) / [LinkButton](../link-button/COMPONENT.md).
-- Expecting a separate `line-height` control per instance — line height is part of the role in CSS.
-- Interactive controls (fields, switches, etc.) still use their own components and sizes; **Typography** does not restyle them.
-
-## Reference mapping: MD3, Apple (SF), Polaris
-
-Rough **hierarchy** alignment only — not pixel-perfect parity. Font size column assumes **`1rem = 16px`** on `:root` (rounded).
-
-| `variant` | Token step | ≈ px @16 | Close MD3 | Close Apple (SF) | Polaris `Text` |
-| --------- | ---------- | -------- | --------- | ---------------- | -------------- |
-| `display` | `9xl` | 57 | Display Large | Large Title | `heading3xl` |
-| `headline` | `6xl` | 32 | Headline Large | Title 1 | `heading2xl` |
-| `heading-page` | `4xl` | 28 | Headline Medium | Title 2 | `headingXl` |
-| `heading-section` | `2xl` | 24 | Headline Small | Title 3 | `headingLg` |
-| `heading-subsection` | `xl` | 22 | Title Large | Headline | `headingMd` |
-| `heading-group` | `xs` | 14 | Title Small | Subheadline / Footnote | `headingSm`, `headingXs` |
-| `body-large` | `s` | 16 | Body Large | Body / Callout | `bodyLg` |
-| `body-default` | `xs` | 14 | Body Medium | Subheadline | `bodyMd` |
-| `body-small` | `2xs` | 12 | Body Small | Footnote | `bodySm` |
-| `body-compact` | `xs` size, tighter line | 14 | Label Large (dense) | — | `bodyXs` |
-| `caption` | `2xs` | 12 | Label Medium | Caption 1 | `bodySm` (with `tone`) |
-| `caption-micro` | `labelMicro` | 11 | Label Small | Caption 2 | smallest semantic step |
-
-Steps **`7xl`** / **`8xl`** exist in the scale but are **not** wired to `typography.role` — use tokens directly if you need them, not **`Typography`**.
-
-## Composition
-
-- Single primitive: **`Typography.Root`**. Put text or inline markup in **`children`**.
-- **`as`** defaults to **`p`**; allowed: paragraph, inline, block, **`h1`–`h6`**, **`small`**, **`blockquote`**, landmarks (`article`, `section`, `header`, `footer`, `aside`, `nav`, `main`).
-
-### Canonical example
+## When not to use
+- Field labels, hints and errors → the field's own `label` / `hint` / `error`, or [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md).
+- Links → use [LinkButton](../link-button/COMPONENT.md).
+- Multi-line code → use [CodeBlock](../code-block/COMPONENT.md); keyboard keys → [Kbd](../kbd/COMPONENT.md).
+- Status labels → use [Badge](../badge/COMPONENT.md).
+- Text inside controls (Button, Tabs, Badge…) — they set their own type.
 
+## Import
 ```tsx
 import { Typography } from "prime-ui-kit";
-
-export function Example() {
-  return (
-    <>
-      <Typography.Root as="h1" variant="heading-page">
-        Release notes
-      </Typography.Root>
-      <Typography.Root as="p" variant="body-default" tone="muted">
-        Summary of changes for the current shipping cycle.
-      </Typography.Root>
-      <Typography.Root as="p" variant="body-default">
-        Copy uses reading roles; controls use their own size scale — keep both axes explicit in layouts.
-      </Typography.Root>
-    </>
-  );
-}
 ```
 
-### Playground-aligned examples
-
-Order matches **`playground/sections/TypographySection.tsx`** and the runnable snippets in **`playground/snippets/typography/`**; the same scenarios ship under **`./examples/`** for `prime-ui-kit` consumers (import from **`prime-ui-kit`**).
-
-| Playground snippet | Package example |
-| --- | --- |
-| [`variant-catalog.tsx`](../../../playground/snippets/typography/variant-catalog.tsx) | [`./examples/variant-catalog.tsx`](./examples/variant-catalog.tsx) |
-| [`article-landmarks.tsx`](../../../playground/snippets/typography/article-landmarks.tsx) | [`./examples/01-article.tsx`](./examples/01-article.tsx) (same structure; English copy) |
-| [`reading-and-form.tsx`](../../../playground/snippets/typography/reading-and-form.tsx) | [`./examples/reading-and-form.tsx`](./examples/reading-and-form.tsx) |
-| [`variants.tsx`](../../../playground/snippets/typography/variants.tsx) | [`./examples/variants.tsx`](./examples/variants.tsx) |
-| [`states.tsx`](../../../playground/snippets/typography/states.tsx) | [`./examples/states.tsx`](./examples/states.tsx) |
-| [`composition.tsx`](../../../playground/snippets/typography/composition.tsx) | [`./examples/composition.tsx`](./examples/composition.tsx) |
-| [`full-width.tsx`](../../../playground/snippets/typography/full-width.tsx) | [`./examples/full-width.tsx`](./examples/full-width.tsx) |
-| [`as-prop.tsx`](../../../playground/snippets/typography/as-prop.tsx) | [`./examples/as-prop.tsx`](./examples/as-prop.tsx) |
-
-### Additional examples
-
-- [`./examples/02-form-labels-contrast.tsx`](./examples/02-form-labels-contrast.tsx) — **`Input`** label / optional / hint slots built with **`Typography.Root`** (richer than the playground form frame).
-- [`./examples/03-marketing-hero.tsx`](./examples/03-marketing-hero.tsx) — Hero stack: caption, display, headline, muted body.
-- [`./examples/04-reading-scale.tsx`](./examples/04-reading-scale.tsx) — Compact English ladder of every **`variant`** (no **`Divider`** captions; use **`variant-catalog`** for the full labeled catalog).
-- [`./examples/05-inline-emphasis.tsx`](./examples/05-inline-emphasis.tsx) — Nested spans on **`body-default`** (English; playground **`composition`** adds a link and `as="div"` wrapper).
-
-**LLM note:** Use **`./examples/*.tsx`** for copy-paste scenarios; **`playground/snippets/typography/*.tsx`** stay the source shown in the dev playground (`?raw`). This page keeps the contract (rules + API tables) authoritative.
-
-## Rules
-
-- **`variant` is required**; default-looking props omit extra **`data-*`** (`weight="regular"`, `tracking="normal"`, `tone="default"`, no italic).
-- DOM: **`data-variant`** uses kebab-case (e.g. `heading-page`).
-- Standard HTML attributes (`id`, `aria-*`, …) pass through **`...rest`**.
-- Root uses **`text-wrap: balance`** on short blocks; override from a parent if needed.
-- No built-in disabled / loading / error states — combine with surrounding UI.
+## Anatomy
+```
+Typography       the element from `as` (default <p>); variant, tone, weight, tracking, italic, truncate
+```
 
 ## API
 
-### Typography.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| as | see `TypographyAs` | `"p"` | No | HTML element |
-| variant | see `TypographyVariant` | — | Yes | Reading role |
-| weight | `"regular"` \| `"medium"` \| `"semibold"` | `"regular"` | No | Font weight |
-| tracking | `"normal"` \| `"tight"` \| `"tighter"` \| `"wide"` | `"normal"` | No | Letter spacing |
-| italic | `boolean` | `false` | No | Italic |
-| tone | `"default"` \| `"muted"` | `"default"` | No | Primary vs secondary text color |
-| children | `React.ReactNode` | — | No | Content |
-| className | `string` | — | No | Extra class |
-| ref | `React.Ref<HTMLElement>` | — | No | Element ref |
-| …rest | `React.HTMLAttributes<HTMLElement>` | — | No | Other element props |
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Typography
+`ref` → the element. Any text element styled by one text role (`--prime-text-<role>-*`); state goes to `data-*`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `"caption" \| "body-s" \| "body-m" \| "body-l" \| "title-s" \| "title-m" \| "title-l" \| "heading-s" \| "heading-m" \| "heading-l" \| "display-s" \| "display-m" \| "display-l" \| "code"` | — (required) | Text role: size, line height, weight and tracking. |
+| `tone` | `"default" \| "secondary" \| "muted" \| "accent" \| "success" \| "warning" \| "danger"` | `"default"` | Text color by meaning; `default` is primary text. |
+| `as` | `"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "small" \| "blockquote" \| "article" \| "section" \| "header" \| "footer" \| "aside" \| "nav" \| "main"` | `"p"` | The element, by the page outline; the role keeps the look. |
+| `weight` | `"regular" \| "medium" \| "semibold"` | — | Overrides the role's weight. |
+| `tracking` | `"normal" \| "tight" \| "tighter" \| "wide"` | — | Overrides the role's tracking with a `--prime-font-tracking-*` step. |
+| `italic` | `boolean` | `false` | Italic, for quotes and titles of works. |
+| `truncate` | `boolean` | `false` | One line with an ellipsis; set `title` when the full text matters. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className`, `id`, `title` and the other attributes of the element. |
+
+## Variants
+
+### variant (text role)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `display-l` · `display-m` · `display-s` | 60/68 · 48/56 · 36/44, 600 | hero numbers, promo | |
+| `heading-l` · `heading-m` · `heading-s` | 30/36 · 24/32 · 20/28, 600 | page titles and subtitles | |
+| `title-l` · `title-m` · `title-s` | 18/24 · 16/24 · 14/20, 600 | block, dialog and card titles | |
+| `body-l` · `body-m` · `body-s` | 16/24 · 14/20 · 13/20, 400 | reading text, interface text, dense secondary text | |
+| `caption` | 12/16, 400 | hints, meta, table heads | |
+| `code` | 13/20, mono | identifiers, inline code | |
+
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `default` | primary text | most text | yes |
+| `secondary` · `muted` | the two quieter steps | descriptions, meta | |
+| `accent` · `success` · `warning` · `danger` | semantic `*-text` colors | a value with a meaning (with a word, not color alone) | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `italic` | italic | quotes, titles of works | `false` |
+| `truncate` | one line with an ellipsis | names in fixed-width cells | `false` |
+
+`weight` (`regular` · `medium` · `semibold`) and `tracking` (`normal` 0 · `tight` −0.01em · `tighter` −0.02em · `wide` +0.01em, from `--prime-font-tracking-*`) override the role.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| role / overrides | `variant`, `weight`, `tracking`, `tone` | `data-variant`, `data-weight`, `data-tracking`, `data-tone` (not for `default`) |
+| italic / truncate | flags | `data-italic`, `data-truncate` |
+
+Text has no interactive states.
+
+## Layout & spacing
+- No outer margins: spacing comes from the parent's `gap`.
+- Reading text: cap the column at `--prime-layout-reading-max-width` (60–75 characters).
+- `truncate` needs a block element and a shrinking parent (`min-width: 0` in flex rows).
+
+## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
+- The heading level comes from `as` by the page outline, the look from `variant`: never skip levels for size.
+- `tone` never carries meaning alone — name the status in words.
+- With `truncate` pass the full text in `title` when it matters.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A block heading, its text and a meta line, each set by a text role and a semantic tag — `variant`, `as`, `tone`. |
+| [variants.tsx](examples/variants.tsx) | Every text role from display to caption and code, then every text color on body text — `variant`, `tone`. |
+| [weights.tsx](examples/weights.tsx) | One role with its weight, tracking or italic overridden — `weight`, `tracking`, `italic`. |
+| [inline-emphasis.tsx](examples/inline-emphasis.tsx) | Values emphasized inside running text by nested spans with another weight — `as`, `weight`. |
+| [semantic-tag.tsx](examples/semantic-tag.tsx) | The tag follows the page outline and the role sets the look, so a section title can be an `h2` at title size — `as`. |
+| [truncate.tsx](examples/truncate.tsx) | A long product name clamped to one line with an ellipsis; the full text stays in the tooltip — `truncate`, `title`. |
+| [article.tsx](examples/article.tsx) | A help article from landmarks, headings and a quote at the reading width — `as`, `variant`. |
+
+## Mistakes
+- `variant="h1"` → `variant="heading-m"` (or another role) plus `as="h1"`.
+- Missing `variant` → it is required.
+- `tone="error"` → `tone="danger"`; `color="gray"` → `tone="muted"`.
+- `truncate` on an inline span in a flex row that does not shrink → use a block element and `min-width: 0`.
+- Raw `font-size` in `className` → pick a role.
 
 ## Related
-
-- [Label](../label/COMPONENT.md)
-- [Hint](../hint/COMPONENT.md)
-- [Input](../input/COMPONENT.md)
-- [LinkButton](../link-button/COMPONENT.md)
-- [Banner](../banner/COMPONENT.md)
-- [Notification](../notification/COMPONENT.md)
+- **Built from:** —
+- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)

package/src/components/typography/examples/article.tsx

@@ -0,0 +1,36 @@
+/** A help article from landmarks, headings and a quote at the reading width — `as`, `variant`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyArticleExample() {
+  return (
+    <article className={styles.article}>
+      <header>
+        <Typography as="h1" variant="heading-m">
+          Как выставить счёт
+        </Typography>
+        <Typography as="p" variant="body-m" tone="secondary">
+          Счёт создаётся из заказа или вручную в разделе «Финансы».
+        </Typography>
+      </header>
+      <section aria-labelledby="article-steps">
+        <Typography id="article-steps" as="h2" variant="heading-s">
+          Из заказа
+        </Typography>
+        <Typography as="p" variant="body-m">
+          Откройте заказ, нажмите «Выставить счёт» и проверьте реквизиты покупателя. Счёт уйдёт на
+          почту из карточки клиента.
+        </Typography>
+      </section>
+      <blockquote>
+        <Typography as="p" variant="body-l">
+          Счёт без реквизитов покупателя бухгалтерия не примет.
+        </Typography>
+        <Typography as="footer" variant="caption" tone="secondary">
+          — Регламент финансового отдела
+        </Typography>
+      </blockquote>
+    </article>
+  );
+}

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

@@ -1,95 +1,41 @@
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-m);
-}
-
-.stackTight {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-s);
-}
+/* Layout of the Typography scenarios: semantic tokens only. */
 
-.formFields {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-l);
-}
-
-.hero {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-l);
-  max-width: 40rem;
-}
-
-.scaleList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-m);
-}
-
-/* Layout parity with playground/snippets/typography (PlaygroundExampleFrame preview). */
-.typographyScaleList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x4);
-}
-
-.typographyScaleRow {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x2);
-}
-
-.articleLandmarks {
+/* A short text block at a form width. */
+.block {
   display: grid;
-  gap: var(--prime-sys-spacing-x4);
-  max-width: 40rem;
+  gap: var(--prime-space-2);
+  max-width: var(--prime-modal-width-s);
+  margin: 0;
   text-align: start;
 }
 
-.articleLandmarks blockquote {
-  margin: 0;
-  padding-inline-start: var(--prime-sys-spacing-x3);
-  border-inline-start: 3px solid var(--prime-sys-color-border-subtle);
+/* inline-emphasis.tsx: a paragraph keeps inline flow, its spans must not become grid rows. */
+p.block {
+  display: block;
 }
 
-.readingAndForm {
+/* weights.tsx */
+.stack {
   display: grid;
-  gap: var(--prime-sys-spacing-x3);
-  max-width: 22rem;
+  gap: var(--prime-space-3);
   text-align: start;
 }
 
-.readingAndFormFields {
+/* article.tsx: long-form text at the reading width. */
+.article {
   display: grid;
-  gap: var(--prime-sys-spacing-x3);
-}
-
-.readingAndFormActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-x2);
-}
-
-.fullWidthColumns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-l);
-}
-
-.fullWidthNarrow {
-  flex: 1 1 12.5rem;
-  min-width: 0;
-  max-width: 17.5rem;
+  gap: var(--prime-space-4);
+  max-width: var(--prime-layout-reading-max-width);
+  text-align: start;
 }
 
-.fullWidthWide {
-  flex: 2 1 20rem;
-  min-width: 0;
+.article blockquote {
+  margin: 0;
+  padding-inline-start: var(--prime-space-3);
+  border-inline-start: var(--prime-space-1) solid var(--prime-color-fill-strong);
 }
 
-.inlineLinkInherit {
-  color: inherit;
+/* truncate.tsx: 240px, narrow enough to show the ellipsis. */
+.truncateBox {
+  width: min(100%, calc(var(--prime-space-24) * 2.5));
 }

package/src/components/typography/examples/inline-emphasis.tsx

@@ -0,0 +1,20 @@
+/** Values emphasized inside running text by nested spans with another weight — `as`, `weight`. */
+import { LinkButton, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyInlineEmphasisExample() {
+  return (
+    <Typography as="p" variant="body-m" className={styles.block}>
+      Заказ № 4821 —{" "}
+      <Typography as="span" variant="body-m" weight="semibold">
+        отправлен
+      </Typography>
+      , сумма{" "}
+      <Typography as="span" variant="body-m" weight="medium">
+        12 400 ₽
+      </Typography>
+      . Доставка: <LinkButton href="#address">уточнить адрес</LinkButton>.
+    </Typography>
+  );
+}

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

@@ -0,0 +1,20 @@
+/** A block heading, its text and a meta line, each set by a text role and a semantic tag — `variant`, `as`, `tone`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyOverviewExample() {
+  return (
+    <div className={styles.block}>
+      <Typography as="h3" variant="title-m">
+        Счёт № 4821 оплачен
+      </Typography>
+      <Typography as="p" variant="body-m" tone="secondary">
+        Деньги поступили на расчётный счёт. Закрывающие документы придут на почту бухгалтерии.
+      </Typography>
+      <Typography as="span" variant="caption" tone="muted">
+        12 марта, 14:20
+      </Typography>
+    </div>
+  );
+}

package/src/components/typography/examples/semantic-tag.tsx

@@ -0,0 +1,17 @@
+/** The tag follows the page outline and the role sets the look, so a section title can be an `h2` at title size — `as`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographySemanticTagExample() {
+  return (
+    <section className={styles.block} aria-labelledby="billing-title">
+      <Typography as="h2" id="billing-title" variant="title-s">
+        Реквизиты для оплаты
+      </Typography>
+      <Typography as="p" variant="body-m" tone="secondary">
+        ООО «Прайм», ИНН 7701234567, расчётный счёт в АО «Банк Север».
+      </Typography>
+    </section>
+  );
+}

package/src/components/typography/examples/truncate.tsx

@@ -0,0 +1,19 @@
+/** A long product name clamped to one line with an ellipsis; the full text stays in the tooltip — `truncate`, `title`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const NAME = "Эргономичное кресло с подголовником и поддержкой поясницы";
+
+export default function TypographyTruncateExample() {
+  return (
+    <div className={styles.truncateBox}>
+      <Typography variant="title-s" truncate title={NAME}>
+        {NAME}
+      </Typography>
+      <Typography variant="body-s" tone="muted">
+        Артикул 48 213
+      </Typography>
+    </div>
+  );
+}