prime-ui-kit 0.10.0 → 0.11.1

package/dist/tokens/themes/dark.d.ts

@@ -6,8 +6,8 @@ export declare const darkThemeOverrides: {
             readonly scrim: "rgba(0, 0, 0, 0.6)";
             /** Darker than the scrim's share: a shade on a 900 surface needs more ink to read. */
             readonly edgeShadow: "rgba(0, 0, 0, 0.5)";
-            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent)";
-            readonly glassEdge: "rgba(255, 255, 255, 0.16)";
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent)";
+            readonly glassEdge: "rgba(255, 255, 255, 0.28)";
         };
         readonly fill: {
             readonly subtle: "rgba(233, 235, 240, 0.05)";
@@ -88,6 +88,45 @@ export declare const darkThemeOverrides: {
             solid: string;
             solidFg: string;
         }>;
+        /** The outgoing bubble is the accent itself in dark, as messengers do; text on it is light. */
+        readonly message: {
+            readonly outgoing: {
+                readonly bg: "{color.cobalt.700}";
+                readonly text: "{color.white}";
+                readonly muted: "{color.cobalt.200}";
+                readonly accent: "{color.white}";
+                readonly accentFg: "{color.cobalt.700}";
+                readonly danger: "{color.red.100}";
+                readonly fill: "rgba(255, 255, 255, 0.14)";
+                readonly fillHover: "rgba(255, 255, 255, 0.2)";
+                readonly track: "rgba(255, 255, 255, 0.36)";
+                /** A light wash over `bg`, precomposed (opaque) for the avatar ring. */
+                readonly chip: "color-mix(in srgb, var(--prime-ref-color-white) 14%, var(--prime-ref-color-cobalt-700))";
+                readonly chipHover: "color-mix(in srgb, var(--prime-ref-color-white) 20%, var(--prime-ref-color-cobalt-700))";
+            };
+        };
+        /** Own steps for the dark grounds, validated as a set; the scale rises from the ground. */
+        readonly chart: {
+            readonly 1: "{color.cobalt.500}";
+            readonly 2: "{color.chart.dark.orange}";
+            readonly 3: "{color.chart.dark.teal}";
+            readonly 4: "{color.chart.dark.yellow}";
+            readonly 5: "{color.chart.dark.pink}";
+            readonly 6: "{color.chart.dark.green}";
+            readonly 7: "{color.chart.dark.purple}";
+            readonly 8: "{color.chart.dark.red}";
+            readonly other: "{color.gray.500}";
+            readonly grid: "{color.gray.800}";
+            readonly axis: "{color.gray.700}";
+            readonly scale: {
+                readonly 1: "{color.cobalt.950}";
+                readonly 2: "{color.cobalt.900}";
+                readonly 3: "{color.cobalt.600}";
+                readonly 4: "{color.cobalt.400}";
+                readonly 5: "{color.cobalt.200}";
+            };
+            readonly scaleFg: "{color.gray.950}";
+        };
     };
     readonly shadow: {
         readonly raised: "none";

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "packageManager": "bun@1.3.13",
-  "description": "React 19 UI kit for product interfaces: 61 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y. Ships COMPONENT.md docs and copyable examples.",
+  "description": "React 19 UI kit for product interfaces: 77 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
+  "bin": {
+    "prime-ui-kit": "bin/prime-ui-kit.js"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -11,6 +14,8 @@
     "react-ui",
     "react-components",
     "react19",
+    "nextjs",
+    "agent-skill",
     "ui-kit",
     "ui-library",
     "component-library",
@@ -55,6 +60,7 @@
   "homepage": "https://github.com/esurkov1/prime-ui#readme",
   "files": [
     "dist",
+    "bin",
     "src/styles/*.css",
     "src/components/**/COMPONENT.md",
     "src/layout/**/COMPONENT.md",
@@ -78,6 +84,7 @@
     "date-fns": "^4.1.0",
     "esbuild": "^0.27.0",
     "jsdom": "^29.0.1",
+    "lucide-react": "^0.577.0",
     "react": "^19.2.4",
     "react-aria-components": "^1.16.0",
     "react-dom": "^19.2.4",
@@ -108,7 +115,7 @@
     },
     "./icons": {
       "types": "./dist/icon-set.d.ts",
-      "default": "./dist/icons.js"
+      "default": "./dist/icon-set.js"
     },
     "./bundle.css": "./dist/index.css",
     "./fonts.css": "./src/styles/fonts.css",
@@ -118,12 +125,12 @@
     "./theme-dark.css": "./src/styles/theme-dark.css"
   },
   "scripts": {
-    "clean": "rm -rf dist dist-skill .dts-stage playground/dist",
+    "clean": "rm -rf dist .dts-stage playground/dist",
     "tokens:build": "bun run scripts/build-tokens.ts",
     "docs:build": "bun run scripts/build-docs.ts",
     "icons:add": "bun run scripts/add-glyph.ts",
     "skill:build": "bun run scripts/build-skill.ts",
-    "build": "bun run tokens:build && bun run scripts/bundle-lib.ts",
+    "build": "bun run tokens:build && bun run scripts/bundle-lib.ts && bun run skill:build",
     "prepublishOnly": "bun run clean && bun run build",
     "playground:dev": "vite playground --config playground/vite.config.ts",
     "check": "biome check .",
@@ -132,14 +139,11 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "verify": "bun run check:ci && bun run typecheck && bun run test && bun run verify:tokens && bun run build && bun run skill:build",
+    "verify": "bun run check:ci && bun run typecheck && bun run test && bun run verify:tokens && bun run build",
     "verify:tokens": "bun run tokens:build && git diff --exit-code -- src/styles/tokens.css src/styles/theme-light.css src/styles/theme-dark.css"
   },
   "sideEffects": [
     "**/*.css"
   ],
-  "type": "module",
-  "dependencies": {
-    "lucide-react": "^0.577.0"
-  }
+  "type": "module"
 }

