prime-ui-kit 0.15.0 → 0.17.0

package/dist/skill/reference/components/timeline/examples/sizes.tsx

@@ -1,33 +1,38 @@
 /** Every tier scales text, dot and row rhythm, rows 40 to 76 px — `size`. */
-import { Timeline } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Timeline, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function TimelineSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <Timeline.Root key={size} size={size} className={styles.feed}>
-          <Timeline.Group label={size}>
-            <Timeline.Item>
-              <Timeline.Title>Аренда закончилась · Иван К.</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>21.09.26</Timeline.MetaPrimary> · 15 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>+6 300 ₽</Timeline.Value>
-            </Timeline.Item>
-            <Timeline.Item>
-              <Timeline.Title>ТО: замена масла</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>10.09.26</Timeline.MetaPrimary> · 26 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>−689 ₽</Timeline.Value>
-            </Timeline.Item>
-          </Timeline.Group>
-        </Timeline.Root>
+        <div key={size}>
+          <div>
+            <Timeline.Root size={size}>
+              <Timeline.Group label="Недавно">
+                <Timeline.Item>
+                  <Timeline.ItemTitle>Аренда закончилась · Иван К.</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>
+                    <strong>21.09.26</strong> · 15 д. назад
+                  </Timeline.ItemMeta>
+                  <Timeline.ItemValue>+6 300 ₽</Timeline.ItemValue>
+                </Timeline.Item>
+                <Timeline.Item>
+                  <Timeline.ItemTitle>ТО: замена масла</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>
+                    <strong>10.09.26</strong> · 26 д. назад
+                  </Timeline.ItemMeta>
+                  <Timeline.ItemValue>−689 ₽</Timeline.ItemValue>
+                </Timeline.Item>
+              </Timeline.Group>
+            </Timeline.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/dist/skill/reference/components/timeline/examples/structure.tsx

@@ -1,4 +1,4 @@
-/** A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.GapMeta`, `Timeline.ValueMeta`. */
+/** A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -9,46 +9,46 @@ export default function TimelineStructureExample() {
       <Timeline.Group label="История работ">
         <Timeline.Gap>
           Без обслуживания 26 дней · 300 км
-          <Timeline.GapMeta>сейчас</Timeline.GapMeta>
+          <Timeline.Description>сейчас</Timeline.Description>
         </Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>ТО: замена масла</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>10.09.26</Timeline.MetaPrimary> · 16 500 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            900 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>ТО: замена масла</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>10.09.26</strong> · 16 500 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            900 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap>40 дней · 2 200 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>ТО: масло + колодки</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>01.08.26</Timeline.MetaPrimary> · 14 300 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            1 500 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>ТО: масло + колодки</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>01.08.26</strong> · 14 300 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            1 500 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap>55 дней · 2 200 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="red">
-          <Timeline.Title>Ремонт: замена ремня</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>07.06.26</Timeline.MetaPrimary> · 12 100 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            2 800 ₽<Timeline.ValueMeta>Ремонт</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>Ремонт: замена ремня</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>07.06.26</strong> · 12 100 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            2 800 ₽<Timeline.ItemMeta>Ремонт</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap tone="warning">100 дней · 4 400 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>Резина зад + работа</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>27.02.26</Timeline.MetaPrimary> · 7 700 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            1 516 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>Резина зад + работа</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>27.02.26</strong> · 7 700 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            1 516 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
       </Timeline.Group>
     </Timeline.Root>

package/dist/skill/reference/components/timeline/examples/variants.tsx

@@ -1,7 +1,5 @@
 /** Dot hues for categories at reduced emphasis, and status tones on items, values and gaps at full emphasis — `color`, `tone`. */
