prime-ui-kit 0.13.1 → 0.15.0

package/src/components/radio/examples/in-form.tsx

@@ -0,0 +1,45 @@
+/** Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. */
+import { Button, Radio } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function RadioInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const chosen = new FormData(event.currentTarget).get("delivery");
+    setError(chosen ? undefined : "Выберите способ доставки");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Radio.Group
+        label="Способ доставки"
+        name="delivery"
+        required
+        error={error}
+        onValueChange={() => setError(undefined)}
+      >
+        <Radio.Root value="courier">
+          <Radio.Label>Курьером до склада</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="pickup">
+          <Radio.Label>Самовывоз с терминала</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <Radio.Group label="Упаковка" name="packing" optional>
+        <Radio.Root value="pallet">
+          <Radio.Label>На паллетах</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="crate">
+          <Radio.Label>В обрешётке</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Оформить заказ</Button.Root>
+      </div>
+    </form>
+  );
+}

package/src/components/scroll-container/COMPONENT.md

@@ -160,6 +160,7 @@ No `labels`.
 | [auto-scroll.tsx](examples/auto-scroll.tsx) | A task dragged to the top or bottom edge of a scrolling list scrolls it, faster the closer it comes — `ScrollContainer`, `Dnd.Sortable`. |
 | [overscroll.tsx](examples/overscroll.tsx) | At the end of the list the scroll passes on to the page instead of stopping — `overscrollBehavior`. |
 | [chat.tsx](examples/chat.tsx) | A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. |
+| [load-more.tsx](examples/load-more.tsx) | An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. |
 
 ## Mistakes
 - `overflow: auto` on a plain `div` inside a flex column that never shrinks → use ScrollContainer (it sets `min-height: 0`).

package/src/components/scroll-container/examples/auto-scroll.tsx

@@ -22,9 +22,9 @@ export default function ScrollContainerAutoScrollExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="План проекта">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        План проекта
-      </Typography>
+      <Card.Header>
+        <Card.Title>План проекта</Card.Title>
+      </Card.Header>
       <ScrollContainer>
         <Dnd.Root>
           <Dnd.Sortable

package/src/components/scroll-container/examples/chat.tsx