package/src/components/accordion/COMPONENT.md

@@ -171,5 +171,5 @@ No `labels`.
 - Accordion used for tab-like switching → use Tabs.
 
 ## Related
-- **Built from:** Icon (`nav.chevronDown`)
+- **Built from:** `Icon` (`nav.chevronDown`)
 - **See also:** [Tabs](../tabs/COMPONENT.md), [Card](../card/COMPONENT.md), [Stepper](../stepper/COMPONENT.md), [Divider](../divider/COMPONENT.md)

package/src/components/avatar/COMPONENT.md

@@ -47,7 +47,7 @@ Avatar.Group           overlapping row, gives its size to members
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `aria-label` (when no name is shown) 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.
+`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).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -95,6 +95,8 @@ 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.
+
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -117,7 +119,7 @@ Avatar.Group           overlapping row, gives its size to members
 ## 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).
+- 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`.
 
 ## Accessibility
@@ -161,4 +163,4 @@ No keyboard interaction.
 
 ## Related
 - **Built from:** —
-- **See also:** [Thumbnail](../thumbnail/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Card](../card/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md)
+- **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/src/components/avatar/examples/presence.tsx

@@ -3,10 +3,24 @@ import { Avatar, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
+const photo = (id: string) => `https://images.unsplash.com/photo-${id}?w=128&h=128&fit=crop`;
+
 const PEOPLE = [
-  { initials: "АК", color: "blue", status: "online", name: "Анна Климова" },
+  {
+    initials: "АК",
+    color: "blue",
+    status: "online",
+    name: "Анна Климова",
+    src: photo("1534528741775-53994a69daeb"),
+  },
   { initials: "ДН", color: "green", status: "away", name: "Дмитрий Носов" },
-  { initials: "ЕО", color: "pink", status: "busy", name: "Елена Орлова" },
+  {
+    initials: "ЕО",
+    color: "pink",
+    status: "busy",
+    name: "Елена Орлова",
+    src: photo("1580489944761-15a19d654956"),
+  },
   { initials: "ИС", color: "gray", status: "offline", name: "Игорь Савин" },
 ] as const;
 
@@ -16,6 +30,7 @@ export default function AvatarPresenceExample() {
       {PEOPLE.map((person) => (
         <li 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>
             <Avatar.Status
               status={person.status}

package/src/components/avatar/examples/team-group.tsx

@@ -1,17 +1,37 @@
 /** Project members as an overlapping row with a «+N» cell; the group size goes to every member — `Avatar.Group`, `Avatar.Overflow`, `size`. */
-import { Avatar } from "prime-ui-kit";
+import { Avatar, type PaletteColor } from "prime-ui-kit";
 
-const MEMBERS = [
-  { initials: "АК", color: "blue" },
-  { initials: "ДН", color: "green" },
-  { initials: "ЖП", color: "orange" },
-] as const;
+const photo = (id: string) => `https://images.unsplash.com/photo-${id}?w=128&h=128&fit=crop`;
+
+/** Some members have a photo, some only initials — as in a real team. */
+const MEMBERS: { name: string; initials: string; color: PaletteColor; src?: string }[] = [
+  {
+    name: "Анна Котова",
+    initials: "АК",
+    color: "blue",
+    src: photo("1494790108377-be9c29b29330"),
+  },
+  { name: "Дмитрий Носов", initials: "ДН", color: "green" },
+  {
+    name: "Олег Смирнов",
+    initials: "ОС",
+    color: "orange",
+    src: photo("1500648767791-00dcc994a43e"),
+  },
+  {
+    name: "Мария Лебедева",
+    initials: "МЛ",
+    color: "pink",
+    src: photo("1438761681033-6461ffad8d80"),
+  },
+];
 
 export default function AvatarTeamGroupExample() {
   return (
-    <Avatar.Group size="s" aria-label="Участники проекта: 6">
+    <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.Fallback>{member.initials}</Avatar.Fallback>
         </Avatar.Root>
       ))}

package/src/components/badge/COMPONENT.md

@@ -46,7 +46,8 @@ Badge.Root          <span>: fill, tier dimensions
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"gray"` | Palette hue. Categorizes; the text carries the meaning. |
 | `variant` | `"solid" \| "soft" \| "outline"` | `"soft"` | Treatment. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | — | Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the badge follows the surrounding control one tier down; outside a control it is `m`. |
-| `onRemove` | `() => void` | — | Adds the full-height remove segment at the end; called on its click. |
+| `onRemove` | `() => void \| Promise<void>` | — | Adds the full-height remove segment at the end; called on its click. Return the request's promise: the badge waits with a spinner; take it out of your list before resolving; on reject it stays. |
+| `loading` | `boolean` | `false` | The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a spinner in the remove segment, which takes no press. A promise from `onRemove` does the same on its own. |
 | `onPress` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | Makes the body a `<button>` covering the whole badge (a toggle chip, a filter value); gets the event, so Alt / Shift clicks can mean more. |
 | `pressed` | `boolean` | — | Toggle state of a pressable badge: `aria-pressed` on the body, `data-pressed` on the root. |
 | `disabled` | `boolean` | — | Muted look for every variant, `aria-disabled`; the body button, remove and action get native `disabled`. |
@@ -63,14 +64,14 @@ Badge.Root          <span>: fill, tier dimensions
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Badge.Dot
-`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` dot in the text color; at an edge it becomes a segment like an edge icon. Also usable alone (a marker on an icon, before a label): it takes the tier of the surrounding control (6px, 8px from `l`) and the color set on it.
+`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` dot in the text color; at an edge it becomes a segment. Alone (a marker on an icon, before a label) it takes the host tier and the color set on it.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
 
 ### Badge.Action
-`ref` → `HTMLButtonElement`. A `<button>` segment at the end, revealed on hover and focus, always shown on touch screens; the badge reserves its room, so the width never changes. One per badge, not together with `onRemove`.
+`ref` → `HTMLButtonElement`. A `<button>` segment at the end, revealed on hover and focus (always shown on touch); the width never changes. One per badge, not together with `onRemove`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -117,6 +118,7 @@ Badge.Root          <span>: fill, tier dimensions
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `disabled` | muted fill, disabled text, no outline, for every variant | the labelled item is inactive | `false` |
+| `loading` | content dimmed, a spinner in the remove segment | the value waits on a request its owner runs (a tag being created); a promise from `onRemove` needs no flag | `false` |
 
 ## States
 | State | Driven by | DOM |
@@ -126,13 +128,18 @@ Badge.Root          <span>: fill, tier dimensions
 | icon segments | edge `Badge.Icon` / `Badge.Dot`, icon-only | `data-icon-start`, `data-icon-end`, `data-icon-only` |
 | plain text | read-only, text children only | `data-text-only`: the root is one block box that ellipsizes; otherwise each text run sits in its own block span |
 | removable | `onRemove` | `data-removable`; the remove segment takes a `fill-subtle-active` wash on hover |
+| removing | `onRemove` returned a pending promise, or `loading` | `data-pending`, `aria-busy`; the content quiets to 0.6 (`fast`, both ways), a `Spinner` stands in for the ×, the segment gets `aria-disabled` and takes no second press; rejected — the badge stays and `labels.removeFailed` is announced |
+| leaving | the owner took the badge out after its remove segment | a copy stays in place and closes up — fades, settles to 0.96 and shrinks to nothing with its gap (`fast`, `exit`) — so the badges after it glide in; off under reduced motion |
 | pressable / pressed | `onPress`, `pressed` | `data-pressable`, `data-pressed`, `aria-pressed` on the body; `fill-subtle` wash on hover |
 | action | `Badge.Action` | `data-action="reveal" \| "persistent"`; the text slides and the segment fades in over `fast` |
 | disabled | `disabled` | `data-disabled`, `aria-disabled`; inner buttons disabled |
+| count | a number as the only child | the digits roll to the new value when the number changes |
 
 ## Layout & spacing
 - Inline-flex, `width: fit-content`, `max-width: 100%`; text never wraps and ends in an ellipsis.
 - Segments are `mark + padding + gap` wide and full height; the mark sits with equal space to the edge and to the text.
+- `Badge.Dot` is 6px, 8px from `l`; alone it takes the tier of the surrounding control.
+- `Badge.Action` room is reserved, so revealing it never changes the badge width.
 - Several badges in a row: `gap: var(--prime-space-2)`.
 - In a list row the badge is the trailing column; the title column gets `min-width: 0` and an ellipsis.
 
@@ -148,6 +155,7 @@ Badge.Root          <span>: fill, tier dimensions
 - A read-only badge is plain text in a `<span>`, no role.
 - `onPress` makes the body a `<button>` with `aria-pressed` when `pressed` is set; remove and `Badge.Action` are separate buttons with their own names.
 - Give every remove button a unique name with `labels.remove`; after removing, move focus to a neighbouring badge or the source field.
+- While a removal is saved the badge has `aria-busy` and the segment `aria-disabled`; once a removal waits, the badge mounts a polite live region that speaks `labels.removeFailed` if the promise rejects.
 - `Badge.Dot` is `aria-hidden`; icon-only badges need `aria-label`. Color never carries meaning alone.
 
 ### Labels
@@ -156,6 +164,7 @@ Badge.Root          <span>: fill, tier dimensions
 | Key | Default | Used for |
 |---|---|---|
 | `remove` | `"Удалить"` | Accessible name of the remove segment; include the badge text («Убрать фильтр «Москва»»). |
+| `removeFailed` | `"Не удалось удалить"` | Spoken when the `onRemove` promise rejects and the badge stays; name the badge («Фильтр «Москва» не убран»). |
 
 ## Examples
 | Example | Shows |
@@ -163,10 +172,11 @@ Badge.Root          <span>: fill, tier dimensions
 | [overview.tsx](examples/overview.tsx) | Publication statuses: soft badges where the text carries the meaning and the hue repeats it — `color`. |
 | [variants.tsx](examples/variants.tsx) | Every palette hue in every treatment; the text must read without the color — `variant`, `color`. |
 | [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
-| [states.tsx](examples/states.tsx) | An inactive badge, a pressable toggle off and on, and a removable one — `disabled`, `onPress`, `pressed`, `onRemove`. |
+| [states.tsx](examples/states.tsx) | An inactive badge, a pressable toggle off and on, a removable one and one that waits on a request — `disabled`, `onPress`, `pressed`, `onRemove`, `loading`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A leading dot, a leading or trailing icon and an icon-only square with a name — `Badge.Dot`, `Badge.Icon`, `aria-label`. |
 | [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the badge takes the tier one step down without `size`. |
 | [applied-filters.tsx](examples/applied-filters.tsx) | Applied filters: each badge drops its filter and names it for screen readers — `onRemove`, `labels`. |
+| [server-tags.tsx](examples/server-tags.tsx) | Order tags removed on the server: a badge waits dimmed with a spinner, leaves once the server agrees and stays with an announcement when it refuses — `onRemove`, `labels`. |
 | [filter-values.tsx](examples/filter-values.tsx) | Filter values as toggles with a hide action that slides in without changing the width — `onPress`, `pressed`, `Badge.Action`, `persistent`. |
 
 ## Mistakes
@@ -176,7 +186,8 @@ Badge.Root          <span>: fill, tier dimensions
 - A colored badge with no text → keep a word; color alone is not a signal.
 - An explicit `size` inside a control → drop it; the badge takes the tier one step down.
 - `onRemove` together with `Badge.Action` → one end segment per badge.
+- Removing the badge from your list first and putting it back when the request fails → return the request's promise and remove it after it succeeds; the badge waits meanwhile.
 
 ## Related
-- **Built from:** Icon
-- **See also:** [TagSelect](../tag-select/COMPONENT.md), [SmartFilter](../smart-filter/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)
+- **Built from:** `Icon` (remove ×, `Badge.Action` −), [Spinner](../spinner/COMPONENT.md) (removing)
+- **See also:** [TagSelect](../tag-select/COMPONENT.md), [Select](../select/COMPONENT.md) (row badges), [SegmentedControl](../segmented-control/COMPONENT.md) (`Count`, color dots), [SmartFilter](../smart-filter/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/src/components/badge/examples/server-tags.tsx

@@ -0,0 +1,61 @@
+/** Order tags removed on the server: a badge waits dimmed with a spinner, leaves once the server agrees and stays with an announcement when it refuses — `onRemove`, `labels`. */
+import { Badge, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const TAGS = ["Срочный", "Оптовый клиент", "Оплачен", "Самовывоз"];
+
+/** The server's answer a beat later: a paid order keeps its «Оплачен» tag. */
+function deleteTag(tag: string) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (tag === "Оплачен") reject(new Error("Тег оплаты снимает только бухгалтерия"));
+      else resolve();
+    }, 900);
+  });
+}
+
+export default function BadgeServerTagsExample() {
+  const [tags, setTags] = React.useState(TAGS);
+  const [failure, setFailure] = React.useState<string | null>(null);
+  const titleId = React.useId();
+
+  return (
+    <section className={styles.filters} aria-labelledby={titleId}>
+      <Typography as="h3" variant="title-s" id={titleId}>
+        Теги заказа № 4821
+      </Typography>
+      <div className={styles.badges}>
+        {tags.map((tag) => (
+          <Badge.Root
+            key={tag}
+            color={tag === "Оплачен" ? "green" : "gray"}
+            labels={{
+              remove: `Снять тег «${tag}»`,
+              removeFailed: `Тег «${tag}» не снят: его снимает только бухгалтерия`,
+            }}
+            onRemove={async () => {
+              setFailure(null);
+              try {
+                await deleteTag(tag);
+              } catch (error) {
+                setFailure(error instanceof Error ? error.message : String(error));
+                throw error;
+              }
+              setTags((current) => current.filter((item) => item !== tag));
+            }}
+          >
+            {tag}
+          </Badge.Root>
+        ))}
+      </div>
+      {/* Seen on screen; the badge itself announces the refusal. */}
+      {failure ? (
+        <Typography variant="body-s" tone="danger" aria-hidden="true">
+          {failure}
+        </Typography>
+      ) : null}
+    </section>
+  );
+}

package/src/components/badge/examples/states.tsx

@@ -1,4 +1,4 @@
-/** An inactive badge, a pressable toggle off and on, and a removable one — `disabled`, `onPress`, `pressed`, `onRemove`. */
+/** An inactive badge, a pressable toggle off and on, a removable one and one that waits on a request — `disabled`, `onPress`, `pressed`, `onRemove`, `loading`. */
 import { Badge, Typography } from "prime-ui-kit";
 
 const noop = () => undefined;
@@ -46,6 +46,14 @@ export default function BadgeStatesExample() {
           onRemove · disabled
         </Typography>
       </div>
+      <div>
+        <Badge.Root labels={{ remove: "Убрать «Москва»" }} onRemove={noop} loading>
+          Москва
+        </Badge.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          onRemove · loading
+        </Typography>
+      </div>
     </div>
   );
 }

package/src/components/banner/COMPONENT.md

@@ -161,5 +161,5 @@ No `open` prop: the parent mounts and unmounts the banner.
 - Several `solid` banners on one screen → keep `solid` for the one urgent message.
 
 ## Related
-- **Built from:** Button, Icon
+- **Built from:** [Button](../button/COMPONENT.md) (close button), Icon (`action.close`)
 - **See also:** [Notification](../notification/COMPONENT.md), [Hint](../hint/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md)

package/src/components/breadcrumb/COMPONENT.md

@@ -85,7 +85,7 @@ Use links for every ancestor and `current` on the last item; `s` above a `headin
 |---|---|---|
 | current | `current` | `aria-current="page"` on the text span, or on the link when the item has `href` |
 | hover / focus-visible on links | pointer / keyboard | text → primary; focus ring from LinkButton |
-| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24`; the current item shrinks last |
+| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24` (192; `--prime-space-24 + --prime-space-6`, 120, in a container below 30rem); the last item shrinks last |
 | auto-collapse | 3+ levels and a container `< 30rem` | `data-collapsible="true"`; middle levels are `display: none` and replaced by «… ›», whose hidden text (`labels.ellipsis`) names them |
 
 Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
@@ -93,7 +93,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 ## Layout & spacing
 - The root is a size container (`container-type: inline-size`, `inline-size: 100%`): inside a flex row give it `flex: 1 1 auto; min-width: 0`.
 - Above a page title: `gap: var(--prime-space-2)` between the trail and the title row.
-- The list never wraps.
+- The list never wraps. Chevrons sit inside each level after the first, in the placeholder text color, at the tier icon size.
 
 ## Accessibility