prime-ui-kit 0.13.1 → 0.15.0

package/dist/skill/{patterns/kanban-board.tsx → reference/components/kanban/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A sales pipeline board: header with one primary action, search and filter with a board / list switch, a Kanban of deals by stage with totals, moves saved on the server that can be refused, movable stages and the deal in a Drawer. */
+/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. */
 import {
+  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -27,7 +28,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./kanban-board.module.css";
+import styles from "./screen.module.css";
 
 type Owner = { name: string; initials: string; color: PaletteColor };
 
@@ -41,25 +42,17 @@ type Deal = {
   source: string;
   probability: number;
   contract: boolean;
-  comments: number;
-  tags: { text: string; color: PaletteColor }[];
 };
 
 type DealRow = Deal & { stage: string };
 
-/** The stages of the pipeline; the first and the last are system stages and stay in place. */
+/** The stages of the pipeline, in order; the stage color repeats on its count and its Badge. */
 const STAGES: KanbanColumn[] = [
-  {
-    id: "new",
-    title: "Новая",
-    description: "Связаться в течение дня",
-    color: "blue",
-    locked: true,
-  },
-  { id: "qualified", title: "Квалификация", description: "Бюджет и сроки", color: "purple" },
-  { id: "proposal", title: "Предложение", description: "КП отправлено", color: "orange" },
-  { id: "negotiation", title: "Переговоры", description: "Условия договора", color: "yellow" },
-  { id: "won", title: "Выиграна", description: "Договор подписан", color: "green", locked: true },
+  { id: "new", title: "Новая", color: "blue" },
+  { id: "qualified", title: "Квалификация", color: "purple" },
+  { id: "proposal", title: "Предложение", color: "orange" },
+  { id: "negotiation", title: "Переговоры", color: "yellow" },
+  { id: "won", title: "Выиграна", color: "green" },
 ];
 
 const ANNA: Owner = { name: "Анна Климова", initials: "АК", color: "purple" };
@@ -77,8 +70,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 20,
     contract: false,
-    comments: 2,
-    tags: [{ text: "Входящая", color: "sky" }],
   },
   {
     id: "DL-338",
@@ -90,8 +81,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 25,
     contract: false,
-    comments: 0,
-    tags: [{ text: "Тендер", color: "blue" }],
   },
   {
     id: "DL-332",
@@ -103,8 +92,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 40,
     contract: false,
-    comments: 4,
-    tags: [{ text: "Повторная", color: "green" }],
   },
   {
     id: "DL-327",
@@ -116,8 +103,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 40,
     contract: false,
-    comments: 1,
-    tags: [{ text: "Просрочена", color: "red" }],
   },
   {
     id: "DL-321",
@@ -129,8 +114,6 @@ const DEALS: Deal[] = [
     source: "Холодный звонок",
     probability: 60,
     contract: false,
-    comments: 6,
-    tags: [{ text: "Горячая", color: "orange" }],
   },
   {
     id: "DL-316",
@@ -142,11 +125,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 75,
     contract: true,
-    comments: 9,
-    tags: [
-      { text: "Тендер", color: "blue" },
-      { text: "Горячая", color: "orange" },
-    ],
   },
   {
     id: "DL-309",
@@ -158,8 +136,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 80,
     contract: false,
-    comments: 3,
-    tags: [{ text: "Ждём подпись", color: "yellow" }],
   },
   {
     id: "DL-298",
@@ -171,8 +147,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 100,
     contract: true,
-    comments: 2,
-    tags: [{ text: "Повторная", color: "green" }],
   },
 ];
 
@@ -246,11 +220,6 @@ function saveStage(deal: Deal, to: string) {
   });
 }
 
-/** The server's answer to a new order of the stages. */
-function saveStageOrder() {
-  return new Promise<void>((resolve) => window.setTimeout(resolve, SAVE_MS));
-}
-
 const ownerAvatar = (owner: Owner) => (
   <Avatar.Root size="s" color={owner.color} aria-label={owner.name}>
     <Avatar.Fallback>{owner.initials}</Avatar.Fallback>
@@ -310,16 +279,13 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   },
 ];
 