@@ -57,9 +57,9 @@ export default function ScrollContainerChatExample() {
 
   return (
     <Card.Root className={styles.chat}>
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        ООО «Гранит» · счёт № 4821
-      </Typography>
+      <Card.Header>
+        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
+      </Card.Header>
       <ScrollContainer
         anchor="end"
         onReachStart={loadOlder}

package/src/components/scroll-container/examples/edges.tsx

@@ -22,9 +22,12 @@ export default function ScrollContainerEdgesExample() {
     <div className={styles.layout}>
       {EDGES.map((edges) => (
         <Card.Root key={edges} role="region" className={styles.card} aria-label={`Лента: ${edges}`}>
-          <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-            {edges}
-          </Typography>
+          <Card.Header>
+            <Card.Title>Лента событий</Card.Title>
+            <Typography as="span" variant="caption" tone="muted">
+              {edges}
+            </Typography>
+          </Card.Header>
           <ScrollContainer edges={edges}>
             <ul className={styles.list}>
               {EVENTS.map((event) => (

package/src/components/scroll-container/examples/examples.module.css

@@ -17,15 +17,11 @@
   width: auto;
 }
 
-.cardTitle {
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 .list {
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-2) var(--prime-space-4) var(--prime-space-3);
   list-style: none;
 }
 
@@ -48,7 +44,7 @@
 }
 
 .messages {
-  padding-top: var(--prime-space-2);
+  min-height: 0;
 }
 
 /* Older messages loading: lines in the messages' geometry, at the top where they will appear. */
@@ -77,7 +73,7 @@
 
 /* Two-axis scroller: the side padding lives on the scrolling element itself (foundation §7). */
 .canvas {
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-3) var(--prime-space-4);
 }
 
 .grid {
@@ -94,15 +90,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* lock.tsx: the title and the review button in one row above the queue. */
-.cardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 /* snap.tsx: a row of fixed-width cards; the padding keeps the edge cards' rings unclipped. */
 .tiles {
   display: flex;
@@ -124,7 +111,7 @@
   flex-direction: column;
   gap: var(--prime-space-1);
   margin: 0;
-  padding: 0 var(--prime-space-3) var(--prime-space-3);
+  padding: var(--prime-space-3);
   list-style: none;
 }
 

package/src/components/scroll-container/examples/load-more.tsx

@@ -0,0 +1,51 @@
+/** An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. */
+import { Card, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ORDERS = Array.from({ length: 40 }, (_, index) => ({
+  id: 2400 - index,
+  amount: `${(18 + ((index * 7) % 23)) * 1000} ₽`,
+}));
+
+const PAGE = 10;
+
+export default function ScrollContainerLoadMoreExample() {
+  const [shown, setShown] = React.useState(PAGE);
+  const [loading, setLoading] = React.useState(false);
+  const done = shown >= ORDERS.length;
+
+  const loadMore = () => {
+    if (done) return;
+    setLoading(true);
+    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
+    return new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setShown((count) => Math.min(count + PAGE, ORDERS.length));
+        setLoading(false);
+        resolve();
+      }, 800);
+    });
+  };
+
+  return (
+    <Card.Root role="region" className={styles.card} aria-label="Журнал заказов">
+      <Card.Header>
+        <Card.Title>Журнал заказов</Card.Title>
+      </Card.Header>
+      <ScrollContainer onReachEnd={loadMore} tabIndex={0} aria-label="Заказы">
+        <ul className={styles.list}>
+          {ORDERS.slice(0, shown).map((order) => (
+            <li key={order.id}>
+              <Typography as="span" variant="body-m" tone="secondary">
+                Заказ № {order.id} · {order.amount}
+              </Typography>
+            </li>
+          ))}
+        </ul>
+        {loading ? <Skeleton lines={3} className={styles.older} /> : null}
+      </ScrollContainer>
+    </Card.Root>
+  );
+}

package/src/components/scroll-container/examples/lock.tsx

@@ -20,10 +20,8 @@ export default function ScrollContainerLockExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="Очередь заказов">
-      <div className={styles.cardHeader}>
-        <Typography as="h3" variant="title-s">
-          Очередь заказов
-        </Typography>
+      <Card.Header>
+        <Card.Title>Очередь заказов</Card.Title>
         <Button.Root
           variant="soft"
           tone="neutral"
@@ -32,7 +30,7 @@ export default function ScrollContainerLockExample() {
         >
           {reviewing ? "Закрыть проверку" : "Проверить заказ"}
         </Button.Root>
-      </div>
+      </Card.Header>
       <ScrollContainer lock={reviewing}>
         <ul className={styles.list}>
           {ORDERS.map((order) => (

package/src/components/scroll-container/examples/overscroll.tsx

@@ -8,9 +8,9 @@ const HOURS = Array.from({ length: 12 }, (_, index) => `${String(9 + index).padS
 export default function ScrollContainerOverscrollExample() {
   return (
     <Card.Root role="region" className={styles.card} aria-label="Журнал">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        Журнал выгрузок
-      </Typography>
+      <Card.Header>
+        <Card.Title>Журнал выгрузок</Card.Title>
+      </Card.Header>
       <ScrollContainer overscrollBehavior="auto" tabIndex={0} aria-label="Журнал выгрузок">
         <ul className={styles.list}>
           {HOURS.map((hour) => (

package/src/components/scroll-container/examples/overview.tsx

@@ -8,9 +8,9 @@ const EVENTS = Array.from({ length: 16 }, (_, index) => `Заказ № ${1040 +
 export default function ScrollContainerOverviewExample() {
   return (
     <Card.Root role="region" className={styles.card} aria-label="Лента событий">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        Лента событий
-      </Typography>
+      <Card.Header>
+        <Card.Title>Лента событий</Card.Title>
+      </Card.Header>
       <ScrollContainer>
         <ul className={styles.list}>
           {EVENTS.map((event) => (

package/src/components/scroll-container/examples/scrollbar.tsx

@@ -20,9 +20,12 @@ export default function ScrollContainerScrollbarExample() {
   return (
     <div className={styles.layout}>
       <Card.Root role="region" className={styles.card} aria-label="Клиенты">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          thin
-        </Typography>
+        <Card.Header>
+          <Card.Title>Клиенты</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            thin
+          </Typography>
+        </Card.Header>
         <ScrollContainer>
           <ul className={styles.list}>
             {CLIENTS.map((client) => (
@@ -35,10 +38,13 @@ export default function ScrollContainerScrollbarExample() {
           </ul>
         </ScrollContainer>
       </Card.Root>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры заказов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          hidden
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            hidden
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal" scrollbar="hidden">
           <div className={styles.strip}>
             {TAGS.map((tag) => (

package/src/components/scroll-container/examples/variants.tsx

@@ -10,10 +10,13 @@ const ROOMS = Array.from({ length: 16 }, (_, index) => `Зал ${index + 1}`);
 export default function ScrollContainerVariantsExample() {
   return (
     <div className={styles.layout}>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          horizontal
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            horizontal
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal">
           <div className={styles.strip}>
             {TAGS.map((tag) => (
@@ -23,9 +26,12 @@ export default function ScrollContainerVariantsExample() {
         </ScrollContainer>
       </Card.Root>
       <Card.Root role="region" className={styles.card} aria-label="Расписание залов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          both
-        </Typography>
+        <Card.Header>
+          <Card.Title>Расписание залов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            both
+          </Typography>
+        </Card.Header>
         <ScrollContainer
           axis="both"
           tabIndex={0}

package/src/components/segmented-control/COMPONENT.md

@@ -158,6 +158,7 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 ## Layout & spacing
 - In a form it is a field: label → track `label-gap`, track → support row `hint-gap`, field → field `--prime-space-5` like every field.
 - Width is content-based by default; segments never wrap. In a narrow container the row scrolls horizontally with fading edges.
+- On a coarse pointer each segment's hit area grows to the 44 px touch target in height; the track keeps its tier height.
 - In a toolbar: gap `--prime-space-3` between controls; keep every control at one size.
 - Caption under a group: gap `--prime-space-2`.
 - `fullWidth` inside modals and mobile sheets. Single-line segments are `flex: 1 1 0` with `min-width: max-content`: short labels share the spare width equally, a long label keeps its own width, nothing truncates; when the labels do not fit, the row scrolls.
@@ -191,14 +192,14 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 |---|---|
 | [overview.tsx](examples/overview.tsx) | One value out of a few, with a sliding thumb on the chosen segment — `defaultValue`, `aria-label`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the outer height equals the control height of the same tier — `size`. |
-| [states.tsx](examples/states.tsx) | No selection yet, a disabled segment and a disabled group next to the default — `disabled`. |
+| [states.tsx](examples/states.tsx) | No selection yet, an invalid group, a disabled segment and a disabled group next to the default — `invalid`, `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | An icon before the label and square icon-only segments named for screen readers — `SegmentedControl.Icon`, `aria-label`. |
 | [colors.tsx](examples/colors.tsx) | A status per option: a dot of its hue before the label and a tinted thumb when chosen — `color`. |
 | [full-width.tsx](examples/full-width.tsx) | The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. |
 | [scroll.tsx](examples/scroll.tsx) | Segments never wrap: in a column narrower than the row it scrolls with edge fades and brings the chosen segment into view. |
 | [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a metric on the second — `SegmentedControl.Label`, `SegmentedControl.Count`, `SegmentedControl.Description`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the choice and updates other content from it — `value`, `onValueChange`. |
-| [in-form.tsx](examples/in-form.tsx) | An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen; an optional choice beside it — `label`, `hint`, `required`, `error`, `optional`. |
 
 ## Mistakes
 - Using it as tabs that show different panels → use `Tabs`.

package/src/components/segmented-control/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. */
+/** An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen; an optional choice beside it — `label`, `hint`, `required`, `error`, `optional`. */
 import { Button, Input, SegmentedControl } from "prime-ui-kit";
 import * as React from "react";
 
@@ -36,6 +36,10 @@ export default function SegmentedControlInFormExample() {
         <SegmentedControl.Item value="project">Проекта</SegmentedControl.Item>
         <SegmentedControl.Item value="personal">Личный</SegmentedControl.Item>
       </SegmentedControl.Root>
+      <SegmentedControl.Root label="Возмещение" optional defaultValue="salary">
+        <SegmentedControl.Item value="salary">С зарплатой</SegmentedControl.Item>
+        <SegmentedControl.Item value="card">На карту</SegmentedControl.Item>
+      </SegmentedControl.Root>
       <Button.Root type="submit">Сохранить расход</Button.Root>
     </form>
   );

package/src/components/segmented-control/examples/states.tsx

@@ -1,4 +1,4 @@
-/** No selection yet, a disabled segment and a disabled group next to the default — `disabled`. */
+/** No selection yet, an invalid group, a disabled segment and a disabled group next to the default — `invalid`, `disabled`. */
 import { SegmentedControl, Typography } from "prime-ui-kit";
 
 export default function SegmentedControlStatesExample() {
@@ -22,6 +22,15 @@ export default function SegmentedControlStatesExample() {
           empty
         </Typography>
       </div>
+      <div>
+        <SegmentedControl.Root invalid aria-label="Статус кампании">
+          <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
+        </SegmentedControl.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          invalid
+        </Typography>
+      </div>
       <div>
         <SegmentedControl.Root defaultValue="active" aria-label="Статус кампании">
           <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>

package/src/components/select/COMPONENT.md

@@ -30,7 +30,7 @@ import { Select } from "prime-ui-kit";
 ```
 Select.Root                       field frame: label · control · hint/error; value, open, search
 ├── Select.Trigger                <button role="combobox">: [icon] [value] [clear] [chevron]
-│   ├── Select.TriggerIcon        optional leading glyph
+│   ├── Select.TriggerIcon        optional leading glyph; alone (no Select.Value) — an icon-only trigger
 │   └── Select.Value              picked label or placeholder (renderValue for a rich trigger)
 └── Select.Content                portaled panel while open; closed, the items render hidden in place so the trigger knows their labels
     ├── search row                with `searchable`
@@ -103,7 +103,7 @@ an icon) goes inside `Select.ItemMeta`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | `Select.TriggerIcon`, `Select.Value`, optionally a Badge after it. |
+| `children` | `ReactNode` | — | `Select.TriggerIcon`, `Select.Value`, optionally a Badge after it. A `Select.TriggerIcon` alone makes an icon-only trigger (the value read, not shown). |
 
 ### Select.Value
 `ref` → `HTMLSpanElement`. The picked label (labels joined with `multiple`) with an ellipsis, or the placeholder.
@@ -212,6 +212,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 - Label → field: tier `label-gap`; field → hint: tier `hint-gap`; field → field in a form: `--prime-space-5`.
 - Panel: at least the trigger width and `--prime-panel-min-width`, at most twice that; max height `--prime-panel-max-height` (scrolls); flips near the viewport edge.
 - Long values truncate with an ellipsis in the trigger.
+- The clear segment's hit area grows to the 44 px touch target in height on a coarse pointer, like the clear segment of an Input.
 - A rich row and its trigger use the same parts in the same order: leading media (`Avatar.Root`,
   `Thumbnail.Root`) → `Select.ItemText` (+ `Select.ItemDescription`) → trailing `Badge.Root` /
   `Select.ItemMeta`. In a row the trailing part sits before the check; in the trigger, at the end
@@ -294,7 +295,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A labelled field with a placeholder; picking an option closes the list and shows its label — `label`, `placeholder`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label, the list rows and the hint take the tier of the field — `size`. |
-| [states.tsx](examples/states.tsx) | A default field next to a disabled, a loading, an invalid one and a list with nothing in it — `disabled`, `loading`, `invalid`, `labels`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled, a loading, an invalid one, a list with nothing in it and a field whose focus shows without the ring — `disabled`, `loading`, `invalid`, `labels`, `focusRing`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A leading icon in the trigger and an icon before every option label — `Select.TriggerIcon`, `Select.ItemIcon`. |
 | [multiple.tsx](examples/multiple.tsx) | Several values: checkboxes in the list, the list stays open on a pick, labels joined in the trigger — `multiple`. |
@@ -306,6 +307,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | [saving.tsx](examples/saving.tsx) | A choice that saves on the server at once: the picked value shows with a spinner on the trigger, and a refused save rolls it back and says why — `onValueChange`, `error`. |
 | [rich-options.tsx](examples/rich-options.tsx) | Options with a picture, a second line and a price; the trigger draws the picked option with the same parts — `renderValue`, `Select.ItemText`, `Select.ItemDescription`, `Select.ItemMeta`. |
 | [people.tsx](examples/people.tsx) | People in the rows and the trigger: an avatar sized to the tier before the name, a role badge after it — `Avatar.Root`, `Badge.Root`, `renderValue`. |
+| [icon-only.tsx](examples/icon-only.tsx) | An icon picker as wide as its glyph: the trigger holds only the picked icon and the chevron, the value is still read aloud — `Select.TriggerIcon`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: the plan drives the price under the field and a button resets it — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the list: a button opens it from code, a pick or Escape closes it — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | Regional settings form: the required country is checked on submit, the error shakes the field and leaves once a country is picked, a calm note confirms the save — `required`, `error`, `hint`. |

package/src/components/select/examples/examples.module.css

@@ -16,7 +16,8 @@
 
 .formFields {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two columns while each keeps 12rem, one column in a narrower form — from its own width. */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
   align-items: start;
   gap: var(--prime-space-5) var(--prime-space-4);
 }
@@ -27,9 +28,3 @@
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
-
-@media (max-width: 639px) {
-  .formFields {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}

package/src/components/select/examples/icon-only.tsx

@@ -0,0 +1,38 @@
+/** An icon picker as wide as its glyph: the trigger holds only the picked icon and the chevron, the value is still read aloud — `Select.TriggerIcon`. */
+import { Icon, type IconName, Select } from "prime-ui-kit";
+import * as React from "react";
+
+const ICONS: { value: IconName; label: string }[] = [
+  { value: "object.package", label: "Склад" },
+  { value: "object.truck", label: "Доставка" },
+  { value: "object.receipt", label: "Счета" },
+  { value: "object.users", label: "Клиенты" },
+];
+
+export default function SelectIconOnlyExample() {
+  const [icon, setIcon] = React.useState<IconName>("object.truck");
+
+  return (
+    <Select.Root
+      label="Иконка раздела"
+      value={icon}
+      onValueChange={(next) => setIcon(next as IconName)}
+    >
+      <Select.Trigger>
+        <Select.TriggerIcon>
+          <Icon name={icon} />
+        </Select.TriggerIcon>
+      </Select.Trigger>
+      <Select.Content>
+        {ICONS.map((option) => (
+          <Select.Item key={option.value} value={option.value}>
+            <Select.ItemIcon>
+              <Icon name={option.value} />
+            </Select.ItemIcon>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

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

@@ -1,4 +1,4 @@
-/** A default field next to a disabled, a loading, an invalid one and a list with nothing in it — `disabled`, `loading`, `invalid`, `labels`. */
+/** A default field next to a disabled, a loading, an invalid one, a list with nothing in it and a field whose focus shows without the ring — `disabled`, `loading`, `invalid`, `labels`, `focusRing`. */
 import { Select } from "prime-ui-kit";
 
 const ROLES = [
@@ -62,6 +62,18 @@ export default function SelectStatesExample() {
         </Select.Trigger>
         <Select.Content>{null}</Select.Content>
       </Select.Root>
+      <Select.Root label="focusRing={false}" defaultValue="editor" focusRing={false}>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
     </>
   );
 }

package/src/components/sheet/COMPONENT.md

@@ -198,6 +198,8 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Actions with an order raised from the bottom edge: a header names the order, a column of actions follows, and each action closes the sheet — `Sheet.Trigger`, `Sheet.Header`, `Sheet.Close`. |
 | [structure.tsx](examples/structure.tsx) | The content alone: a date sheet with no header and no footer, the calendar across its width, named by `aria-label`; a pick or a swipe down closes it — `aria-label`, `Sheet.Body`. |
+| [header-actions.tsx](examples/header-actions.tsx) | The courier is at the door: an icon tile heads the sheet, the payment status and a ⋯ menu sit before the close button, and two equal buttons fill the footer — `Sheet.Icon`, `Sheet.Actions`, `layout`. |
+| [guard.tsx](examples/guard.tsx) | A review form that holds the sheet: after an edit a swipe, the scrim, Escape and Cancel ask before discarding and the footer says so; sending locks every way out — `Sheet.Guard`, `Sheet.Meta`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A handover the courier must answer: no swipe, scrim or Escape closes the sheet, only its two buttons — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and raises the sheet from a link in the text, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A short form that needs an explicit submit: the one case for a footer, Cancel and Send under the field, an empty comment keeps the sheet open — `Sheet.Footer`, `error`. |

package/src/components/sheet/examples/guard.tsx

@@ -0,0 +1,72 @@
+/** A review form that holds the sheet: after an edit a swipe, the scrim, Escape and Cancel ask before discarding and the footer says so; sending locks every way out — `Sheet.Guard`, `Sheet.Meta`. */
+import { Button, Fieldset, Sheet, Textarea } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+/** Pretends to send the review. */
+function sendReview() {
+  return new Promise((resolve) => setTimeout(resolve, 1200));
+}
+
+export default function SheetGuardExample() {
+  const formId = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSending(true);
+    await sendReview();
+    setSending(false);
+    setDirty(false);
+    setOpen(false);
+  };
+
+  return (
+    <Sheet.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setDirty(false);
+      }}
+    >
+      <Sheet.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Отзыв о доставке
+        </Button.Root>
+      </Sheet.Trigger>
+      <Sheet.Content>
+        <Sheet.Guard busy={sending} dirty={dirty} />
+        <Sheet.Header>
+          <Sheet.Title>Отзыв о доставке</Sheet.Title>
+          <Sheet.Description>Заказ № 1042 · курьер Олег Р.</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>
+          <form id={formId} className={styles.form} onSubmit={submit}>
+            <Fieldset disabled={sending}>
+              <Textarea.Root
+                label="Что понравилось или нет"
+                name="review"
+                placeholder="Привёз вовремя, помог занести коробки"
+                onValueChange={() => setDirty(true)}
+              />
+            </Fieldset>
+          </form>
+        </Sheet.Body>
+        <Sheet.Footer>
+          {dirty ? <Sheet.Meta>Есть несохранённые изменения</Sheet.Meta> : null}
+          <Sheet.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Отмена
+            </Button.Root>
+          </Sheet.Close>
+          <Button.Root type="submit" form={formId} loading={sending} disabled={!dirty}>
+            Отправить
+          </Button.Root>
+        </Sheet.Footer>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+}