prime-ui-kit 0.10.0 → 0.11.1

package/src/components/kanban/examples/cards.tsx

@@ -0,0 +1,152 @@
+/** Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. */
+import { Avatar, Badge, Icon, Kanban, type PaletteColor, Thumbnail } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Person = { initials: string; name: string; color: PaletteColor };
+
+type Card =
+  | { kind: "note"; id: string; title: string; meta: string }
+  | {
+      kind: "ticket";
+      id: string;
+      title: string;
+      priority: { text: string; color: PaletteColor };
+      comments: number;
+      assignee: Person;
+    }
+  | {
+      kind: "design";
+      id: string;
+      title: string;
+      cover: string;
+      label: { text: string; color: PaletteColor };
+      attachments: number;
+      assignee: Person;
+    };
+
+const COLUMNS = [
+  { id: "todo", title: "К выполнению" },
+  { id: "progress", title: "В работе" },
+  { id: "review", title: "На проверке" },
+];
+
+const OLGA: Person = { initials: "ОБ", name: "Ольга Белова", color: "green" };
+const DENIS: Person = { initials: "ДК", name: "Денис Ким", color: "blue" };
+
+const CARDS: Card[] = [
+  {
+    kind: "design",
+    id: "DS-58",
+    title: "Новый экран оплаты счёта",
+    cover: "https://picsum.photos/seed/invoice-pay/480/270",
+    label: { text: "Дизайн", color: "pink" },
+    attachments: 6,
+    assignee: OLGA,
+  },
+  {
+    kind: "ticket",
+    id: "BUG-412",
+    title: "Счёт не уходит клиенту при пустом email",
+    priority: { text: "Высокий", color: "red" },
+    comments: 7,
+    assignee: DENIS,
+  },
+  { kind: "note", id: "N-12", title: "Собрать отзывы о новом тарифе", meta: "до 18 окт" },
+  {
+    kind: "ticket",
+    id: "PRJ-233",
+    title: "Импорт заказов из 1С",
+    priority: { text: "Средний", color: "yellow" },
+    comments: 2,
+    assignee: OLGA,
+  },
+  {
+    kind: "design",
+    id: "DS-61",
+    title: "Иконки статусов доставки",
+    cover: "https://picsum.photos/seed/delivery-icons/480/270",
+    label: { text: "Иконки", color: "purple" },
+    attachments: 12,
+    assignee: DENIS,
+  },
+  {
+    kind: "note",
+    id: "N-15",
+    title: "Согласовать договор с ООО «Вектор»",
+    meta: "юристы · 21 окт",
+  },
+];
+
+const PLACEMENT = {
+  todo: ["N-12", "PRJ-233"],
+  progress: ["DS-58", "BUG-412"],
+  review: ["DS-61", "N-15"],
+};
+
+export default function KanbanCardsExample() {
+  return (
+    <Kanban.Root
+      aria-label="Задачи продуктовой команды"
+      className={styles.board}
+      columns={COLUMNS}
+      items={CARDS}
+      getId={(card) => card.id}
+      getLabel={(card) => card.title}
+      defaultValue={PLACEMENT}
+      renderItem={(card) => {
+        if (card.kind === "note") {
+          return (
+            <Kanban.Item>
+              <Kanban.ItemTitle>{card.title}</Kanban.ItemTitle>
+              <Kanban.ItemDescription>{card.meta}</Kanban.ItemDescription>
+            </Kanban.Item>
+          );
+        }
+        if (card.kind === "ticket") {
+          return (
+            <Kanban.Item>
+              <Kanban.ItemHeader>
+                <span>{card.id}</span>
+                <Badge.Root color={card.priority.color}>{card.priority.text}</Badge.Root>
+              </Kanban.ItemHeader>
+              <Kanban.ItemTitle>{card.title}</Kanban.ItemTitle>
+              <Kanban.ItemFooter>
+                <Kanban.ItemCount>
+                  <Icon name="object.message" />
+                  {card.comments}
+                </Kanban.ItemCount>
+                <Avatar.Root size="s" color={card.assignee.color} aria-label={card.assignee.name}>
+                  <Avatar.Fallback>{card.assignee.initials}</Avatar.Fallback>
+                </Avatar.Root>
+              </Kanban.ItemFooter>
+            </Kanban.Item>
+          );
+        }
+        return (
+          <Kanban.Item>
+            <Thumbnail.Root fullWidth ratio="16:9">
+              <Thumbnail.Image src={card.cover} alt="" />
+              <Thumbnail.Fallback>
+                <Icon name="object.image" />
+              </Thumbnail.Fallback>
+            </Thumbnail.Root>
+            <Kanban.ItemTitle>{card.title}</Kanban.ItemTitle>
+            <Kanban.ItemBadges>
+              <Badge.Root color={card.label.color}>{card.label.text}</Badge.Root>
+            </Kanban.ItemBadges>
+            <Kanban.ItemFooter>
+              <Kanban.ItemCount>
+                <Icon name="object.document" />
+                {card.attachments}
+              </Kanban.ItemCount>
+              <Avatar.Root size="s" color={card.assignee.color} aria-label={card.assignee.name}>
+                <Avatar.Fallback>{card.assignee.initials}</Avatar.Fallback>
+              </Avatar.Root>
+            </Kanban.ItemFooter>
+          </Kanban.Item>
+        );
+      }}
+    />
+  );
+}

