prime-ui-kit 0.15.0 → 0.16.0

package/src/components/timeline/COMPONENT.md

@@ -23,16 +23,15 @@ import { Timeline } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Timeline.Root                    size container, sets the tier
-└─ Timeline.Group label          labelled <ol>; the line runs from its first dot to its last
+Timeline.Root                    size container, sets the tier (size, else the host tier)
+└─ Timeline.Group label          labelled <ol role="list">; the line runs from its first dot to its last
    ├─ Timeline.Item              <li> + row (div | button | a | asChild element) with the dot
-   │  ├─ Timeline.Title          first line
-   │  ├─ Timeline.Meta           second line (date)
-   │  │  └─ Timeline.MetaPrimary emphasized part
-   │  └─ Timeline.Value          trailing amount
-   │     └─ Timeline.ValueMeta   second line under the amount
+   │  ├─ Timeline.ItemTitle      first line
+   │  ├─ Timeline.ItemMeta       second line (date); <strong> emphasizes a part
+   │  └─ Timeline.ItemValue      trailing amount
+   │     └─ Timeline.ItemMeta    second line under the amount
    └─ Timeline.Gap               <li>: interval between events (dashed segment, hollow dot)
-      └─ Timeline.GapMeta        caption on the right («сейчас»)
+      └─ Timeline.Description    caption on the right («сейчас»)
 ```
 
 ## API
@@ -44,8 +43,10 @@ Timeline.Root                    size container, sets the tier
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Text, dot and row rhythm: rows 40 · 52 · 64 · 68 · 76 px. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `children` (`Timeline.Group`), `className` and the other div attributes. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Text, dot and row rhythm: rows 40 · 52 · 64 · 68 · 76 px, dot column → text 8 · 12 · 16 · 16 · 20 px. Without it the tier of its host, else `m`. |
+| `children` | `ReactNode` | — (required) | The `Timeline.Group`s. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | The other div attributes. |
 
 ### Timeline.Group
 `ref` → `HTMLOListElement`. A labelled `<ol>` of events; the line runs from its first dot to its last.
@@ -53,10 +54,12 @@ Timeline.Root                    size container, sets the tier
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `ReactNode` | — | Group heading («Недавно»); names the list via `aria-labelledby`. |
-| `…rest` | `Omit<OlHTMLAttributes<HTMLOListElement>, "children">` | — | `children` (`Timeline.Item`, `Timeline.Gap`), `className` and the other ol attributes. |
+| `children` | `ReactNode` | — (required) | `Timeline.Item` and `Timeline.Gap` rows. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<OlHTMLAttributes<HTMLOListElement>, "children">` | — | The other ol attributes. |
 
 ### Timeline.Item
-`ref` → the row element. An `<li>` with a row: `<div>`, `<button>` (`onClick`), `<a>` (`href`) or your element (`asChild`); the dot is prepended. The row under the pointer or keyboard focus is highlighted (pill, accent title and dot).
+`ref` → the row element. An `<li>` with a row: `<div>`, `<button>` (`onClick`), `<a>` (`href`) or your element (`asChild`); the dot is prepended. The row under the pointer or keyboard focus is highlighted (pill, accent title and dot); an interactive row gives under the press.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -65,22 +68,28 @@ Timeline.Root                    size container, sets the tier
 | `onClick` | `MouseEventHandler<HTMLElement>` | — | Renders the row as a `<button>`. |
 | `href` | `string` | — | Renders the row as a link (with `target`, `rel`, `download`). |
 | `asChild` | `boolean` | `false` | Renders the row as the single child element (a router link). |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "color" \| "onClick">` | — | `children` (Title, Meta, Value), `className` and the other row attributes. |
+| `children` | `ReactNode` | — (required) | `Timeline.ItemTitle`, `Timeline.ItemMeta`, `Timeline.ItemValue`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "color" \| "onClick">` | — | The other row attributes (`target`, `rel`, `download` with `href`). |
 
