prime-ui-kit 0.15.0 → 0.17.0

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

@@ -1,35 +1,35 @@
 /** Every size tier: row height, text, icon and count follow the tier — `size`. */
 import { Icon, List, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function ListSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.tier}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
-          <List.Root size={size} aria-label={`Очереди, ${size}`}>
-            <List.Item current>
-              <List.ItemIcon>
-                <Icon name="object.inbox" />
-              </List.ItemIcon>
-              <List.ItemText>Входящие</List.ItemText>
-              <List.ItemCount color="blue">12</List.ItemCount>
-            </List.Item>
-            <List.Item>
-              <List.ItemIcon>
-                <Icon name="status.sent" />
-              </List.ItemIcon>
-              <List.ItemText>Отправленные</List.ItemText>
-            </List.Item>
-          </List.Root>
+        <div key={size}>
+          <div>
+            <List.Root size={size} aria-label={`Очереди, ${size}`}>
+              <List.Item current>
+                <List.ItemIcon>
+                  <Icon name="object.inbox" />
+                </List.ItemIcon>
+                <List.ItemText>Входящие</List.ItemText>
+                <List.ItemCount color="blue">12</List.ItemCount>
+              </List.Item>
+              <List.Item>
+                <List.ItemIcon>
+                  <Icon name="status.sent" />
+                </List.ItemIcon>
+                <List.ItemText>Отправленные</List.ItemText>
+              </List.Item>
+            </List.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
-    </>
+    </div>
   );
 }

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

@@ -1,27 +1,44 @@
 /** The open record, a regular row and an unavailable one — `current`, `disabled`. */
