npm - @cahyo-dimas/freeday - Versions diffs - 2.0.0 → 2.2.0 - Mend

@cahyo-dimas/freeday 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/CHANGELOG.md +155 -0
package/COMPONENTS.md +298 -2
package/README.id.md +1 -1
package/README.md +1 -1
package/adapters/blazor/FdyAutocomplete.razor +4 -1
package/adapters/blazor/FdyAutocomplete.razor.cs +26 -0
package/adapters/blazor/FdyCascade.razor +6 -1
package/adapters/blazor/FdyCascade.razor.cs +24 -0
package/adapters/blazor/FdyCombo.razor +1 -0
package/adapters/blazor/FdyCombo.razor.cs +13 -0
package/adapters/blazor/FdyDatepicker.razor +15 -1
package/adapters/blazor/FdyDatepicker.razor.cs +46 -0
package/adapters/core/cfl-value.d.ts +11 -0
package/adapters/core/cfl-value.js +31 -0
package/adapters/react/components/FdyDrawer.tsx +3 -1
package/adapters/react/components/FdyModal.tsx +3 -1
package/adapters/react/index.d.ts +3 -0
package/adapters/react/index.js +1 -0
package/adapters/vue/components/FdyDrawer.vue +4 -1
package/adapters/vue/components/FdyModal.vue +4 -1
package/adapters/vue/index.d.ts +3 -0
package/adapters/vue/index.js +1 -0
package/dist/freeday-autocomplete.js +17 -1
package/dist/freeday-carousel.js +5 -4
package/dist/freeday-cascade.js +58 -7
package/dist/freeday-cfl.js +5 -4
package/dist/freeday-chart.js +33 -3
package/dist/freeday-datepicker.js +109 -17
package/dist/freeday-form.js +5 -4
package/dist/freeday-mask.js +5 -4
package/dist/freeday-select.js +18 -1
package/dist/freeday-stepper.js +5 -4
package/dist/freeday-table.js +9 -6
package/dist/freeday-timepicker.js +19 -1
package/dist/freeday-toast.js +5 -4
package/dist/freeday-upload.js +5 -4
package/dist/freeday.js +298 -64
package/docs/agent-onboarding.md +9 -6
package/docs/getting-started.md +15 -6
package/docs/integrations.md +2 -2
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,161 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
+**Kebijakan tipe (sejak 2.1.0).** Tipe publik yang **melebar** dihitung breaking meski runtime tak
+berubah, karena yang gagal adalah build konsumen: `vue-tsc`/`tsc` menolak handler yang kemarin
+benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)` — nama prop, tipe
+lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
+sisi kit.
+## [2.2.0] - 2026-08-26
+### Added
+- **The raw path can disable, lock and invalidate a picker** (`NEXT-UP.md` #12). `datepicker.css`
+  and `cascade.css` have styled `:disabled`, `[aria-readonly="true"]` and `[aria-invalid="true"]`
+  since they were written, and the enhancers never set any of them — so the states existed only in
+  the stacks that re-implement the control natively (Vue, React), and a **Blazor** app, whose
+  picker *is* the enhancer, could not disable a field at all. Now `data-disabled` /
+  `data-readonly` / `data-invalid` on the seed, plus `data-id` and `data-describedby` so the
+  trigger the enhancer builds can be labelled and described by a form's own markup.
+- **`setState` on four enhancers** — `FreedayDatepicker`, `FreedayCascade`, `FreedayCombo`,
+  `FreedayAutocomplete`: `setState(root, { disabled, readonly, invalid })`. Not decoration: every
+  Blazor wrapper stops rendering once hydrated (`ShouldRender => !Hydrated`), so a parameter that
+  is only *rendered* goes quiet the moment a real form toggles it. The wrappers push through this
+  instead.
+- **The Blazor pickers reach parity** with their Vue and React twins. `FdyDatepicker` goes from 6
+  parameters to 20 (the three states, `Id`, `Describedby`, and the nine calendar navigation
+  labels), `FdyAutocomplete` from 6 to 12, `FdyCascade` from 8 to 13, and `FdyCombo` finally has
+  `Describedby`. Four exemptions remain, each about the platform rather than effort, and each
+  named in `COMPONENTS.md`: `locale` (the enhancer formats through `Intl` from `<html lang>`),
+  `clearable`/`clearLabel` (this path builds no clear button), `ariaLabelledby` (the built trigger
+  is named by `Label`).
+- **`closeLabel` on `FdyModal` and `FdyDrawer`** in Vue and React. Blazor has had `CloseLabel`
+  since it shipped; the other two hard-coded `aria-label="Close"`, so the gap ran in both
+  directions and this is the half nobody had reported yet.
+- **The datepicker's ten labels are overridable**, as `data-fdy-text-prev-month`,
+  `-next-month`, `-prev-year`, `-next-year`, `-prev-years`, `-next-years`, `-choose-month`,
+  `-choose-year`, `-back-to-months`. Month and weekday NAMES still come from `Intl` via the page's
+  `lang`, which is the better hatch; these are the buttons around them.
+### Fixed
+- **A chart series with no label read `Seri 1`.** Indonesian, in a release train whose 2.0.0
+  exists precisely to stop the enhancers mixing languages. It is `Series {n}` now, and
+  overridable. The donut's centre caption (`Total`) was hard-coded in the same file and is
+  overridable too; it is also built as an element rather than assigned through `innerHTML`, since
+  an author-supplied string is not markup.
+- **The table's number-range filter offered `Min` and `Maks`.** Same leftover, same fix:
+  `filterMin` / `filterMax` in the strings table, English by default.
+- **The cascade's own `Select` / `Select…` defaults and the timepicker's `Choose a time`** were
+  literals no host could reach. Both tables now carry them.
+- **A `readonly` autocomplete opened its suggestion list.** The input carries `readonly` natively
+  and the enhancer never read it, so the list dropped over a field nobody could edit.
+### Changed
+- **The hard-coded-string guard (#016) is inverted.** It used to find the line that writes to the
+  DOM and read the literals on it, which cannot see a string passed to a helper —
+  `navButton('‹', 'Previous month', fn)` writes its label inside `navButton`, where the value is a
+  variable. Ten datepicker labels, the timepicker's, the cascade's two, the table's two and the
+  chart's `Seri 1` all hid there, some of them for the whole life of the file. It now reads every
+  literal in every enhancer and asks the opposite question — is this prose, and is it in the
+  `TEXT` table — dropping non-prose by shape (selectors, CSS custom properties, kebab keys,
+  camelCase identifiers, URLs, locale tags) and one short vocabulary of DOM tokens. Verified by
+  reintroducing both blind spots and watching it fail.
+### Added: guards
+- `test/blazor/FdyPickerStateTests.cs`: 7 bUnit tests covering what `dotnet build` cannot see —
+  each parameter reaching the markup the enhancer reads, an absent one leaving no empty attribute
+  behind, and a state change **after** the first render arriving through interop.
+- `browser/picker-states.mjs`: 7 tests in real Chrome with real mouse gestures — a disabled picker
+  that will not open, a readonly one that keeps focus and still refuses, both `aria-invalid` and
+  the `--error` class, `setState` unlocking a picker, and a nav label overridden per element.
+- `test/docs.test.mjs`: the Blazor picker parity guard, Vue's prop surface against the four
+  wrappers, with the four exemptions written out with their reasons rather than a bare list.
+### Notes on the shape of the fix
+- The regression this work caused, and what caught it: naming the new flag `isDisabled` shadowed
+  an **existing** `isDisabled(date)` in the datepicker that decides whether a day falls outside
+  `min`/`max`, so the day grid threw on every render — while the panel still opened and only its
+  cells went missing. Nothing in the node suite noticed; `browser/vanilla.mjs`, which clicks
+  through the calendar in a real browser, failed immediately. The flags are named `state*` now,
+  with the collision written above them.
+## [2.1.0] - 2026-08-25
+### Added
+- **`singleRow()`, exported from `@cahyo-dimas/freeday/vue` and `/react`** (#045). `FdyCfl` emits
+  `Row | Row[] | null` whatever its props are: the array is reachable only under `multiple`, the
+  null only under `clearable`, and the type cannot say which. So every single-select screen wrote
+  its own narrowing, and each one differently — a cast (which hides the day somebody adds
+  `clearable`), a silent ignore, or a throw. One implementation now lives in
+  `adapters/core/cfl-value.js` and both adapters re-export it: it returns `Row | null`, and
+  **throws** a `TypeError` on an array instead of keeping its first row, because quietly dropping
+  the rest is how a `multiple` added later goes unnoticed. Blazor never needed it — multi-select
+  there is a separate `Values` / `ValuesChanged` pair.
+  ```ts
+  import { singleRow } from '@cahyo-dimas/freeday/vue'; // or '@cahyo-dimas/freeday/react'
+  // (value: CflRow | CflRow[] | null) => CflRow | null
+  const onUpdate = (value: CflRow | CflRow[] | null): void => { picked.value = singleRow(value); };
+  ```
+### Changed: BREAKING (types)
+- **A retroactive entry for 1.29.0 and 1.42.0** (#045) — nothing changed in this release; this is
+  the record those two are missing. Both widened `FdyCfl`'s emitted type — `Row` → `Row | null`
+  (1.29.0, with `clearable`) → `Row | Row[] | null` (1.42.0, with `multiple`) — and both shipped
+  under **Added**, which is honest from the kit's side and useless from the consumer's: the
+  combined effect is `vue-tsc` failing in a handler nobody touched. An app upgrading from before
+  1.29.0 meets both at once, which is exactly how it was reported. Migration is `singleRow()`
+  above. The policy that should stop a third instance is at the top of this file.
+### Added: guards
+- **The typed column contract is now pinned in both directions** (#040): `test/docs.test.mjs`
+  asserts the field list documented in `COMPONENTS.md` matches `FdyTableColumn` in
+  `adapters/core/table-model.d.ts` — a field in the type but not the docs fails, and so does a
+  field in the docs that the type does not have. Verified by mutation (drop `labelHidden` from the
+  table → red; invent a `sticky` row → red), since a guard nobody has watched fail is only a
+  green tick.
+- `test/cfl-value.test.mjs`: three tests for `singleRow` (row passes through, `null`/`undefined`
+  become null, an array throws).
+- **Every typed wrapper's props are pinned to their documentation** (`NEXT-UP.md` #11). One guard
+  reads all twelve `### Props — <FdyX>` tables and compares them with the Vue and React
+  declarations: a prop missing from a table fails, a documented prop neither adapter declares
+  fails, and a wrapper exported with no table at all fails. Mutation-verified in all three
+  directions, including the case that found a bug in the guard itself — a hyphenated prop name
+  (`aria-label`) was invisible to the first version of its parser.
+### Docs
+- **`COMPONENTS.md` finally states the typed column contract** (#040). §Data table gained
+  "Columns — the typed `FdyTableColumn<T>`": all ten fields with their types, the Blazor spelling
+  (`PascalCase`, `required` Key/Label, the extra `Cell` slot), and the row-controls example.
+  `agent-onboarding.md` tells every consuming agent this file is closed — "if a class is not in
+  that file, it does not exist" — while three of the four stacks build a table only through
+  `columns`, whose shape appeared nowhere in it. One reporting app shipped `label: ''` on its
+  actions column as a result: a `<th>` announced as nothing.
+- **Nine enhancers still claimed to be Indonesian.** The comment above every `TEXT` table read
+  "User-facing strings. Indonesian by default" — written before 2.0.0 flipped them all to English,
+  and shipped in `dist/`, where it is the first thing a consumer reading the source sees. It now
+  says English, names `data-fdy-text-<key>` as the override, and gives an Indonesian app on the
+  raw path as the example of who overrides.
+- **The two docs a consumer actually reads on upgrade now mention the language.** 2.0.0's breaking
+  change was documented in `COMPONENTS.md` and this file, but neither `docs/getting-started.md` nor
+  the block projects paste into their agent instructions
+  (`docs/agent-onboarding.md`) said a word about it. Both now do, with `data-fdy-text-<key>` as the
+  whole migration and `<html lang>` for date names.
+- **`HANDOFF.md` described a release that had already happened.** It stated npm was on 1.53.0 with
+  1.54.0 and 2.0.0 sitting unpushed; npm had been on 2.0.0 since the morning, with the tag, the
+  branch and `origin/main` all on the same commit. The file that warns about stale snapshots was
+  the stale snapshot. Corrected, with the three commands that check it.
+- **`CLAUDE.md` claimed 44 components**, a number matching nothing countable. Now 48 stylesheets in
+  `src/components/` and 26 enhancers in `src/freeday-*.js`, both of which anyone can re-count.
+- **The typed props of all twelve wrappers are now in `COMPONENTS.md`** (`NEXT-UP.md` #11, the
+  general form of #040). A `### Props` table per wrapper: Vue and React names together, what each
+  does, and the Blazor differences stated rather than implied. Writing them measured something
+  nobody had: **four Blazor pickers are far thinner than their JS twins** — `FdyDatepicker` takes 6
+  parameters against 21 Vue props, `FdyAutocomplete` 6 against 11, `FdyCascade` 8 against 12, and
+  `FdyCombo` has no `Describedby`. Those wrappers render a seed element and do not splat unmatched
+  attributes, so `disabled`, `readonly`, `invalid`, the a11y ids, `clearable` and the datepicker's
+  ten navigation labels cannot be reached from a Blazor page at all. It runs the other way too:
+  `CloseLabel` exists only in Blazor, so the modal and drawer × is fixed at `Close` in Vue and
+  React. Filed as `NEXT-UP.md` #12 with its trigger; documented here as fact in the meantime,
+  because a consumer meeting it should find it written down rather than discover it.
+- **`FdyAppShell` was missing from every list of the typed wrappers but the two READMEs.** It
+  shipped as the eleventh in 1.54.0 and `COMPONENTS.md`, `getting-started.md`, `agent-onboarding.md`
+  and `integrations.md` went on naming ten for a whole major version — `agent-onboarding.md`
+  saying both "ten" and "eleven" about the same set, in the same file, and `getting-started.md`
+  carrying a section heading that still listed the seven of some earlier release. All corrected,
+  and a guard now reads any run of six or more wrapper names as an enumeration and fails if it is
+  incomplete. It found two of these itself, one of them a list this release had already touched.
 ## [2.0.0] - 2026-08-25
 ### Changed: BREAKING
 - **The vanilla enhancers now write English by default** (`NEXT-UP.md` #6, owner's decision). Every

package/COMPONENTS.md CHANGED Viewed

@@ -36,7 +36,7 @@ live docs.
    alert, breadcrumb, timeline, accordion, tree-without-cascade…) are CSS-only.
 7. **On Vue, React or Blazor, eleven components have a typed wrapper. Use it.** `FdyCombo` ·
    `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` · `FdyCfl` · `FdyChart` ·
-   `FdyTable` · `FdyModal` · `FdyDrawer`, from `@cahyo-dimas/freeday/vue`, `/react`, or the
+   `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`, from `@cahyo-dimas/freeday/vue`, `/react`, or the
    `Freeday.Blazor` RCL. Each is flagged at its own section below. Hand-writing their raw markup in
    those stacks *looks* right at first, because the enhancer initialises once and the first render is
     correct. Then
@@ -117,6 +117,25 @@ is a no-op.
 ## App shell — `.fdy-app`
 > **Typed wrapper: `<FdyAppShell>`**. Vue (`v-model:navOpen`) · React (`navOpen`/`onNavOpenChange`) · Blazor (`@bind-NavOpen`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyAppShell>`
+Vue and React names, `?` marking optional. Vue takes the regions as **slots** of the same names,
+which is why React's list is longer while offering the same thing.
+| Prop | Type | What it does |
+|---|---|---|
+| `navOpen?` | `boolean` | Whether the nav is visible. Optional because the default is the **viewport's**, and a caller cannot state that in one initial value. Vue binds `v-model:navOpen`. |
+| `onNavOpenChange?` | `(open: boolean) => void` | React. Visibility changed: the toggle, Escape, the backdrop, or a followed nav item. Vue emits `update:navOpen`. |
+| `title?` | `string` (Vue) · `ReactNode` | Topbar title. |
+| `toggleLabel?` | `string` | Accessible name for the nav toggle button. |
+| `toggleIcon?` | `ReactNode` | React. Replaces the default hamburger; Vue uses the slot of that name. |
+| `skip?` | `ReactNode` | React. Skip link, rendered first in the tab order. |
+| `brand?` · `nav?` · `topbar?` | `ReactNode` | React. Sidebar brand, sidebar nav, topbar contents. |
+| `children?` | `ReactNode` | React. The page itself; Vue's default slot. |
+Blazor takes the regions as `RenderFragment`s — `BrandContent`, `NavContent`, `TopbarContent`,
+`SkipContent`, `TitleContent`, `ChildContent` — and binds with `@bind-NavOpen`.
 The frame every application lives in. Do not hand-roll one from flexbox: the responsive sidebar,
 off-canvas drawer and backdrop are built in.
@@ -422,6 +441,25 @@ Native inputs, styled. `.fdy-check` · `.fdy-radio` · `.fdy-switch` on the wrap
 ## Select / combobox — `.fdy-combo`
 > **Typed wrapper: `<FdyCombo>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyCombo>`
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `T extends string` | The selected value: `v-model` in Vue, `value` in React. |
+| `onChange` | `(value: T) => void` | React. A selection was committed. Vue emits `update:modelValue` and `change`. |
+| `options` | `ReadonlyArray<{ value: T; label: string }>` | The list. React exports the row type as `FdyComboOption<T>`. |
+| `id?` | `string` | Explicit id for the combobox button; otherwise one is generated. |
+| `ariaLabelledby?` | `string` | Id of the element that labels the combobox. |
+| `placeholder?` | `string` | Shown when no option matches the current value. |
+| `disabled?` | `boolean` | Greyed and out of the tab order, the native `disabled` semantics. |
+| `readonly?` | `boolean` | Locked/view mode: keeps focus and tab order and shows its value, but cannot be opened or changed. Unlike `disabled` it is not greyed. |
+| `invalid?` | `boolean` | Sets `aria-invalid`; pair it with `describedby` pointing at the error text. |
+| `describedby?` | `string` | Id of the help or error text (`aria-describedby`). |
+Blazor: the same names in `PascalCase`, bound with `@bind-Value` (`Value` / `ValueChanged`).
+`FreedayCombo.setState(root, { disabled, readonly, invalid })` pushes a state change onto a combo
+whose host has stopped re-rendering.
 Fully styleable dropdown, APG combobox+listbox. Needs `freeday-select.js`.
 - `.fdy-combo` (+`--error`, `--no-icon`) · `__button` `__value` (+`--placeholder`) `__listbox`
@@ -452,6 +490,23 @@ keeps matching after selection. Do not put a glyph in that span.
 ## Autocomplete — `.fdy-autocomplete`
 > **Typed wrapper: `<FdyAutocomplete>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyAutocomplete>`
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `string` | The typed text. Free text: the list suggests, it does not constrain. |
+| `onChange` · `onSelect` | `(value: string) => void` | React. `onChange` on every keystroke, `onSelect` only when a suggestion is taken. Vue emits `update:modelValue` and `select`. |
+| `options` | `ReadonlyArray<string>` | The suggestions to filter. |
+| `emptyText?` | `string` | Shown when nothing matches. |
+| `placeholder?` | `string` | |
+| `id?` · `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Input id; its accessible name as text or as a reference; the help/error text it points at. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its value, but the input is not editable and the list will not open. Unlike `disabled` it is not greyed. |
+Blazor carries all of these. The states live on the input natively, and
+`FreedayAutocomplete.setState(root, { disabled, readonly, invalid })` changes them after the first
+render. A `readonly` input no longer opens its suggestion list, which it used to do over a field
+nobody could edit.
 Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 - `.fdy-autocomplete` · `__listbox` `__option` `__empty`
@@ -461,6 +516,25 @@ Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 ## Cascade select — `.fdy-cascade`
 > **Typed wrapper: `<FdyCascade>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyCascade>`
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `string` | The selected **leaf** value; `''` means nothing selected. |
+| `onChange` | `(value: string, labels: string[]) => void` | React. Vue emits `update:modelValue` and `change`. `labels` is the whole path, root → leaf. |
+| `options` | `ReadonlyArray<CascadeNode>` | The tree. `CascadeNode` = `{ label, value, children? }`; a node **with** children is a branch, one without is selectable. |
+| `separator?` | `string` | What joins the path in the display. Default `" / "`, matching the enhancer. |
+| `backLabel?` | `string` | Accessible name for the up-one-level button. Default `Back one level`. |
+| `label?` | `string` | Accessible name for the trigger and its listbox. |
+| `placeholder?` | `string` | |
+| `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | As on `<FdyCombo>`. |
+Raw path: `data-disabled` / `data-readonly` / `data-invalid`, `data-id`, `data-describedby`, and
+`FreedayCascade.setState(root, { disabled, readonly, invalid })` for a host that rendered once.
+Blazor calls the tree `Nodes`, adds `SubmenuLabel`, and carries everything else except
+`ariaLabelledby` — the trigger it builds is named by `Label`.
 Hierarchical drill-down. The data model is a **nested `<ul>`** inside the wrapper: an `<li>` with a
 child `<ul>` is a branch, one without is a leaf. Needs `freeday-cascade.js`.
@@ -482,6 +556,37 @@ child `<ul>` is a branch, one without is a leaf. Needs `freeday-cascade.js`.
 ## Choose-from-list (CFL) — `data-fdy-cfl`
 > **Typed wrapper: `<FdyCfl>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyCfl>`
+Four of these are required and carry the whole component: `fetchPage`, `columns`, `display`,
+`rowKey`. The rest are copy and state.
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `Row \| Row[] \| null` | The picked row. An array is reachable only under `multiple`, `null` only under `clearable`; narrow it with `singleRow()` (see the bullet below the raw-path hooks). |
+| `onChange` | `(value: Row \| Row[] \| null) => void` | React. Vue emits `update:modelValue` and `change`. |
+| `fetchPage` | `(query: string, page: number) => Promise<CflPage<Row>>` | The only data source — `{ rows, hasMore }`. Called on open, on search, and on Load more. Server state, never a global store. |
+| `columns` | `ReadonlyArray<CflColumn<Row>>` | `{ key, label }` per dialog column. |
+| `display` | `(row: Row) => string` | What the closed field shows once a row is picked. |
+| `rowKey` | `(row: Row) => string` | Row identity: ticks in multi mode, and seeding them when the dialog re-opens. |
+| `pageSize?` | `number` | Advisory only. Your `fetchPage` owns paging; this documents the intent. |
+| `title?` | `string` | The dialog's heading. Default `Choose data`. |
+| `searchPlaceholder?` | `string` | Placeholder **and** accessible name of the search box. Default `Search…`. |
+| `loadingText?` · `emptyText?` · `retryText?` · `moreText?` | `string` | Dialog states. Defaults `Loading…`, `No results.`, `Try again`, `Load more`. |
+| `closeLabel?` · `openLabel?` | `string` | Accessible names for the dialog's × and the field's open button. Defaults `Close`, `Open search`. |
+| `multiple?` | `boolean` | Tick rows and commit them together on Confirm instead of committing the clicked row, and widen the value to an array. |
+| `selectedText?` · `confirmText?` · `hintText?` | `string` | Footer copy. Defaults `{n} selected` (with `{n}` substituted), `Confirm`, `Click a row to choose it`. |
+| `placeholder?` | `string` | Field placeholder while nothing is picked. |
+| `clearable?` | `boolean` | A clear button, so an **optional** foreign key can be unset. Without it the value type admits a `null` the component can never produce. |
+| `clearLabel?` | `string` | Accessible name for that button. Default `Clear selection`. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps the picked value visible, focusable and copyable, but the dialog cannot be opened. |
+| `id?` · `ariaLabelledby?` · `describedby?` | `string` | Field id; the element that labels it; the help/error text it points at. |
+Blazor carries the same surface in `PascalCase` with three differences: multi-select is a second
+pair (`Values` / `ValuesChanged`) rather than a widened single binding, the fetch delegate is
+called `LoadPage`, and it has two parameters the JS adapters do not — `ErrorText` and
+`SearchDebounceMs`.
 A read-only field backed by master data: the button opens a searchable dialog, the picked row fills
 the field. The value is always **chosen, never typed**. Needs `freeday-cfl.js`.
@@ -498,6 +603,13 @@ the field. The value is always **chosen, never typed**. Needs `freeday-cfl.js`.
   `ValuesChanged`, because a nullable union is not a C# shape. Closing without Confirm leaves the
   bound value untouched, and re-opening seeds the ticks from it. The field states `{n} selected`
   rather than one row's `display()`. Strings: `selectedText`, `confirmText`, `hintText`.
+- **A single-select in Vue or React needs one narrowing, and the kit ships it.** The emitted value
+  is typed `Row | Row[] | null` whatever the props are, so a single-select handler cannot take it
+  as `Row`: the array is reachable only under `multiple`, the null only under `clearable`, and the
+  type cannot say which. Import the guard instead of writing one per app:
+  `import { singleRow } from '@cahyo-dimas/freeday/vue'` (or `/react`). It returns `Row | null`,
+  and throws if a `multiple` field's array ever reaches it, rather than silently keeping the first
+  row. Blazor is unaffected: multi-select there is a separate `Values` / `ValuesChanged` pair.
 ```html
 <div class="fdy-field">
@@ -547,6 +659,52 @@ a new class.
 ## Date picker — `data-fdy-datepicker`
 > **Typed wrapper: `<FdyDatepicker>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyDatepicker>`
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `string \| null` | ISO `YYYY-MM-DD`, or `''`/`null` for empty. |
+| `onChange` | `(value: string) => void` | React. Vue emits `update:modelValue` and `change`. Clearing sends `''`. |
+| `min?` · `max?` | `string` | ISO bounds; days outside them cannot be picked. |
+| `locale?` | `string` | BCP-47 tag deciding month and weekday names. Defaults to the page's `<html lang>`, then `en`. |
+| `placeholder?` | `string` | |
+| `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its date, but it cannot be opened, cleared or changed. |
+| `clearable?` | `boolean` | Show a × in the trigger once a date is set, so an optional date can be unset. Sends `''`. Off by default. |
+| `clearLabel?` | `string` | Accessible name for that ×. Default `Clear date`. |
+| `prevMonthLabel?` · `nextMonthLabel?` | `string` | The month arrows. Defaults `Previous month` / `Next month`. |
+| `chooseMonthLabel?` · `chooseYearLabel?` | `string` | The title buttons that drill into the month and year grids. Defaults `Choose month` / `Choose year`. |
+| `prevYearLabel?` · `nextYearLabel?` | `string` | Year arrows, shown in the month grid. Defaults `Previous year` / `Next year`. |
+| `prevYearsLabel?` · `nextYearsLabel?` | `string` | Page arrows, shown in the year grid. Defaults `Previous years` / `Next years`. |
+The ten label props exist because month and weekday names follow `locale` while the buttons around
+them do not: without these, a Spanish calendar would be navigated by English arrows.
+On the **raw path** these all have hooks now: `data-disabled` / `data-readonly` / `data-invalid`,
+`data-id`, `data-describedby`, and one `data-fdy-text-<key>` per label above
+(`data-fdy-text-prev-month`, …). A host that renders its markup once and cannot re-render it can
+change the three states afterwards with `FreedayDatepicker.setState(root, { disabled, readonly,
+invalid })`.
+Blazor carries the same surface bar four: `locale` (the enhancer formats through `Intl` from the
+page's `<html lang>`), `clearable` and `clearLabel` (this path builds no clear button), and
+`ariaLabelledby` (the trigger it builds is named by `Label`).
+### Props — `<FdyDateRange>`
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `DateRangeValue` = `{ start, end }`, each `string \| null` | Both ends at once, so the pair can never be half-applied. |
+| `onChange` | `(value: DateRangeValue) => void` | React. Vue emits `update:modelValue` and `change`. |
+| `min?` · `max?` | `string` | ISO bounds for both ends. The end can never precede the start. |
+| `locale?` | `string` | As on the single picker. |
+| `startPlaceholder?` · `endPlaceholder?` | `string` | One per field. |
+| `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Names the group (`role="group"`), or points at the text that does. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | Applied to both pickers together. |
+Blazor splits the value into two scalars, `From` / `FromChanged` and `To` / `ToChanged`, because a
+C# binding cannot express one object bound in two places, and it adds `Separator`.
 Input-styled trigger + calendar popover. Needs `freeday-datepicker.js`. **Author an empty `<div>`**
 The enhancer builds everything.
@@ -772,6 +930,75 @@ sum, so measure them once after render (and on resize) and set the variable.
 ## Data table — `.fdy-datatable`
 > **Typed wrapper: `<FdyTable>`**. controlled: `columns` + `rows`, with sort/filter/page events (`update:pageIndex` · `onPageIndexChange` · `PageIndexChanged`) and `process` for driving a card list off the same processed set. The markup below is the raw enhancer path.
+### Columns — the typed `FdyTableColumn<T>`
+On Vue, React and Blazor, `columns` **is** the table: it is what those stacks write instead of the
+markup hooks further down. Ten fields, `key` and `label` required. The authored doc comments live on
+the type itself (`adapters/core/table-model.d.ts`, re-declared for Blazor in
+`adapters/blazor/TableTypes.cs`); the list below is the discoverable copy, and `npm test` fails if
+the two ever disagree.
+| Field | Type | What it does |
+|---|---|---|
+| `key` | `string` | Row property key; the sort/filter identity and, unless `value` is set, the cell accessor. |
+| `label` | `string` | Header label. |
+| `labelHidden` | `boolean` | Render the label for assistive tech only; the header cell looks empty. |
+| `sortable` | `boolean` | Show a sort toggle in the header. |
+| `filter` | `'text' \| 'enum' \| 'number' \| 'date'` | Offer a column filter of this type (the funnel popover). |
+| `align` | `'left' \| 'right' \| 'center'` | Cell alignment. Default `left`. |
+| `mono` | `boolean` | Render cells in the monospace data font (`.fdy-mono`). |
+| `sortType` | `'text' \| 'number' \| 'date'` | Override the comparator; defaults to one derived from `filter`, else `text`. |
+| `value` | `(row: T) => unknown` | Custom accessor; defaults to `row[key]`. Feeds sort, filter and the default cell text. |
+| `options` | `readonly string[]` | Explicit enum-filter options; they default to the distinct values in the rows on screen, so pass them in server-paged mode, where those are one page. |
+Blazor spells the same fields `PascalCase` (`LabelHidden`, `SortType`), makes `Key`/`Label`
+`required`, and adds one field with no TS twin: `Cell`, a `RenderFragment<TRow>` where Vue and React
+use a slot.
+A column of row controls is worth stating outright, because the obvious move is the wrong one:
+```ts
+const columns: FdyTableColumn<User>[] = [
+  { key: 'email', label: 'Email', sortable: true, filter: 'text' },
+  { key: 'total', label: 'Total', align: 'right', mono: true, sortType: 'number' },
+  // Not `label: ''`. A <th> with no text announces as nothing, and the label also names this
+  // column's sort button and filter popover, so it has to stay meaningful.
+  { key: 'actions', label: 'Actions', labelHidden: true },
+];
+```
+### Props — `<FdyTable>`
+Controlled by default: hand it `columns` + `rows` and it filters, sorts and paginates internally;
+provide the state prop for a concern and you own that concern instead. React names the callbacks
+`onXChange`, Vue emits `update:x`, Blazor exposes `XChanged`.
+| Prop | Type | What it does |
+|---|---|---|
+| `columns` | `ReadonlyArray<FdyTableColumn<Row>>` | The column contract documented above. |
+| `rows` | `ReadonlyArray<Row>` | The current page's rows in server mode, the whole set in client mode. |
+| `rowKey` | `(row: Row) => string \| number` | Row identity: keys, expansion, activation. |
+| `sort?` · `onSortChange?` | `FdySortState \| null` · `(sort) => void` | Pass `sort`, **even as `null`**, to own sorting; omit it for the internal sort. |
+| `filters?` · `onFiltersChange?` | `FdyFilterMap` · `(filters) => void` | The same, for filtering. |
+| `page?` · `onPageChange?` | `FdyPageState` · `(page) => void` | Its **presence switches the table into server mode**: you own paging and get `{ index, size, total }` back. |
+| `pageSize?` | `number` | Client mode: rows per page. Absent or 0 renders every row with no pager. |
+| `pageIndex?` · `onPageIndexChange?` | `number` · `(index) => void` | Client mode: own the 0-based index while the table keeps filtering, sorting and paginating — this is what lets one external pager drive both a table and a card list. |
+| `pageSizes?` · `onPageSizeChange?` | `readonly number[]` · `(size) => void` | Offer a rows-per-page control. Server mode reports the pick through the page event (read its `size`); client mode applies it itself and reports it too, so it works with nothing wired. |
+| `pager?` | `boolean` | Default true. Turn it off to withhold the table's own footer when the screen renders one. |
+| `loading?` | `boolean` | Show the in-table loading state. |
+| `emptyText?` · `empty?` | `string` · `ReactNode` | The empty state as text, or as markup (React `empty`, Vue's `empty` slot). |
+| `ariaLabel?` | `string` | Names the table for assistive tech. |
+| `rowActivatable?` · `onRowActivate?` | `boolean` · `(row) => void` | Rows become focusable and activate on click, Enter or Space. |
+| `rowClass?` | `(row: Row) => string \| undefined` | Per-row class hook, e.g. marking the selected row. |
+| `expandedKeys?` · `renderRowDetail?` | `ReadonlyArray<string \| number>` · `(row) => ReactNode` | Controlled expansion: these keys get a full-width detail row. Vue uses the `row-detail` slot. |
+| `renderCell?` | `(column, row, value) => ReactNode` | React. Custom cell rendering; Vue uses the `cell` slot. |
+| `toolbar?` | `ReactNode` | React. Content above the table; Vue uses the `toolbar` slot. |
+| `onProcess?` | `(result: { rows, total }) => void` | React. The processed page after filter/sort/paginate, in **both** modes. Vue emits `process`, Blazor calls it `Process`. Render the same set elsewhere — a card list, a summary, a CSV export — without re-deriving the pipeline. |
+Blazor matches this surface (`LoadingText` and `EmptyContent` in place of `emptyText`/`empty`,
+`Toolbar` and `RowDetail` as `RenderFragment`s) and is the one adapter that also exposes
+`FiltersChanged`.
 The interactive table: global search, sort, per-column filters, row selection + bulk bar,
 pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` + `data-fdy-table`
 (`data-page-size="N"`).
@@ -822,7 +1049,11 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   (`data-fdy-text-required`, `data-fdy-text-type`, …), narrower than the per-field
   `data-fdy-msg-<alias>` that still wins. `Freeday.toast()` takes `closeLabel` in its options
   object. `npm test` asserts no enhancer string is written outside its `TEXT` table, so a new one
-  arrives overridable or not at all.
+  arrives overridable or not at all — a claim that was only half true until **2.2.0**, when the
+  guard stopped looking for the line that writes to the DOM and started reading every literal in
+  the file. The old shape could not see a string handed to a helper, which is how ten datepicker
+  labels, the timepicker's, the cascade's two defaults, the table's `Min`/`Maks` filter
+  placeholders and the chart's `Seri 1` all sat outside it.
 **Testing note:** a column's filter button and the dialog it opens deliberately share one
 accessible name (`Filter <column>`), since a dialog named after its trigger is the normal pattern. In a
@@ -849,6 +1080,14 @@ ninety-row list would remove the only way back to twenty.
 of one page of rows. A footer inside the table is inside the half a phone hides, so those screens
 render it once, outside both, with `pager={false}` on the table.
+### Props — `<FdyTableFooter>`
+| Prop | Type | What it does |
+|---|---|---|
+| `page` | `FdyPageState` = `{ index, size, total }` | The page being shown. `size` drives both the range text and the rows-per-page control's value. |
+| `onPageChange?` | `(page: FdyPageState) => void` | React. A page click or a size change. Vue emits `update:page`; Blazor `PageChanged`. |
+| `pageSizes?` | `readonly number[]` | Offer a rows-per-page control. Omit it and the footer is range + pager only. Picking a size reports the new `size` together with the index that still holds the row the reader was looking at. |
 **Who draws the pager.** The table renders its own footer (range + pager) whenever there is more
 than one page. Two ways to take it over:
@@ -879,6 +1118,25 @@ replaces.
 ## Charts — `data-fdy-chart`
 > **Typed wrapper: `<FdyChart>`**. data props in all three (`type` + `values` / `series`); it repaints on data change, so `FreedayChart.update(el)` is only for the raw path below.
+### Props — `<FdyChart>`
+| Prop | Type | What it does |
+|---|---|---|
+| `type` | `'line' \| 'area' \| 'bar' \| 'sparkline' \| 'donut'` | Which chart to draw. |
+| `values?` | `ReadonlyArray<number>` | One series. |
+| `series?` | `ReadonlyArray<FdyChartSeries>` | Several: each `{ label, values }`. Use one or the other, not both. |
+| `labels?` | `ReadonlyArray<string>` | Category labels: the x axis, or the donut's slices. |
+| `format?` | `'number' \| 'percent' \| 'currency'` | How values are written in labels and the donut centre. |
+| `stacked?` | `boolean` | Bar charts: stack the series instead of grouping them side by side. |
+| `legend?` | `'auto' \| 'always' \| 'none'` | `auto` shows one when there is more than one series. |
+| `colors?` | `ReadonlyArray<string>` | Per-series override. Each entry is a semantic token name (`primary`, `accent`, `success`, `warning`, `danger`, `info`) or a categorical slot `chart-1`…`chart-8`. Omit for the default fixed-order palette. |
+| `color?` | `string` | The same, for a single-series chart (sparkline, simple bar or line). |
+| `center?` | `string \| number` | Donut only: what to print in the middle. |
+| `aria-label?` | `string` | React. The chart's accessible name, and in practice the **whole** text alternative: a named chart's painted subtree is `aria-hidden`, see the a11y note in this section. Vue and Blazor set it as a plain attribute (Blazor's parameter is `AriaLabel`). |
+| `children?` | `ReactNode` | React. Content inside the element before the chart paints. The renderer replaces it, so it is a pre-paint placeholder, not a text alternative. |
+Blazor adds `ChildContent` for the same placeholder role.
 Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`; call
 `FreedayChart.update(el)` after changing data (or use `FdyChart` in Vue/React/Blazor).
@@ -889,6 +1147,10 @@ Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`
 - Colour: `data-fdy-color="primary"` or `data-fdy-colors="success,warning,danger"` for semantic token
   names **or** `chart-1`…`chart-8` slots to pin a category's colour. Multi-series defaults to the
   validated categorical palette `--chart-1`…`--chart-8`.
+- **Its two strings are overridable**, and until 2.2.0 neither was: a series with no `label` fell
+  back to `Seri 1` — Indonesian, three months after 2.0.0 turned the enhancers English — and the
+  donut's centre caption was hard-coded. Both take the usual hook now:
+  `data-fdy-text-series="Series {n}"` and `data-fdy-text-total="Total"`.
 - Format: `data-fdy-format="number|percent|currency"`; legend `data-fdy-legend` (`none` to drop);
   axes `data-fdy-axes`
 - Sizing is already set by the kit. Override **these**, never a `height` on the chart root (a
@@ -1076,6 +1338,23 @@ so the same look serves routed sub-navigation built from plain links. See the no
 ## Modal — `.fdy-modal`
 > **Typed wrapper: `<FdyModal>`**. Vue (`:open` + `@close`) · React (`open` + `onClose`) · Blazor (`@bind-Open`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyModal>`
+| Prop | Type | What it does |
+|---|---|---|
+| `open` | `boolean` | Controlled: your state decides. The wrapper cancels the native `cancel` event so the DOM can never disagree with it. |
+| `title` | `string` (Vue) · `ReactNode` | Names the dialog through `aria-labelledby`. Vue also offers a `title` slot when the heading needs markup. |
+| `onClose` | `() => void` | React. Vue emits `close`. Fires from Escape, a backdrop click and the ×, all three of which exist only under `dismissible`. |
+| `size?` | `'sm' \| 'md' \| 'lg' \| 'wide'` | Dialog width. |
+| `dismissible?` | `boolean` | Whether Escape, the backdrop and the × can close it. Off means the reader has to take a footer action, which is the point of a blocking confirm. |
+| `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
+| `footer?` | `ReactNode` | React. Vue: the `footer` slot. |
+| `children?` | `ReactNode` | React. The body. Vue: the default slot. |
+Blazor binds `@bind-Open` and takes `TitleContent` / `ChildContent` / `FooterContent`, plus
+`OnClose`. `CloseLabel` used to be Blazor-only, which left the × in Vue and React fixed at `Close`;
+all three stacks carry it now.
 Native `<dialog>`: focus trap, Esc and backdrop come from the browser. Sizes `--sm` `--md` `--lg`
 `--wide`; `--cfl` for the choose-from-list dialog.
@@ -1111,6 +1390,23 @@ that is not the kit. Both rules measured on Chromium 133 and 151, and pinned as
 ## Drawer — `.fdy-drawer`
 > **Typed wrapper: `<FdyDrawer>`**. Vue (`:open` + `@close`) · React (`open` + `onClose`) · Blazor (`@bind-Open`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+### Props — `<FdyDrawer>`
+The modal's props with `side` in place of `size`; the behaviour notes there apply here too.
+| Prop | Type | What it does |
+|---|---|---|
+| `open` | `boolean` | Controlled, as with the modal. |
+| `title` | `string` (Vue) · `ReactNode` | Names the drawer (`aria-labelledby`). |
+| `onClose` | `() => void` | React. Vue emits `close`. |
+| `side?` | `'left' \| 'right'` | Which edge it slides from. |
+| `dismissible?` | `boolean` | Escape, backdrop and × on or off. |
+| `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
+| `footer?` | `ReactNode` | React. Vue: the `footer` slot. |
+| `children?` | `ReactNode` | React. The body. Vue: the default slot. |
+Blazor: `@bind-Open`, `TitleContent` / `ChildContent` / `FooterContent`, `OnClose`, `CloseLabel`.
 Temporary side panel on native `<dialog>`, left by default, `--right` to flip. Parts `__header`
 `__title` `__body` `__footer` `__close`. Open it from any
 `<button data-fdy-drawer="<dialog id>">`. Needs `freeday-drawer.js`.

package/README.id.md CHANGED Viewed

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev. UI kit-nya sudah siap pakai.**
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v2.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.0.0)
+[![Release](https://img.shields.io/badge/release-v2.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.2.0)
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v2.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.0.0)
+[![Release](https://img.shields.io/badge/release-v2.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.2.0)
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyAutocomplete.razor CHANGED Viewed

@@ -8,7 +8,10 @@
 <div @ref="Root" data-fdy-autocomplete class="fdy-autocomplete">
     <input class="fdy-input" role="combobox" aria-expanded="false" aria-autocomplete="list"
            aria-controls="@_listId" autocomplete="off" value="@Value"
-           placeholder="@Placeholder" aria-label="@AriaLabel" />
+           placeholder="@Placeholder" aria-label="@AriaLabel"
+           id="@Id" aria-labelledby="@AriaLabelledby" aria-describedby="@Describedby"
+           disabled="@Disabled" readonly="@Readonly"
+           aria-invalid="@(Invalid ? "true" : null)" />
     <ul class="fdy-autocomplete__listbox" id="@_listId" role="listbox" hidden>
         @foreach (string item in Options)
         {

package/adapters/blazor/FdyAutocomplete.razor.cs CHANGED Viewed

@@ -25,8 +25,34 @@ public partial class FdyAutocomplete
     protected override async ValueTask OnHydratedAsync()
         => await SubscribeAsync("fdy-autocomplete-select", nameof(OnSelect));
+    /// <summary>Explicit id for the input.</summary>
+    [Parameter] public string? Id { get; set; }
+    /// <summary>Id of the element that labels the input, when a visible label does the naming.</summary>
+    [Parameter] public string? AriaLabelledby { get; set; }
+    /// <summary>Id of the help or error text the input describes itself with.</summary>
+    [Parameter] public string? Describedby { get; set; }
+    /// <summary>Greyed and out of the tab order.</summary>
+    [Parameter] public bool Disabled { get; set; }
+    /// <summary>Locked/view mode: focusable and showing its value, not editable, and the
+    /// suggestion list will not open.</summary>
+    [Parameter] public bool Readonly { get; set; }
+    /// <summary>Marks the field invalid (<c>aria-invalid</c>).</summary>
+    [Parameter] public bool Invalid { get; set; }
     protected override bool ShouldRender() => !Hydrated;
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayAutocomplete.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
     /// <summary>Invoked by the bridge when the user picks a suggestion.</summary>
     [JSInvokable]
     public async Task OnSelect(SelectDetail detail)