-### Timeline.Title · Timeline.Meta · Timeline.MetaPrimary
-`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, accent on the highlighted row, wraps), the muted date line with tabular numbers, and its emphasized part.
+### Timeline.ItemTitle · Timeline.ItemMeta
+`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, accent on the highlighted row, wraps) and the muted secondary line with tabular numbers — under the title the date (emphasize a part with `<strong>`), inside `Timeline.ItemValue` the value's second line.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+| `children` | `ReactNode` | — (required) | The text of the line. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | The other span attributes. |
 
-### Timeline.Value · Timeline.ValueMeta
-`ref` → `HTMLSpanElement`. `<span>`: the trailing amount (right-aligned, tabular) and a muted second line under it. Moves under the meta below 20rem.
+### Timeline.ItemValue
+`ref` → `HTMLSpanElement`. A `<span>` with the trailing amount (right-aligned, tabular), a `Timeline.ItemMeta` inside under it. Moves under the meta below 20rem.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Value: text color (income `success`, refund `danger`). |
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Text color (income `success`, refund `danger`). |
+| `children` | `ReactNode` | — (required) | The amount. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | The other span attributes. |
 
 ### Timeline.Gap
 `ref` → `HTMLDivElement`. An `<li>` interval between events: a shorter row with a hollow dot on a dashed segment and a muted caption.
@@ -88,10 +97,12 @@ Timeline.Root                    size container, sets the tier
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Caption and dot color; `warning` / `danger` flag a long interval. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `children` (the interval caption and an optional `Timeline.GapMeta`), `className` and the other div attributes. |
+| `children` | `ReactNode` | — (required) | The interval caption and an optional `Timeline.Description`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | The other div attributes. |
 
-### Timeline.GapMeta
-`ref` → `HTMLSpanElement`. A caption on the right of the gap («сейчас»), in the gap tone.
+### Timeline.Description
+`ref` → `HTMLSpanElement`. The secondary caption of a gap, at its end («сейчас»), in the gap tone.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -102,10 +113,10 @@ Timeline.Root                    size container, sets the tier
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | rows 40, title 12/16, dot 8 | very dense side panels | |
-| `s` | rows 52, title 13/20 | side panels, drawers | |
-| `m` | rows 64, title 14/20, dot 10 | page content and cards | yes |
-| `l` · `xl` | rows 68 / 76, title 16/24, dot 12 | spacious feeds, detail pages | |
+| `xs` | rows 40, title 12/16, dot 8, dot column → text 8 | very dense side panels | |
+| `s` | rows 52, title 13/20, dot column → text 12 | side panels, drawers | |
+| `m` | rows 64, title 14/20, dot 10, dot column → text 16 | page content and cards | yes |
+| `l` · `xl` | rows 68 / 76, title 16/24, dot 12, dot column → text 16 / 20 | spacious feeds, detail pages | |
 
 ### color (Item)
 | Value | Looks like | Use when | Default |
@@ -113,10 +124,10 @@ Timeline.Root                    size container, sets the tier
 | `blue` | blue dot at reduced emphasis | default category | yes |
 | `gray` · `green` · `orange` · `red` · `yellow` · `purple` · `sky` · `pink` · `teal` | dot in the hue | categories | |
 
-### tone (Item · Value · Gap)
+### tone (Item · ItemValue · Gap)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `neutral` | muted dot / primary value / muted gap caption | a status without meaning | Value, Gap |
+| `neutral` | muted dot / primary value / muted gap caption | a status without meaning | ItemValue, Gap |
 | `accent` | accent | a pending action | |
 | `success` | success | paid, income | |
 | `warning` | warning | overdue, a too-long interval | |
@@ -131,26 +142,31 @@ On an Item `tone` wins over `color` and shows at full emphasis.
 | tier | `size` | `data-size` on the root |
 | highlighted | pointer over the row, keyboard focus | `:hover`, `:focus-visible`: `fill-subtle-active` pill, accent title and dot (a `tone` keeps its dot) |
 | dot color | `color` / `tone` | `data-color` (without a tone) or `data-tone` |
