prime-ui-kit 0.16.0 → 0.17.0

package/src/components/file-upload/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A media library of a catalog object as a work screen: the title, the object and a PageToolbar with sections, search, order and upload in the app header; uploads in FileUpload tiles through a queue; a grid of Thumbnails that open MediaViewer out of the tile or are picked for bulk download and delete; a Skeleton first load and a filtered empty state in a Crossfade — `trigger`, `layout`. */
+/** A media library of a catalog object as a work screen: the title, the object and a toolbar with sections, search, order and upload in its top bar; uploads in FileUpload tiles through a queue; a grid of Thumbnails that open MediaViewer out of the tile or are picked for bulk download and delete; a Skeleton first load and a filtered empty state in a Crossfade — `trigger`, `layout`. */
 import {
-  AppHeader,
   Button,
   ConfirmDialog,
   Crossfade,
@@ -12,8 +11,7 @@ import {
   Icon,
   MediaViewer,
   type MediaViewerItem,
-  PageContent,
-  PageToolbar,
+  Page,
   SegmentedControl,
   Select,
   Skeleton,
@@ -365,76 +363,62 @@ export default function FileUploadScreenExample() {
   const totalSize = visible.reduce((sum, media) => sum + media.size, 0);
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1, the object it belongs to and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Медиатека
-            <AppHeader.Description>БЦ «Северная башня», Невский пр., 112</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={[]}
-            search={search}
-            onSearchChange={setSearch}
-            labels={{ searchPlaceholder: "Поиск по названию" }}
-          >
-            <PageToolbar.Root aria-label="Медиатека">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Sections>
-                <SegmentedControl.Root
-                  fullWidth
-                  value={section}
-                  onValueChange={(value) => setSection(value as Section)}
-                  aria-label="Раздел"
-                >
-                  {SECTIONS.map((item) => (
-                    <SegmentedControl.Item key={item.value} value={item.value}>
-                      {item.label}
-                      {loading ? null : (
-                        <SegmentedControl.Count>{count(item.value)}</SegmentedControl.Count>
-                      )}
-                    </SegmentedControl.Item>
-                  ))}
-                </SegmentedControl.Root>
-              </PageToolbar.Sections>
-              <PageToolbar.View>
-                <Select.Root value={order} onValueChange={(value) => setOrder(value as Order)}>
-                  <Select.Trigger aria-label="Порядок">
-                    <Select.TriggerIcon>
-                      <Icon name="sort.descending" />
-                    </Select.TriggerIcon>
-                    <Select.Value />
-                  </Select.Trigger>
-                  <Select.Content>
-                    {ORDERS.map((item) => (
-                      <Select.Item key={item.value} value={item.value}>
-                        {item.label}
-                      </Select.Item>
-                    ))}
-                  </Select.Content>
-                </Select.Root>
-              </PageToolbar.View>
-              <PageToolbar.Actions>
-                <Button.Root onClick={() => picker.current?.open()}>
-                  <Button.Icon>
-                    <Icon name="action.upload" />
-                  </Button.Icon>
-                  Загрузить
-                </Button.Root>
-              </PageToolbar.Actions>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root>
-        <PageContent.Body>
+    <SmartFilter.Root
+      fields={[]}
+      search={search}
+      onSearchChange={setSearch}
+      labels={{ searchPlaceholder: "Поиск по названию" }}
+    >
+      <Page.Root>
+        {/* A work screen titles itself in its top bar: the only h1, the object it belongs to, the
+          page's tools — sections, search, order — and the upload. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Медиатека</Page.Title>
+            <Page.Description>БЦ «Северная башня», Невский пр., 112</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Медиатека">
+            <SegmentedControl.Root
+              value={section}
+              onValueChange={(value) => setSection(value as Section)}
+              aria-label="Раздел"
+            >
+              {SECTIONS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                  {loading ? null : (
+                    <SegmentedControl.Count>{count(item.value)}</SegmentedControl.Count>
+                  )}
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
+            <SmartFilter.Toolbar />
+            <Select.Root value={order} onValueChange={(value) => setOrder(value as Order)}>
+              <Select.Trigger aria-label="Порядок">
+                <Select.TriggerIcon>
+                  <Icon name="sort.descending" />
+                </Select.TriggerIcon>
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                {ORDERS.map((item) => (
+                  <Select.Item key={item.value} value={item.value}>
+                    {item.label}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root onClick={() => picker.current?.open()}>
+              <Button.Icon>
+                <Icon name="action.upload" />
+              </Button.Icon>
+              Загрузить
+            </Button.Root>
+          </Page.Actions>
+        </Page.TopBar>
+        <Page.Body>
           {/* Uploads in flight: the add tile is also the drop zone; a done file moves into the grid. */}
           <FileUpload.Root
             label="Новые файлы"
@@ -447,7 +431,7 @@ export default function FileUploadScreenExample() {
             picker={picker}
           />
 
-          <PageContent.Section
+          <Page.Section
             label="Файлы"
             description={
               <span aria-live="polite">
@@ -459,7 +443,7 @@ export default function FileUploadScreenExample() {
               </span>
             }
           >
-            <PageContent.Actions>
+            <Page.Actions>
               <Crossfade state={selecting ? "select" : "browse"}>
                 {selecting ? (
                   <div className={styles.bar}>
@@ -509,7 +493,7 @@ export default function FileUploadScreenExample() {
                   </div>
                 )}
               </Crossfade>
-            </PageContent.Actions>
+            </Page.Actions>
 
             <Crossfade state={state} aria-busy={loading}>
               {loading ? (
@@ -621,7 +605,7 @@ export default function FileUploadScreenExample() {
                 </EmptyPage.Root>
               ) : null}
             </Crossfade>
-          </PageContent.Section>
+          </Page.Section>
 
           <MediaViewer
             items={viewerItems}
@@ -641,8 +625,8 @@ export default function FileUploadScreenExample() {
               </Button.Root>
             )}
           />
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/components/gallery/COMPONENT.md

@@ -97,6 +97,7 @@ Decided by the items, not a prop: the number of items and their ratios.
 - Tiles are `--prime-gallery-gap` (2px) apart; the gaps are the gallery's own background, transparent by default (a host may paint it: a message paints the incoming surface).
 - The outer corners are rounded (`--prime-radius-l`). A host that shapes and clips it itself (a message) passes `maxSize`: the gallery takes that length as its cap instead of its host's width and draws no radius of its own.
 - At any width the album keeps its layout: tiles scale with the gallery, never rearrange.
+- A video tile shorter than 6.5rem (a small tile of a phone album) has no room for the centred play mark under the length pill: it shows the length alone, so the two marks never collide.
 
 ## Accessibility
 

package/src/components/gantt/COMPONENT.md

@@ -224,7 +224,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | [states.tsx](examples/states.tsx) | Skeleton rows in the chart's geometry while it loads, an empty period and a report you may only look at, its today line on the report day — `loading`, `empty`, `readOnly`, `today`. |
 | [controlled.tsx](examples/controlled.tsx) | The zoom owned by the page: presets in the toolbar and the built-in switch change one state — `scale`, `onScaleChange`. |
 | [narrow.tsx](examples/narrow.tsx) | At 360 px the first column keeps only the avatars, the toolbar moves to its own row and the axis scrolls under the pinned column — `renderRowAvatar`. |
-| [screen.tsx](examples/screen.tsx) | A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. |
+| [screen.tsx](examples/screen.tsx) | A team schedule as a work screen: the title with the people shown and a toolbar with search, filters, team sections and the primary action in its top bar over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. |
 
 ## Mistakes
 - Updating the rows before the request succeeds (optimistic) → the chart cannot glide back on reject; update them when `onBarChange` resolves, or before you resolve it.

package/src/components/gantt/examples/screen.module.css

@@ -1,5 +1,5 @@
 /* Schedule: a work screen — the header carries the title and the tools, the page fills the app
-   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the chart takes the free
+   panel (`AppShell.Root fillViewport` + `Page.Root fill`) and the chart takes the free
    height. */
 
 /* On a short screen the chart keeps room for a few rows; the page scrolls instead. */

package/src/components/gantt/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. */
+/** A team schedule as a work screen: the title with the people shown and a toolbar with search, filters, team sections and the primary action in its top bar over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -17,8 +16,7 @@ import {
   Input,
   Modal,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   ProgressBar,
   SegmentedControl,
   Select,
@@ -441,73 +439,57 @@ export default function GanttScreenExample() {
   const detail = selected?.bar;
 
   return (
-    <>
-      {/* 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>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root fill>
+        {/* A work screen titles itself in its top bar: the only h1, the teams, the search and the
+          filters, the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Загрузка команды</Page.Title>
+            <Page.Description>
               {loading ? "Загружаем график…" : `Сотрудников: ${rows.length} из ${people.length}`}
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={FIELDS}
-            value={filter}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Загрузка команды">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Sections>
-                <SegmentedControl.Root
-                  fullWidth
-                  value={team}
-                  onValueChange={setTeam}
-                  aria-label="Команда"
-                >
-                  <SegmentedControl.Item value="all">
-                    Все<SegmentedControl.Count>{people.length}</SegmentedControl.Count>
-                  </SegmentedControl.Item>
-                  {TEAMS.map((item) => (
-                    <SegmentedControl.Item key={item.value} value={item.value}>
-                      {item.label}
-                      <SegmentedControl.Count>
-                        {people.filter((person) => person.team === item.value).length}
-                      </SegmentedControl.Count>
-                    </SegmentedControl.Item>
-                  ))}
-                </SegmentedControl.Root>
-              </PageToolbar.Sections>
-              <PageToolbar.Actions>
-                <Button.Root
-                  onClick={() => {
-                    setErrors({});
-                    setDraft({ personId: null, dates: null });
-                  }}
-                >
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Назначить
-                </Button.Root>
-              </PageToolbar.Actions>
-              <PageToolbar.Chips>
-                <SmartFilter.Chips />
-              </PageToolbar.Chips>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
+            </Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Загрузка команды">
+            <SegmentedControl.Root value={team} onValueChange={setTeam} aria-label="Команда">
+              <SegmentedControl.Item value="all">
+                Все<SegmentedControl.Count>{people.length}</SegmentedControl.Count>
+              </SegmentedControl.Item>
+              {TEAMS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                  <SegmentedControl.Count>
+                    {people.filter((person) => person.team === item.value).length}
+                  </SegmentedControl.Count>
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
+            <SmartFilter.Toolbar />
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root
+              onClick={() => {
+                setErrors({});
+                setDraft({ personId: null, dates: null });
+              }}
+            >
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Назначить
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <Gantt<Person, Assignment>
             aria-label="Загрузка команды внедрения"
             className={styles.chart}
@@ -719,8 +701,8 @@ export default function GanttScreenExample() {
               </Drawer.Footer>
             </Drawer.Content>
           </Drawer.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

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

@@ -1,12 +1,21 @@
 /* Layout of the Hint scenarios: semantic tokens only. */
 
-/* overview.tsx, hint-or-error.tsx: control → support row at the m-tier hint gap. */
+/* hint-or-error.tsx: control → support row at the m-tier hint gap. */
 .field {
   display: grid;
   justify-items: start;
   gap: var(--prime-control-m-hint-gap);
 }
 
+/* overview.tsx: the same pair in a 320 px column — an embedded calendar measures its container
+   for its month, so the column gives it one. */
+.calendarField {
+  display: grid;
+  justify-items: start;
+  gap: var(--prime-control-m-hint-gap);
+  width: min(100%, calc(var(--prime-space-20) * 4));
+}
+
 .actions {
   display: flex;
   flex-wrap: wrap;

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

@@ -8,7 +8,7 @@ export default function HintOverviewExample() {
   const hintId = React.useId();
 
   return (
-    <div className={styles.field}>
+    <div className={styles.calendarField}>
       <Datepicker.Panel
         mode="single"
         role="group"

package/src/components/kanban/COMPONENT.md

@@ -234,7 +234,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page — `Kanban.Root`, `columns`. |
-| [screen.tsx](examples/screen.tsx) | 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`, `onItemOpen`. |
+| [screen.tsx](examples/screen.tsx) | 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 its top bar, 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`, `onItemOpen`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.

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

@@ -1,5 +1,5 @@
 /* Kanban board: a work screen — the header carries the title and the tools, the page fills the app
-   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
+   panel (`AppShell.Root fillViewport` + `Page.Root fill`) and the board or the list takes
    the free height; every column scrolls inside the board, never the page. */
 
 /* Company cell: the name over the deal id (the column's `minWidth` keeps it on its lines). */

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

@@ -1,6 +1,5 @@
-/** 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`, `onItemOpen`. */
+/** 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 its top bar, 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`, `onItemOpen`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -16,8 +15,7 @@ import {
   type KanbanColumn,
   type KanbanValue,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   type PaletteColor,
   SegmentedControl,
   SmartFilter,
@@ -359,64 +357,51 @@ export default function KanbanScreenExample() {
   const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <>
-      {/* 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}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Сделки">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.View>
-                <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
-                  <SegmentedControl.Item value="board">
-                    <SegmentedControl.Icon>
-                      <Icon name="view.columns" />
-                    </SegmentedControl.Icon>
-                    Доска
-                  </SegmentedControl.Item>
-                  <SegmentedControl.Item value="list">
-                    <SegmentedControl.Icon>
-                      <Icon name="format.list" />
-                    </SegmentedControl.Icon>
-                    Список
-                  </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>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root fill>
+        {/* A work screen titles itself in its top bar: the only h1, the search and the filters, the
+          view, the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Сделки</Page.Title>
+            <Page.Description>{loading ? "Загружаем воронку…" : pipeline}</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Сделки">
+            <SmartFilter.Toolbar />
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              <SegmentedControl.Item value="board">
+                <SegmentedControl.Icon>
+                  <Icon name="view.columns" />
+                </SegmentedControl.Icon>
+                Доска
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value="list">
+                <SegmentedControl.Icon>
+                  <Icon name="format.list" />
+                </SegmentedControl.Icon>
+                Список
+              </SegmentedControl.Item>
+            </SegmentedControl.Root>
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Новая сделка
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <Crossfade state={view} fill>
             {view === "board" ? (
               // `plain` (the default): the board is the page's main region, so the stages are no
@@ -567,8 +552,8 @@ export default function KanbanScreenExample() {
               </Drawer.Footer>
             </Drawer.Content>
           </Drawer.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/components/kbd/COMPONENT.md

@@ -39,7 +39,7 @@ Kbd              <kbd>; one key, its badge tier, children (text, Icon or both)
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "size">` | — | `className`, `title`, `aria-label` and the other `<kbd>` attributes. |
 
 ## Variants
-Kbd has one look: monospace text in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
+Kbd has one look: monospace text (`--prime-font-family-key`: the mono faces, with ⇧ ⌥ ⌃ ⌘ from the system face so they match the letters) in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
 
 ### size
 | Value | Looks like | Use when | Default |

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

@@ -1,8 +1,19 @@
 /* Layout of the Label scenarios: semantic tokens only. */
 
-/* overview.tsx, structure.tsx: a label above what it names, at the m-tier label gap. */
+/* structure.tsx: a label above what it names, at the m-tier label gap, in a 320 px field column —
+   the fields stack centred in the stage and share one start edge, as labels of one form do. */
 .field {
   display: grid;
   justify-items: start;
   gap: var(--prime-control-m-label-gap);
+  width: min(100%, calc(var(--prime-space-20) * 4));
+}
+
+/* overview.tsx: the same pair in a 320 px column — an embedded calendar measures its container
+   for its month, so the column gives it one. */
+.calendarField {
+  display: grid;
+  justify-items: start;
+  gap: var(--prime-control-m-label-gap);
+  width: min(100%, calc(var(--prime-space-20) * 4));
 }

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

@@ -8,7 +8,7 @@ export default function LabelOverviewExample() {
   const labelId = React.useId();
 
   return (
-    <div className={styles.field}>
+    <div className={styles.calendarField}>
       <Label.Root id={labelId}>Дата отгрузки</Label.Root>
       <Datepicker.Panel mode="single" role="group" aria-labelledby={labelId} />
     </div>