prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/reference/components/slider/examples/in-form.tsx

@@ -0,0 +1,47 @@
+/** Campaign limits submitted with the form by `name`, a calm note confirms the save — `name`, `label`. */
+import { Button, Slider, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SliderInFormExample() {
+  const [saved, setSaved] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    setSaved(
+      `Сохранено: показов в день — ${data.get("dailyCap")}, ставка — ${data.get("bidShare")}%.`,
+    );
+  };
+
+  return (
+    <form className={styles.column} noValidate onSubmit={submit}>
+      <Slider
+        label="Показов одному клиенту в день"
+        name="dailyCap"
+        min={1}
+        max={10}
+        defaultValue={3}
+        showValue
+        onValueChange={() => setSaved(undefined)}
+      />
+      <Slider
+        label="Доля бюджета на ставки, %"
+        name="bidShare"
+        step={5}
+        defaultValue={40}
+        showValue
+        onValueChange={() => setSaved(undefined)}
+      />
+      <div className={styles.actions}>
+        <Button.Root type="submit">Сохранить лимиты</Button.Root>
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary" role="status">
+            {saved}
+          </Typography>
+        ) : null}
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/slider/examples/states.tsx

@@ -1,4 +1,4 @@
-/** The fill at both ends and a disabled slider — `disabled`. */
+/** The fill at both ends, an invalid slider and a disabled one — `invalid`, `disabled`. */
 import { Slider } from "prime-ui-kit";
 
 export default function SliderStatesExample() {
@@ -10,6 +10,9 @@ export default function SliderStatesExample() {
       <div>
         <Slider label="max" showValue defaultValue={100} />
       </div>
+      <div>
+        <Slider label="invalid" showValue defaultValue={90} invalid />
+      </div>
       <div>
         <Slider label="disabled" showValue defaultValue={35} disabled />
       </div>

package/dist/skill/reference/components/smart-filter/COMPONENT.md

@@ -213,7 +213,7 @@ same height and type.
 | [overview.tsx](examples/overview.tsx) | Filters above a request list: the filter button and the search, applied filters as tags, rows narrowed by the value and the text — `fields`, `value`, `search`, `matchesSmartFilter`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: the filter button, the search, the tags and the panel follow one tier — `size`. |
 | [many-values.tsx](examples/many-values.tsx) | An open set of twenty services, degraded ones marked with an icon, collapsed after eight; typing narrows the panel and marks the match in accent — `finite`, `icon`, `collapsedLimit`. |
-| [ranges.tsx](examples/ranges.tsx) | Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip — `kind`, `formatValue`, `matchesSmartFilter`. |
+| [ranges.tsx](examples/ranges.tsx) | Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip, and the bounds go to the server as from / to parameters — `kind`, `formatValue`, `matchesSmartFilter`, `isSmartFilterRange`. |
 | [single-value.tsx](examples/single-value.tsx) | For an API that takes one value per field: the filter button without a search, a press picks only that value and nothing can be hidden — `searchable`, `multiple`. |
 | [option-groups.tsx](examples/option-groups.tsx) | Values of different kinds in one field: owner types and people under their own headings — `options`, `group`. |
 | [controlled.tsx](examples/controlled.tsx) | A saved view sets the value from outside; the selection is read back as the list to ask the server for — `value`, `onValueChange`, `resolveSmartFilterValues`. |

package/dist/skill/reference/components/smart-filter/examples/controlled.tsx

@@ -30,13 +30,13 @@ export default function SmartFilterControlledExample() {
         <SmartFilter.Chips />
       </SmartFilter.Root>
       <div className={styles.views}>
-        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(ONLY_PUT)}>
+        <Button.Root variant="soft" tone="neutral" onClick={() => setValue(ONLY_PUT)}>
           Только PUT
         </Button.Root>
-        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(NO_READS)}>
+        <Button.Root variant="soft" tone="neutral" onClick={() => setValue(NO_READS)}>
           Без GET и POST
         </Button.Root>
-        <Button.Root variant="ghost" tone="neutral" size="s" onClick={() => setValue({})}>
+        <Button.Root variant="ghost" tone="neutral" onClick={() => setValue({})}>
           Сбросить
         </Button.Root>
       </div>

package/dist/skill/reference/components/smart-filter/examples/ranges.tsx

@@ -1,5 +1,7 @@
-/** Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip — `kind`, `formatValue`, `matchesSmartFilter`. */
+/** Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip, and the bounds go to the server as from / to parameters — `kind`, `formatValue`, `matchesSmartFilter`, `isSmartFilterRange`. */
 import {
+  Card,
+  isSmartFilterRange,
   matchesSmartFilter,
   SmartFilter,
   type SmartFilterField,
@@ -59,6 +61,23 @@ const DEALS = [
 
 const INITIAL: SmartFilterValue = { amount: { from: 50_000, to: 500_000 } };
 
+const asParam = (bound: number | Date) =>
+  bound instanceof Date ? bound.toISOString().slice(0, 10) : String(bound);
+
+/** The query a server gets: a range becomes `key_from` / `key_to`, a selection its included values. */
+function toQuery(value: SmartFilterValue) {
+  const params = new URLSearchParams();
+  for (const [key, entry] of Object.entries(value)) {
+    if (isSmartFilterRange(entry)) {
+      if (entry.from !== null) params.set(`${key}_from`, asParam(entry.from));
+      if (entry.to !== null) params.set(`${key}_to`, asParam(entry.to));
+    } else if (entry.include.length > 0) {
+      params.set(key, entry.include.join(","));
+    }
+  }
+  return params.toString();
+}
+
 export default function SmartFilterRangesExample() {
   const [value, setValue] = React.useState<SmartFilterValue>(INITIAL);
   const rows = DEALS.filter(
@@ -74,16 +93,31 @@ export default function SmartFilterRangesExample() {
         <SmartFilter.Toolbar />
         <SmartFilter.Chips />
       </SmartFilter.Root>
-      {rows.map((deal) => (
-        <div key={deal.id} className={styles.request}>
-          <Typography as="span" variant="body-m" truncate className={styles.route}>
-            {deal.client}
-          </Typography>
-          <Typography as="span" variant="body-m" tone="secondary">
-            {formatRubles(deal.amount)}
+      <Card.Root variant="list">
+        <Card.Header>
+          <Card.Title>Сделки</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            {rows.length} из {DEALS.length}
           </Typography>
-        </div>
-      ))}
+        </Card.Header>
+        <Card.List>
+          {rows.map((deal) => (
+            <Card.ListItem key={deal.id}>
+              <span className={styles.request}>
+                <Typography as="span" variant="body-m" truncate className={styles.route}>
+                  {deal.client}
+                </Typography>
+                <Typography as="span" variant="body-m" tone="secondary">
+                  {formatRubles(deal.amount)}
+                </Typography>
+              </span>
+            </Card.ListItem>
+          ))}
+        </Card.List>
+      </Card.Root>
+      <Typography as="span" variant="code" tone="secondary">
+        {`GET /deals?${toQuery(value)}`}
+      </Typography>
     </div>
   );
 }

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

@@ -173,7 +173,7 @@ Put it in a `Card` for a dashboard tile.
 | [compact.tsx](examples/compact.tsx) | Revenue by month per client in a list: the plot alone at a row's height with the dot on the current month, scrubbing shows the month in a tooltip, the label is the chart's accessible name — `layout`, `label`. |
 | [signed-bars.tsx](examples/signed-bars.tsx) | Monthly profit with a sign: losses go below the zero line, the current month rests highlighted and any bar shows its value under the pointer or the arrows — `variant`, `highlight`. |
 | [curve.tsx](examples/curve.tsx) | The same month of active users as a smooth curve, straight segments and steps — `curve`. |
-| [reference.tsx](examples/reference.tsx) | Checkout conversion against its plan: a dashed reference line, the scale from zero and the change over the whole period — `reference`, `min`, `change`. |
+| [reference.tsx](examples/reference.tsx) | Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period — `reference`, `min`, `max`, `change`. |
 | [gaps.tsx](examples/gaps.tsx) | Daily API requests with days the collector was down: the line breaks over a missing day and the headline says there is no data — `data`, `labels`. |
 | [period.tsx](examples/period.tsx) | Another period swaps the series: the line cross-fades in and the headline digits roll to the new total — `data`, `summary`. |
 

package/dist/skill/reference/components/sparkline/examples/reference.tsx

@@ -1,4 +1,4 @@
-/** Checkout conversion against its plan: a dashed reference line, the scale from zero and the change over the whole period — `reference`, `min`, `change`. */
+/** Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period — `reference`, `min`, `max`, `change`. */
 import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -27,6 +27,7 @@ export default function SparklineReferenceExample() {
           label="Конверсия оформления заказа"
           reference={PLAN}
           min={0}
+          max={5}
           change="first"
           formatValue={formatPercent}
           labels={{ reference: "План: {value}" }}

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

@@ -249,7 +249,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Sections of one screen; the active tab rises into the strip and glides to the next one — `defaultValue`. |
 | [variants.tsx](examples/variants.tsx) | The active tab in primary text with an accent icon, or all in accent — `tone`. |
-| [sizes.tsx](examples/sizes.tsx) | Every size tier: text, icon, folder radius and spacing grow together — `size`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier: text, icon, folder radius and spacing grow together; tabs sized to their content — `size`, `fullWidth`. |
 | [states.tsx](examples/states.tsx) | A disabled tab that clicks and arrow keys skip — `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A muted icon before the label and a hairline before the service section — `Tabs.Icon`, `Tabs.Label`, `Tabs.Separator`. |
 | [orientation.tsx](examples/orientation.tsx) | Account settings with a side list of sections: the active section reaches out of the panel, and below 600px the list moves above it — `orientation`. |

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

@@ -1,4 +1,4 @@
-/** Every size tier: text, icon, folder radius and spacing grow together — `size`. */
+/** Every size tier: text, icon, folder radius and spacing grow together; tabs sized to their content — `size`, `fullWidth`. */
 import { Tabs, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;

package/dist/skill/reference/components/tag-select/COMPONENT.md

@@ -156,7 +156,7 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A labelled tag field: focus opens the list, typing filters it, picked tags become chips — `label`, `options`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier with two picked tags; chips sit one tier below the field — `size`. |
-| [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one, with a disabled option in the list — `disabled`, `invalid`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one and one whose focus shows without the ring, with a disabled option in the list — `disabled`, `invalid`, `focusRing`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: removing the last region shakes the field and drops the error in, adding one clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [creatable.tsx](examples/creatable.tsx) | A typed text that is not in the list becomes a new tag from the Create row or Enter and is saved on the server: the chip waits busy, and a tag the server refuses leaves again — `creatable`, `onCreate`, `defaultColor`. |
 | [many-tags.tsx](examples/many-tags.tsx) | More tags than fit: at rest one row with «+N», focused every tag on up to three wrapped rows that scroll — `defaultValue`. |

package/dist/skill/reference/components/tag-select/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default field next to a disabled and an invalid one, with a disabled option in the list — `disabled`, `invalid`. */
+/** A default field next to a disabled and an invalid one and one whose focus shows without the ring, with a disabled option in the list — `disabled`, `invalid`, `focusRing`. */
 import { TagSelect, type TagSelectOption } from "prime-ui-kit";
 
 const OPTIONS: TagSelectOption[] = [
@@ -19,6 +19,13 @@ export default function TagSelectStatesExample() {
       />
       <TagSelect label="disabled" options={OPTIONS} defaultValue={["msk", "kzn"]} disabled />
       <TagSelect label="invalid" options={OPTIONS} invalid placeholder="Добавить город" />
+      <TagSelect
+        label="focusRing={false}"
+        options={OPTIONS}
+        defaultValue={["spb"]}
+        focusRing={false}
+        placeholder="Добавить город"
+      />
     </>
   );
 }

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

@@ -200,7 +200,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A labelled multi-line field with a hint; the height follows the text — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; text, padding, label and hint follow the tier — `size`. |
-| [states.tsx](examples/states.tsx) | A default field next to a read-only and a disabled one — `readOnly`, `disabled`. |
+| [states.tsx](examples/states.tsx) | A default field next to a read-only, a disabled and an invalid one with no message — `readOnly`, `disabled`, `invalid`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the text is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
 | [auto-resize.tsx](examples/auto-resize.tsx) | A field that grows with its text, one that starts as a line and stops growing at five, and a fixed one with a resize handle — `autoResize`, `rows`, `maxRows`. |
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single reply composer where the caret and the lighter fill show focus — `focusRing`. |

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

@@ -8,12 +8,6 @@
   width: min(100%, var(--prime-modal-width-m));
 }
 
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-}
-
 .formFields {
   display: flex;
   flex-direction: column;

package/dist/skill/reference/components/textarea/examples/in-form.tsx

@@ -1,5 +1,5 @@
 /** Support request form: the description is checked on submit, its error leaves as soon as the text is long enough and does not shift the form, a sent request turns the button green — `required`, `error`, `reserveSupportRow`. */
-import { Button, Input, Textarea, Typography } from "prime-ui-kit";
+import { Button, Input, Textarea } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -23,14 +23,6 @@ export default function TextareaInFormExample() {
 
   return (
     <form className={styles.form} noValidate onSubmit={submit}>
-      <div className={styles.formHeader}>
-        <Typography as="h3" variant="title-m">
-          Обращение в поддержку
-        </Typography>
-        <Typography as="p" variant="body-s" tone="secondary">
-          Ответим в течение рабочего дня.
-        </Typography>
-      </div>
       <div className={styles.formFields}>
         <Input.Root label="Тема" required>
           <Input.Wrapper>

package/dist/skill/reference/components/textarea/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default field next to a read-only and a disabled one — `readOnly`, `disabled`. */
+/** A default field next to a read-only, a disabled and an invalid one with no message — `readOnly`, `disabled`, `invalid`. */
 import { Textarea } from "prime-ui-kit";
 
 export default function TextareaStatesExample() {
@@ -16,6 +16,7 @@ export default function TextareaStatesExample() {
         placeholder="Причина возврата"
         hint="Станет доступно после выбора заказа"
       />
+      <Textarea.Root label="invalid" invalid defaultValue="Не подошёл размер" />
     </>
   );
 }

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

@@ -171,9 +171,10 @@ No `labels`.
 | [sizes.tsx](examples/sizes.tsx) | Every height tier, 24 to 64 px; `m` fits a two-line table cell — `size`. |
 | [states.tsx](examples/states.tsx) | No image (an icon or a short label on the fill) and an image that fails and falls back by itself. |
 | [ratios.tsx](examples/ratios.tsx) | Every aspect ratio at the same height; keep one ratio per list — `ratio`. |
+| [fit.tsx](examples/fit.tsx) | A supplier's wide banner in a square frame: cropped to fill or shown whole on the fill — `fit`. |
 | [ring.tsx](examples/ring.tsx) | A faint inner ring for a white-background photo on a light surface, where the edge would vanish — `ring`. |
 | [full-width.tsx](examples/full-width.tsx) | Covers in a card grid take the card width and keep 16:9, so every cover has one height — `fullWidth`. |
-| [video.tsx](examples/video.tsx) | Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `autoPlay`, `controls`. |
+| [video.tsx](examples/video.tsx) | Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a briefing shows its poster and its own duration format; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `poster`, `formatDuration`, `autoPlay`, `controls`. |
 | [pressable.tsx](examples/pressable.tsx) | Photos of a delivery that open a viewer: the frame is put on a button, so it lifts on hover, presses and takes the focus ring — `asChild`. |
 | [controlled.tsx](examples/controlled.tsx) | A media library picks photos for a listing: each tile is a checkbox with its check in the corner, the selection lives in the parent and a button clears it — `checked`, `onCheckedChange`. |
 

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

@@ -1,6 +1,6 @@
 /* Layout of the Thumbnail scenarios: semantic tokens only. */
 
-/* ratios.tsx, ring.tsx: thumbnails with captions in one line. */
+/* ratios.tsx, fit.tsx, ring.tsx: thumbnails with captions in one line. */
 .row {
   display: flex;
   flex-wrap: wrap;

package/dist/skill/reference/components/thumbnail/examples/fit.tsx

@@ -0,0 +1,24 @@
+/** A supplier's wide banner in a square frame: cropped to fill or shown whole on the fill — `fit`. */
+import { Thumbnail, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const BANNER = "https://picsum.photos/seed/supplier-banner/480/160";
+const FITS = ["cover", "contain"] as const;
+
+export default function ThumbnailFitExample() {
+  return (
+    <div className={styles.row}>
+      {FITS.map((fit) => (
+        <div key={fit} className={styles.cell}>
+          <Thumbnail.Root size="xl" color="gray">
+            <Thumbnail.Image src={BANNER} fit={fit} alt="Ферма поставщика «Северное хозяйство»" />
+          </Thumbnail.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {fit}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/components/thumbnail/examples/video.tsx

@@ -1,9 +1,12 @@
-/** Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `autoPlay`, `controls`. */
+/** Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a briefing shows its poster and its own duration format; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `poster`, `formatDuration`, `autoPlay`, `controls`. */
 import { Icon, Thumbnail, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const CLIP = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+const POSTER = "https://picsum.photos/seed/safety-briefing/640/360";
+
+const formatSeconds = (seconds: number) => `${Math.round(seconds)} с`;
 
 export default function ThumbnailVideoExample() {
   return (
@@ -19,6 +22,22 @@ export default function ThumbnailVideoExample() {
           Обход склада · без обложки
         </Typography>
       </div>
+      <div className={styles.cardContent}>
+        <Thumbnail.Root fullWidth ratio="16:9">
+          <Thumbnail.Video
+            src={CLIP}
+            poster={POSTER}
+            formatDuration={formatSeconds}
+            aria-label="Инструктаж по технике безопасности"
+          />
+          <Thumbnail.Fallback>
+            <Icon name="action.play" />
+          </Thumbnail.Fallback>
+        </Thumbnail.Root>
+        <Typography variant="caption" tone="muted">
+          Инструктаж · обложка, длительность в секундах
+        </Typography>
+      </div>
       <div className={styles.cardContent}>
         <Thumbnail.Root fullWidth ratio="16:9">
           <Thumbnail.Video src={CLIP} autoPlay aria-label="Как собрать заказ, ролик" />

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

@@ -165,7 +165,7 @@ No `labels`.
 | [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`. |
-| [links.tsx](examples/links.tsx) | Rows that open an operation page become links, one Tab stop each with a focus ring — `href`. |
+| [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. |
 
 ## Mistakes

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.Root className={styles.feed}>
+        <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.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>{event.date}</Timeline.MetaPrimary>
+              <Timeline.MetaPrimary>{WASH.date}</Timeline.MetaPrimary> · чек
             </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
+            <Timeline.Value>{WASH.value}</Timeline.Value>
           </Timeline.Item>
-        ))}
-      </Timeline.Group>
-    </Timeline.Root>
+          {/* 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>
+            </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/tooltip/COMPONENT.md

@@ -149,7 +149,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`. |

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/examples/weights.tsx

@@ -17,6 +17,9 @@ export default function TypographyWeightsExample() {
       <Typography variant="body-m" weight="semibold">
         {LINE} · semibold
       </Typography>
+      <Typography variant="body-m" tracking="tight">
+        {LINE} · tracking tight
+      </Typography>
       <Typography variant="body-m" tracking="tighter">
         {LINE} · tracking tighter
       </Typography>

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

@@ -155,10 +155,10 @@ One look. The circle is the video; the play disk and the pills stand on the medi
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A foreman's round video report: its still first frame with the play disk and the duration, played with sound on a press — `src`, `duration`. |
 | [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop: the transfer is drawn on the play disk itself — in flight with the cross and the ring, failed with the retry, not fetched with the download arrow — `unplayed`, `transfer`, `transferProgress`, `disabled`. |
-| [in-message.tsx](examples/in-message.tsx) | Round video messages in a field crew chat: the circle is the message itself, the time stands on its pill and the reply follows as text — `Message.Root`, `time`, `status`. |
+| [in-message.tsx](examples/in-message.tsx) | Round video messages in a field crew chat: the circle is the message itself, the time stands on its pill, the reply follows as text and the answer circle shows the cover its server made — `Message.Root`, `time`, `status`, `poster`. |
 | [transcript.tsx](examples/transcript.tsx) | Round video messages with a transcript: the button stands at the circle's top end like a voice message's, one text is known and one is asked for on the first open — `transcript`, `onTranscribe`. |
 | [transfer.tsx](examples/transfer.tsx) | One look for a round video on its way in either direction: the foreman's report waits to be fetched and then arrives, the engineer's answer is being sent — the disk in the middle with the ring of the share, the cross cancels, a dropped connection offers a retry, the circle plays once it is through — `transfer`, `transferProgress`, `transferDirection`, `onCancel`, `onRetry`, `onDownload`. |
-| [controlled.tsx](examples/controlled.tsx) | The parent knows what plays and marks the report as watched on the first play — `playing`, `onPlayingChange`, `unplayed`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent knows what plays, marks the report as watched on the first play and as seen to the end when it ends, and keeps the transcript open — `playing`, `onPlayingChange`, `unplayed`, `onEnded`, `transcriptExpanded`, `onTranscriptExpandedChange`. |
 
 ## Mistakes
 - A `<video>` cropped round by hand in a bubble → use `VideoNote`: it plays one sound at a time, draws the transfer on its disk and keeps the meta on its pill.

package/dist/skill/reference/components/video-note/examples/controlled.tsx

@@ -1,12 +1,25 @@
-/** The parent knows what plays and marks the report as watched on the first play — `playing`, `onPlayingChange`, `unplayed`. */
+/** The parent knows what plays, marks the report as watched on the first play and as seen to the end when it ends, and keeps the transcript open — `playing`, `onPlayingChange`, `unplayed`, `onEnded`, `transcriptExpanded`, `onTranscriptExpandedChange`. */
 import { Typography, VideoNote } from "prime-ui-kit";
 import * as React from "react";
 
 const VIDEO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
 
+const TRANSCRIPT =
+  "Стойка собрана, кабели промаркированы. Жду подтверждения, чтобы включить питание.";
+
 export default function VideoNoteControlledExample() {
   const [playing, setPlaying] = React.useState(false);
   const [unplayed, setUnplayed] = React.useState(true);
+  const [seen, setSeen] = React.useState(false);
+  const [transcriptOpen, setTranscriptOpen] = React.useState(true);
+
+  const state = playing
+    ? "Воспроизводится"
+    : seen
+      ? "Досмотрено до конца"
+      : unplayed
+        ? "Ещё не просмотрено"
+        : "Просмотрено";
 
   return (
     <>
@@ -19,9 +32,13 @@ export default function VideoNoteControlledExample() {
           setPlaying(next);
           if (next) setUnplayed(false);
         }}
+        onEnded={() => setSeen(true)}
+        transcript={TRANSCRIPT}
+        transcriptExpanded={transcriptOpen}
+        onTranscriptExpandedChange={setTranscriptOpen}
       />
       <Typography as="p" variant="body-s" tone="secondary">
-        {playing ? "Воспроизводится" : unplayed ? "Ещё не просмотрено" : "Просмотрено"}
+        {state} · расшифровка {transcriptOpen ? "открыта" : "свёрнута"}
       </Typography>
     </>
   );

package/dist/skill/reference/components/video-note/examples/in-message.tsx

@@ -1,10 +1,13 @@
-/** Round video messages in a field crew chat: the circle is the message itself, the time stands on its pill and the reply follows as text — `Message.Root`, `time`, `status`. */
+/** Round video messages in a field crew chat: the circle is the message itself, the time stands on its pill, the reply follows as text and the answer circle shows the cover its server made — `Message.Root`, `time`, `status`, `poster`. */
 import { Message, VideoNote } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const VIDEO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
 
+/** The cover the media server made for the reply: shown at once, before the first frame. */
+const POSTER_URL = "https://picsum.photos/seed/server-rack/480/480";
+
 export default function VideoNoteInMessageExample() {
   return (
     <div className={styles.thread}>
@@ -15,7 +18,7 @@ export default function VideoNoteInMessageExample() {
         <Message.Text>Вижу, стойка собрана. Подключайте питание.</Message.Text>
       </Message.Root>
       <Message.Root direction="outgoing" time="13:51" status="read">
-        <VideoNote src={VIDEO_URL} duration={6} />
+        <VideoNote src={VIDEO_URL} duration={6} poster={POSTER_URL} />
       </Message.Root>
     </div>
   );

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

@@ -69,7 +69,8 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A count that sighted users read from the layout, said in words to screen readers, and a polite announcement after an action — `VisuallyHidden`. |
+| [overview.tsx](examples/overview.tsx) | A count that sighted users read from the layout, said in words to screen readers, and a polite announcement after an action — `VisuallyHidden`, `live`. |
+| [assertive.tsx](examples/assertive.tsx) | A failed save shown by a badge on screen and announced at once, interrupting the screen reader — `live`. |
 
 ## Mistakes
 - `display: none` or `hidden` for screen-reader text → both remove it from the accessibility tree.