@bitforgehq/ui 0.3.0

package/ai/components/input.md

@@ -0,0 +1,455 @@
+# bf-input
+
+Single-line text field with label, help and error text, icon slots and Signal Forms binding
+
+`BfInputComponent` from `@bitforgehq/ui` · Forms · since 0.1.0
+
+## Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Search } from 'lucide';
+
+/**
+ * The bf-input overview.
+ *
+ * Live demo of `bf-input`: a bound default field with an echo, an icon-start search field, an error state and a readonly field; then the sm, md and lg sizes in a row.
+ */
+@Component({
+  selector: 'app-example-input-overview',
+  imports: [BfInputComponent, BfIconComponent],
+  template: `
+    <div class="flex flex-col gap-3">
+      <bf-input label="Project name" placeholder="Atlas rebrand" [(value)]="projectName" />
+      <p data-status aria-live="polite" class="text-caption text-text-muted">
+        {{ projectName() ? 'Project: ' + projectName() : 'Type a project name.' }}
+      </p>
+      <bf-input label="Search" type="search" [iconStart]="true">
+        <bf-icon bfSlot="icon-start" [icon]="search" />
+      </bf-input>
+      <bf-input label="Email" errorMessage="Enter a valid email address" value="lena@studio" />
+      <bf-input label="Owner" value="Lena Moser" [readonly]="true" />
+      <div data-sizes class="flex flex-wrap items-center gap-3">
+        <bf-input size="sm" ariaLabel="Small field" placeholder="sm · 32 px" class="w-40" />
+        <bf-input ariaLabel="Medium field" placeholder="md · 40 px" class="w-40" />
+        <bf-input size="lg" ariaLabel="Large field" placeholder="lg · 48 px" class="w-40" />
+      </div>
+    </div>
+  `,
+})
+export class InputOverviewExampleComponent {
+  readonly search = Search;
+  readonly projectName = signal('');
+}
+```
+
+## Overview
+
+Single-line text field with label, help and error text, icon slots and Signal Forms binding.
+Bind `[(value)]` directly or `[formField]` from a signal form; the field state (touched,
+invalid, errors, disabled, readonly, required) flows in through the matching inputs.
+
+The text field for one line of input: email, password, search, numbers. It renders its own label, helper and error text through `bf-field`, so a form is a list of `bf-input`s with no extra markup.
+
+## When to use
+
+Use `bf-input` for one line of text: a name, an email, a password, a search term, a date. Use [bf-textarea](https://bitforge-ui.web.app/components/textarea) instead for text that runs over several lines, [bf-number-input](https://bitforge-ui.web.app/components/number-input) for a value bound as a `number`, and [bf-select](https://bitforge-ui.web.app/components/select) when the answer is one of a known list.
+
+## Basic usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+
+/** A labelled text field bound to a signal. */
+@Component({
+  selector: 'app-example-input-basic',
+  imports: [BfInputComponent],
+  template: `
+    <div class="flex flex-col gap-2">
+      <bf-input label="Project name" placeholder="Atlas rebrand" [(value)]="name" />
+      <p class="text-caption text-text-muted">Name: {{ name() || '(empty)' }}</p>
+    </div>
+  `,
+})
+export class InputBasicExampleComponent {
+  protected readonly name = signal('');
+}
+```
+
+`(changed)` emits the new text right after each user edit (a keystroke or a paste), the moment
+`value` changes; a programmatic write to `value` does not emit.
+
+## With Signal Forms
+
+Bind the field instead of the value. Touched, invalid, errors, disabled, readonly and required flow in automatically; the first error shows once the user leaves the field. A validator's `message` becomes the text; one without a message shows its kind's default text (see Validation). `[formRoot]` turns off the browser's validation bubbles and runs the form's `submission` on submit. The [Forms and validation guide](https://bitforge-ui.web.app/forms) has a complete, compiled example.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormField, FormRoot, email, form, required } from '@angular/forms/signals';
+import { BfButtonComponent, BfInputComponent } from '@bitforgehq/ui';
+
+/**
+ * An email field on Signal Forms.
+ *
+ * `[formField]` carries touched, invalid, errors, disabled, readonly and required; the
+ * validators' messages become the error text. `[formRoot]` runs the submission on submit.
+ */
+@Component({
+  selector: 'app-example-input-signal-forms',
+  imports: [FormField, FormRoot, BfButtonComponent, BfInputComponent],
+  template: `
+    <form [formRoot]="signup" class="flex flex-col items-start gap-3">
+      <bf-input label="Email" type="email" class="self-stretch" [formField]="signup.email" />
+      <bf-button type="submit">Sign up</bf-button>
+    </form>
+  `,
+})
+export class InputSignalFormsExampleComponent {
+  private readonly model = signal({ email: '' });
+  protected readonly signup = form(
+    this.model,
+    (p) => {
+      required(p.email, { message: 'Enter your email' });
+      email(p.email, { message: 'Enter a valid email address' });
+    },
+    { submission: { action: () => Promise.resolve(undefined) } },
+  );
+}
+```
+
+## Icons
+
+Set `iconStart` / `iconEnd` to reserve the space, then project the icon into the slot.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Search } from 'lucide';
+
+/** A search field with an icon in its icon-start slot. */
+@Component({
+  selector: 'app-example-input-icons',
+  imports: [BfInputComponent, BfIconComponent],
+  template: `
+    <bf-input label="Search" type="search" [iconStart]="true" [(value)]="query">
+      <bf-icon bfSlot="icon-start" [icon]="search" />
+    </bf-input>
+  `,
+})
+export class InputIconsExampleComponent {
+  protected readonly search = Search;
+  protected readonly query = signal('');
+}
+```
+
+## Search fields and other unlabelled inputs
+
+Skip the visible `label` when the field itself makes its purpose clear (a toolbar search box) and
+give it `ariaLabel` instead so assistive tech still gets a name; help and error wiring keep working
+the same way. When a visible heading already names the field, point `ariaLabelledby` at its id.
+A field without a visible label needs one of the two.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+
+/**
+ * Fields without a visible label.
+ *
+ * A toolbar search named by `ariaLabel`, and a budget field named by the heading it points at.
+ */
+@Component({
+  selector: 'app-example-input-unlabelled',
+  imports: [BfInputComponent],
+  template: `
+    <div class="flex flex-col gap-3">
+      <bf-input type="search" ariaLabel="Search projects" [(value)]="query" />
+      <h3 id="input-budget-heading" class="text-heading">Budget</h3>
+      <bf-input ariaLabelledby="input-budget-heading" [(value)]="budget" />
+    </div>
+  `,
+})
+export class InputUnlabelledExampleComponent {
+  protected readonly query = signal('');
+  protected readonly budget = signal('');
+}
+```
+
+## Native constraints and keyboards
+
+`maxLength`, `minLength`, `min`, `max`, `step` and `pattern` reach the native `<input>`, so the
+browser enforces length limits and date pickers respect the range. Signal Forms binds them from
+its rules (`maxLength(p.code, 20)` renders `maxlength="20"`; exactly one `pattern()` renders the
+native `pattern` when its flags are empty, `u` or `v`; a pattern with other flags such as `i`, or
+several patterns, is left to the form, because HTML compiles the attribute without them).
+`inputMode`, `enterKeyHint`, `spellcheck` and `autocapitalize` pick the right
+phone keyboard (`BfInputInputMode`, `BfInputEnterKeyHint` and `BfInputAutocapitalize`: a
+`BfInputMode`, `BfEnterKeyHint` or `BfAutocapitalize` keyword, or `''`, the default, which leaves
+the attribute off). The `date`, `time`, `datetime-local` and `month` types open the platform's own
+picker.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+
+/**
+ * Native constraints and keyboard hints.
+ *
+ * A date range, a six-digit code with the numeric keyboard, and a city field that capitalises
+ * words and skips spell checking.
+ */
+@Component({
+  selector: 'app-example-input-native',
+  imports: [BfInputComponent],
+  template: `
+    <div class="flex flex-col gap-3">
+      <bf-input label="Start" type="date" min="2026-01-01" max="2026-12-31" [(value)]="start" />
+      <bf-input
+        label="Code"
+        [maxLength]="6"
+        inputMode="numeric"
+        enterKeyHint="next"
+        [(value)]="code"
+      />
+      <bf-input label="City" autocapitalize="words" [spellcheck]="false" [(value)]="city" />
+    </div>
+  `,
+})
+export class InputNativeExampleComponent {
+  protected readonly start = signal('');
+  protected readonly code = signal('');
+  protected readonly city = signal('');
+}
+```
+
+## Sizes and states
+
+One `BfSize` scale for every field and control: `sm` 32 px, `md` 40 px (default), `lg` 48 px, so an input lines up with the buttons, selects, chips and segmented controls of the same step. Unset, `size` follows `provideBfDefaults()`'s `fieldSize`, `md` by default; a Capacitor app sets `provideBfDefaults({ fieldSize: 'lg' })` once for the 48 px phone look, and a dense sub-tree (a filter bar, a table) can set `{ size: 'sm' }` in a component's `providers`. Fields get no touch extension: `sm`/`md` fields stay 32/40 px under a coarse pointer, so touch apps use `provideBfDefaults({ fieldSize: 'lg' })`. Icon insets and padding use logical properties, so `icon-start` sits at the inline start under `dir="rtl"` too. `disabled`, `readonly` and `errorMessage` render the design's states.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfInputComponent } from '@bitforgehq/ui';
+
+/**
+ * Field sizes and states.
+ *
+ * The sm, md and lg steps, a read-only field and one with an explicit error message.
+ */
+@Component({
+  selector: 'app-example-input-sizes',
+  imports: [BfInputComponent],
+  template: `
+    <div class="flex flex-col gap-3">
+      <bf-input size="sm" ariaLabel="Filter" [(value)]="filter" />
+      <bf-input label="Project name" [(value)]="name" />
+      <bf-input size="lg" label="Title" [(value)]="title" />
+      <bf-input label="Owner" value="Lena Moser" [readonly]="true" />
+      <bf-input label="Email" errorMessage="Enter a valid email address" />
+    </div>
+  `,
+})
+export class InputSizesExampleComponent {
+  protected readonly filter = signal('');
+  protected readonly name = signal('Atlas rebrand');
+  protected readonly title = signal('');
+}
+```
+
+## Validation
+
+Once the control is touched it shows the first error as text: the error's own `message`, else the default for its kind from `provideBfLabels()`'s `validation` labels (`required` "Fill in this field", `email`, `pattern`, `parse`, `min(n)`, `max(n)`, `minLength(n)` "Use at least n characters", `maxLength(n)`, `minDate(d)`, `maxDate(d)`, and `fallback` "Check this value" for any other kind), so it never turns red without text. Reactive Forms `Validators.*` errors carry no message and get the same defaults (`minlength`/`maxlength` read their limit from the error's `context`). An explicit `errorMessage` wins over both and shows at once, e.g. for a server error.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormField, FormRoot, email, form, required } from '@angular/forms/signals';
+import { BfButtonComponent, BfInputComponent } from '@bitforgehq/ui';
+
+/**
+ * Default and explicit error text.
+ *
+ * The first field's validators carry no message, so a submit shows the defaults; the second
+ * field's `errorMessage` (a server error) shows at once.
+ */
+@Component({
+  selector: 'app-example-input-validation',
+  imports: [FormField, FormRoot, BfButtonComponent, BfInputComponent],
+  template: `
+    <form [formRoot]="signup" class="flex flex-col items-start gap-3">
+      <bf-input label="Email" type="email" class="self-stretch" [formField]="signup.email" />
+      <bf-input
+        label="Backup email"
+        class="self-stretch"
+        errorMessage="This address is already registered"
+      />
+      <bf-button type="submit">Sign up</bf-button>
+    </form>
+  `,
+})
+export class InputValidationExampleComponent {
+  private readonly model = signal({ email: '' });
+  protected readonly signup = form(
+    this.model,
+    (p) => {
+      required(p.email);
+      email(p.email);
+    },
+    { submission: { action: () => Promise.resolve(undefined) } },
+  );
+}
+```
+
+## Desktop
+
+The field has no hover state; the text cursor shows over it. The `primary` border and the focus ring show on every focus, by mouse or keyboard, because a focused field takes typing. Fields default to `md` (40 px); `provideBfDefaults({ fieldSize: 'sm' })`, or `{ size: 'sm' }` in a component's `providers`, gives 32 px fields for a dense filter bar or table ([density guide](https://bitforge-ui.web.app/density)).
+
+## Theming
+
+- Border: `border-strong` (the control boundary, ≥ 3:1), switching to `danger-border` on error; focus: `primary` border with a `ring` ring.
+- Disabled: `surface-sunken` border, `surface-muted` background, `text-disabled` text. Read-only: `surface-muted` background. Placeholder: `text-muted` (≥ 4.5:1). Icon slots: `text-subtle`.
+- Label, help and error text come from the `bf-field` wrapper (see its Theming section).
+
+## Accessibility
+
+Native `<input>`, with `type` reflecting the `type` input so mobile keyboards match. `bf-field` renders the `<label for>`; the input itself wires `aria-describedby` to the help paragraph and the error paragraph under it (both while shown, help first) and, while it is invalid, `aria-errormessage` to the error paragraph; `aria-invalid` is set once the field is touched and invalid (an explicit `errorMessage` shows immediately). `required` reflects the native attribute as well as the label's required marker. `aria-label` and `aria-labelledby` carry `ariaLabel` and `ariaLabelledby` only while there is no visible `label`, so a `label` and an `ariaLabel` given together never fight over the accessible name — the visible label always wins and the other two are ignored. A field without a visible label needs `ariaLabel` or `ariaLabelledby`. `readonly` uses the native attribute: the value can be selected and copied, the input stays in the tab order, and assistive tech announces it as read-only. `focus()` focuses the native input; Signal Forms calls it from `focusBoundControl()`, so "focus the first invalid field" works.
+
+### Keyboard
+
+The input is a native `<input>`: typing, selection and the date and time pickers are the browser's own.
+
+| Key                                              | Action                                                                                                    |
+| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | Moves focus to and from the field; a `readonly` field stays in the tab order, a `disabled` one is skipped |
+| <kbd>Enter</kbd>                                 | Inside a `<form>` with a submit button, submits the form (the browser's implicit submission)              |
+
+## Inputs
+
+| Name             | Type                                                                                                                                           | Default     | Description                                                                                                                                                             |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`           | `BfInputType` (`'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'date' \| 'time' \| 'datetime-local' \| 'month'`) | `'text'`    | Native input type; the value stays a string. For numbers use `bf-number-input`, which binds `number \| null`.                                                           |
+| `size`           | `BfSize \| undefined` (`'sm' \| 'md' \| 'lg' \| undefined`)                                                                                    | `undefined` | Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`fieldSize`, `md` by default).                                                                |
+| `label`          | `string`                                                                                                                                       | `''`        | Visible label above the control.                                                                                                                                        |
+| `ariaLabel`      | `string`                                                                                                                                       | `''`        | Accessible name when no visible label is rendered (e.g. a search field). Ignored when `label` is set.                                                                   |
+| `ariaLabelledby` | `string`                                                                                                                                       | `''`        | Id(s) of the element(s) that name the field when no visible label is rendered. Ignored when `label` is set.                                                             |
+| `placeholder`    | `string`                                                                                                                                       | `''`        | Example value shown while empty.                                                                                                                                        |
+| `helpText`       | `string`                                                                                                                                       | `''`        | Helper text under the control.                                                                                                                                          |
+| `errorMessage`   | `string`                                                                                                                                       | `''`        | Explicit error text; takes precedence over Signal Forms errors.                                                                                                         |
+| `disabled`       | `boolean`                                                                                                                                      | `false`     | Disables the control. Set by `[formField]`; do not bind it yourself.                                                                                                    |
+| `readonly`       | `boolean`                                                                                                                                      | `false`     | Makes the control read-only. Set by `[formField]`; do not bind it yourself.                                                                                             |
+| `required`       | `boolean`                                                                                                                                      | `false`     | Marks the control required (label marker and native attribute). Set by `[formField]`; do not bind it yourself.                                                          |
+| `invalid`        | `boolean`                                                                                                                                      | `false`     | Field validity from Signal Forms. Set by `[formField]`; do not bind it yourself.                                                                                        |
+| `touched`        | `boolean`                                                                                                                                      | `false`     | Whether the user has left the field; errors show only once touched. Set by `[formField]`; do not bind it yourself.                                                      |
+| `errors`         | `readonly ValidationError.WithOptionalFieldTree[]`                                                                                             | `[]`        | Validation errors from Signal Forms; the first message is shown once touched. Set by `[formField]`; do not bind it yourself.                                            |
+| `name`           | `string`                                                                                                                                       | `''`        | Native name attribute. Set by `[formField]`; do not bind it yourself.                                                                                                   |
+| `id`             | `string`                                                                                                                                       | `generated` | Control id; generated when not set.                                                                                                                                     |
+| `iconStart`      | `boolean`                                                                                                                                      | `false`     | Reserve space for an icon in the `icon-start` slot.                                                                                                                     |
+| `iconEnd`        | `boolean`                                                                                                                                      | `false`     | Reserve space for an icon in the `icon-end` slot.                                                                                                                       |
+| `autocomplete`   | `string`                                                                                                                                       | `''`        | Native autocomplete hint.                                                                                                                                               |
+| `maxLength`      | `number \| undefined`                                                                                                                          | `undefined` | Maximum number of characters (native `maxlength`); bound by Signal Forms `maxLength()`. Set by `[formField]`; do not bind it yourself.                                  |
+| `minLength`      | `number \| undefined`                                                                                                                          | `undefined` | Minimum number of characters (native `minlength`); bound by Signal Forms `minLength()`. Set by `[formField]`; do not bind it yourself.                                  |
+| `min`            | `string \| undefined`                                                                                                                          | `undefined` | Lowest value (native `min`), e.g. `2026-01-01` for a date or `0` for a number. Set by `[formField]`; do not bind it yourself.                                           |
+| `max`            | `string \| undefined`                                                                                                                          | `undefined` | Highest value (native `max`), e.g. `2026-12-31` for a date or `100` for a number. Set by `[formField]`; do not bind it yourself.                                        |
+| `step`           | `string \| number \| undefined`                                                                                                                | `undefined` | Step between valid values (native `step`), e.g. `0.5` or `any`.                                                                                                         |
+| `pattern`        | `readonly RegExp[]`                                                                                                                            | `[]`        | Patterns from Signal Forms `pattern()`; exactly one, with no flags or only `u`/`v`, is rendered as the native `pattern`. Set by `[formField]`; do not bind it yourself. |
+| `inputMode`      | `BfInputInputMode` (`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' \| ''`)                               | `''`        | Virtual keyboard to show (native `inputmode`).                                                                                                                          |
+| `enterKeyHint`   | `BfInputEnterKeyHint` (`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send' \| ''`)                                        | `''`        | Label of the virtual keyboard's Enter key (native `enterkeyhint`).                                                                                                      |
+| `spellcheck`     | `boolean \| undefined`                                                                                                                         | `undefined` | Spell checking on or off (native `spellcheck`); the browser decides while unset.                                                                                        |
+| `autocapitalize` | `BfInputAutocapitalize` (`'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters' \| ''`)                                            | `''`        | Capitalisation of typed text on virtual keyboards (native `autocapitalize`).                                                                                            |
+| `value`          | `string`                                                                                                                                       | `''`        | The text value; two-way bindable and bound by `[formField]`. Two-way: `[(value)]`.                                                                                      |
+
+## Outputs
+
+| Name      | Payload      | Description                                                                                             |
+| --------- | ------------ | ------------------------------------------------------------------------------------------------------- |
+| `changed` | `string`     | Emitted with the new text right after the user changes it (each keystroke or paste).                    |
+| `focused` | `FocusEvent` | Emitted when the control gains focus.                                                                   |
+| `blurred` | `FocusEvent` | Emitted when the control loses focus.                                                                   |
+| `touch`   | `void`       | Emitted on blur so Signal Forms marks the field touched. Set by `[formField]`; do not bind it yourself. |
+
+## Slots
+
+- `icon-start`: An icon inside the field, before the text.
+- `icon-end`: An icon inside the field, after the text.
+
+## Methods
+
+### `focus(options?: FocusOptions): void`
+
+Focuses the native input; Signal Forms calls it from `focusBoundControl()`.
+
+| Parameter  | Type           | Description                                                           |
+| ---------- | -------------- | --------------------------------------------------------------------- |
+| `options?` | `FocusOptions` | Passed on to the native `focus()`, such as `{ preventScroll: true }`. |
+
+## Notes
+
+### Do
+
+- Always set `label`, or `ariaLabel` / `ariaLabelledby` when the field shows no visible label (e.g. a search box).
+- Use the right `type` so mobile keyboards match (email, tel, url); for a number bound as a `number`, use `bf-number-input`.
+- Let Signal Forms drive validation; use `errorMessage` only for server-side errors.
+
+### Don't
+
+- Don't use `placeholder` as the label.
+- Don't bind both `[(value)]` and `[formField]`.
+
+## Migration notes
+
+### 0.3.0
+
+New `changed` output: the new text right after each user edit (not for a programmatic write), so
+every value control has one `changed`. New exported `BfInputInputMode` (`BfInputMode | ''`),
+`BfInputEnterKeyHint` (`BfEnterKeyHint | ''`) and `BfInputAutocapitalize`
+(`BfAutocapitalize | ''`), the types of `inputMode`, `enterKeyHint` and `autocapitalize` (were
+the same unions written inline; `''`, the default, leaves the attribute off). `BfInputMode`,
+`BfEnterKeyHint` and `BfAutocapitalize` keep their 0.2.0 members (their `@since` now says 0.2.0).
+
+**Breaking:** the default `size` is `md` (40 px) instead of `lg` (48 px); `size` is a `BfSize`
+(`sm` 32, `md` 40, `lg` 48 px — `sm` is new) and, unset, follows `provideBfDefaults()`'s
+`fieldSize`. See Migration 2. Icon insets and padding are logical (`start-*`/`end-*`, `ps-*`/`pe-*`),
+so `icon-start` and `icon-end` sit at the inline start and end under `dir="rtl"`.
+
+**Behaviour:** an error without a message shows its kind's default text (was a red border only):
+once touched, the field shows the first error's own `message`, else `provideBfLabels()`'s
+`validation` text for its kind (Signal Forms and Reactive interop kinds), else
+`validation.fallback`. `errorMessage` still wins. See Migration 1.
+
+JSDoc of `input.component.ts` for the API reference: `@summary`/`@since` on the exported symbols;
+`@slot` docs for `icon-start`, `icon-end`; `@param` docs; template handlers and framework hooks
+marked `@internal`, so the reference leaves them out. No behaviour change.
+
+**Behaviour:** the help text stays while an error shows, with the error under it (F-020):
+`aria-describedby` lists both (`"<id>-help <id>-error"`), and `aria-errormessage` points at the
+error paragraph while `aria-invalid="true"`. See Migration 25.
+
+### 0.2.0
+
+The rest border is `border-strong` (was `border`, 1.32:1) and the placeholder `text-muted` (was
+`text-subtle`, 2.73:1); the icon slots stay `text-subtle`.
+
+Changed: the border narrows to 1 px (was 1.5 px); contrast stays ≥ 3:1.
+
+Changed: the focus ring narrows to 2 px (was 4 px); it still shows on mouse focus, not just
+keyboard focus.
+
+Added: `ariaLabel` input (mirrors `bf-toggle`) sets `aria-label` on the native input for a field
+with no visible `label` (e.g. a search box); ignored while `label` is set, so the visible label
+stays the sole accessible name.
+
+Added: `maxLength`, `minLength`, `min`, `max`, `step`, `pattern` (exactly one pattern with no flags,
+`u` or `v` renders the native attribute; other flags such as `i` cannot be expressed in HTML, so the
+form alone validates them), `inputMode`, `enterKeyHint`, `spellcheck` and `autocapitalize` inputs,
+each rendered on the native `<input>` only when set; Signal Forms binds the constraint rules to them
+(`maxLength(p.code, 20)` renders `maxlength="20"`). New exported types `BfInputMode`,
+`BfEnterKeyHint` and `BfAutocapitalize`. `BfInputType` adds `date`, `time`, `datetime-local` and
+`month`, which open the native picker. `ariaLabelledby` sets `aria-labelledby` while there is no
+visible `label`. `focus(options?)` focuses the native control, so Signal Forms'
+`focusBoundControl()` and "focus the first invalid field" on submit now work (they were no-ops).
+
+### 0.1.0
+
+Field sizes renamed: `sm`/`md` (40/48 px) is now `md`/`lg` (40/48 px), default stays 48 px but the default token changed to `lg`. The host no longer reflects a static `id` attribute onto `<bf-input>`; the id lands only on the native `<input>`.