prime-ui-kit 0.14.0 → 0.16.0

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

@@ -1,18 +1,13 @@
 /** Every size tier: trigger height, text, icon and padding grow together — `size`. */
 import { Accordion, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function AccordionSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.panel}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <Accordion.Root size={size}>
             <Accordion.Item value="plan">
               <Accordion.Header>
@@ -21,8 +16,11 @@ export default function AccordionSizesExample() {
               <Accordion.Content>«Бизнес», продление 12 ноября.</Accordion.Content>
             </Accordion.Item>
           </Accordion.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </>
+    </div>
   );
 }

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

@@ -1,31 +1,34 @@
 /** A disabled section that cannot be opened, next to regular ones — `disabled`. */
-import { Accordion } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Accordion, Typography } from "prime-ui-kit";
 
 export default function AccordionStatesExample() {
   return (
-    <div className={styles.panel}>
-      <Accordion.Root defaultValue="profile">
-        <Accordion.Item value="profile">
-          <Accordion.Header>
-            <Accordion.Trigger>Профиль</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Имя, фото и язык интерфейса.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="security">
-          <Accordion.Header>
-            <Accordion.Trigger>Безопасность</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Пароль, двухфакторная защита и активные сессии.</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="sso" disabled>
-          <Accordion.Header>
-            <Accordion.Trigger>Единый вход (SSO) — на тарифе «Корпоративный»</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Подключите тариф, чтобы настроить единый вход.</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
+    <div>
+      <div>
+        <Accordion.Root defaultValue="profile">
+          <Accordion.Item value="profile">
+            <Accordion.Header>
+              <Accordion.Trigger>Профиль</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Имя, фото и язык интерфейса.</Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="security">
+            <Accordion.Header>
+              <Accordion.Trigger>Безопасность</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Пароль, двухфакторная защита и активные сессии.</Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="sso" disabled>
+            <Accordion.Header>
+              <Accordion.Trigger>Единый вход (SSO) — на тарифе «Корпоративный»</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Подключите тариф, чтобы настроить единый вход.</Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          disabled
+        </Typography>
+      </div>
     </div>
   );
 }

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