-import { Card, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { List, Typography } from "prime-ui-kit";
 
 export default function ListStatesExample() {
   return (
-    <Card.Root className={styles.pane}>
-      <Card.Body>
-        <List.Root aria-label="Заявки">
-          <List.Item current>
-            <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
-            <List.ItemDescription>Открыта сейчас</List.ItemDescription>
-          </List.Item>
-          <List.Item>
-            <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
-            <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
-          </List.Item>
-          <List.Item disabled>
-            <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
-            <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
-          </List.Item>
-        </List.Root>
-      </Card.Body>
-    </Card.Root>
+    <div>
+      <div>
+        <div>
+          <List.Root aria-label="Открытая заявка">
+            <List.Item current>
+              <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
+              <List.ItemDescription>Открыта сейчас</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            current
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в работе">
+            <List.Item>
+              <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
+              <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            default
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в архиве">
+            <List.Item disabled>
+              <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
+              <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            disabled
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/dist/skill/reference/components/list/examples/with-icon.tsx

@@ -1,7 +1,5 @@
-/** Leading avatars of clients and icons of queues; the slot sizes the avatar to the row tier — `List.ItemIcon`. */
-import { Avatar, Card, Icon, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Leading avatars of clients and icons of queues; an avatar takes the row tier — `List.ItemIcon`. */
+import { Avatar, Icon, List, Typography } from "prime-ui-kit";
 
 const CLIENTS = [
   { id: "belova", name: "Ирина Белова", company: "ООО «Гранит»", initials: "ИБ", color: "blue" },
@@ -11,9 +9,9 @@ const CLIENTS = [
 
 export default function ListWithIconExample() {
   return (
-    <>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+    <div>
+      <div>
+        <div>
           <List.Root aria-label="Клиенты">
             {CLIENTS.map((client, index) => (
               <List.Item key={client.id} current={index === 0}>
@@ -27,10 +25,11 @@ export default function ListWithIconExample() {
               </List.Item>
             ))}
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+          <Typography as="span" variant="caption" tone="muted">
+            Avatar.Root
+          </Typography>
+        </div>
+        <div>
           <List.Root aria-label="Очереди">
             <List.Item current>
               <List.ItemIcon>
@@ -53,8 +52,11 @@ export default function ListWithIconExample() {
               <List.ItemText>Доставка</List.ItemText>
             </List.Item>
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-    </>
+          <Typography as="span" variant="caption" tone="muted">
+            Icon
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/dist/skill/reference/components/login-form/COMPONENT.md

@@ -22,14 +22,14 @@ import { LoginForm } from "prime-ui-kit";
 
 ## Anatomy
 ```
-LoginForm.Root                      surface: card fill, radius, shadow
+LoginForm.Root                      width cap; a Card inside: card fill, radius, shadow
 ├─ LoginForm.Header
 │  ├─ LoginForm.Logo                tile with the product mark
 │  ├─ LoginForm.Title               h1
 │  └─ LoginForm.Description
 └─ LoginForm.Body
    ├─ LoginForm.Actions             provider buttons
-   ├─ Divider.Root                  «или»
+   ├─ Divider                       «или»
    ├─ LoginForm.Form                <form>: Input.Root … · Button submit
    │  └─ LoginForm.Actions          primary button + ghost back action
    └─ LoginForm.Footer              «Нет аккаунта? <LinkButton>»
@@ -41,20 +41,34 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### LoginForm.Root
-`ref` → `HTMLDivElement`. The sign-in card: card fill, radius and shadow, the tier rhythm; provides its size to the parts. Native `<div>` props.
+`ref` → `HTMLDivElement`. The sign-in form: a Card (fill, radius, shadow) capped at a small modal's width, the tier rhythm; provides its size to the parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. Without it the form takes the tier of a sized host (a Modal). |
 | `align` | `"start" \| "center"` | `"start"` | `start` — the Modal header layout (rounded accent tile left, title over description right); `center` — a round logo above centered text. |
 | `flat` | `boolean` | `false` | Removes the card shadow (inside a Modal or on a plain page). No border either way. |
 | `className` | `string` | — | Class on the card. |
+| `children` | `ReactNode` | — | The parts: Header, Body. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ### LoginForm.Header
 `ref` → `HTMLElement`. `<header>` with the logo, title and description, laid out by Root `align`. Native props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Logo, Title, Description. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | The other header attributes. |
+
 ### LoginForm.Logo
-`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label` — then it is the product mark image (`role="img"`). Native `<div>` props.
+`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label` — then it is the product mark image (`role="img"`).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The product mark or an `Icon`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Title
 `ref` → `HTMLHeadingElement`. The heading (kit Typography, text role by the tier).
@@ -62,21 +76,54 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `as` | `"h1" \| "h2" \| "h3"` | `"h1"` | Heading level; `h2` when the page already has an `h1`. |
+| `children` | `ReactNode` | — | The heading text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLHeadingElement>` | — | The other heading attributes. |
 
 ### LoginForm.Description
-`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone). Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ### LoginForm.Body
-`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer. Native `<div>` props.
+`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Actions, `Divider`, Form, Footer. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
 `ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The fields and the Actions. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `FormHTMLAttributes<HTMLFormElement>` | — | The other form (`onSubmit`, `action`) attributes. |
+
 ### LoginForm.Actions
-`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action. Native `<div>` props.
+`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The buttons. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Footer
-`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`. Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line with a `LinkButton`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ## Variants
 
@@ -84,7 +131,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `xs` / `s` | padding 16, gap 24, field gap 16, title-s / title-m | inside a Modal or a narrow popover | |
-| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | yes |
+| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | the host tier, else `m` |
 | `l` | padding 32, gap 40, field gap 20, heading-s | a standalone sign-in screen on a wide canvas | |
 | `xl` | padding 40, gap 40, field gap 24, heading-m | marketing-grade sign-in, touch-first | |
 
@@ -120,14 +167,20 @@ Root carries `data-size`, `data-align` and `data-flat`.
 - header → body `--prime-space-8` (gap on Root); provider buttons → divider → form `--prime-space-4`; field → field → submit `--prime-space-5`; submit → back action `--prime-space-3`; form → footer `--prime-space-6`.
 - Spacing is `gap` on parents; no margins between parts.
 - The card has no border, takes the full width up to the small modal width. To center it on a page, wrap it in your own flex container on the page.
-- The form is a layer of the surface ladder like Card (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
+- The form is a Card, a layer of the surface ladder (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
 
 ## Accessibility
 
 ### Keyboard
-No keyboard interaction.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Action |
+|---|---|
+| `Enter` | In a field of the form, submits it. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The title is a real heading (`h1` by default) and the form is a native `<form>`: Enter submits.
 - The logo is decorative; with an `aria-label` it is the product mark image (`role="img"`).
 - Give `LoginForm.Form` an `aria-label` (or `aria-labelledby` pointing to the title id) so the form is a landmark.
@@ -145,12 +198,12 @@ No `labels`.
 | [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header with the product's named mark — `align`, `LoginForm.Logo`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Padding, gaps and text roles of the card follow the tier; the fields and buttons take the same one — `size`. |
 | [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, no shadow for a host that already is a surface and a second-level title under the host page's own heading — `flat`, `as`. |
-| [register.tsx](examples/register.tsx) | Sign-up: five fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
+| [register.tsx](examples/register.tsx) | Sign-up: four fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
 | [forgot-password.tsx](examples/forgot-password.tsx) | Password reset request: one field, the primary action and a quiet way back — `LoginForm.Actions`. |
 | [reset-password.tsx](examples/reset-password.tsx) | A new password after the e-mail link: a strength meter on the first field and a mismatch error under the second one — `strength`, `error`. |
 | [verification-code.tsx](examples/verification-code.tsx) | The second step with a one-time code: a rejected code shows its error under the cells, resend is a quiet action — `DigitInput`, `LoginForm.Actions`. |
 | [states.tsx](examples/states.tsx) | The submit cycle: the button is busy while the request runs, a failed request shows a danger Banner and marks the password — `loading`, `invalid`. |
-| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. |
+| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width — `LoginForm.Form`. |
 
 ## Mistakes
 - A separate block of your own for provider buttons → put them in `LoginForm.Actions`.
@@ -160,5 +213,5 @@ No `labels`.
 - Repeating the card `size` on every field and button → set it once on Root; fields and buttons follow it.
 
 ## Related
-- **Built from:** [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`)
-- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Card](../card/COMPONENT.md) (the same surface for forms on an app page), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)
+- **Built from:** [Card](../card/COMPONENT.md) (the surface), [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`), the icon tile (`iconBox` `.tile`, the `start` logo)
+- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)

package/dist/skill/reference/components/login-form/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. */
+/** On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width — `LoginForm.Form`. */
 import { Button, Input, LinkButton, LoginForm } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/login-form/examples/register.tsx

@@ -1,4 +1,4 @@
-/** Sign-up: five fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. */
+/** Sign-up: four fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. */
 import { Button, Divider, Icon, Input, LinkButton, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 

package/dist/skill/reference/components/media-viewer/COMPONENT.md

@@ -57,13 +57,13 @@ MediaViewer                        portal + role="dialog", a dark theme island o
 | `onIndexChange` | `(index: number) => void` | — | The page turned: a swipe, an arrow, a key, a thumbnail of the filmstrip. Fires once the page has settled, also after a slide to a far item. |
 | `loop` | `boolean` | `false` | Past the last item comes the first, and back (with three items or more). |
 | `maxZoom` | `number` | `4` | How far a picture zooms, times its fitted size. |
-| `thumbnails` | `boolean` | `false` | A filmstrip of every item along the bottom: it follows the page, scrolls on its own at rest, and a press slides to that item. |
+| `thumbnails` | `boolean` | `false` | A filmstrip of every item along the bottom: it follows the page; after a scroll by the person it stays where it was left until the page turns, then glides back. A press slides to that item. |
 | `autoPlay` | `boolean` | `true` | A video starts once its page settles, muted where the browser refuses sound without a press. `false` — it waits for a press on its play disk. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the viewer. |
 | `closeOnOutsideClick` | `boolean` | `true` | A vertical swipe, or a mouse click on the stage past the media, closes the viewer. |
 | `getOrigin` | `(index: number) => Element \| null` | — | The element item `index` opens from and closes into (its thumbnail). Without it the viewer finds the picture showing the item's `thumbnail`, `src` or `poster`; with none on screen, it fades. |
 | `renderActions` | `(item: MediaViewerItem, index: number) => ReactNode` | — | Actions for the item on screen in the top bar, before the zoom and close buttons: `Button shape="circle" variant="shade"`, a ⋯ Dropdown. |
-| `labels` | `Partial<MediaViewerLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<MediaViewerLabels>` | — | Built-in strings, see Labels. |
 | `aria-label` | `string` | — | The name of the dialog; default `labels.viewer`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `role="dialog"` element. |
 
@@ -87,14 +87,14 @@ MediaViewer has no `variant`, `size` or `tone`: the stage is always near black,
 | State | Driven by | DOM |
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the dialog; mounted until the picture has flown back into its thumbnail (or faded) |
-| page | `index` / `defaultIndex` / `onIndexChange` | `data-current` on the page on screen; the pages around it are `aria-hidden` and `inert`; `onIndexChange` fires once the page has settled |
+| page | `index` / `defaultIndex` / `onIndexChange` | `data-current` on the page on screen; the pages around it are `aria-hidden` and `inert`; `onIndexChange` fires once the page has settled; its thumbnail carries `aria-current="true"` and a ring in the light ink |
 | far slide | a thumbnail, `Home` / `End` | the far item is mounted as the neighbour on its side and slides in; the real neighbour there is hidden meanwhile |
 | zoomed | a pinch (also a trackpad pinch), a double tap, ⌘ / Ctrl + wheel, the zoom button, `+` / `-` / `0` — about the point, up to `maxZoom` | `data-zoomed` on the dialog; the zoom button turns «Уменьшить» |
 | gesture | a finger or the mouse dragging | `data-gesture="page \| pan \| pinch \| dismiss"` on the dialog |
 | chrome hidden | a tap, a pinch or a double tap (Tab brings it back); a playing video after 2.5 s without the pointer moving | `data-chrome="hidden"`: the bars fade and drift aside, take no presses; while a video plays the pointer hides too (`data-playing`). A video standing still always keeps its bar |
 | flight | open and close | `data-phase="opening \| open \| closing"`: only the picture moves; the play disk and the bars come after it lands and go before it takes off |
-| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner that fades out as the picture arrives |
-| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить»; it fades in, and on a retry cross-fades with the Spinner in the same place |
+| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a block Skeleton in the picture's fitted box, which the picture fades in over |
+| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel on the media shade with «Повторить»; it fades in, and fades out on a retry while the picture's box holds its Skeleton again |
 | sound | the sound button, its level panel (hover, focus, a tap), ↑ / ↓, M | one `volume` and mute for every video of the viewer; `data-open` on the sound control while the level shows; `autoPlay` refused with sound starts muted |
 
 Motion: it opens out of the thumbnail it was opened from — the picture grows from the thumbnail's shape to its fit over `base` on the `emphasized` curve while the stage fades in — and closes back into the thumbnail of the item on screen (`getOrigin`; without it the opener for the item it opened at, and for any other item the picture on the page that shows its `thumbnail`, `src` or `poster`, nearest the opener — paging on in a grid still closes into the right tile); without one, or with less than a fifth of it in view, it rises from a slight shrink and fades. The shape is what the page shows of the thumbnail: its media box, cut by every clipping ancestor (a scroller, a rounded album, a bubble) and the viewport, and the radius of each corner taken from the frame whose corner it is — an album's inner tiles fly square, its corner tiles round only on the outer side, and the corners glide all the way, never snap. During the flight only the picture moves; a video flies as the frame of the thumbnail it opened from (drawn before the first paint), starts only after it lands (`autoPlay`) and pauses before it takes off. Released gestures settle with a spring: a page turns past half its width or on a flick, and any other item — a thumbnail far along the strip, `Home` / `End` — arrives by the same slide, never a cut or a fade; the filmstrip follows the track on every frame, so its glide and the emphasis of its thumbnails move with the finger and settle with the page; a zoomed picture coasts with iOS momentum (deceleration 0.998 / ms) and springs back from its edges, and at its edge a sideways drag turns the page; a pinch past its range resists like a rubber band and settles inside it, a swipe away shrinks the picture and thins the stage and closes past 12% of the height or on a flick. Under `prefers-reduced-motion` the open and close are instant and the springs land at once; the picture still follows the finger.
@@ -129,6 +129,8 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `ArrowLeft` · `ArrowRight` | Turn the page (mirrored in RTL); at an end without `loop` the track nudges back. |
@@ -142,13 +144,15 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 | `Tab` · `Shift+Tab` | Cycle focus inside the viewer and bring the bars back. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `role="dialog"`, `aria-modal="true"`, named by `aria-label` or `labels.viewer`.
 - Every page is a `role="group"` with `aria-roledescription="слайд"` and a name like «3 из 12»; the neighbours are `aria-hidden` and `inert`.
 - A page change is read out by a polite live region: «{alt}, 3 из 12».
 - Every gesture has a single-pointer alternative: arrows and keys turn pages, the zoom button and keys zoom, the close button closes (WCAG 2.5.1, 2.5.7).
 - With `autoPlay` a video starts once its page settles; pause, sound and its level are always on the bar (WCAG 1.4.2), and `autoPlay={false}` leaves the start to the person. The seek slider names the time in `aria-valuetext`, the level slider the percent.
 - A video's bar stays while it stands still; while it plays it steps aside after 2.5 s without the pointer moving and comes back on any move, key or touch — never while the pointer rests on it, focus is in it or the level is open.
-- The level is an upright Slider in a panel over the sound button: it opens on hover, on focus (Tab) and on a tap; Escape closes the panel, not the viewer. A mouse click on the button mutes; a click on the video plays and pauses it.
+- The level is an upright Slider in a panel over the sound button: it opens on hover, on focus (Tab) and on a tap; Escape or a press elsewhere closes the panel, not the viewer (Escape returns focus to the button). A mouse click on the button mutes; a click on the video plays and pauses it.
 - The page under the viewer is `inert`, scroll is locked; on close focus returns to the opener.
 
 ### Labels
@@ -185,7 +189,7 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Photos of an acceptance open full-screen from their thumbnails, at the one that was pressed — `items`, `open`, `index`. |
 | [thumbnails.tsx](examples/thumbnails.tsx) | A warehouse inspection of 120 photos with a filmstrip and captions: only the thumbnails in view are mounted — `thumbnails`, `caption`. |
-| [video.tsx](examples/video.tsx) | A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. |
+| [video.tsx](examples/video.tsx) | A video among the photos of a site visit starts by default once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`. |
 | [actions.tsx](examples/actions.tsx) | Photos of a listing with actions for the one on screen: download it or make it the cover — `renderActions`. |
 | [origin.tsx](examples/origin.tsx) | Every photo flies back into its own thumbnail, also after paging, and the last one leads to the first — `getOrigin`, `loop`. |
 | [dismiss.tsx](examples/dismiss.tsx) | Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button, and the small print zooms up to eight times — `closeOnOutsideClick`, `maxZoom`. |
@@ -203,5 +207,5 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 - `autoPlay` left on for videos people need to read beside (a recording next to a form) → `autoPlay={false}`; the play disk starts it.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (bars, arrows, play disk, video controls), [Slider](../slider/COMPONENT.md) (video seek; the sound level, `orientation="vertical"`), [Thumbnail](../thumbnail/COMPONENT.md) (filmstrip), [ScrollContainer](../scroll-container/COMPONENT.md) (filmstrip), [Spinner](../spinner/COMPONENT.md) (loading without a thumbnail), `Icon`
+- **Built from:** [Button](../button/COMPONENT.md) (bars, arrows, play disk, video controls), [Slider](../slider/COMPONENT.md) (video seek; the sound level, `orientation="vertical"`), [Thumbnail](../thumbnail/COMPONENT.md) (filmstrip), [ScrollContainer](../scroll-container/COMPONENT.md) (filmstrip), [Skeleton](../skeleton/COMPONENT.md) (loading without a thumbnail), [Spinner](../spinner/COMPONENT.md) (a pending transfer on the play disk), `Icon`, [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Gallery](../gallery/COMPONENT.md) and [Message](../message/COMPONENT.md) (`Message.Media`): their albums open MediaViewer by themselves, [Thumbnail](../thumbnail/COMPONENT.md) (a pressable thumbnail), [Modal](../modal/COMPONENT.md), [VideoNote](../video-note/COMPONENT.md)

package/dist/skill/reference/components/media-viewer/examples/controlled.tsx

@@ -1,5 +1,5 @@
 /** The parent owns the page: a finding opens its photo, and paging in the viewer moves the mark along the list — `index`, `onIndexChange`. */
-import { Button, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
+import { List, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -26,21 +26,21 @@ export default function MediaViewerControlledExample() {
   return (
     <>
       <div className={styles.findings}>
-        {FINDINGS.map(([id, title], at) => (
-          <Button.Root
-            key={id}
-            variant={at === index ? "soft" : "ghost"}
-            tone="neutral"
-            fullWidth
-            aria-current={at === index ? "true" : undefined}
-            onClick={() => {
-              setIndex(at);
-              setOpen(true);
-            }}
-          >
-            {title}
-          </Button.Root>
-        ))}
+        <List.Root aria-label="Замечания проверки">
+          {FINDINGS.map(([id, title], at) => (
+            <List.Item
+              key={id}
+              value={id}
+              current={at === index}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              <List.ItemText>{title}</List.ItemText>
+            </List.Item>
+          ))}
+        </List.Root>
       </div>
       <MediaViewer
         items={PHOTOS}

package/dist/skill/reference/components/media-viewer/examples/examples.module.css

@@ -5,12 +5,10 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--prime-space-24), 1fr));
   gap: var(--prime-space-2);
-  inline-size: min(100%, var(--prime-modal-width-m));
+  inline-size: min(100%, var(--prime-layout-form-width-m));
 }
 
-/* controlled.tsx: the list of findings beside the photos. */
+/* controlled.tsx: the column of the list of findings beside the photos. */
 .findings {
-  display: grid;
-  gap: var(--prime-space-2);
-  inline-size: min(100%, var(--prime-modal-width-s));
+  inline-size: min(100%, var(--prime-layout-form-width-s));
 }

package/dist/skill/reference/components/media-viewer/examples/video.tsx

@@ -1,4 +1,4 @@
-/** A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. */
+/** A video among the photos of a site visit starts by default once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`. */
 import { Icon, MediaViewer, type MediaViewerItem, Thumbnail } from "prime-ui-kit";
 import * as React from "react";