prime-ui-kit 0.15.0 → 0.16.0

package/dist/skill/reference/components/gantt/examples/examples.module.css

@@ -1,21 +1,5 @@
 /* Layout of the Gantt scenarios: semantic tokens only. */
 
-/* variants / sizes / states: a chart with its caption under it; specimens kept apart. */
-.specimens {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.specimen {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
 /* occupancy: a name over a role in the first column. */
 .person {
   display: flex;

package/dist/skill/reference/components/gantt/examples/occupancy.tsx

@@ -1,4 +1,4 @@
-/** Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onSelect`, `readOnly`. */
+/** Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onItemOpen`, `readOnly`. */
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Avatar, Gantt, type GanttBar, type GanttDates, Typography } from "prime-ui-kit";
 import * as React from "react";
@@ -138,7 +138,7 @@ export default function GanttOccupancyExample() {
       )}
       onBarChange={moveBar}
       onBarCreate={addBar}
-      onSelect={(bar, person) => setSelected(`${bar.label} · ${person.name}`)}
+      onItemOpen={(bar, person) => setSelected(`${bar.label} · ${person.name}`)}
       toolbar={
         <Typography as="span" variant="body-s" tone="muted">
           {selected ?? "Выберите задачу, чтобы открыть карточку"}

package/dist/skill/reference/components/gantt/examples/screen.tsx

@@ -1,4 +1,4 @@
-/** 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`, `onSelect`. */
+/** 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`. */
 import {
   AppHeader,
   Avatar,
@@ -535,7 +535,7 @@ export default function GanttScreenExample() {
             )}
             onBarChange={moveBar}
             onBarCreate={startCreate}
-            onSelect={(bar, row) => {
+            onItemOpen={(bar, row) => {
               setSelected({ bar, person: findPerson(row.id) });
               setDetailOpen(true);
             }}

package/dist/skill/reference/components/gantt/examples/sizes.tsx

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Room = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -26,21 +24,23 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function GanttSizesExample() {
   return (
-    <div className={styles.specimens}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.specimen}>
-          <Gantt
-            aria-label={`Бронирования, ${size}`}
-            size={size}
-            defaultScale="day"
-            rows={ROOMS}
-            getRowKey={(room) => room.id}
-            getRowLabel={(room) => room.name}
-            getRowBars={(room) => room.bars}
-          />
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
+          <div>
+            <Gantt
+              aria-label={`Бронирования, ${size}`}
+              size={size}
+              defaultScale="day"
+              rows={ROOMS}
+              getRowKey={(room) => room.id}
+              getRowLabel={(room) => room.name}
+              getRowBars={(room) => room.bars}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
     </div>

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

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Vehicle = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -36,36 +34,42 @@ const chartProps = {
 
 export default function GanttStatesExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
-        <Typography as="span" variant="caption" tone="muted">
-          loading
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин"
-          rows={NO_VEHICLES}
-          empty="На этой неделе рейсов нет"
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          empty
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин"
+            rows={NO_VEHICLES}
+            empty="На этой неделе рейсов нет"
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            empty
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин, только просмотр"
-          rows={FLEET}
-          readOnly
-          today={REPORT_DAY}
-          onBarChange={() => undefined}
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          readOnly · today
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин, только просмотр"
+            rows={FLEET}
+            readOnly
+            today={REPORT_DAY}
+            onBarChange={() => undefined}
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            readOnly · today
+          </Typography>
+        </div>
       </div>
     </div>
   );

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

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Row = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -52,30 +50,34 @@ const BY_STATUS: Row[] = [
 
 export default function GanttVariantsExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Проекты по направлениям"
-          rows={BY_PROJECT}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          color
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Проекты по направлениям"
+            rows={BY_PROJECT}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            color
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Задачи по статусу"
-          rows={BY_STATUS}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          tone
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Задачи по статусу"
+            rows={BY_STATUS}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            tone
+          </Typography>
+        </div>
       </div>
     </div>
   );

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

@@ -6,7 +6,7 @@
 > Help text or a validation error under a field.
 
 ## When to use
-- Under a custom control without `hint` / `error` props, or a hand-built field, where you wire the ids yourself: format rules, limits, where the value comes from.
+- Under a control without `hint` / `error` props (an embedded `Datepicker.Panel`, a custom control), where you wire the ids yourself: format rules, limits, where the value comes from.
 - As the error message of such a control (`invalid`), in the same slot as the hint.
 
 ## When not to use
@@ -31,17 +31,22 @@ Hint.Root      <p> with the text
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Hint.Root
-`ref` → `HTMLParagraphElement`. A `<p>` with the support text; provides its tier to nested icons. + native `<p>` props (`id`, `role`, `className`, …).
+`ref` → `HTMLParagraphElement`. A `<p>` with the support text; provides its tier to nested icons.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the paired field: 12/16 for xs–m, 13/20 for l and xl. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the paired field: 12/16 for xs–m, 13/20 for l and xl. Without it the tier of its host, else `m`. |
 | `invalid` | `boolean` | `false` | Error styling: danger text that drops in (fade + 4 px from above). |
-| `disabled` | `boolean` | `false` | Disabled text color, next to a disabled control. |
+| `disabled` | `boolean` | `false` | Disabled text color, next to a disabled control. A disabled `Fieldset` around the hint sets it too. |
 | `children` | `ReactNode` | — | Text, optionally with `Hint.Icon` first. |
+| `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `children`, `id`, `aria-live`, `className` and the other paragraph attributes. |
 
 ### Hint.Icon
-`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` holding a glyph: 14 px for xs–m, 16 px for l and xl, centred on the first line. + native `<span>` props.
+`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` holding a glyph: 14 px for xs–m, 16 px for l and xl, centred on the first line.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (the glyph), `className` and the other span attributes. |
 
 ## Variants
 Hint has no `variant` or `tone`; its states are flags.
@@ -63,29 +68,33 @@ The hint is always smaller than the field text; use the field's size.
 | `invalid` | Danger text, drops in | Validation error | `false` |
 | `disabled` | Disabled text | Under a disabled control | `false` |
 
-**Combinations** — one element switches between the hint text and the error text with `invalid` (no layout jump); add `role="alert"` to an error shown after a user action. `invalid` and `disabled` together make no sense. There is no success state: use neutral text, or a [Banner](../banner/COMPONENT.md) for a result.
+**Combinations** — one element switches between the hint text and the error text with `invalid` (no layout jump); a standalone hint that changes after an action stays mounted with `aria-live="polite"` (inside a field the frame does it). `invalid` and `disabled` together make no sense. There is no success state: use neutral text, or a [Banner](../banner/COMPONENT.md) for a result.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
 | error | `invalid` | `data-invalid="true"`; the message drops in over `fast` (fade + `--prime-space-1` from above, no shake, no layout shift) and the color eases from the hint color |
-| disabled | `disabled` | `data-disabled="true"` |
-| size | `size` | `data-size` |
+| disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"` |
+| size | `size`, else the host tier | `data-size` |
 
 Hint is not interactive: hover and focus belong to the field.
 
 ## Layout & spacing
-- Field → hint: the tier `hint-gap` (`--prime-control-<size>-hint-gap`), set by the field layout, not by Hint.
+- Field → hint: the tier `--field-hint-gap`, set by the field layout, not by Hint. The text and the icon size come from the field tier (`--field-hint-size`, `--field-hint-lh`, `--field-hint-icon`).
 - Icon → text gap: `--prime-space-1`. Long text wraps (`overflow-wrap: anywhere`).
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Give the hint an `id` and put it into the control's `aria-describedby` so screen readers read it with the field.
-- Add `role="alert"` to an error that appears after a user action.
+- Inside a field the frame announces an error that arrives: its support slot is a polite live region. A standalone Hint whose text changes after an action stays mounted with `aria-live="polite"`.
 - `Hint.Icon` is decorative; the text carries the meaning.
 
 ### Labels
@@ -96,17 +105,18 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Help text under a hand-built field, linked to its input by `id` and `aria-describedby`. |
-| [sizes.tsx](examples/sizes.tsx) | Every size tier, matching the field above: 12/16 for xs–m, 13/20 for l and xl — `size`. |
+| [overview.tsx](examples/overview.tsx) | Help text under a calendar that has no hint of its own, linked to it through `id` and `aria-describedby` — `id`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier, one per field tier: 12/16 for xs–m, 13/20 for l and xl — `size`. |
 | [states.tsx](examples/states.tsx) | Default help text next to an error and a hint under a disabled control — `invalid`, `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A leading icon centred on the first line, in the default and the error state — `Hint.Icon`. |
-| [hint-or-error.tsx](examples/hint-or-error.tsx) | After a check the error replaces the hint in the same element, without a layout jump, and is announced — `invalid`, `role`. |
+| [hint-or-error.tsx](examples/hint-or-error.tsx) | After a check the error replaces the hint in the same element, without a layout jump, and a polite region reads it — `invalid`, `aria-live`. |
 
 ## Mistakes
 - `<Hint.Root>` under an Input → use `hint` / `error` on `Input.Root`; it links the ids itself.
 - A separate hint and error element at the same time → one element; the error replaces the hint.
 - Hint without `id` + `aria-describedby` → the screen reader does not connect it to the field.
-- Hint size different from the field size → use the same `size`.
+- Hint size different from the field size → use the same `size`, or none inside a sized host.
+- `role="alert"` on a field error → none; the field frame announces it, a standalone hint takes `aria-live="polite"`.
 
 ## Related
 - **Built from:** —

package/dist/skill/reference/components/hint/examples/examples.module.css

@@ -1,6 +1,6 @@
 /* Layout of the Hint scenarios: semantic tokens only. */
 
-/* overview.tsx, hint-or-error.tsx: label → control → support row with the m-tier gaps. */
+/* overview.tsx, hint-or-error.tsx: control → support row at the m-tier hint gap. */
 .field {
   display: grid;
   justify-items: start;

package/dist/skill/reference/components/hint/examples/hint-or-error.tsx

@@ -1,4 +1,4 @@
-/** After a check the error replaces the hint in the same element, without a layout jump, and is announced — `invalid`, `role`. */
+/** After a check the error replaces the hint in the same element, without a layout jump, and a polite region reads it — `invalid`, `aria-live`. */
 import { Button, Hint } from "prime-ui-kit";
 import * as React from "react";
 
@@ -17,7 +17,7 @@ export default function HintHintOrErrorExample() {
           Сбросить
         </Button.Root>
       </div>
-      <Hint.Root invalid={invalid} role={invalid ? "alert" : undefined}>
+      <Hint.Root invalid={invalid} aria-live="polite">
         {invalid
           ? "Заполните название перед публикацией."
           : "Черновик можно сохранить без названия."}

package/dist/skill/reference/components/hint/examples/overview.tsx

@@ -1,22 +1,21 @@
-/** Help text under a hand-built field, linked to its input by `id` and `aria-describedby`. */
-import { Hint, Input, Label } from "prime-ui-kit";
+/** Help text under a calendar that has no hint of its own, linked to it through `id` and `aria-describedby` — `id`. */
+import { Datepicker, Hint } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function HintOverviewExample() {
-  const inputId = React.useId();
   const hintId = React.useId();
 
   return (
     <div className={styles.field}>
-      <Label.Root htmlFor={inputId}>ИНН компании</Label.Root>
-      <Input.Root id={inputId}>
-        <Input.Wrapper>
-          <Input.Field inputMode="numeric" defaultValue="7707083893" aria-describedby={hintId} />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={hintId}>10 цифр для юрлица, 12 — для ИП.</Hint.Root>
+      <Datepicker.Panel
+        mode="single"
+        role="group"
+        aria-label="Дата отгрузки"
+        aria-describedby={hintId}
+      />
+      <Hint.Root id={hintId}>Склад отгружает по будням, заказ собирают за два дня.</Hint.Root>
     </div>
   );
 }

package/dist/skill/reference/components/hint/examples/sizes.tsx

@@ -1,4 +1,4 @@
-/** Every size tier, matching the field above: 12/16 for xs–m, 13/20 for l and xl — `size`. */
+/** Every size tier, one per field tier: 12/16 for xs–m, 13/20 for l and xl — `size`. */
 import { Hint, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;

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

@@ -51,7 +51,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context. |
 | `label` | `ReactNode` | — | Label above the field, rendered as `<label htmlFor>`. Without it, give `Input.Field` an `aria-label`. |
 | `required` | `boolean` | `false` | Red `*` after the label (`aria-hidden`) and native `required` on `Input.Field`. |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
@@ -59,7 +59,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
-| `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter />`. |
+| `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter current max />`. |
 | `reserveSupportRow` | `boolean` | `false` | Always render the support row (min height = hint line height), so an appearing error does not shift the layout. |
 | `id` | `string` | — | Id of the `<input>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
 | `strength` | `boolean` | `false` | A password strength meter for new-password fields: a stepped `ProgressBar` under the field and the level word (weak … hard) in the support row. Follows the value of `Input.Field`. |
@@ -127,7 +127,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` | `string` | `the field's value` | Text to copy instead of the field's current value. |
+| `value` | `string` | the field's value | Text to copy instead of the field's current value. |
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "children" \| "aria-label">` | — | `onClick`, `disabled` and the other button attributes. |
 
 ### Input.RevealButton
@@ -179,7 +179,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `focusRing={false}` | No focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
+| `focusRing` | `false`: no focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
 | `reserveSupportRow` | Empty support row of hint height under the field | Fields validated on the fly; neighbouring fields in one grid row | `false` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority: required when most are optional, optional when most are required | `false` |
 
@@ -219,7 +219,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 
 ## Layout & spacing
 - Label → field gap: tier `label-gap` (`--prime-space-1` on xs/s, `--prime-space-2` on m–xl). Field → support row: `--prime-space-1`.
-- Field → field in a form: `--prime-space-5` (20); group → actions: `--prime-space-8` (32).
+- Fields of a form stack in a label-less [Fieldset](../fieldset/COMPONENT.md) (20 apart); the form around the groups spaces them from its actions (32).
 - `Input.Root` is `width: 100%` and `min-width: 0`; there is no `fullWidth` prop — the width comes from the parent (grid column, flex item, capped wrapper).
 - Use `reserveSupportRow` on fields that share a grid row so their bottoms stay aligned when only one shows an error.
 - The value truncates with an ellipsis before icons and affixes; the field height never changes.
@@ -227,6 +227,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focuses the field, then the segments at its end (clear, copy, reveal, actions). |
@@ -235,6 +237,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | `Escape` | With `onCommit`: puts the committed value back. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `label` renders a `<label htmlFor>` bound to the input. Without `label`, set `aria-label` on `Input.Field`. A placeholder never replaces the label.
 - Hint and error are linked through `aria-describedby`; the error replaces the hint and sets `aria-invalid="true"`.
 - `Input.Icon`, `Input.Affix`, `Input.InlineAffix` are `aria-hidden`: put the meaning in the label (e.g. "Сумма, ₽").
@@ -293,5 +297,5 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments)
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Textarea](../textarea/COMPONENT.md), [Select](../select/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md) — fields with the same contract

package/dist/skill/reference/components/input/examples/affixes.tsx

@@ -4,14 +4,14 @@ import { Input } from "prime-ui-kit";
 export default function InputAffixesExample() {
   return (
     <>
-      <Input.Root label="Адрес магазина" hint="Адрес: https://moy-magazin.shop.ru">
+      <Input.Root label="Адрес магазина" hint="Латиница, цифры и дефис">
         <Input.Wrapper>
           <Input.Affix side="start">https://</Input.Affix>
           <Input.Field placeholder="moy-magazin" />
           <Input.Affix side="end">.shop.ru</Input.Affix>
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root label="Сумма платежа, ₽">
+      <Input.Root label="Сумма платежа">
         <Input.Wrapper>
           <Input.Field placeholder="0,00" inputMode="decimal" />
           <Input.InlineAffix side="end">₽</Input.InlineAffix>

package/dist/skill/reference/components/input/examples/examples.module.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-8);
-  width: min(100%, var(--prime-modal-width-m));
+  width: min(100%, var(--prime-layout-form-width-m));
 }
 
 .formFields {

package/dist/skill/reference/components/input/examples/sizes.tsx

@@ -7,11 +7,15 @@ export default function InputSizesExample() {
   return (
     <>
       {SIZES.map((size) => (
-        <Input.Root key={size} size={size} label={size} hint="Пришлём ссылку для входа">
-          <Input.Wrapper>
-            <Input.Field type="email" placeholder="name@company.ru" />
-          </Input.Wrapper>
-        </Input.Root>
+        <div key={size}>
+          <div>
+            <Input.Root size={size} label={size} hint="Пришлём ссылку для входа">
+              <Input.Wrapper>
+                <Input.Field type="email" placeholder="name@company.ru" />
+              </Input.Wrapper>
+            </Input.Root>
+          </div>
+        </div>
       ))}
     </>
   );

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

@@ -4,29 +4,45 @@ import { Icon, Input } from "prime-ui-kit";
 export default function InputStatesExample() {
   return (
     <>
-      <Input.Root label="default">
-        <Input.Wrapper>
-          <Input.Field placeholder="Например, Москва" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="disabled">
-        <Input.Wrapper>
-          <Input.Field defaultValue="Екатеринбург" disabled />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="readOnly">
-        <Input.Wrapper>
-          <Input.Field defaultValue="ID 4821-0093" readOnly />
-          <Input.Icon side="end">
-            <Icon name="status.locked" tone="secondary" />
-          </Input.Icon>
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="invalid" invalid>
-        <Input.Wrapper>
-          <Input.Field type="tel" defaultValue="+7 900 12" />
-        </Input.Wrapper>
-      </Input.Root>
+      <div>
+        <div>
+          <Input.Root label="default">
+            <Input.Wrapper>
+              <Input.Field placeholder="Например, Москва" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="disabled">
+            <Input.Wrapper>
+              <Input.Field defaultValue="Екатеринбург" disabled />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="readOnly">
+            <Input.Wrapper>
+              <Input.Field defaultValue="ID 4821-0093" readOnly />
+              <Input.Icon side="end">
+                <Icon name="status.locked" tone="secondary" />
+              </Input.Icon>
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="invalid" invalid>
+            <Input.Wrapper>
+              <Input.Field type="tel" defaultValue="+7 900 12" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
     </>
   );
 }