@@ -1,8 +1,6 @@
 /** One surface with hairlines between items, or every item as its own card — `layout`. */
 import { Accordion, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const LAYOUTS = ["grouped", "separate"] as const;
 
 const SECTIONS = [
@@ -12,12 +10,9 @@ const SECTIONS = [
 
 export default function AccordionVariantsExample() {
   return (
-    <>
+    <div>
       {LAYOUTS.map((layout) => (
-        <div key={layout} className={styles.panel}>
-          <Typography as="span" variant="caption" tone="muted">
-            {layout}
-          </Typography>
+        <div key={layout}>
           <Accordion.Root layout={layout} defaultValue="plan">
             {SECTIONS.map((section) => (
               <Accordion.Item key={section.value} value={section.value}>
@@ -28,8 +23,11 @@ export default function AccordionVariantsExample() {
               </Accordion.Item>
             ))}
           </Accordion.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {layout}
+          </Typography>
         </div>
       ))}
-    </>
+    </div>
   );
 }

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

@@ -1,7 +1,5 @@
 /** A leading icon per section; the content lines up with the label after it — `Accordion.Icon`. */
-import { Accordion, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Accordion, Icon, Typography } from "prime-ui-kit";
 
 const SECTIONS = [
   {
@@ -26,22 +24,27 @@ const SECTIONS = [
 
 export default function AccordionWithIconExample() {
   return (
-    <div className={styles.panel}>
-      <Accordion.Root defaultValue="calendar">
-        {SECTIONS.map((section) => (
-          <Accordion.Item key={section.value} value={section.value}>
-            <Accordion.Header>
-              <Accordion.Trigger>
-                <Accordion.Icon>
-                  <Icon name={section.icon} />
-                </Accordion.Icon>
-                {section.title}
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>{section.text}</Accordion.Content>
-          </Accordion.Item>
-        ))}
-      </Accordion.Root>
+    <div>
+      <div>
+        <Accordion.Root defaultValue="calendar">
+          {SECTIONS.map((section) => (
+            <Accordion.Item key={section.value} value={section.value}>
+              <Accordion.Header>
+                <Accordion.Trigger>
+                  <Accordion.Icon>
+                    <Icon name={section.icon} />
+                  </Accordion.Icon>
+                  {section.title}
+                </Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Content>{section.text}</Accordion.Content>
+            </Accordion.Item>
+          ))}
+        </Accordion.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          Accordion.Icon
+        </Typography>
+      </div>
     </div>
   );
 }

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

@@ -38,21 +38,21 @@ Avatar.Group           overlapping row, gives its size to members
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Avatar.Root
-`ref` → `HTMLDivElement`. The circle: diameter tier and fallback hue; tracks the image load for the Fallback.
+`ref` → `HTMLDivElement`. The circle: diameter tier and fallback hue; tracks the image load for the Fallback. Named by `aria-label`, it is one `role="img"`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "2xl"` | `"m"` | Diameter 20 · 24 · 32 · 40 · 48 · 64 px. Inside `Avatar.Group` the group size is used when it is not set. |
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"gray"` | Palette hue of the fallback; derive it from a stable user id. |
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `aria-label` (when no name is shown) and the other div attributes. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `aria-label` (when no name is shown: the avatar becomes `role="img"` of that name) and the other div attributes. |
 
 ### Avatar.Image
-`ref` → `HTMLImageElement`. The photo; hidden while it loads and after an error, so the Fallback shows through. A new `src` starts again. Loads lazily and decodes off the main thread (`loading="lazy"`, `decoding="async"`; pass either to override).
+`ref` → `HTMLImageElement`. The photo; hidden while it loads and after an error, so the Fallback shows through. A new `src` fades in over the last one. Loads lazily and decodes off the main thread (`loading="lazy"`, `decoding="async"`; pass either to override).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `src` | `string` | — (required) | Photo URL. |
-| `alt` | `string` | `""` | Empty when the name is written next to the avatar, otherwise the name. |
+| `alt` | `string` | `""` | Empty: the name is written next to the avatar or set once with `aria-label` on `Avatar.Root`. |
 | `…rest` | `Omit<ImgHTMLAttributes<HTMLImageElement>, "src" \| "alt">` | — | `className`, `onLoad`, `onError` and the other img attributes. |
 
 ### Avatar.Fallback
@@ -76,11 +76,11 @@ Avatar.Group           overlapping row, gives its size to members
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "2xl"` | `"m"` | Size of every `Avatar.Root` / `Avatar.Overflow` inside without its own `size`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "2xl"` | — | Size of every `Avatar.Root` / `Avatar.Overflow` inside without its own `size`; unset, they stay `m`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `aria-label`, `className` and the other div attributes. |
 
 ### Avatar.Overflow
-`ref` → `HTMLDivElement`. The «+N» cell at the end of a group, the same diameter as its avatars.
+`ref` → `HTMLDivElement`. The «+N» cell at the end of a group, the same diameter as its avatars; named by `aria-label`, it is `role="img"`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -95,7 +95,7 @@ Avatar.Group           overlapping row, gives its size to members
 | `gray` | neutral soft fill, gray initials | unknown or system users | yes |
 | `blue` · `sky` · `teal` · `green` · `yellow` · `orange` · `red` · `pink` · `purple` | soft hue fill, hue initials | people: the hue comes from a stable user id | |
 
-The soft fill is opaque: the soft hue is composited over the surface the avatar stands on (`--avatar-ring`, else the current layer), so it looks like the soft hue on that surface and an overlapped neighbour in a group never shows through. `Avatar.Overflow` is composited the same way.
+The soft fill is opaque: the soft hue is composited over the ground the avatar stands on (the current layer, which every surface sets; `--avatar-ring` from a host whose ground is not a layer), so it looks like the soft hue there and an overlapped neighbour in a group never shows through. `Avatar.Overflow` is composited the same way.
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -118,23 +118,29 @@ The soft fill is opaque: the soft hue is composited over the surface the avatar
 
 ## Layout & spacing
 - Inline-flex, never shrinks, `vertical-align: middle`.
-- Avatar → name: `--prime-space-3` in lists and cards, `--prime-space-2` in table cells.
-- Group: members overlap by 25% of the diameter with a 2px ring in `--avatar-ring` (surfaces set it to their fill; a host such as a reaction chip sets it to its own fill, and the fills of initials and «+N» are composited over it).
-- A host slot may size the avatar by setting `--avatar-slot-size`.
+- Avatar → name: space step 3 (12px) in lists and cards, step 2 (8px) in table cells.
+- Group: members overlap by 25% of the diameter with a 2px ring in the ground they stand on: the current layer of the surface around them (no surface sets anything), or `--avatar-ring` from a host whose ground is not a layer (a reaction chip sets its own fill); the fills of initials and «+N» are composited over the same ground.
+- An icon fallback is half the diameter: a kit `Icon` reads `--prime-icon-size`, a raw svg too.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
-- `Avatar.Image` `alt`: empty when the name is written next to it, otherwise the name. Without a photo and without a name nearby, put `aria-label` on `Avatar.Root`.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- `Avatar.Image` `alt` stays empty. Without the name written nearby, name the avatar once with `aria-label` on `Avatar.Root`: it becomes `role="img"` of that name, whether the photo, the initials or an icon shows.
 - `Avatar.Status` is `role="img"` with `aria-label` from `labels`. Every state has its own shape (full dot, crescent, dot with a bar, hollow ring), so presence never rests on color alone.
-- `Avatar.Group` is `role="group"`; give it `aria-label`. Give `Avatar.Overflow` an `aria-label` («Ещё 3 участника»).
+- `Avatar.Group` is `role="group"`; give it `aria-label`. Give `Avatar.Overflow` an `aria-label` («Ещё 3 участника»): it becomes `role="img"`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
+#### Avatar.Status
+
 | Key | Default | Used for |
 |---|---|---|
 | `online` | `"В сети"` | Name of the `online` dot. |
@@ -145,22 +151,23 @@ No keyboard interaction.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A photo with initials underneath while it loads, and initials alone — `Avatar.Image`, `Avatar.Fallback`. |
+| [overview.tsx](examples/overview.tsx) | A photo with initials underneath while it loads, and initials alone; the name is on the avatar itself — `Avatar.Image`, `Avatar.Fallback`, `aria-label`. |
 | [variants.tsx](examples/variants.tsx) | Every palette hue of the fallback; derive it from a stable user id — `color`. |
 | [sizes.tsx](examples/sizes.tsx) | Every diameter, 20 to 64 px; initials take 40% of it — `size`. |
 | [states.tsx](examples/states.tsx) | A loaded photo, a broken URL that falls back to initials, and an icon fallback for a guest — `Avatar.Image`, `Avatar.Fallback`. |
 | [presence.tsx](examples/presence.tsx) | A presence dot on the avatar edge: each state has its own shape and color and is announced by its name — `Avatar.Status`, `labels`. |
 | [team-group.tsx](examples/team-group.tsx) | Project members as an overlapping row with a «+N» cell; the group size goes to every member — `Avatar.Group`, `Avatar.Overflow`, `size`. |
-| [src-from-state.tsx](examples/src-from-state.tsx) | A new photo source restarts loading; initials show until the new photo arrives — `src`. |
+| [src-from-state.tsx](examples/src-from-state.tsx) | A new photo source loads over the last photo and cross-fades in; initials show only until a first photo arrives — `src`. |
 
 ## Mistakes
 - `Avatar.Image` without `Avatar.Fallback` → a failed photo leaves an empty circle; add initials.
 - `alt="Анна Климова"` while the name is printed next to it → `alt=""`.
 - A random `color` on every render → derive it from the user id.
 - A custom presence dot → use `Avatar.Status`.
-- A group on a custom filled block with a ring in the wrong color → set `--avatar-ring` to that fill (by default the ring is the current layer, `--prime-color-layer-current`).
+- A group on a custom filled block with a ring in the wrong color → set `--avatar-ring` to that fill (by default the ring is the current layer, `--prime-color-layer-current`); a kit surface needs nothing.
+- The name in both the image `alt` and the root `aria-label`, or only in `alt` (it vanishes when the photo fails) → `aria-label` on `Avatar.Root` once.
 - `size` on every avatar in a group → set it once on `Avatar.Group`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/imageSlot` (the photo and its fallback), `internal/namedRole` (a named avatar is an image)
 - **See also:** [Thumbnail](../thumbnail/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Card](../card/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md) (a round upload zone around an avatar)

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

@@ -9,13 +9,10 @@
   gap: var(--prime-space-3);
 }
 
-/* presence.tsx: a short people list. */
+/* presence.tsx: a short column of people. */
 .people {
   display: grid;
   gap: var(--prime-space-3);
-  margin: 0;
-  padding: 0;
-  list-style: none;
 }
 
 .person {

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

@@ -1,4 +1,4 @@
-/** A photo with initials underneath while it loads, and initials alone — `Avatar.Image`, `Avatar.Fallback`. */
+/** A photo with initials underneath while it loads, and initials alone; the name is on the avatar itself — `Avatar.Image`, `Avatar.Fallback`, `aria-label`. */
 import { Avatar } from "prime-ui-kit";
 
 const PHOTO = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
@@ -6,8 +6,8 @@ const PHOTO = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=12
 export default function AvatarOverviewExample() {
   return (
     <>
-      <Avatar.Root color="green">
-        <Avatar.Image src={PHOTO} alt="Михаил Котов" />
+      <Avatar.Root color="green" aria-label="Михаил Котов">
+        <Avatar.Image src={PHOTO} />
         <Avatar.Fallback>МК</Avatar.Fallback>
       </Avatar.Root>
       <Avatar.Root color="purple" aria-label="Ольга Белова">

package/dist/skill/reference/components/avatar/examples/presence.tsx

@@ -26,9 +26,9 @@ const PEOPLE = [
 
 export default function AvatarPresenceExample() {
   return (
-    <ul className={styles.people}>
+    <div className={styles.people}>
       {PEOPLE.map((person) => (
-        <li key={person.status} className={styles.person}>
+        <div key={person.status} className={styles.person}>
           <Avatar.Root color={person.color}>
             {"src" in person ? <Avatar.Image src={person.src} /> : null}
             <Avatar.Fallback>{person.initials}</Avatar.Fallback>
@@ -40,8 +40,8 @@ export default function AvatarPresenceExample() {
           <Typography as="span" variant="body-m">
             {person.name}
           </Typography>
-        </li>
+        </div>
       ))}
-    </ul>
+    </div>
   );
 }

package/dist/skill/reference/components/avatar/examples/src-from-state.tsx

@@ -1,4 +1,4 @@
-/** A new photo source restarts loading; initials show until the new photo arrives — `src`. */
+/** A new photo source loads over the last photo and cross-fades in; initials show only until a first photo arrives — `src`. */
 import { Avatar, Button } from "prime-ui-kit";
 import * as React from "react";
 
@@ -14,8 +14,8 @@ export default function AvatarSrcFromStateExample() {
 
   return (
     <div className={styles.row}>
-      <Avatar.Root size="xl" color="sky">
-        <Avatar.Image src={SOURCES[index]} alt="" />
+      <Avatar.Root size="xl" color="sky" aria-label="Ирина Павлова">
+        <Avatar.Image src={SOURCES[index]} />
         <Avatar.Fallback>ИП</Avatar.Fallback>
       </Avatar.Root>
       <Button.Root

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

@@ -7,8 +7,8 @@ export default function AvatarStatesExample() {
   return (
     <div>
       <div>
-        <Avatar.Root size="xl" color="green">
-          <Avatar.Image src={PHOTO} alt="Михаил Котов" />
+        <Avatar.Root color="green" aria-label="Михаил Котов">
+          <Avatar.Image src={PHOTO} />
           <Avatar.Fallback>МК</Avatar.Fallback>
         </Avatar.Root>
         <Typography as="span" variant="caption" tone="muted">
@@ -16,8 +16,8 @@ export default function AvatarStatesExample() {
         </Typography>
       </div>
       <div>
-        <Avatar.Root size="xl" color="orange">
-          <Avatar.Image src="https://example.com/missing-avatar.png" alt="Сергей Лебедев" />
+        <Avatar.Root color="orange" aria-label="Сергей Лебедев">
+          <Avatar.Image src="https://example.com/missing-avatar.png" />
           <Avatar.Fallback>СЛ</Avatar.Fallback>
         </Avatar.Root>
         <Typography as="span" variant="caption" tone="muted">
@@ -25,9 +25,9 @@ export default function AvatarStatesExample() {
         </Typography>
       </div>
       <div>
-        <Avatar.Root size="xl" aria-label="Гость">
+        <Avatar.Root aria-label="Гость">
           <Avatar.Fallback>
-            <Icon name="field.email" />
+            <Icon name="object.user" />
           </Avatar.Fallback>
         </Avatar.Root>
         <Typography as="span" variant="caption" tone="muted">

package/dist/skill/reference/components/avatar/examples/team-group.tsx

@@ -30,8 +30,8 @@ export default function AvatarTeamGroupExample() {
   return (
     <Avatar.Group size="s" aria-label="Участники проекта: 7">
       {MEMBERS.map((member) => (
-        <Avatar.Root key={member.initials} color={member.color}>
-          {member.src ? <Avatar.Image src={member.src} alt={member.name} /> : null}
+        <Avatar.Root key={member.initials} color={member.color} aria-label={member.name}>
+          {member.src ? <Avatar.Image src={member.src} /> : null}
           <Avatar.Fallback>{member.initials}</Avatar.Fallback>
         </Avatar.Root>
       ))}