package/src/components/kanban/examples/columns.tsx

@@ -0,0 +1,182 @@
+/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
+import {
+  Button,
+  ColorSwatches,
+  Icon,
+  Input,
+  Kanban,
+  type KanbanColumn,
+  type KanbanValue,
+  type PaletteColor,
+  Popover,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Deal = { id: string; client: string; amount: number };
+
+/** The column colors offered in the editor: a swatch per palette hue. */
+const COLUMN_COLORS: { color: PaletteColor; value: string; label: string }[] = [
+  { color: "gray", value: "#71717a", label: "Серый" },
+  { color: "blue", value: "#5068f5", label: "Синий" },
+  { color: "teal", value: "#14b8a6", label: "Бирюзовый" },
+  { color: "green", value: "#22c55e", label: "Зелёный" },
+  { color: "yellow", value: "#eab308", label: "Жёлтый" },
+  { color: "orange", value: "#f97316", label: "Оранжевый" },
+  { color: "red", value: "#ef4444", label: "Красный" },
+  { color: "purple", value: "#a855f7", label: "Фиолетовый" },
+];
+
+const PRESETS = COLUMN_COLORS.map(({ value, label }) => ({ value, label }));
+
+const COLUMNS: KanbanColumn[] = [
+  {
+    id: "lead",
+    title: "Заявки",
+    description: "Ответить в течение дня",
+    color: "blue",
+    locked: true,
+  },
+  { id: "demo", title: "Демо", description: "Показ продукта команде клиента", color: "purple" },
+  { id: "offer", title: "Предложение", description: "Счёт и договор отправлены", color: "orange" },
+  { id: "won", title: "Сделка", description: "Оплата получена", color: "green", locked: true },
+];
+
+const DEALS: Deal[] = [
+  { id: "DL-318", client: "ООО «Север»", amount: 480_000 },
+  { id: "DL-322", client: "АО «Гранит»", amount: 1_200_000 },
+  { id: "DL-309", client: "ИП Лебедев", amount: 96_000 },
+  { id: "DL-301", client: "ООО «Вектор»", amount: 350_000 },
+  { id: "DL-296", client: "ГК «Меридиан»", amount: 2_750_000 },
+];
+
+const PLACEMENT: KanbanValue = {
+  lead: ["DL-318", "DL-322"],
+  demo: ["DL-309"],
+  offer: ["DL-301"],
+  won: ["DL-296"],
+};
+
+const RUBLES = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const dealsWord = (count: number) => {
+  const tens = count % 100;
+  const ones = count % 10;
+  if (tens >= 11 && tens <= 14) return "сделок";
+  if (ones === 1) return "сделка";
+  if (ones >= 2 && ones <= 4) return "сделки";
+  return "сделок";
+};
+
+export default function KanbanColumnsExample() {
+  const [columns, setColumns] = React.useState(COLUMNS);
+  const [placement, setPlacement] = React.useState<KanbanValue>(PLACEMENT);
+  const [savedOrder, setSavedOrder] = React.useState<readonly string[] | null>(null);
+
+  const updateColumn = (id: string, patch: Partial<KanbanColumn>) =>
+    setColumns((current) =>
+      current.map((column) => (column.id === id ? { ...column, ...patch } : column)),
+    );
+  const titleOf = (id: string) => columns.find((column) => column.id === id)?.title;
+  const figures = (column: KanbanColumn) => {
+    const deals = (placement[column.id] ?? []).flatMap((id) =>
+      DEALS.filter((deal) => deal.id === id),
+    );
+    const sum = deals.reduce((total, deal) => total + deal.amount, 0);
+    return `${deals.length} ${dealsWord(deals.length)} · ${RUBLES.format(sum)}`;
+  };
+
+  return (
+    <div className={styles.stage}>
+      <Typography as="span" variant="body-s" tone="muted" aria-live="polite">
+        {savedOrder
+          ? `Порядок этапов сохранён: ${savedOrder.map(titleOf).filter(Boolean).join(" → ")}`
+          : "Перетащите этап за ручку в шапке или нажмите на ней Alt + ← / →"}
+      </Typography>
+      <Kanban.Root
+        aria-label="Воронка продаж"
+        className={styles.board}
+        columns={columns}
+        items={DEALS}
+        getId={(deal) => deal.id}
+        getLabel={(deal) => deal.client}
+        value={placement}
+        onValueChange={setPlacement}
+        reorderableColumns
+        onColumnOrderChange={setSavedOrder}
+        renderColumnMeta={figures}
+        renderColumnActions={(column) => (
+          <Popover.Root>
+            <Popover.Trigger>
+              <Button.Root
+                variant="ghost"
+                tone="neutral"
+                aria-label={`Настроить этап «${column.title}»`}
+              >
+                <Button.Icon>
+                  <Icon name="action.settings" />
+                </Button.Icon>
+              </Button.Root>
+            </Popover.Trigger>
+            <Popover.Content className={styles.panel} trapFocus>
+              <Popover.Header>
+                <Popover.Title>Этап воронки</Popover.Title>
+              </Popover.Header>
+              <Input.Root label="Название">
+                <Input.Wrapper>
+                  <Input.Field
+                    defaultValue={column.title}
+                    onValueChange={(title) => {
+                      if (title.trim()) updateColumn(column.id, { title: title.trim() });
+                    }}
+                  />
+                </Input.Wrapper>
+              </Input.Root>
+              <ColorSwatches
+                label="Цвет"
+                presets={PRESETS}
+                value={COLUMN_COLORS.find((entry) => entry.color === column.color)?.value ?? null}
+                onValueChange={(value) =>
+                  updateColumn(column.id, {
+                    color: COLUMN_COLORS.find((entry) => entry.value === value)?.color,
+                  })
+                }
+              />
+              {column.locked ? null : (
+                <Popover.Actions>
+                  <Button.Root
+                    variant="soft"
+                    tone="danger"
+                    fullWidth
+                    onClick={() =>
+                      setColumns((current) => current.filter((item) => item.id !== column.id))
+                    }
+                  >
+                    <Button.Icon>
+                      <Icon name="action.delete" />
+                    </Button.Icon>
+                    Удалить этап
+                  </Button.Root>
+                </Popover.Actions>
+              )}
+            </Popover.Content>
+          </Popover.Root>
+        )}
+        renderItem={(deal) => (
+          <Kanban.Item>
+            <Kanban.ItemTitle>{deal.client}</Kanban.ItemTitle>
+            <Kanban.ItemDescription>
+              {deal.id} · {RUBLES.format(deal.amount)}
+            </Kanban.ItemDescription>
+          </Kanban.Item>
+        )}
+      />
+    </div>
+  );
+}

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

@@ -24,6 +24,12 @@
   flex: 1;
 }
 