-export default function KanbanBoardPattern() {
+export default function KanbanScreenExample() {
   const { notify } = useNotifications();
   const [loading, setLoading] = React.useState(true);
   const [view, setView] = React.useState("board");
   const [filter, setFilter] = React.useState<SmartFilterValue>({});
   const [search, setSearch] = React.useState("");
   const [placement, setPlacement] = React.useState(PLACEMENT);
-  const [stageOrder, setStageOrder] = React.useState<readonly string[]>(
-    STAGES.map((stage) => stage.id),
-  );
   const [openId, setOpenId] = React.useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [saving, setSaving] = React.useState(false);
@@ -339,6 +305,11 @@ export default function KanbanBoardPattern() {
   );
   const rows: DealRow[] = deals.map((deal) => ({ ...deal, stage: stageOf(placement, deal.id) }));
   const shown = new Set(deals.map((deal) => deal.id));
+  // The header's data line: what the filtered pipeline holds, open deals only.
+  const inWork = deals.filter((deal) => stageOf(placement, deal.id) !== "won");
+  const pipeline = `${inWork.length} ${dealsWord(inWork.length)} в работе · ${RUBLES.format(
+    inWork.reduce((total, deal) => total + deal.amount, 0),
+  )}`;
 
   const figures = (column: KanbanColumn) => {
     const ids = (placement[column.id] ?? []).filter((id) => shown.has(id));
@@ -383,32 +354,22 @@ export default function KanbanBoardPattern() {
 
   const deal = openId === null ? undefined : BY_ID.get(openId);
   const dealStage = deal ? stageOf(placement, deal.id) : "new";
-  const nextStage = STAGE_BY_ID.get(stageOrder[stageOrder.indexOf(dealStage) + 1] ?? "");
+  const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <PageContent.Section aria-labelledby="deals-title">
-      <PageContent.Header>
-        <PageContent.Title id="deals-title">Сделки</PageContent.Title>
-        <PageContent.Description>
-          Воронка отдела продаж: перетащите сделку на следующий этап или откройте её карточку.
-        </PageContent.Description>
-        <PageContent.Actions>
-          <Button.Root variant="soft" tone="neutral">
-            <Button.Icon>
-              <Icon name="action.download" />
-            </Button.Icon>
-            Экспорт
-          </Button.Root>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новая сделка
-          </Button.Root>
-        </PageContent.Actions>
-      </PageContent.Header>
-      <PageContent.Body>
-        <div className={styles.workspace}>
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Сделки
+            <AppHeader.Description>
+              {loading ? "Загружаем воронку…" : pipeline}
+            </AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
           <SmartFilter.Root
             fields={FIELDS}
             value={filter}
@@ -436,16 +397,30 @@ export default function KanbanBoardPattern() {
                   </SegmentedControl.Item>
                 </SegmentedControl.Root>
               </PageToolbar.View>
+              <PageToolbar.Actions>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новая сделка
+                </Button.Root>
+              </PageToolbar.Actions>
               <PageToolbar.Chips>
                 <SmartFilter.Chips />
               </PageToolbar.Chips>
             </PageToolbar.Root>
           </SmartFilter.Root>
-          <Crossfade state={view}>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root fill>
+        <PageContent.Body>
+          <Crossfade state={view} fill>
             {view === "board" ? (
+              // `plain` (the default): the board is the page's main region, so the stages are no
+              // boxes — their headers and the deal cards stand on the page, one level of nesting.
               <Kanban.Root
                 aria-label="Воронка продаж"
-                className={styles.board}
                 columns={STAGES}
                 items={deals}
                 getId={(item) => item.id}
@@ -463,12 +438,6 @@ export default function KanbanBoardPattern() {
                   }
                   setPlacement(next);
                 }}
-                reorderableColumns
-                columnOrder={stageOrder}
-                onColumnOrderChange={async (next) => {
-                  await saveStageOrder();
-                  setStageOrder(next);
-                }}
                 renderColumnMeta={figures}
                 loading={loading}
                 onItemClick={(item) => openDeal(item.id)}
@@ -478,20 +447,7 @@ export default function KanbanBoardPattern() {
                     <Kanban.ItemDescription>
                       {RUBLES.format(item.amount)} · до {DAY.format(new Date(item.due))}
                     </Kanban.ItemDescription>
-                    <Kanban.ItemBadges>
-                      {item.tags.map((tag) => (
-                        <Badge.Root key={tag.text} color={tag.color}>
-                          {tag.text}
-                        </Badge.Root>
-                      ))}
-                    </Kanban.ItemBadges>
-                    <Kanban.ItemFooter>
-                      <Kanban.ItemCount>
-                        <Icon name="object.message" />
-                        {item.comments}
-                      </Kanban.ItemCount>
-                      {ownerAvatar(item.owner)}
-                    </Kanban.ItemFooter>
+                    <Kanban.ItemFooter>{ownerAvatar(item.owner)}</Kanban.ItemFooter>
                   </Kanban.Item>
                 )}
               />
@@ -503,7 +459,9 @@ export default function KanbanBoardPattern() {
                 getRowKey={(row) => row.id}
                 getRowLabel={(row) => row.company}
                 onRowClick={(row) => openDeal(row.id)}
-                pageSize={8}
+                paging="none"
+                scrollHeight="fill"
+                stickyHeader
                 defaultSort={{ columnId: "due", order: "asc" }}
                 empty={
                   <EmptyPage.Root size="s" role="status" aria-labelledby="deals-empty">
@@ -526,87 +484,89 @@ export default function KanbanBoardPattern() {
               />
             )}
           </Crossfade>
-        </div>
-        <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
-          <Drawer.Content>
-            <Drawer.Guard busy={saving} />
-            <Drawer.Header>
-              <Drawer.Title>{deal?.company}</Drawer.Title>
-              <Drawer.Description>
-                {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
-              </Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              {deal ? (
-                <DescriptionList.Root>
-                  <DescriptionList.Item label="Этап">{stageBadge(dealStage)}</DescriptionList.Item>
-                  <DescriptionList.Item label="Сумма">
-                    {RUBLES.format(deal.amount)}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Вероятность">
-                    {deal.probability} %
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Срок закрытия">
-                    {DAY.format(new Date(deal.due))}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Ответственный">
-                    <span className={styles.owner}>
-                      {ownerAvatar(deal.owner)}
-                      {deal.owner.name}
-                    </span>
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
-                  <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
-                  <DescriptionList.Item label="Договор">
-                    {deal.contract ? (
-                      <Badge.Root color="green">Подписан</Badge.Root>
-                    ) : (
-                      <Badge.Root color="gray">Не подписан</Badge.Root>
-                    )}
-                  </DescriptionList.Item>
-                </DescriptionList.Root>
-              ) : null}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
-                </Button.Root>
-              </Drawer.Close>
-              <Dropdown.Root>
-                <Dropdown.Trigger>
-                  <Button.Root variant="soft" tone="neutral" disabled={saving}>
-                    Сменить этап
+          <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
+            <Drawer.Content>
+              <Drawer.Guard busy={saving} />
+              <Drawer.Header>
+                <Drawer.Title>{deal?.company}</Drawer.Title>
+                <Drawer.Description>
+                  {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
+                </Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                {deal ? (
+                  <DescriptionList.Root>
+                    <DescriptionList.Item label="Этап">
+                      {stageBadge(dealStage)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Сумма">
+                      {RUBLES.format(deal.amount)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Вероятность">
+                      {deal.probability} %
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Срок закрытия">
+                      {DAY.format(new Date(deal.due))}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Ответственный">
+                      <span className={styles.owner}>
+                        {ownerAvatar(deal.owner)}
+                        {deal.owner.name}
+                      </span>
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
+                    <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
+                    <DescriptionList.Item label="Договор">
+                      {deal.contract ? (
+                        <Badge.Root color="green">Подписан</Badge.Root>
+                      ) : (
+                        <Badge.Root color="gray">Не подписан</Badge.Root>
+                      )}
+                    </DescriptionList.Item>
+                  </DescriptionList.Root>
+                ) : null}
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
                   </Button.Root>
-                </Dropdown.Trigger>
-                <Dropdown.Content>
-                  {stageOrder.map((id) => (
-                    <Dropdown.Item
-                      key={id}
-                      disabled={id === dealStage}
-                      onSelect={() => {
-                        if (deal) void moveDeal(deal, id);
-                      }}
-                    >
-                      {STAGE_BY_ID.get(id)?.title}
-                    </Dropdown.Item>
-                  ))}
-                </Dropdown.Content>
-              </Dropdown.Root>
-              {nextStage ? (
-                <Button.Root
-                  loading={saving}
-                  onClick={() => {
-                    if (deal) void moveDeal(deal, nextStage.id);
-                  }}
-                >
-                  В «{nextStage.title}»
-                </Button.Root>
-              ) : null}
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
-      </PageContent.Body>
-    </PageContent.Section>
+                </Drawer.Close>
+                <Dropdown.Root>
+                  <Dropdown.Trigger>
+                    <Button.Root variant="soft" tone="neutral" disabled={saving}>
+                      Сменить этап
+                    </Button.Root>
+                  </Dropdown.Trigger>
+                  <Dropdown.Content>
+                    {STAGES.map((stage) => (
+                      <Dropdown.Item
+                        key={stage.id}
+                        disabled={stage.id === dealStage}
+                        onSelect={() => {
+                          if (deal) void moveDeal(deal, stage.id);
+                        }}
+                      >
+                        {stage.title}
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Content>
+                </Dropdown.Root>
+                {nextStage ? (
+                  <Button.Root
+                    loading={saving}
+                    onClick={() => {
+                      if (deal) void moveDeal(deal, nextStage.id);
+                    }}
+                  >
+                    В «{nextStage.title}»
+                  </Button.Root>
+                ) : null}
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }

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

@@ -1,10 +1,10 @@
-/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. */
-import { Button, Icon, Kanban, Switch } from "prime-ui-kit";
+/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
+import { Badge, Button, Icon, Kanban, Switch } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-type Order = { id: string; title: string; total: string };
+type Order = { id: string; title: string; total: string; closed?: boolean };
 
 const COLUMNS = [
   { id: "new", title: "Новые" },
@@ -12,13 +12,19 @@ const COLUMNS = [
   { id: "shipped", title: "Отгружены" },
 ];
 
+/** A closed order has signed documents: its card stays where it is. */
 const ORDERS: Order[] = [
   { id: "ORD-5531", title: "ООО «Север» · 12 позиций", total: "48 300 ₽" },
   { id: "ORD-5529", title: "ИП Лебедев · 3 позиции", total: "7 950 ₽" },
-  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽" },
+  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽", closed: true },
+  { id: "ORD-5518", title: "ООО «Вектор» · 6 позиций", total: "31 400 ₽" },
 ];
 
-const PLACEMENT = { new: ["ORD-5531", "ORD-5529"], packing: [], shipped: ["ORD-5524"] };
+const PLACEMENT = {
+  new: ["ORD-5531", "ORD-5529"],
+  packing: [],
+  shipped: ["ORD-5524", "ORD-5518"],
+};
 
 const LOAD_MS = 1200;
 
@@ -62,11 +68,16 @@ export default function KanbanStatesExample() {
         loading={loading}
         disabled={readOnly}
         renderItem={(order) => (
-          <Kanban.Item>
+          <Kanban.Item disabled={order.closed}>
             <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
             <Kanban.ItemDescription>
               {order.title} · {order.total}
             </Kanban.ItemDescription>
+            {order.closed ? (
+              <Kanban.ItemBadges>
+                <Badge.Root color="gray">Закрыт</Badge.Root>
+              </Kanban.ItemBadges>
+            ) : null}
           </Kanban.Item>
         )}
       />

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

@@ -1,11 +1,11 @@
-/** 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";
+/** The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. */
+import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Task = { id: string; title: string; due: string };
+type Task = { id: string; title: string; due: string; label: string };
 
-const VARIANTS: KanbanVariant[] = ["well", "plain"];
+const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
 
 const COLUMNS = [
   { id: "todo", title: "К выполнению", description: "Берём после планирования" },
@@ -14,10 +14,15 @@ const COLUMNS = [
 ];
 
 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 окт" },
+  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт", label: "Финансы" },
+  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт", label: "Заказы" },
+  {
+    id: "PRJ-198",
+    title: "Повторная отправка приглашений в команду",
+    due: "10 окт",
+    label: "Команда",
+  },
+  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт", label: "Проекты" },
 ];
 
 const PLACEMENT = {
@@ -45,6 +50,9 @@ export default function KanbanVariantsExample() {
               <Kanban.ItemDescription>
                 {task.id} · до {task.due}
               </Kanban.ItemDescription>
+              <Kanban.ItemBadges>
+                <Badge.Root>{task.label}</Badge.Root>
+              </Kanban.ItemBadges>
             </Kanban.Item>
           )}
         />

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

@@ -134,7 +134,7 @@ A second line or an avatar makes a row taller than the one-line height; the vert
 | current | `current` | `aria-current="true"` (button) or `"page"` (link); `fill-muted-hover` fill, primary text |
 | focus-visible | keyboard | the focus ring inside the row edge |
 | disabled | `disabled` | `disabled` on a button; `aria-disabled="true"`, no `href` on a link, `tabindex="-1"` on an `asChild` element; `data-disabled="true"`; disabled text; in a reorderable list the handle is disabled and the row holds its place |
-| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap, its neighbours glide, the copy follows the pointer and sets down in its new place |
+| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap in the row's radius, its neighbours glide, the copy (handle and row, in the row's padding and radius) follows the pointer and sets down in its new place without a jump |
 | saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy="true"`, a `Spinner` stands in for the handle, the row content dims to 0.6 (`--prime-motion-duration-fast` both ways); a rejection glides the row back |
 
 Root attribute: `data-size`. The fill changes on `background-color` with `--prime-motion-duration-xfast` both ways (0 under reduced motion).

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

@@ -1,6 +1,6 @@
 # LoginForm
 
-**Category:** composition
+**Category:** page
 **Kind:** composite
 
 > A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation.
@@ -54,7 +54,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 `ref` → `HTMLElement`. `<header>` with the logo, title and description, laid out by Root `align`. Native props.
 
 ### LoginForm.Logo
-`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label`. Native `<div>` props.
+`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label` — then it is the product mark image (`role="img"`). Native `<div>` props.
 
 ### LoginForm.Title
 `ref` → `HTMLHeadingElement`. The heading (kit Typography, text role by the tier).
@@ -119,7 +119,7 @@ Root carries `data-size`, `data-align` and `data-flat`.
 ## Layout & spacing
 - header → body `--prime-space-8` (gap on Root); provider buttons → divider → form `--prime-space-4`; field → field → submit `--prime-space-5`; submit → back action `--prime-space-3`; form → footer `--prime-space-6`.
 - Spacing is `gap` on parents; no margins between parts.
-- The card has no border and is capped at the small modal width. To center it on a page, wrap it in your own flex container on the page.
+- The card has no border, takes the full width up to the small modal width. To center it on a page, wrap it in your own flex container on the page.
 - The form is a layer of the surface ladder like Card (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
 
 ## Accessibility
@@ -129,6 +129,7 @@ No keyboard interaction.
 
 ### ARIA
 - The title is a real heading (`h1` by default) and the form is a native `<form>`: Enter submits.
+- The logo is decorative; with an `aria-label` it is the product mark image (`role="img"`).
 - Give `LoginForm.Form` an `aria-label` (or `aria-labelledby` pointing to the title id) so the form is a landmark.
 - Fields use `autoComplete` (`email`, `current-password`, `new-password`, `one-time-code`) so password managers and OTP autofill work.
 - Server errors in a Banner need `role="alert"`; field errors come from the fields (`aria-invalid`, described by the error).
@@ -141,9 +142,9 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header — `align`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
+| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header with the product's named mark — `align`, `LoginForm.Logo`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Padding, gaps and text roles of the card follow the tier; the fields and buttons take the same one — `size`. |
-| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, and no shadow for a host that already is a surface — `flat`. |
+| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, no shadow for a host that already is a surface and a second-level title under the host page's own heading — `flat`, `as`. |
 | [register.tsx](examples/register.tsx) | Sign-up: five fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
 | [forgot-password.tsx](examples/forgot-password.tsx) | Password reset request: one field, the primary action and a quiet way back — `LoginForm.Actions`. |
 | [reset-password.tsx](examples/reset-password.tsx) | A new password after the e-mail link: a strength meter on the first field and a mismatch error under the second one — `strength`, `error`. |

package/dist/skill/reference/components/login-form/examples/examples.module.css

@@ -1,25 +1,6 @@
 /* Layout helpers for the LoginForm examples. Semantic tokens only. */
 
-/* Centers one card on the stage (the card itself is capped at the modal width). */
-.stage {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-}
-
-/* Several cards side by side, wrapping on narrow stages. */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-/* A field with a link under it, aligned to the field's end edge. */
+/* overview.tsx: a field with a link under it, aligned to the field's end edge. */
 .withLink {
   display: flex;
   flex-direction: column;
@@ -31,7 +12,7 @@
   align-self: stretch;
 }
 
-/* narrow.tsx: a phone-width stage. */
+/* narrow.tsx: a phone-width stage (320). */
 .narrow {
   display: flex;
   justify-content: center;