prime-ui-kit 0.14.0 → 0.16.0

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

@@ -1,28 +1,69 @@
-/** Rows that open an operation page become links, one Tab stop each with a focus ring — `href`. */
-import { Timeline } from "prime-ui-kit";
+/** Rows that open something: an operation page by a link or by your router link through the slot, a receipt in place by a button; one Tab stop each with a focus ring — `href`, `asChild`, `onClick`. */
+import { Button, Drawer, Timeline } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const EVENTS = [
+const OPERATIONS = [
   { id: "rent-ivan", title: "Аренда закончилась · Иван К.", date: "21.09.26", value: "+6 300 ₽" },
   { id: "oil", title: "ТО: замена масла", date: "10.09.26", value: "−689 ₽" },
-  { id: "wash", title: "Мойка и химчистка салона", date: "01.09.26", value: "−450 ₽" },
 ];
 
+const WASH = { title: "Мойка и химчистка салона", date: "01.09.26", value: "−450 ₽" };
+
 export default function TimelineLinksExample() {
+  const [receiptOpen, setReceiptOpen] = React.useState(false);
+
   return (
-    <Timeline.Root className={styles.feed}>
-      <Timeline.Group label="Операции">
-        {EVENTS.map((event) => (
-          <Timeline.Item key={event.id} href={`#${event.id}`}>
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary>
-            </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
+    <>
+      <Timeline.Root className={styles.feed}>
+        <Timeline.Group label="Операции">
+          {OPERATIONS.map((operation) => (
+            <Timeline.Item key={operation.id} href={`#${operation.id}`}>
+              <Timeline.ItemTitle>{operation.title}</Timeline.ItemTitle>
+              <Timeline.ItemMeta>
+                <strong>{operation.date}</strong>
+              </Timeline.ItemMeta>
+              <Timeline.ItemValue>{operation.value}</Timeline.ItemValue>
+            </Timeline.Item>
+          ))}
+          {/* The receipt opens in place: the row is a button. */}
+          <Timeline.Item onClick={() => setReceiptOpen(true)}>
+            <Timeline.ItemTitle>{WASH.title}</Timeline.ItemTitle>
+            <Timeline.ItemMeta>
+              <strong>{WASH.date}</strong> · чек
+            </Timeline.ItemMeta>
+            <Timeline.ItemValue>{WASH.value}</Timeline.ItemValue>
           </Timeline.Item>
-        ))}
-      </Timeline.Group>
-    </Timeline.Root>
+          {/* A router link (`<Link to>`) goes in the same way. */}
+          <Timeline.Item asChild>
+            <a href="#operations-archive">
+              <Timeline.ItemTitle>Операции за август</Timeline.ItemTitle>
+              <Timeline.ItemMeta>
+                <strong>14 операций</strong>
+              </Timeline.ItemMeta>
+            </a>
+          </Timeline.Item>
+        </Timeline.Group>
+      </Timeline.Root>
+
+      <Drawer.Root open={receiptOpen} onOpenChange={setReceiptOpen}>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Title>{WASH.title}</Drawer.Title>
+            <Drawer.Description>
+              Чек от {WASH.date} · {WASH.value}
+            </Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Footer>
+            <Drawer.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Закрыть
+              </Button.Root>
+            </Drawer.Close>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Root>
+    </>
   );
 }

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

@@ -1,4 +1,4 @@
-/** At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line. */
+/** At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line — `Timeline.ItemValue`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -26,11 +26,11 @@ export default function TimelineNarrowExample() {
           <Timeline.Group label={width.label}>
             {EVENTS.map((event) => (
               <Timeline.Item key={event.id}>
-                <Timeline.Title>{event.title}</Timeline.Title>
-                <Timeline.Meta>
-                  <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary>
-                </Timeline.Meta>
-                <Timeline.Value>{event.value}</Timeline.Value>
+                <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
+                <Timeline.ItemMeta>
+                  <strong>{event.date}</strong>
+                </Timeline.ItemMeta>
+                <Timeline.ItemValue>{event.value}</Timeline.ItemValue>
               </Timeline.Item>
             ))}
           </Timeline.Group>

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

@@ -1,4 +1,4 @@
-/** An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.Value`. */
+/** An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.ItemValue`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -34,11 +34,11 @@ export default function TimelineOverviewExample() {
       <Timeline.Group label="Недавно">
         {EVENTS.map((event) => (
           <Timeline.Item key={event.id}>
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary> · {event.ago}
-            </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
+            <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
+            <Timeline.ItemMeta>
+              <strong>{event.date}</strong> · {event.ago}
+            </Timeline.ItemMeta>
+            <Timeline.ItemValue>{event.value}</Timeline.ItemValue>
           </Timeline.Item>
         ))}
       </Timeline.Group>

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
@@ -149,7 +153,7 @@ No `labels`.
 | [overview.tsx](examples/overview.tsx) | An icon-only button with a tooltip that repeats its name on hover and keyboard focus — `Tooltip.Trigger`, `Tooltip.Content`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier next to buttons of the same tier; take the tier of the control it describes — `size`. |
 | [placement.tsx](examples/placement.tsx) | Every side, and alignment by room, start and end along the trigger; without room the chip flips and shifts, the arrow keeps pointing at the trigger — `side`, `align`. |
-| [toolbar.tsx](examples/toolbar.tsx) | A formatting toolbar in one group: after the first tooltip the neighbours open at once, each with its name and shortcut — `Tooltip.Provider`. |
+| [toolbar.tsx](examples/toolbar.tsx) | A formatting toolbar in one group: after the first tooltip the neighbours open at once for half a second, each with its name and shortcut — `Tooltip.Provider`, `skipDelayDuration`. |
 | [disabled-trigger.tsx](examples/disabled-trigger.tsx) | Why an action is unavailable: the disabled button still shows its tooltip on hover and Tab, no wrapper needed — `Tooltip.Trigger`. |
 | [non-interactive-trigger.tsx](examples/non-interactive-trigger.tsx) | A status badge, an avatar and an information icon explain themselves: the kit makes each a tab stop, so the tooltip opens from the keyboard too — `Tooltip.Trigger`. |
 | [delay.tsx](examples/delay.tsx) | The show delay of one tooltip: at once, the default 400 ms and one second — `delayDuration`. |
@@ -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/tooltip/examples/toolbar.tsx

@@ -1,4 +1,4 @@
-/** A formatting toolbar in one group: after the first tooltip the neighbours open at once, each with its name and shortcut — `Tooltip.Provider`. */
+/** A formatting toolbar in one group: after the first tooltip the neighbours open at once for half a second, each with its name and shortcut — `Tooltip.Provider`, `skipDelayDuration`. */
 import { Button, Icon, Kbd, Tooltip } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -13,7 +13,7 @@ const TOOLS = [
 
 export default function TooltipToolbarExample() {
   return (
-    <Tooltip.Provider>
+    <Tooltip.Provider skipDelayDuration={500}>
       <div className={styles.toolbar} role="toolbar" aria-label="Форматирование">
         {TOOLS.map(({ icon, label, keys }) => (
           <Tooltip.Root key={label}>

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 (PageContent `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`.

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>
+      ))}
+    </>
+  );
+}