+/* columns.tsx: the column editor popover, a short form's measure. */
+.panel {
+  inline-size: calc(var(--prime-space-24) * 3.25);
+  max-inline-size: 100%;
+}
+
 /* A phone-width screen. */
 .phone {
   inline-size: min(100%, calc(var(--prime-space-20) * 4.5));

package/src/components/kanban/examples/limits.tsx

@@ -1,4 +1,4 @@
-/** A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release, from the keyboard too — `limit`, `canDrop`. */
+/** A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. */
 import { Badge, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -38,8 +38,10 @@ export default function KanbanLimitsExample() {
       getId={(ticket) => ticket.id}
       getLabel={(ticket) => ticket.title}
       defaultValue={PLACEMENT}
-      // A ticket waiting on the client cannot be closed.
-      canDrop={(id, columnId) => columnId !== "solved" || !BLOCKED.has(id)}
+      // A ticket waiting on the client cannot be closed; the reason shows under the carried card.
+      canDrop={(id, columnId) =>
+        columnId === "solved" && BLOCKED.has(id) ? "Тикет ждёт ответа клиента" : true
+      }
       renderItem={(ticket) => (
         <Kanban.Item>
           <Kanban.ItemTitle>{ticket.title}</Kanban.ItemTitle>

package/src/components/kanban/examples/saving.tsx

@@ -0,0 +1,83 @@
+/** Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. */
+import { Kanban, type KanbanValue, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Invoice = { id: string; client: string; amount: string; paid: boolean };
+
+const COLUMNS = [
+  { id: "draft", title: "Черновики" },
+  { id: "sent", title: "Отправлены" },
+  { id: "paid", title: "Оплачены" },
+];
+
+const INVOICES: Invoice[] = [
+  { id: "INV-2041", client: "ООО «Север»", amount: "48 300 ₽", paid: true },
+  { id: "INV-2042", client: "АО «Гранит»", amount: "212 000 ₽", paid: false },
+  { id: "INV-2038", client: "ИП Лебедев", amount: "7 950 ₽", paid: true },
+  { id: "INV-2035", client: "ООО «Вектор»", amount: "95 400 ₽", paid: true },
+];
+
+const INITIAL: KanbanValue = {
+  draft: ["INV-2041", "INV-2042"],
+  sent: ["INV-2038"],
+  paid: ["INV-2035"],
+};
+
+const BY_ID = new Map(INVOICES.map((invoice) => [invoice.id, invoice]));
+
+/** The server's answer to a move, a beat later: no payment, no «Оплачены». */
+function saveMove(id: string, to: string) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (to === "paid" && !BY_ID.get(id)?.paid) {
+        reject(new Error(`${id}: оплата не поступила`));
+      } else {
+        resolve();
+      }
+    }, 900);
+  });
+}
+
+export default function KanbanSavingExample() {
+  const [placement, setPlacement] = React.useState(INITIAL);
+  const [failure, setFailure] = React.useState<string | null>(null);
+
+  return (
+    <div className={styles.stage}>
+      <div className={styles.toolbar}>
+        <Typography as="span" variant="body-s" tone={failure ? "danger" : "muted"}>
+          {failure ?? "Перенос сохраняется на сервере; без оплаты счёт не закрыть"}
+        </Typography>
+      </div>
+      <Kanban.Root
+        aria-label="Счета за октябрь"
+        className={styles.board}
+        columns={COLUMNS}
+        items={INVOICES}
+        getId={(invoice) => invoice.id}
+        getLabel={(invoice) => invoice.id}
+        value={placement}
+        onValueChange={async (next, move) => {
+          setFailure(null);
+          try {
+            await saveMove(move.id, move.to);
+          } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            throw error;
+          }
+          setPlacement(next);
+        }}
+        renderItem={(invoice) => (
+          <Kanban.Item>
+            <Kanban.ItemTitle>{invoice.client}</Kanban.ItemTitle>
+            <Kanban.ItemDescription>
+              {invoice.id} · {invoice.amount}
+            </Kanban.ItemDescription>
+          </Kanban.Item>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/kanban/examples/variants.tsx

@@ -0,0 +1,57 @@
+/** The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. */
+import { Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Task = { id: string; title: string; due: string };
+
+const VARIANTS: KanbanVariant[] = ["well", "plain"];
+
+const COLUMNS = [
+  { id: "todo", title: "К выполнению", description: "Берём после планирования" },
+  { id: "progress", title: "В работе", description: "Не больше трёх задач на человека" },
+  { id: "done", title: "Готово", description: "Проверено и выкачено" },
+];
+
+const TASKS: Task[] = [
+  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт" },
+  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт" },
+  { id: "PRJ-198", title: "Повторная отправка приглашений в команду", due: "10 окт" },
+  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт" },
+];
+
+const PLACEMENT = {
+  todo: ["PRJ-214", "PRJ-221"],
+  progress: ["PRJ-198"],
+  done: ["PRJ-176"],
+};
+
+export default function KanbanVariantsExample() {
+  return VARIANTS.map((variant) => (
+    <div key={variant}>
+      <div>
+        <Kanban.Root
+          aria-label={`Задачи релиза: ${variant}`}
+          className={styles.board}
+          variant={variant}
+          columns={COLUMNS}
+          items={TASKS}
+          getId={(task) => task.id}
+          getLabel={(task) => task.title}
+          defaultValue={PLACEMENT}
+          renderItem={(task) => (
+            <Kanban.Item>
+              <Kanban.ItemTitle>{task.title}</Kanban.ItemTitle>
+              <Kanban.ItemDescription>
+                {task.id} · до {task.due}
+              </Kanban.ItemDescription>
+            </Kanban.Item>
+          )}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          {variant}
+        </Typography>
+      </div>
+    </div>
+  ));
+}

package/src/components/label/COMPONENT.md

@@ -6,11 +6,11 @@
 > Field label (native `<label>`) with required and optional markers.
 
 ## When to use
-- Above a control that has no built-in `label` prop: SegmentedControl, a custom control, or a hand-built field where you wire the ids yourself.
+- Above a control that has no built-in `label` prop: a custom control, or a hand-built field where you wire the ids yourself.
 - When a label needs an icon (`Label.Icon`) or an inline clarification (`Label.Description`).
 
 ## When not to use
-- Input, Textarea, Select and other fields with a `label` prop → pass `label`, `required`, `optional` to the field; it renders Label itself ([Input](../input/COMPONENT.md), [Textarea](../textarea/COMPONENT.md)).
+- Input, Textarea, Select, SegmentedControl, DigitInput, Radio.Group and other fields with a `label` prop → pass `label`, `required`, `optional` to the field; it renders Label itself ([Input](../input/COMPONENT.md), [Textarea](../textarea/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)).
 - Help or error text under a field → use [Hint](../hint/COMPONENT.md).
 - Labels for checkboxes, radios and switches → use their own label parts ([Checkbox](../checkbox/COMPONENT.md), [Radio](../radio/COMPONENT.md), [Switch](../switch/COMPONENT.md)).
 - Section or card headings → use [Typography](../typography/COMPONENT.md).
@@ -95,7 +95,7 @@ The label has no hover or focus state; clicking it focuses the control bound wit
 No keyboard interaction.
 
 ### ARIA
-- Bind with `htmlFor` to a native control, or set `id` on the label and `aria-labelledby` on a custom control (SegmentedControl, DigitInput group).
+- Bind with `htmlFor` to a native control, or set `id` on the label and `aria-labelledby` on a custom control (a `role="radiogroup"`, a `fieldset` of cells).
 - The `*` is `aria-hidden`; requiredness must come from the control (`required`).
 - The optional marker and `Label.Description` are visible text and part of the accessible name; `Label.Icon` is `aria-hidden`.
 
@@ -109,7 +109,7 @@ No keyboard interaction.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A standalone label above a control without its own `label`, linked through `aria-labelledby`. |
+| [overview.tsx](examples/overview.tsx) | A standalone label above a hand-built field, linked to its input through `htmlFor` and `id`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size; the label takes the size of the field below it — `size`. |
 | [states.tsx](examples/states.tsx) | A default label next to a disabled one; the markers dim with the text — `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A muted icon before the text, sized by the label — `Label.Icon`. |

package/src/components/label/examples/overview.tsx

@@ -1,17 +1,20 @@
-/** A standalone label above a control without its own `label`, linked through `aria-labelledby`. */
-import { Label, SegmentedControl } from "prime-ui-kit";
+/** A standalone label above a hand-built field, linked to its input through `htmlFor` and `id`. */
+import { Input, Label } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function LabelOverviewExample() {
+  const inputId = React.useId();
+
   return (
     <div className={styles.field}>
-      <Label.Root id="report-period-label">Период отчёта</Label.Root>
-      <SegmentedControl.Root defaultValue="week" aria-labelledby="report-period-label">
-        <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-        <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-        <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-      </SegmentedControl.Root>
+      <Label.Root htmlFor={inputId}>Название проекта</Label.Root>
+      <Input.Root id={inputId}>
+        <Input.Wrapper>
+          <Input.Field defaultValue="Редизайн личного кабинета" />
+        </Input.Wrapper>
+      </Input.Root>
     </div>
   );
 }

package/src/components/link-button/COMPONENT.md

@@ -76,10 +76,12 @@ Match the link size to the surrounding text or to the Button it sits next to. Av
 |---|---|---|
 | hover | pointer | hover color + underline (`text-decoration-color: currentColor`) |
 | focus-visible | keyboard | outer focus ring with `--prime-focus-offset`, radius `--prime-radius-xs` |
-| disabled | `disabled` | `<a role="link">` without `href`, `aria-disabled="true"`, `tabIndex=-1`, `data-disabled="true"` |
+| disabled | `disabled` | `<a role="link">` without `href`, `aria-disabled="true"`, `tabIndex=-1`, `data-disabled="true"`; with `asChild` the child gets `aria-disabled="true"` and `data-disabled="true"`, keeps its own focusability, and its click is swallowed |
 
 Root attributes: `data-size`, `data-tone`, `data-disabled` (only when disabled).
 
+Motion: the color and the underline fade in over `fast` (the underline is always drawn, transparent at rest, 1px thick and 3px below the text).
+
 ## Layout & spacing
 - Inline in text: put a space before it (`{" "}`) and keep the text's size.
 - Next to a Button: same `size`, `justify-content: space-between` or `gap: var(--prime-space-3)`.

package/src/components/login-form/COMPONENT.md

@@ -110,7 +110,7 @@ LoginForm has no state of its own. Compose them:
 
 | State | Driven by | DOM |
 |---|---|---|
-| submitting | `loading` on the submit Button, `disabled` on the fields | `aria-busy` on the button |
+| submitting | `loading` on the submit Button; the fields in a `Fieldset disabled`, the submit Button outside it | `aria-busy` on the button; native `disabled` on the `<fieldset>`, the fields in their disabled look |
 | field error | `error` / `invalid` on `Input.Root`, `error` on `DigitInput` | `aria-invalid`, the error under the field |
 | server error | `Banner.Root tone="danger" role="alert"` as the first child of `LoginForm.Form` | `role="alert"` |
 
@@ -152,11 +152,12 @@ No `labels`.
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. |
 
 ## Mistakes
-- `LoginForm.Social` → removed; provider buttons go in `LoginForm.Actions`.
+- A separate block of your own for provider buttons → put them in `LoginForm.Actions`.
+- `disabled` on every field while the request runs → one [Fieldset](../fieldset/COMPONENT.md) `disabled` around the fields; keep the submit Button outside it so it shows `loading`.
 - A placeholder instead of a field label → pass `label` to the field.
 - A Card around LoginForm → the root already is the card; use `flat` inside another surface.
 - 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), [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)
+- **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)

package/src/components/login-form/examples/overview.tsx

@@ -18,9 +18,9 @@ export default function LoginFormOverviewExample() {
           <LoginForm.Actions>
             <Button.Root variant="outline" tone="neutral" fullWidth>
               <Button.Icon>
-                <Icon name="action.send" />
+                <Icon name="object.key" />
               </Button.Icon>
-              Продолжить через Telegram
+              Войти через SSO компании
             </Button.Root>
           </LoginForm.Actions>
           <Divider>или</Divider>

package/src/components/login-form/examples/register.tsx

@@ -23,9 +23,9 @@ export default function LoginFormRegisterExample() {
           <LoginForm.Actions>
             <Button.Root variant="outline" tone="neutral" fullWidth>
               <Button.Icon>
-                <Icon name="action.send" />
+                <Icon name="object.key" />
               </Button.Icon>
-              Продолжить через Telegram
+              Войти через SSO компании
             </Button.Root>
           </LoginForm.Actions>
           <Divider>или</Divider>
@@ -40,11 +40,6 @@ export default function LoginFormRegisterExample() {
                 <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
               </Input.Wrapper>
             </Input.Root>
-            <Input.Root label="Логин в Telegram" required>
-              <Input.Wrapper>
-                <Input.Field placeholder="@login" />
-              </Input.Wrapper>
-            </Input.Root>
             <Input.Root label="Пароль" required hint="Минимум 8 символов" strength>
               <Input.Wrapper>
                 <Input.Field