-| interactive | `onClick`, `href`, `asChild` | `data-interactive`; pointer cursor, inset focus ring |
+| interactive | `onClick`, `href`, `asChild` | `data-interactive`; pointer cursor, inset focus ring, the touch row height (`touchTargetRowClass`) |
+| pressed | pointer or key down on an interactive row | the row gives (`press`: scale over `fast`), back on release |
 
 Timeline keeps no state and has no persistent selection: every row is highlighted only while it is under the pointer or focused.
 
 ## Layout & spacing
 - The root is a size container: give it a definite width (`width: min(100%, 30rem)`).
-- Row grid: dot column · text · value; below 20rem of root width the value moves under the meta line.
+- Row grid: dot column · text · value; the dot column and the text stand 8 · 12 · 16 · 16 · 20 apart by tier (`--tl-gap`); below 20rem of root width the value moves under the meta line.
 - Rows touch so the line is continuous; group → group `--prime-space-4`.
 - Inside a Card put it in `Card.Body`; the card owns the padding.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Interactive rows are one Tab stop each; the focus ring is drawn inside the row. |
 | `Enter` · `Space` | Activates a button row; Enter opens a link row. |
 
 ### ARIA
-- Each group is an `<ol>` labelled by its heading (`aria-labelledby`); events are `<li>`.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- Each group is an `<ol role="list">` labelled by its heading (`aria-labelledby`); events are `<li>`. The role keeps the list semantics that WebKit drops under `list-style: none`.
 - The dot is `aria-hidden`: put the status into the title or meta, not only the dot color.
 
 ### Labels
@@ -161,12 +177,12 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.Value`. |
+| [overview.tsx](examples/overview.tsx) | An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.ItemValue`. |
 | [variants.tsx](examples/variants.tsx) | Dot hues for categories at reduced emphasis, and status tones on items, values and gaps at full emphasis — `color`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier scales text, dot and row rhythm, rows 40 to 76 px — `size`. |
-| [structure.tsx](examples/structure.tsx) | 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`. |
+| [structure.tsx](examples/structure.tsx) | 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`. |
 | [links.tsx](examples/links.tsx) | 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`. |
-| [narrow.tsx](examples/narrow.tsx) | At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line. |
+| [narrow.tsx](examples/narrow.tsx) | 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`. |
 
 ## Mistakes
 - `Timeline.Item` outside `Timeline.Group` → items are `<li>`; always wrap them in a group.

package/src/components/timeline/examples/links.tsx

@@ -20,28 +20,28 @@ export default function TimelineLinksExample() {
         <Timeline.Group label="Операции">
           {OPERATIONS.map((operation) => (
             <Timeline.Item key={operation.id} href={`#${operation.id}`}>
-              <Timeline.Title>{operation.title}</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>{operation.date}</Timeline.MetaPrimary>
-              </Timeline.Meta>
-              <Timeline.Value>{operation.value}</Timeline.Value>
+              <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.Title>{WASH.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{WASH.date}</Timeline.MetaPrimary> · чек
-            </Timeline.Meta>
-            <Timeline.Value>{WASH.value}</Timeline.Value>
+            <Timeline.ItemTitle>{WASH.title}</Timeline.ItemTitle>
+            <Timeline.ItemMeta>
+              <strong>{WASH.date}</strong> · чек
+            </Timeline.ItemMeta>
+            <Timeline.ItemValue>{WASH.value}</Timeline.ItemValue>
           </Timeline.Item>
           {/* A router link (`<Link to>`) goes in the same way. */}
           <Timeline.Item asChild>
             <a href="#operations-archive">
-              <Timeline.Title>Операции за август</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>14 операций</Timeline.MetaPrimary>
-              </Timeline.Meta>
+              <Timeline.ItemTitle>Операции за август</Timeline.ItemTitle>
+              <Timeline.ItemMeta>
+                <strong>14 операций</strong>
+              </Timeline.ItemMeta>
             </a>
           </Timeline.Item>
         </Timeline.Group>

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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>