prime-ui-kit 0.21.3 → 0.21.4

package/dist/chunks/{chunk-R5LI5BO3.js → chunk-UNNQITFE.js}

@@ -1,7 +1,9 @@
 "use client";
 
 import {
+  AUTOFILL_OFF,
   AnchorRectProvider,
+  AutofillScope,
   Avatar,
   Badge,
   Button,
@@ -138,6 +140,7 @@ import {
   touchTargetClass,
   touchTargetRowClass,
   useAnchorName,
+  useAutofill,
   useBalancedColumns,
   useChipTier,
   useControllableState,
@@ -183,7 +186,7 @@ import {
   useTextParts,
   visuallyHiddenClass,
   zonedParts
-} from "./chunk-JO7E6SZQ.js";
+} from "./chunk-PFASPQSJ.js";
 import {
   COMPACT_QUERY,
   ControlSizeProvider,
@@ -2969,6 +2972,7 @@ function FooterField({
             className: cx(fieldInputTextClass, Datepicker_default.fieldTime),
             value: time,
             inputMode: "numeric",
+            ...AUTOFILL_OFF,
             maxLength: 5,
             onChange: (e) => onTime(e.target.value)
           }
@@ -3850,7 +3854,6 @@ function SmartFilterToolbar({
                   Input.Field,
                   {
                     type: "search",
-                    autoComplete: "off",
                     "aria-label": labels.searchPlaceholder,
                     placeholder: labels.searchPlaceholder,
                     value: search,
@@ -4103,7 +4106,6 @@ function NumberRange({
     Input.Field,
     {
       inputMode: "decimal",
-      autoComplete: "off",
       "aria-label": formatLabel(side === "from" ? labels.fromLabel : labels.toLabel, {
         field: field.label
       }),
@@ -19935,7 +19937,6 @@ function CustomColorField() {
       {
         value: draft,
         placeholder: "#12A594",
-        autoComplete: "off",
         spellCheck: false,
         onValueChange: (next) => {
           setDraft(next);
@@ -20237,7 +20238,7 @@ function CommandMenuInput({
               "aria-controls": listboxId,
               "aria-activedescendant": activeId ? optionId(activeId) : void 0,
               "aria-busy": loading || loadingMore || void 0,
-              autoComplete: "off",
+              ...AUTOFILL_OFF,
               autoCorrect: "off",
               spellCheck: false,
               "data-autofocus": "",
@@ -21982,6 +21983,7 @@ function TextareaRoot({
   disabled: disabledProp,
   readOnly,
   value,
+  autoComplete,
   onInput,
   onChange,
   onValueChange,
@@ -22002,6 +22004,7 @@ function TextareaRoot({
   const disabled = useInheritedDisabled(disabledProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid, required }, ariaDescribedBy);
   const labels = useLabels(TEXTAREA_LABELS, labelsProp);
+  const autofill = useAutofill(autoComplete);
   const innerRef = React67.useRef(null);
   const setRefs = useMergedRefs(innerRef, ref);
   const mirrorRef = React67.useRef(null);
@@ -22061,6 +22064,7 @@ function TextareaRoot({
       "aria-invalid": ids.invalid || void 0,
       "aria-describedby": ids.describedBy,
       "aria-busy": commit.state === "pending" || void 0,
+      ...autofill,
       value,
       onInput: (event) => {
         if (autoResize && mirrorRef.current) {
@@ -30161,7 +30165,7 @@ function LoginFormBody({ className, children, ...rest }) {
 }
 LoginFormBody.displayName = "LoginForm.Body";
 function LoginFormForm({ className, children, ref, ...rest }) {
-  return /* @__PURE__ */ jsx81("form", { ref, className: cx(LoginForm_default.form, className), ...rest, children });
+  return /* @__PURE__ */ jsx81("form", { ref, className: cx(LoginForm_default.form, className), ...rest, children: /* @__PURE__ */ jsx81(AutofillScope, { children }) });
 }
 LoginFormForm.displayName = "LoginForm.Form";
 function LoginFormActions({ className, children, ...rest }) {
@@ -33420,6 +33424,7 @@ function TagSelect({
                           "aria-expanded": shown,
                           "aria-controls": shown ? listboxId : void 0,
                           "aria-autocomplete": "list",
+                          ...AUTOFILL_OFF,
                           "aria-label": ariaLabel,
                           "aria-labelledby": ariaLabelledBy,
                           "aria-invalid": ids.invalid || void 0,

package/dist/chunks/{chunk-BAJRN3QN.js → chunk-WGXXPJDR.js}

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  AUTOFILL_OFF,
   Button,
   ColorSwatches,
   FieldActionButton,
@@ -23,7 +24,7 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-JO7E6SZQ.js";
+} from "./chunk-PFASPQSJ.js";
 import {
   cx,
   useHostTier
@@ -176,6 +177,7 @@ function ChannelField({
     /* @__PURE__ */ jsx(
       "input",
       {
+        ...AUTOFILL_OFF,
         ref: inputRef,
         "aria-label": labels[channel],
         className: cx(fieldInputTextClass, ColorPicker_default.channelInput),
@@ -200,6 +202,7 @@ function StripHexField() {
       children: /* @__PURE__ */ jsx(
         "input",
         {
+          ...AUTOFILL_OFF,
           ref: inputRef,
           "aria-label": labels.hex,
           autoCapitalize: "off",

package/dist/color-picker.js

@@ -4,8 +4,8 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-BAJRN3QN.js";
-import "./chunks/chunk-JO7E6SZQ.js";
+} from "./chunks/chunk-WGXXPJDR.js";
+import "./chunks/chunk-PFASPQSJ.js";
 import "./chunks/chunk-HMLQCKRL.js";
 export {
   ColorField,

package/dist/components/input/Input.d.ts

@@ -151,7 +151,7 @@ export type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     ref?: React.Ref<HTMLInputElement>;
 };
 /** The `<input>`; its id comes from `Input.Root` so the label, hint and error stay linked. */
-declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, onChange, onValueChange, onFocus, onBlur, onKeyDown, onClick, onInvalid, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, autoComplete, onChange, onValueChange, onFocus, onBlur, onKeyDown, onClick, onInvalid, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputField {
     var displayName: string;
 }

package/dist/components/login-form/LoginForm.d.ts

@@ -124,7 +124,11 @@ export type LoginFormFormProps = {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLFormElement>;
 } & React.FormHTMLAttributes<HTMLFormElement>;
-/** The `<form>`: fields, then the submit button, one column with field → field spacing. Native submit and `onSubmit` work as usual. */
+/**
+ * The `<form>`: fields, then the submit button, one column with field → field spacing. Native
+ * submit and `onSubmit` work as usual. Autofill is the point of a sign-in form: a kit field inside
+ * it without an `autoComplete` token is left to the browser and the password managers.
+ */
 declare function LoginFormForm({ className, children, ref, ...rest }: LoginFormFormProps): import("react/jsx-runtime").JSX.Element;
 declare namespace LoginFormForm {
     var displayName: string;

package/dist/components/textarea/Textarea.d.ts

@@ -100,7 +100,7 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
  * A multi-line field. `className` goes to the field frame, `id`, `ref` and the native attributes
  * to the `<textarea>` (it has no `Field` part).
  */
-declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, autoResize, rows, maxRows, disabled: disabledProp, readOnly, value, onInput, onChange, onValueChange, onFocus, onBlur, onKeyDown, onSelect, onCommit, formatting, labels: labelsProp, "aria-describedby": ariaDescribedBy, children, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
+declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, autoResize, rows, maxRows, disabled: disabledProp, readOnly, value, autoComplete, onInput, onChange, onValueChange, onFocus, onBlur, onKeyDown, onSelect, onCommit, formatting, labels: labelsProp, "aria-describedby": ariaDescribedBy, children, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TextareaRoot {
     var displayName: string;
 }

package/dist/index.js

@@ -90,7 +90,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-R5LI5BO3.js";
+} from "./chunks/chunk-UNNQITFE.js";
 import {
   Avatar,
   Badge,
@@ -125,7 +125,7 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-JO7E6SZQ.js";
+} from "./chunks/chunk-PFASPQSJ.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize

package/dist/internal/autofill.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Browser autofill and password managers stay off a kit text field: a product screen is full of
+ * searches, filters and record fields that a saved login or address has no business filling.
+ * `autocomplete="off"` turns off the browser's own suggestions where it is honoured (Chrome and
+ * Firefox history and address autofill on desktop); browsers still read login-looking fields on
+ * their own, and the password-manager extensions read only their own opt-outs: 1Password
+ * `data-1p-ignore`, LastPass `data-lpignore`, Bitwarden `data-bwignore`, Dashlane
+ * `data-form-type="other"`.
+ */
+export declare const AUTOFILL_OFF: {
+    readonly autoComplete: "off";
+    readonly "data-1p-ignore": "true";
+    readonly "data-lpignore": "true";
+    readonly "data-bwignore": "true";
+    readonly "data-form-type": "other";
+};
+type AutofillProps = {
+    autoComplete?: string;
+} & Partial<Omit<typeof AUTOFILL_OFF, "autoComplete">>;
+export declare function AutofillScope({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The autofill attributes of a text field. A consumer's `autoComplete` token other than `"off"`
+ * opts in: the token goes through and the opt-outs are dropped. Without a token the field is off,
+ * except inside `AutofillScope`, where the browser and the password managers decide.
+ */
+export declare function useAutofill(autoComplete: string | undefined): AutofillProps;
+export {};

package/dist/skill/checklist.md

@@ -39,6 +39,8 @@ checks.
 - [ ] A request a value starts — a simulated one too — is cancelled when the value changes again ([nothing to guess](ux.md#6-nothing-to-guess)).
 - [ ] Tabs, filters, search, page and the open record are in the URL ([nothing to guess](ux.md#6-nothing-to-guess)).
 - [ ] Defaults prefill what the system knows; each field has the control and `inputMode` of its data ([ask less](ux.md#7-ask-less)).
+- [ ] `autoComplete` tokens only on sign-in and sign-up fields (`LoginForm.Form`, a password change); no token on a search or a record field ([ask less](ux.md#7-ask-less)).
+- [ ] No search, filter or record field (other than a record's e-mail) says «username», «login», «email», «логин», «почта» in its placeholder, label, `name` or `id` — Safari offers saved logins there ([ask less](ux.md#7-ask-less)).
 - [ ] I looked at the screen in a browser, filled badly ([the visual check](ux.md#9-look-at-it-before-handing-it-over)).
 
 ## Grid and spacing

package/dist/skill/reference/components/button/examples/in-form.tsx

@@ -32,7 +32,6 @@ export default function ButtonInFormExample() {
             type="email"
             name="email"
             placeholder="name@company.ru"
-            autoComplete="email"
             onValueChange={() => setError(undefined)}
           />
         </Input.Wrapper>

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

@@ -180,11 +180,7 @@ export default function DrawerScreenExample() {
                       </Radio.Group>
                       <Input.Root label="Название" error={errors.name}>
                         <Input.Wrapper>
-                          <Input.Field
-                            name="name"
-                            placeholder="ООО «Ромашка»"
-                            autoComplete="organization"
-                          />
+                          <Input.Field name="name" placeholder="ООО «Ромашка»" />
                         </Input.Wrapper>
                       </Input.Root>
                       <div className={styles.pair}>

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

@@ -96,6 +96,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
 | `aria-describedby` | `string` | — | Merged with the affix and hint/error ids from the root. |
 | `required` | `boolean` | — | Overrides the root's `required` for the native input. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "size" \| "id">` | — | `value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`… |
 
 ### Input.Icon
@@ -272,6 +273,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - `minStrength` uses native constraint validation: below the level the input's `validationMessage` is `labels.strengthTooWeak`, the form refuses to submit, and the message becomes the field's error (`aria-invalid`).
 - `Input.Icon` is decorative (`aria-hidden`). `Input.Affix` and `Input.InlineAffix` are `aria-hidden` in the reading order but describe the input (`aria-describedby`, before the hint): the unit is heard with the field, so the label never repeats it. An `aria-label` on the affix is said instead of its text («рублей» for `₽`).
 - `suggestions` make the input a `combobox` (`aria-autocomplete="list"`, `aria-expanded`, `aria-controls` on the open `listbox`, which the label names); the highlight is `aria-activedescendant`, so focus never leaves the field.
+- Autofill is off unless you pass `autoComplete`: without a token the input carries `autocomplete="off"` and the opt-outs of 1Password, LastPass, Bitwarden and Dashlane (`data-1p-ignore`, `data-lpignore`, `data-bwignore`, `data-form-type="other"`); a token passes through and drops them. With `suggestions` it stays off. Inside `LoginForm.Form` a field without a token is left to the browser.
 - A `Select` inside `Input.Wrapper` is the box's start segment: its trigger is named by the select root's `aria-label` and the picked value («Иконка: Звезда»).
 - `Input.ClearButton` is a real button named by `labels.clear`, with `aria-controls` on the input.
 - `Input.Action` and `Input.CopyButton` are buttons (or a link with `asChild`) named by their label, with a tooltip; copying announces `labels.copied` through a polite live region.
@@ -338,6 +340,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - A Select and an Input side by side for one value (an icon + a name) → the Select inside `Input.Wrapper`, named by its `aria-label`.
 - A text field with a hand-made time mask, or a Datepicker for a time of day → `Input.Field type="time"`.
 - Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
+- `autoComplete="email"` / `"name"` on a search, filter or record field → leave it out: autofill is off unless you pass `autoComplete`; tokens belong on sign-in and sign-up fields (`LoginForm.Form`) and on a new password (`new-password`).
 
 ## 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, the `valid` check), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)

package/dist/skill/reference/components/input/examples/in-form.tsx

@@ -40,7 +40,6 @@ export default function InputInFormExample() {
                 name="name"
                 onValueChange={() => edit("name")}
                 defaultValue="ООО «Северный ветер»"
-                autoComplete="organization"
               />
             </Input.Wrapper>
           </Input.Root>

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

@@ -28,7 +28,7 @@ export default function InputValidationExample() {
     <>
       <Input.Root label="Название организации" required hint="Как в учредительных документах">
         <Input.Wrapper>
-          <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
+          <Input.Field defaultValue="ООО «Северный ветер»" />
         </Input.Wrapper>
       </Input.Root>
       <Input.Root

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

@@ -99,7 +99,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
-`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
+`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props. The one place autofill stays on: a kit field inside it without `autoComplete` is left to the browser and the password managers.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -184,7 +184,7 @@ Root carries `data-size`, `data-align` and `data-flat`.
 - 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.
+- Every field names its purpose with `autoComplete` — `email` or `username`, `current-password` to sign in, `new-password` to sign up, reset or accept an invite, `one-time-code` for a code (`DigitInput` sets it) — so password managers fill and save the right field. Kit fields elsewhere keep autofill off.
 - Field errors come from the fields (`aria-invalid`, described by the error). A refused sign-in has no Banner: the e-mail takes `invalid` and the `error` of the password says why, announced by the support row of the field.
 
 ### Labels

package/dist/skill/reference/components/login-form/examples/sizes.tsx

@@ -16,12 +16,16 @@ export default function LoginFormSizesExample() {
             <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
               <Input.Root label="Email">
                 <Input.Wrapper>
-                  <Input.Field type="email" placeholder="name@company.ru" />
+                  <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
                 </Input.Wrapper>
               </Input.Root>
               <Input.Root label="Пароль">
                 <Input.Wrapper>
-                  <Input.Field type="password" placeholder="********" />
+                  <Input.Field
+                    type="password"
+                    autoComplete="current-password"
+                    placeholder="********"
+                  />
                 </Input.Wrapper>
               </Input.Root>
               <Button.Root type="submit" fullWidth>

package/dist/skill/reference/components/tabs/examples/orientation.tsx

@@ -38,7 +38,7 @@ export default function TabsOrientationExample() {
         <div className={styles.form}>
           <Input.Root label="Имя и фамилия">
             <Input.Wrapper>
-              <Input.Field defaultValue="Анна Смирнова" autoComplete="name" />
+              <Input.Field defaultValue="Анна Смирнова" />
             </Input.Wrapper>
           </Input.Root>
           <Input.Root label="Должность">

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

@@ -60,6 +60,7 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Mod+Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
 | `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `children` | `ReactNode` | — | Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. |
 | `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
 | `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
@@ -226,6 +227,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - A copy `Button` under a read-only result → `Textarea.CopyButton` as a child of the root.
 - Other children than `Textarea.CopyButton` / `Textarea.Action` → the root renders the textarea itself; children are only the corner actions.
 - `formatting` on text that is shown as plain text → the reader sees `**` and `||`; turn it on only where the text is rendered with its Markdown.
+- Expecting the browser to offer saved addresses in a note → autofill is off unless you pass `autoComplete` (a token such as `street-address` opts in).
 
 ## Related
 - **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions, formatting tools), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [Button](../button/COMPONENT.md) and [Kbd](../kbd/COMPONENT.md) (formatting tools), Icon (`format.*`); `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Composer), [VisuallyHidden](../visually-hidden/COMPONENT.md)

package/dist/skill/ux.md

@@ -256,8 +256,25 @@ Which button starts each step and how the confirm behaves:
   person's own company, the last used currency. An empty required field the person always fills the
   same way is a missing default.
 - **The right control for the data:** `inputMode="numeric" | "decimal" | "tel" | "email"`,
-  `autoComplete` for personal data, `Datepicker` for a date, `Select` for a closed list. A free text
-  field for a closed set of values is a bug.
+  `Datepicker` for a date, `Select` for a closed list. A free text field for a closed set of values
+  is a bug.
+- **Autofill only where a person signs in:** `autoComplete` tokens go on sign-in and sign-up fields
+  (`email`, `current-password`, `new-password`, `one-time-code`) and on a new password; everywhere
+  else the kit keeps autofill off, so a saved login never drops over a search or a record field.
+- **Safari decides by words, not by attributes:** it ignores `autocomplete="off"` on a field it
+  takes for a login, and it takes a text field for one when its placeholder, label, `name` or `id`
+  speaks of a login: «username», «user», «login», «email», «e-mail», «логин», «почта», «имя
+  пользователя». The kit's opt-outs stop Chrome, Firefox and the password-manager extensions, not
+  Safari; on a field that is not a sign-in only the words do. So a search, a filter or a record
+  field never names itself with those words — it says what is searched in the domain's words:
+  - bad: a search `placeholder="Название или @username"`, `name="login"` on a filter, «Поиск по
+    email» → Safari offers the saved login over the table;
+  - good: `placeholder="Название или @ник"`, «Имя или контакт», «Клиент, телефон или ИНН»; no
+    `name` / `id` on a search at all.
+  A record's own e-mail field (a client's, an employee's) keeps its label «Почта» and
+  `type="email"`: Safari may offer a contact card there, which is right for e-mail. Never fight the
+  browser with tricks — a readonly-until-focus field, a hidden decoy, a made-up `autoComplete`
+  token: they break the field for assistive tech and stop working with the next Safari.
 - **Progressive disclosure:** the common 80% first; rare settings behind an `Accordion` item or a
   «Дополнительно» section; a long create flow in steps (`Stepper`).
 - **Group by meaning, order by use:** fields in the order a person has the information (company →

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "packageManager": "bun@1.3.13",
   "description": "React 19 UI kit for product interfaces: 79 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
   "bin": {

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

@@ -32,7 +32,6 @@ export default function ButtonInFormExample() {
             type="email"
             name="email"
             placeholder="name@company.ru"
-            autoComplete="email"
             onValueChange={() => setError(undefined)}
           />
         </Input.Wrapper>

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

@@ -180,11 +180,7 @@ export default function DrawerScreenExample() {
                       </Radio.Group>
                       <Input.Root label="Название" error={errors.name}>
                         <Input.Wrapper>
-                          <Input.Field
-                            name="name"
-                            placeholder="ООО «Ромашка»"
-                            autoComplete="organization"
-                          />
+                          <Input.Field name="name" placeholder="ООО «Ромашка»" />
                         </Input.Wrapper>
                       </Input.Root>
                       <div className={styles.pair}>

package/src/components/input/COMPONENT.md

@@ -96,6 +96,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
 | `aria-describedby` | `string` | — | Merged with the affix and hint/error ids from the root. |
 | `required` | `boolean` | — | Overrides the root's `required` for the native input. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "size" \| "id">` | — | `value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`… |
 
 ### Input.Icon
@@ -272,6 +273,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - `minStrength` uses native constraint validation: below the level the input's `validationMessage` is `labels.strengthTooWeak`, the form refuses to submit, and the message becomes the field's error (`aria-invalid`).
 - `Input.Icon` is decorative (`aria-hidden`). `Input.Affix` and `Input.InlineAffix` are `aria-hidden` in the reading order but describe the input (`aria-describedby`, before the hint): the unit is heard with the field, so the label never repeats it. An `aria-label` on the affix is said instead of its text («рублей» for `₽`).
 - `suggestions` make the input a `combobox` (`aria-autocomplete="list"`, `aria-expanded`, `aria-controls` on the open `listbox`, which the label names); the highlight is `aria-activedescendant`, so focus never leaves the field.
+- Autofill is off unless you pass `autoComplete`: without a token the input carries `autocomplete="off"` and the opt-outs of 1Password, LastPass, Bitwarden and Dashlane (`data-1p-ignore`, `data-lpignore`, `data-bwignore`, `data-form-type="other"`); a token passes through and drops them. With `suggestions` it stays off. Inside `LoginForm.Form` a field without a token is left to the browser.
 - A `Select` inside `Input.Wrapper` is the box's start segment: its trigger is named by the select root's `aria-label` and the picked value («Иконка: Звезда»).
 - `Input.ClearButton` is a real button named by `labels.clear`, with `aria-controls` on the input.
 - `Input.Action` and `Input.CopyButton` are buttons (or a link with `asChild`) named by their label, with a tooltip; copying announces `labels.copied` through a polite live region.
@@ -338,6 +340,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - A Select and an Input side by side for one value (an icon + a name) → the Select inside `Input.Wrapper`, named by its `aria-label`.
 - A text field with a hand-made time mask, or a Datepicker for a time of day → `Input.Field type="time"`.
 - Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
+- `autoComplete="email"` / `"name"` on a search, filter or record field → leave it out: autofill is off unless you pass `autoComplete`; tokens belong on sign-in and sign-up fields (`LoginForm.Form`) and on a new password (`new-password`).
 
 ## 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, the `valid` check), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)

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

@@ -40,7 +40,6 @@ export default function InputInFormExample() {
                 name="name"
                 onValueChange={() => edit("name")}
                 defaultValue="ООО «Северный ветер»"
-                autoComplete="organization"
               />
             </Input.Wrapper>
           </Input.Root>

package/src/components/input/examples/validation.tsx

@@ -28,7 +28,7 @@ export default function InputValidationExample() {
     <>
       <Input.Root label="Название организации" required hint="Как в учредительных документах">
         <Input.Wrapper>
-          <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
+          <Input.Field defaultValue="ООО «Северный ветер»" />
         </Input.Wrapper>
       </Input.Root>
       <Input.Root

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

@@ -99,7 +99,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
-`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
+`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props. The one place autofill stays on: a kit field inside it without `autoComplete` is left to the browser and the password managers.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -184,7 +184,7 @@ Root carries `data-size`, `data-align` and `data-flat`.
 - 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.
+- Every field names its purpose with `autoComplete` — `email` or `username`, `current-password` to sign in, `new-password` to sign up, reset or accept an invite, `one-time-code` for a code (`DigitInput` sets it) — so password managers fill and save the right field. Kit fields elsewhere keep autofill off.
 - Field errors come from the fields (`aria-invalid`, described by the error). A refused sign-in has no Banner: the e-mail takes `invalid` and the `error` of the password says why, announced by the support row of the field.
 
 ### Labels

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

@@ -16,12 +16,16 @@ export default function LoginFormSizesExample() {
             <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
               <Input.Root label="Email">
                 <Input.Wrapper>
-                  <Input.Field type="email" placeholder="name@company.ru" />
+                  <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
                 </Input.Wrapper>
               </Input.Root>
               <Input.Root label="Пароль">
                 <Input.Wrapper>
-                  <Input.Field type="password" placeholder="********" />
+                  <Input.Field
+                    type="password"
+                    autoComplete="current-password"
+                    placeholder="********"
+                  />
                 </Input.Wrapper>
               </Input.Root>
               <Button.Root type="submit" fullWidth>

package/src/components/tabs/examples/orientation.tsx

@@ -38,7 +38,7 @@ export default function TabsOrientationExample() {
         <div className={styles.form}>
           <Input.Root label="Имя и фамилия">
             <Input.Wrapper>
-              <Input.Field defaultValue="Анна Смирнова" autoComplete="name" />
+              <Input.Field defaultValue="Анна Смирнова" />
             </Input.Wrapper>
           </Input.Root>
           <Input.Root label="Должность">

package/src/components/textarea/COMPONENT.md

@@ -60,6 +60,7 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Mod+Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
 | `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `children` | `ReactNode` | — | Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. |
 | `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
 | `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
@@ -226,6 +227,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - A copy `Button` under a read-only result → `Textarea.CopyButton` as a child of the root.
 - Other children than `Textarea.CopyButton` / `Textarea.Action` → the root renders the textarea itself; children are only the corner actions.
 - `formatting` on text that is shown as plain text → the reader sees `**` and `||`; turn it on only where the text is rendered with its Markdown.
+- Expecting the browser to offer saved addresses in a note → autofill is off unless you pass `autoComplete` (a token such as `street-address` opts in).
 
 ## Related
 - **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions, formatting tools), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [Button](../button/COMPONENT.md) and [Kbd](../kbd/COMPONENT.md) (formatting tools), Icon (`format.*`); `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Composer), [VisuallyHidden](../visually-hidden/COMPONENT.md)