-import { type PaletteColor, Timeline, type Tone } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { type PaletteColor, Timeline, type Tone, Typography } from "prime-ui-kit";
 
 const COLORS: PaletteColor[] = [
   "gray",
@@ -27,30 +25,44 @@ const TONES: { tone: Tone; title: string; value: string }[] = [
 
 export default function TimelineVariantsExample() {
   return (
-    <>
-      <Timeline.Root className={styles.feed}>
-        <Timeline.Group label="color">
-          {COLORS.map((color) => (
-            <Timeline.Item key={color} color={color}>
-              <Timeline.Title>{color}</Timeline.Title>
-              <Timeline.Meta>Категория события</Timeline.Meta>
-            </Timeline.Item>
-          ))}
-        </Timeline.Group>
-      </Timeline.Root>
-      <Timeline.Root className={styles.feed}>
-        <Timeline.Group label="tone">
-          {TONES.map(({ tone, title, value }) => (
-            <Timeline.Item key={tone} tone={tone}>
-              <Timeline.Title>{title}</Timeline.Title>
-              <Timeline.Meta>{tone}</Timeline.Meta>
-              <Timeline.Value tone={tone}>{value}</Timeline.Value>
-            </Timeline.Item>
-          ))}
-          <Timeline.Gap tone="warning">Оплата задерживается 10 дней</Timeline.Gap>
-          <Timeline.Gap tone="danger">Просрочка 30 дней</Timeline.Gap>
-        </Timeline.Group>
-      </Timeline.Root>
-    </>
+    <div>
+      <div>
+        <div>
+          <Timeline.Root>
+            <Timeline.Group label="Категории">
+              {COLORS.map((color) => (
+                <Timeline.Item key={color} color={color}>
+                  <Timeline.ItemTitle>{color}</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>Категория события</Timeline.ItemMeta>
+                </Timeline.Item>
+              ))}
+            </Timeline.Group>
+          </Timeline.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            color
+          </Typography>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Timeline.Root>
+            <Timeline.Group label="Статусы">
+              {TONES.map(({ tone, title, value }) => (
+                <Timeline.Item key={tone} tone={tone}>
+                  <Timeline.ItemTitle>{title}</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>{tone}</Timeline.ItemMeta>
+                  <Timeline.ItemValue tone={tone}>{value}</Timeline.ItemValue>
+                </Timeline.Item>
+              ))}
+              <Timeline.Gap tone="warning">Оплата задерживается 10 дней</Timeline.Gap>
+              <Timeline.Gap tone="danger">Просрочка 30 дней</Timeline.Gap>
+            </Timeline.Group>
+          </Timeline.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            tone
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

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

@@ -7,7 +7,7 @@
 
 ## When to use
 - Name and shortcut of an icon-only button.
-- Why a control is disabled: put the disabled control straight into `Tooltip.Trigger`.
+- Why a control is disabled: put the disabled control straight into `Tooltip.Trigger` — also one a disabled `Fieldset` disables.
 - What a status badge, an avatar or an information icon means.
 - A one-line definition of a term or abbreviation.
 
@@ -58,7 +58,7 @@ No DOM, no ref. Its tooltips form a group: one is open at a time, and once one h
 | `children` | `ReactNode` | — (required) | Subtree. |
 
 ### Tooltip.Trigger
-No DOM of its own: clones the single child and links it to the tooltip with `aria-describedby`. A `disabled` child is wrapped in a focusable `<span>`; a child that is no tab stop becomes one.
+No DOM of its own: clones the single child and links it to the tooltip with `aria-describedby`. A `disabled` child — by its own prop or a disabled `Fieldset` around it — is wrapped in a focusable `<span>`; a child that is no tab stop becomes one.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -79,7 +79,7 @@ No DOM of its own: clones the single child and links it to the tooltip with `ari
 Tooltip has no `variant` or `tone`: it is always a flat inverse chip (`tooltip-bg`, `tooltip-text`) — dark in the light theme, light in the dark one — with an arrow and no shadow, so it reads the same on every layer. The chip is a host of its own: it points the text and fill roles at `tooltip-muted` / `tooltip-fill`, so a Kbd or a secondary line inside reads on it. Content flows inline: a label and its key stay on one line, block children stack. The arrow (`--prime-tooltip-arrow-width` × `--prime-tooltip-arrow-height`) always points at the trigger's centre, also after flipping, aligning or shifting, and never slides into the chip's rounded corner.
 
 ### size (Content)
-A chip of tier T is as tall as a menu item of tier T; text, padding and radius step together (`--prime-tooltip-<tier>-*`).
+A chip of tier T is as tall as a menu item of tier T; text, padding and radius step together (`--prime-tooltip-<tier>-*`). The chip itself is the shared tooltip surface (`src/internal/overlay/tooltipSurface.module.css`), which the drop reason of Dnd wears too.
 
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -110,7 +110,7 @@ A chip of tier T is as tall as a menu item of tier T; text, padding and radius s
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| open / closed | hover (mouse, pen) or focus after `delayDuration`; `open` / `onOpenChange` | `data-state="open" \| "closed"` on the chip (closed during the exit) and on the trigger |
+| open / closed | hover (mouse, pen) or focus after `delayDuration`; `open` / `defaultOpen` / `onOpenChange` | `data-state="open" \| "closed"` on the chip (closed during the exit) and on the trigger |
 | closing | blur, a press on the trigger, Escape, pointer leaving (unless it moves onto the chip) | — |
 | warm group | another tooltip of the Provider was just shown | `data-instant="true"`: opens and leaves without motion |
 | side | `side` and the room around the trigger | `data-side` (resolved), `data-align` |
@@ -124,18 +124,22 @@ A chip of tier T is as tall as a menu item of tier T; text, padding and radius s
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focus on the trigger opens the tooltip after the delay. |
 | `Escape` | Hides the tooltip; focus stays on the trigger. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The chip is `role="tooltip"`; while open the trigger points at it with `aria-describedby` (appended to the child's own).
 - `Tooltip.Trigger` composes the child's `ref`, sets `data-state` and chains the child's `onPointerEnter`, `onPointerLeave`, `onPointerDown`, `onFocus` and `onBlur`.
 - The tooltip is a description, not the name: an icon-only button needs its own `aria-label`.
 - The pointer may move onto the chip without closing it (WCAG 1.4.13); a touch does not open it, focus does.
 - Tooltip has no `closeOnEscape` / `closeOnOutsideClick` (foundation §8): it closes on pointer-leave, blur, a press on the trigger and Escape, and Escape cannot be turned off — WCAG 1.4.13 requires the chip to be dismissable without moving the pointer or focus.
-- A `disabled` control is wrapped by the kit in a focusable `<span>`: the host takes hover and Tab, the focus ring is drawn on the control.
+- A `disabled` control (its own prop or a disabled `Fieldset`) is wrapped by the kit in a focusable `<span>`: the host takes hover and Tab, the focus ring is drawn on the control. Around a button the host is that button for assistive tech — `role="button"`, `aria-disabled`, named by the control through `aria-labelledby` — and the control itself leaves the tree.
 - A trigger that is no tab stop (Badge, Avatar, ProgressCircle, `Icon` with `label`) gets `tabIndex={0}` and the focus ring; its name comes from `aria-label` or the icon `label`.
 
 ### Labels
@@ -165,5 +169,5 @@ No `labels`.
 - A Provider per tooltip in a toolbar → one Provider around the toolbar, so neighbours open instantly.
 
 ## Related
-- **Built from:** —
+- **Built from:** the anchored floating panel (`internal/overlay/FloatingPanel`, whose scroller is a [ScrollContainer](../scroll-container/COMPONENT.md)) and the tooltip chip (`internal/overlay/tooltipSurface`)
 - **See also:** [Popover](../popover/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Button](../button/COMPONENT.md), [Hint](../hint/COMPONENT.md)

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

@@ -1,14 +1,10 @@
 /* Layout of the Tooltip scenarios: semantic tokens only. */
 
-/* toolbar.tsx: a raised strip of icon buttons. */
+/* toolbar.tsx: a strip of icon buttons. */
 .toolbar {
   display: flex;
   align-items: center;
   gap: var(--prime-space-1);
-  padding: var(--prime-space-1);
-  border-radius: var(--prime-radius-l);
-  background: var(--prime-color-layer-nested);
-  box-shadow: var(--prime-shadow-raised);
 }
 
 /* non-interactive-trigger.tsx: the three triggers in one row. */

package/dist/skill/reference/components/tooltip/examples/non-interactive-trigger.tsx

@@ -8,7 +8,7 @@ export default function TooltipNonInteractiveTriggerExample() {
     <div className={styles.row}>
       <Tooltip.Root>
         <Tooltip.Trigger>
-          <Badge.Root color="orange">Просрочен</Badge.Root>
+          <Badge.Root tone="danger">Просрочен</Badge.Root>
         </Tooltip.Trigger>
         <Tooltip.Content>Счёт не оплачен 12 дней, срок был 1 октября</Tooltip.Content>
       </Tooltip.Root>

package/dist/skill/reference/components/tooltip/examples/sizes.tsx

@@ -1,21 +1,28 @@
 /** 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 { Button, Tooltip, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function TooltipSizesExample() {
   return (
     <Tooltip.Provider>
-      {SIZES.map((size) => (
-        <Tooltip.Root key={size}>
-          <Tooltip.Trigger>
-            <Button.Root variant="soft" tone="neutral" size={size}>
+      <div>
+        {SIZES.map((size) => (
+          <div key={size}>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <Button.Root variant="soft" tone="neutral" size={size}>
+                  Черновик
+                </Button.Root>
+              </Tooltip.Trigger>
+              <Tooltip.Content size={size}>Черновик сохранится на сервере</Tooltip.Content>
+            </Tooltip.Root>
+            <Typography as="span" variant="caption" tone="muted">
               {size}
-            </Button.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Content size={size}>Черновик сохранится на сервере</Tooltip.Content>
-        </Tooltip.Root>
-      ))}
+            </Typography>
+          </div>
+        ))}
+      </div>
     </Tooltip.Provider>
   );
 }

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

@@ -42,9 +42,12 @@ Typography       the element from `as` (default <p>); variant, tone, weight, tra
 | `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. |
+| `numeric` | `"proportional" \| "tabular"` | `"proportional"` | `tabular` — every digit as wide as the others: amounts, times and counts line up in a column and keep their width. |
 | `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. |
+| `children` | `ReactNode` | — | The text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `id`, `title` and the other attributes of the element. |
 
 ## Variants
 
@@ -71,6 +74,12 @@ Typography       the element from `as` (default <p>); variant, tone, weight, tra
 | `italic` | italic | quotes, titles of works | `false` |
 | `truncate` | one line with an ellipsis | names in fixed-width cells | `false` |
 
+### numeric
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `proportional` | the font's own figures | running text | yes |
+| `tabular` | every digit as wide as the others | amounts, times and counts in a column, a number that changes in place | |
+
 `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
@@ -85,15 +94,19 @@ Text has no interactive states.
 - No outer margins: spacing comes from the parent's `gap`.
 - Title, heading and display roles balance their lines (`text-wrap-style: balance`); body and caption avoid a lone last word (`pretty`). Long words break (`overflow-wrap: break-word`).
 - `code` uses the mono family (JetBrains Mono); every other role the sans family (Golos Text).
-- Reading text: cap the column at `--prime-layout-reading-max-width` (60–75 characters).
+- Reading text: cap the column at the reading measure (`Page.Root maxWidth="readable"`, 60–75 characters).
 - `truncate` needs a block element and a shrinking parent (`min-width: 0` in flex rows).
 
 ## 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. -->
+
 - 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.
@@ -112,10 +125,12 @@ No `labels`.
 | [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`. |
+| [numeric.tsx](examples/numeric.tsx) | Invoice amounts in a column line up digit under digit with tabular figures — `numeric`. |
 | [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"`.
+- `font-variant-numeric: tabular-nums` in your own class around a number → `numeric="tabular"`.
 - 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`.
@@ -123,4 +138,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)
+- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [Page](../../layout/page/COMPONENT.md)

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

@@ -4,9 +4,8 @@
 .block {
   display: grid;
   gap: var(--prime-space-2);
-  max-width: var(--prime-modal-width-s);
+  max-width: var(--prime-layout-form-width-s);
   margin: 0;
-  text-align: start;
 }
 
 /* inline-emphasis.tsx: a paragraph keeps inline flow, its spans must not become grid rows. */
@@ -18,7 +17,6 @@ p.block {
 .stack {
   display: grid;
   gap: var(--prime-space-3);
-  text-align: start;
 }
 
 /* article.tsx: long-form text at the reading width. */
@@ -26,13 +24,12 @@ p.block {
   display: grid;
   gap: var(--prime-space-4);
   max-width: var(--prime-layout-reading-max-width);
-  text-align: start;
 }
 
+/* The quote stands in from the text column. */
 .article blockquote {
   margin: 0;
-  padding-inline-start: var(--prime-space-3);
-  border-inline-start: var(--prime-space-1) solid var(--prime-color-fill-strong);
+  padding-inline-start: var(--prime-space-4);
 }
 
 /* truncate.tsx: 240px, narrow enough to show the ellipsis. */

package/dist/skill/reference/components/typography/examples/numeric.tsx

@@ -0,0 +1,16 @@
+/** Invoice amounts in a column line up digit under digit with tabular figures — `numeric`. */
+import { Typography } from "prime-ui-kit";
+
+const AMOUNTS = ["1 118 400,00 ₽", "96 250,50 ₽", "7 111,11 ₽"];
+
+export default function TypographyNumericExample() {
+  return (
+    <>
+      {AMOUNTS.map((amount) => (
+        <Typography key={amount} variant="body-m" numeric="tabular">
+          {amount}
+        </Typography>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/video-note/COMPONENT.md

@@ -46,7 +46,7 @@ VideoNote              <div role="group">; data-playing · data-disabled · data
 |---|---|---|---|
 | `src` | `string` | — (required) | Video URL, loaded with `preload="metadata"`: nothing plays before a press. |
 | `duration` | `number` | — | Length in seconds, shown until the media reports its own. |
-| `unplayed` | `boolean` | `false` | Nobody has played it yet: an accent dot after the duration and `labels.unplayed` for screen readers. Clear it when `onPlayingChange(true)` comes; the dot leaves with a fade. |
+| `unplayed` | `boolean` | `false` | Nobody has played it yet: an accent dot after the duration and `labels.unplayed` for screen readers. Clear it when `onPlayingChange(true)` comes; the dot fades out and the row closes up in place. |
 | `disabled` | `boolean` | `false` | Nothing can be played: the play disk and the keyboard seek, the transcript button and the transfer actions are off (native `disabled`). A disabled `Fieldset` around it disables it too. |
 | `poster` | `string` | — | A still shown before the first frame; without it the first frame is drawn. Video only. |
 | `playing` | `boolean` | — | Playing with sound (controlled): `true` plays it (from the start or on from a pause), `false` pauses it. One sound plays on the page at a time. |
@@ -81,11 +81,11 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 |---|---|---|
 | loading | the first frame not drawn yet | `data-frame="loading"` on the circle: a Skeleton fills it; once loaded the video fades in over it (`base`), then the Skeleton goes |
 | at rest | idle | `data-state="idle"` on the circle; the still first frame (or `poster`) with the play disk and the duration; nothing plays, loops or decodes past the metadata and the first frame — a long chat costs nothing until a press |
-| playing | the disk (or a press on the circle), `playing` / `defaultPlaying` | `data-playing="true"` on the root, `data-state="playing"`; sound from the start, the ring fills over the edge every frame (one CSS variable on the ring), the duration counts down, the disk's glyph turns to pause and the disk fades out (it stays while it has the keyboard focus); `onPlayingChange(true)`; any other sound pauses |
+| playing | the disk (or a press on the circle), `playing` / `defaultPlaying` | `data-playing="true"` on the root, `data-state="playing"`; sound from the start, the ring (the kit ring at its `band` weight, in the accent) fills over the edge every frame (one CSS variable on the ring), the duration counts down, the disk's glyph turns to pause and the disk fades out (it stays while it has the keyboard focus); `onPlayingChange(true)`; any other sound pauses |
 | paused | the disk or the circle again, another sound starting, `playing={false}` | `data-state="paused"`, the disk with the play glyph comes back, the ring stays; `onPlayingChange(false)` |
 | sought | an arrow, PageUp / PageDown, Home / End on the disk | the position moves (5 s, a tenth, the edges), the ring and the description follow; from rest it stops there, paused |
 | ended | the media ends | rewound, the ring empties, the still first frame and the play disk; `onPlayingChange(false)`, `onEnded` |
-| unplayed | `unplayed` | the accent dot and `labels.unplayed` in the description |
+| unplayed | `unplayed` | the accent dot in the duration pill (it rises in, and closes up in place when `unplayed` clears) and `labels.unplayed` in the description |
 | disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"`; the circle and its duration dim to 0.6, the disk, the transcript button and the transfer disk are natively `disabled`; nothing plays by a press, a key or `playing` |
 | transferring | `transfer` `queued` / `loading`, `transferProgress` | `data-transfer="true"`; the circle dims to 0.6 and the play disk itself becomes the transfer in the same place and look (the play glyph cross-fades into a white ×; the share is the Button's `progress` ring along its inner edge — the kit ring at the line weight, a 32% track, gliding `base`, always turning; a quarter arc without a share); the button is `aria-busy`, described by `uploadProgress` / `downloadProgress`; nothing plays until it is done |
 | transfer failed | `transfer="failed"` | `data-transfer="true"`, the circle dims to 0.6; the disk turns danger with a retry arrow (`retryUpload` / `retryDownload`, described by `notSent` / `notReceived`); `onRetry` |
@@ -96,7 +96,7 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 | transcript failed | `onTranscribe` rejects | the area closes, `onTranscriptExpandedChange(false)`, `labels.transcribeFailed` announced; the next open asks again |
 
 ## Layout & spacing
-- The circle is one square box: `min(--prime-message-video-note × 1.15, 100cqi)` wide with `aspect-ratio: 1`; everything in it fills it, so it stays a perfect circle at every width from 320px.
+- The circle is one square box: `min(--prime-message-video-note-box, 100cqi)` wide with `aspect-ratio: 1`; everything in it fills it, so it stays a perfect circle at every width.
 - The duration pill stands at the bottom-start corner, the message's meta pill at the bottom-end corner, the transcript button at the top-end corner of the square — where the circle leaves room — the place a voice message has it, at the end of its top row.
 - The duration and the meta read like a voice message's time row: the caption size and regular weight in the muted tone of the media pill (`--prime-color-media-pill-fg` on `--prime-color-media-pill`), AA over a white frame.
 - The transcript opens under the circle in a block of the message's fill (`--prime-message-padding-*`, `--prime-message-radius`). In a chat, opening and closing it is one motion of the message: the height and the width change together and the text fades in or out where it stands, the circle never moves. The text is selectable, and the chat search marks its matches in it.
@@ -107,6 +107,8 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus: the play disk (or the transfer disk), the transcript button. |
@@ -117,6 +119,8 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 | `Home` · `End` | On the disk: to the start or the end. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The root is `role="group"` named by `labels.player` (or your `aria-label`).
 - The play disk is a button named `labels.play` / `labels.pause`, described by the duration (`labels.duration`) or the position (`labels.position`) and `labels.unplayed`; the pills are `aria-hidden`, and the press area over the whole circle is a pointer aid only (`aria-hidden`).
 - While the note is on its way, failed or not fetched, the play button itself is the transfer, named by the direction (`cancelUpload` / `cancelDownload` described by `uploadProgress` / `downloadProgress`, `retryUpload` / `retryDownload` described by `notSent` / `notReceived`, `download`); its ring is `aria-hidden`; a refused action is announced (`role="status"`).
@@ -130,10 +134,10 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 |---|---|---|
 | `player` | `"Видеосообщение"` | Name of the player group. |
 | `play` | `"Воспроизвести видеосообщение"` | Name of the play disk while it does not play. |
-| `pause` | `"Пауза"` | Name of the play disk while it plays. |
-| `position` | `"{current} из {duration}"` | The position: `{current}` and `{duration}` as m:ss. |
 | `unplayed` | `"Не просмотрено"` | Visually hidden text read while `unplayed`. |
 | `duration` | `"Длительность {duration}"` | The play disk's description before playback (during it, `position`). |
+| `pause` | `"Пауза"` | Name of the play disk while it plays. |
+| `position` | `"{current} из {duration}"` | The position: `{current}` and `{duration}` as m:ss. |
 | `transcribe` | `"Расшифровать"` | Name of the transcript button while the text is closed. |
 | `hideTranscript` | `"Скрыть расшифровку"` | Name of the transcript button while the text is open. |
 | `transcribeFailed` | `"Не удалось расшифровать сообщение"` | Announced when `onTranscribe` rejects. |
@@ -169,5 +173,5 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 - `transferDirection` used to restyle → it changes only the words; the look is one both ways.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (the play disk, `shape="circle"` `variant="shade"`; the transcript button), [Skeleton](../skeleton/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), Icon (`action.play`, `action.pause`, `action.close`, `action.refresh`, `action.download`, `action.transcribe`, `nav.chevronUp`, `status.failed`); `internal/mediaPlayer` (the shared props, the play disk, the transcript button, the keyboard seek, the playing triad, the transfer — with VoicePlayer), `internal/disabledContext` (a disabled `Fieldset`), `internal/mediaSession` (one sound at a time), `internal/transferDisk` (the transfer's logic), `internal/ring` (the playback ring), `internal/mediaPill` (pills and marks), `internal/transcript` + `internal/Disclosure` (the transcript), `internal/messagePart` (the round part of a message)
+- **Built from:** [Button](../button/COMPONENT.md) (the play disk, `shape="circle"` `variant="shade"`; the transcript button), [Skeleton](../skeleton/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), Icon (`action.play`, `action.pause`, `action.close`, `action.refresh`, `action.download`, `action.transcribe`, `nav.chevronUp`, `status.failed`); `internal/mediaPlayer` (the shared props, the play disk, the transcript button, the keyboard seek, the playing triad, the transfer — with VoicePlayer), `internal/disabledContext` (a disabled `Fieldset`), `internal/mediaSession` (one sound at a time), `internal/transferDisk` (the transfer's logic), `internal/ring` (the playback ring), `internal/mediaPill` (pills and marks), `internal/transcript` + `internal/Disclosure` (the transcript), `internal/messagePart` (the round part of a message), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [VoicePlayer](../voice-player/COMPONENT.md) — the voice message, the same player contract; [Message](../message/COMPONENT.md) — the chat it sits in; [Composer](../composer/COMPONENT.md) — records the video message

package/dist/skill/reference/components/visually-hidden/COMPONENT.md

@@ -6,8 +6,8 @@
 > Text that screen readers read and nobody sees: the words behind an icon, a badge or a change on the screen.
 
 ## When to use
-- A count or a status the layout shows by position or colour, said in words («: три счёта ждут оплаты»).
-- An announcement after an action that changes no visible text: `role="status"` + `aria-live="polite"`, the message set after the action.
+- A count or a status the layout shows by position or colour, said in words («ждут оплаты: 3»).
+- An announcement after an action that changes no visible text: `live="polite"`, the message set after the action.
 - A description for `aria-describedby` that sighted users read elsewhere on the screen.
 
 ## When not to use
@@ -37,7 +37,7 @@ VisuallyHidden    <span>: out of sight (1px, clipped), pinned to its containing
 |---|---|---|---|
 | `children` | `ReactNode` | — | The text to read. |
 | `live` | `"polite" \| "assertive"` | — | An announcement region, read as a whole on every change: `polite` — `role="status"`, `assertive` — `role="alert"` (urgent only). |
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `id` (to point `aria-describedby` at it), `className` and the other span attributes. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "role" \| "aria-live" \| "aria-atomic" \| "aria-relevant">` | — | `id` (to point `aria-describedby` at it), `className` and the other span attributes; the region attributes come only from `live`. |
 
 ## Variants
 One look: none. It renders no pixels and takes no room.
@@ -55,9 +55,13 @@ One look: none. It renders no pixels and takes no room.
 ## 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. -->
+
 - The text stays in the accessibility tree: it joins the accessible name of the element around it.
 - With `live="polite"` it is a polite live region (`role="status"`), with `live="assertive"` an alert (`role="alert"`) for what cannot wait; keep it mounted and change its text — a region mounted together with its message is often not read.
 
@@ -75,7 +79,7 @@ No `labels`.
 ## Mistakes
 - `display: none` or `hidden` for screen-reader text → both remove it from the accessibility tree.
 - A live region mounted with its first message → mount it empty, then set the text.
-- `role="status"` and `aria-live` written by hand → `live="polite"` sets them together, atomic.
+- `role="status"` and `aria-live` written by hand → `live="polite"` sets them together, atomic; the props have no `role` / `aria-live`, and `live` wins over any passed through.
 - `live="assertive"` for a routine result («Сохранено») → it interrupts the reader; keep it for errors that block.
 - VisuallyHidden as the only name of a button that has `aria-label` → the `aria-label` wins; use one of them.
 - Hidden text that repeats the visible label → screen readers read it twice.

package/dist/skill/reference/components/visually-hidden/examples/assertive.tsx

@@ -27,7 +27,7 @@ export default function VisuallyHiddenAssertiveExample() {
         Сохранить счёт
       </Button.Root>
       {failed ? (
-        <Badge.Root color="red" aria-hidden="true">
+        <Badge.Root tone="danger" aria-hidden="true">
           Не сохранено
         </Badge.Root>
       ) : null}