--- id: "packages/active-ui/changelog" title: "Changelog" description: "What changed for users of active-ui, per version." url: "/packages/active-ui/changelog" locale: "en" revision: "c8e39610e43862a6" --- # Changelog > [!NOTE] > **Release state** > > The version line at the top of this page is read from the package and the > release register of Foundation. A version heading in the changelog below is > not a release by itself: only a recorded release is. While the status says > development, the content can still change before it is released. Notable changes to `@workspace/active-ui`. Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning per [Semantic Versioning](https://semver.org/spec/v2.0.0.html). This is an internal workspace package (`private: true`, `UNLICENSED`). Versions describe the package's own history; they carry no external compatibility promise. The pre-1.0.0 iteration history is not preserved. --- ## \[Unreleased\] Maintained in Active Foundation since 2026-10-20 (Foundation AF-37); the switchover itself changed no byte. The entries below are the first changes made there. Each primitive change is a declared deviation from stock (`docs/ADDING-COMPONENTS.md` § Bewuste afwijkingen van stock). `ui:drift` compares against the live shadcn registry, so its result belongs to the day it ran: it reported no unexplained drift on 2026-10-21, before `choice-control-contour`; that entry is declared by hand and has not been run against the registry yet. ### Added — building blocks for documentation pages Additions to composed components; no primitive changed, so no stock deviation is declared. - **`TableOfContents`** (`components/composed/table-of-contents`): the headings of a page as links to their anchors, with the section in view marked (`aria-current="location"`, a colour and a border, never a heavier font). `variant="list"` beside the content, `variant="collapsible"` behind a button above it for a narrow screen or zoom. The label is the caller's. - **`ExamplePanel`: `actions` and `stage`.** `actions` places the caller's controls beside the view switch (a link to the example on its own page, a full-screen button). `stage="fill"` gives a wide example (a grid, a chart) the full width of the panel from its start instead of centring it; a component that measures its container then measures the panel. In full screen the panel fills the screen and scrolls. The default stays `centered`. - **`FullScreen`: `target`.** A ref to one element to show in full screen instead of the page; the button then follows only that element. - **`Icons.externalLink`.** ### Fixed — recognisable choice controls - **An unselected `Checkbox` and `RadioGroupItem` have a visible outline.** The outline is the only cue of an empty box or radio, and `border-input` (the text-field token) reached 1.15:1 on the light canvas and about 1.5:1 in dark, below the 3:1 of WCAG 2.2 SC 1.4.11. Both now use the new `--control-border` (`--muted-foreground` mixed 80% with `--card`): at least 3.37:1 in light and 4.59:1 in dark on canvas, card and popover (`choice-control-contour`). Focus is `--control-border-focus`, the 50% ring of ADR-022 mixed over that outline instead of over transparent, so focusing an empty control no longer makes it fainter (at least 3.54:1). In dark, an invalid control keeps the full `--destructive` border (6.13:1 on the card) instead of half of it (2.42:1). Checked, mixed and disabled are unchanged. - **New tokens `--control-border` and `--control-border-focus`**, in both blocks of `themes.css` and in the Tailwind bridge (`border-control-border`, `border-control-border-focus`). They contain `var()`: a host that redeclares `--muted-foreground`, `--card` or `--ring` in accent blocks on a different element than `:root` declares these two there as well. `src/__tests__/control-border-contrast.test.ts` computes them. - **Documentation:** `FUNCTIONEEL-OVERZICHT.md` no longer calls the package accessible by default; it names what the package supports and what stays with the host (labels, error text, heading structure, testing compositions). ### Documentation — TSDoc that reads on its own - **Contract text without internal references.** Thirteen TSDoc texts named an internal ticket, a repository document or a consumer in the middle of a sentence; a reader cannot follow those, and the documentation site dropped each such paragraph whole, contract included. Rewritten so the rule stays and the reference goes: `NumberField` `value` (never a `number`, the empty state), `onValueChange` (incomplete or invalid text keeps the stored value) and `locale`; `NationalityCombobox` `locale`, `placeholder` (no default, no English fallback) and `NationalityComboboxOption`; `Carousel` `roleDescription`; `Spinner` `label`; `NoticeScreenTone`, `StatusTone` and `LinkComponentProps`. No behaviour changed. - **`ThemeMode` and `AnnouncementBannerImportance` have TSDoc of their own.** `ThemeMode` had none (the text sat on `THEME_MODES`), and the type `AnnouncementBannerImportance` stood directly below the component's long description, which therefore read as its documentation. - **A `Button` in a form is pinned by a test.** `button-form.test.tsx` states that a `Button` renders `type="button"` and does not submit, and that `type="submit"` does: Base UI's `useButton` sets `type: 'button'` before the caller's props. The documentation site said the reverse. ### Fixed — readable text - **Error and destructive text reach AA.** `FieldError`, the label and text of an invalid `Field`, and the `destructive` variants of `Button` and `Badge` write their text in `--tone-danger` instead of `--destructive` (`danger-text-tone`). The base colour reached 4.33:1 on the canvas and 3.65:1 on its own tinted fill in light. Fills and borders keep `--destructive`. - **Link text reaches AA.** The `link` variants of `Button` and `Badge`, and the action link of `AnnouncementBanner`, use the new `--primary-text` (`primary-text-token`). `--primary` reached 4.47:1 in light and 3.62 to 3.79:1 in dark as text. - **The current sidebar item stays recognisable, calmly.** `SidebarMenuButton` and `SidebarMenuSubButton` give the current item (`isActive`) and a hovered item their own fill (`sidebar-active-indicator`): the current item keeps the full `--sidebar-accent` fill, also under the pointer; hover is half of it (`bg-sidebar-accent/50`). In stock both were the same fill, so the current item vanished while the pointer rested on another. The weight no longer changes (stock's `data-active:font-medium` is gone), and there is no bar or border per state: text and box never move. Keyboard focus stays the ring, a state of its own. - **Code colours reach AA.** The highlighter uses GitHub's `github-light-high-contrast` and `github-dark-default` themes instead of `github-light` and `github-dark` (`highlighter-aa-themes`), whose comments, keywords, strings and variables reached 2.98 to 4.12:1. Every emitted colour now reaches 4.5:1 on a card, the canvas and both code surfaces, in light and dark (`lib/__tests__/highlighter-contrast.test.ts`). Code looks somewhat darker in light. - **Descriptions for undocumented props:** `Button` `variant` and `size`, `Field` `orientation`, `FieldError` `errors`, `FieldLegend` `variant`, and `DialogContent` `showCloseButton` and `closeLabel` (with the rule that `closeLabel` is required while the close button is shown). ### Fixed — tables and inline code - **A table that scrolls sideways is reachable with the keyboard.** The container of every `Table` takes focus (`tabIndex=0`, `data-scrollable`) while, and only while, its table is wider than it is (`table-fit`). Stock's container scrolled but could not be reached without a pointer (axe `scrollable-region-focusable`). A table that fits is no tab stop. - **Wrapped inline code in prose keeps its shape.** A bare `` in `.typeset` repeats its padding and radius on every line (`box-decoration-break: clone`); the continuation started a padding further left than the first line. ### Fixed — found while documenting every component Found while the Foundation site documented the full component set; each change is general, not specific to that site. - **An ellipsis keeps its closing bracket.** `Code` keeps `…` together with the brackets that follow it, so the short form of a type such as `PayloadChildRenderFunction<…>` never leaves a lone `>` at the start of a line. Line breaking allows a break after `…`. - **Property names break between words, not inside them.** `PropertyListItem` marks the same readable break points as `Code` (camelCase, `_`, `.`) in a string `name` and wraps with `overflow-wrap: break-word`, instead of `break-all`, which split a long name at any character. The helper is shared internally (`components/composed/_parts/break-points.tsx`); no new export. - **`InputGroup` and `InputOTP` look like the other fields.** The group and every code slot take the resting border from `--input-border` and the `--background` fill, as `Input`, `Textarea` and `NativeSelect` do (`input-border-token`, `field-background`). They had the fill token as their border and no fill in light, so they read as an outline on the canvas. `Command` keeps its own search field style. - **An indeterminate checkbox looks indeterminate.** `Checkbox` with `indeterminate` showed the check mark on an unfilled box, so it read as checked; it now shows a dash on the checked fill (`checkbox-indeterminate`). - **The chevron of `ComboboxInput` has a name, or stays out of the way.** The button that opens the list had no accessible name (axe `button-name`). The new optional `triggerLabel` names it; without it the button is for the pointer only, out of the tab order and hidden from assistive technology, since the input opens the list with the arrow keys (`combobox-trigger-label`). No existing call changes. - **`SelectTrigger` has the field fill.** It was the only one of the four text-like fields without the `--background` fill, so on a card it read as an outline beside an `Input` (`field-background`). - **`ComboboxChips` looks like the other fields.** The field of a multiple combobox takes the `--input-border` border and the `--background` fill, as `Input` does (`input-border-token`, `field-background`). - **`Calendar` declares `locale` and `today` as its own.** Both are required props of the calendar, but its type intersected them with DayPicker's optional ones, so a reference generated from the type showed `today` as DayPicker's. They now replace DayPicker's in the type, per `mode` (`calendar-own-props`); the props a caller passes are unchanged. - **An item group is a valid list.** `ItemSeparator` rendered a `role="separator"` inside `ItemGroup`, a `role="list"`, which ARIA does not allow (axe `aria-required-children`); the line is now presentational (`item-separator-presentational`). Items in a group still need `role="listitem"` from the caller. - **Page links are links.** `PaginationLink` (and so `PaginationPrevious` and `PaginationNext`) rendered its anchor through `Button`, which gave it `role="button"`: screen readers announced a button where there was a link to a page, and the current page as a pressed button. It is now an `` with the classes of `buttonVariants` (`pagination-link-anchor`); props and look are unchanged. - **A command list contains only what a listbox may contain.** `CommandSeparator` rendered cmdk's `role="separator"` inside the `listbox`, which ARIA does not allow (axe `aria-required-children`); the line is now presentational (`command-separator-role`). The groups keep their names. - **`docs/API.md` signatures without comments.** `scripts/generate-api.mjs` leaves TSDoc out of an inline props type; its backticks broke the Markdown code span of the table, so Prettier changed the text and `api:check` failed after formatting. - **A blocked `GuardedAction` announces its reason.** The reason is now the button's accessible description (`aria-describedby` to a hidden copy), so a screen reader hears it with the button; before, it appeared only in the tooltip, which is not linked to its trigger. A caller's own `aria-describedby` is kept. - **`SimpleDropzone` describes its file field.** `aria-describedby` now lands on the file input, as `aria-invalid` already did, instead of on the surrounding box, where no screen reader read it. - **Danger and status text is readable in every state.** The `CRITICAL` word of `AnnouncementBanner` and the `destructive` bubble write their text in `--tone-danger` (`danger-text-tone`); a `TraceLine` in error does too, its description uses `--muted-foreground` at full strength, and a pending step is dimmed by its icon only (`trace-text-contrast`). The stock colours fell below AA (axe `color-contrast`). - **A slider named with `aria-label` names its thumbs.** Base UI names a thumb's input from its own label or the root's label part, never from the root's `aria-label`, so `` had an unnamed input (axe `label`). `Slider` now passes its `aria-label` to every thumb (`slider-thumb-label`). - **A slider with one number has one thumb.** `Slider` rendered two thumbs (`[min, max]`) when `value` or `defaultValue` was a single number instead of an array, so one value had two handles (`slider-single-value`; stock has the same defect). - **Descriptions for undocumented props and exports:** `ButtonGroup` `orientation`; `Toggle` and `ToggleGroupItem` `variant` and `size`; `ToggleGroup` `spacing` and `orientation`; `DialogFooter` `showCloseButton` and `closeLabel`; every prop of `ConfirmActionDialog`; `InputGroupAddon` `align`, `InputGroupButton` `size` and `type`; `InputOTP` `containerClassName`, `InputOTPSlot` `index`; `Switch`, `SelectTrigger` and `NativeSelect` `size`; `ComboboxInput` `showTrigger`, `showClear` and `clearLabel`, `ComboboxChip` `showRemove` and `removeLabel`, and `useComboboxAnchor`; `Calendar` `locale`, `today` and `buttonVariant`, `CalendarDayButton` `locale`; `QuestionnaireProgress` `label` and `formatProgress`; `AlertDialogContent` `size`; `SheetContent` `side`, `showCloseButton` and `closeLabel`; `Drawer` `showSwipeHandle`; `inset` and `variant` of the dropdown, context and menubar items; `CommandDialog` `title`, `description` and `className`; `Breadcrumb` and `Pagination` `label`, `PaginationLink` `isActive`, `PaginationPrevious` and `PaginationNext` `text` and `label`; `TabsList` `variant`; the props of `SidebarProvider`, `Sidebar`, `SidebarTrigger`, `SidebarRail`, `SidebarMenuButton`, `SidebarMenuAction` and `SidebarMenuSubButton`, and `useSidebar`; `Card` `size`, `Item` `variant` and `size`, `ItemMedia` `variant`, `Badge` `variant`, `Avatar` `size`, `Marker` `variant`; `Table` `layout` and `scrollLabel`; `CodeBlock` `variant` and `size`, `CodeBlockContent` `wrap`, `lineNumbers` and `startLine`, `CodeBlockLine` `variant`; `EmptyMedia` `variant`; `Carousel` `opts`, `plugins`, `orientation` and `setApi`, `CarouselPrevious` and `CarouselNext` `label`, and `useCarousel`; `AspectRatio` `ratio`; `ResizableHandle` `withHandle`; `Alert` `variant`; `ToastViewport` and `ToastClose` `aria-label`, the options of `resolveToastTimeout`, `createToastManager` and `useToastManager` (and the description of `TOAST_TIMEOUT_MS` no longer points to internal documents); `Message` `align`; `Bubble` `variant` and `align`, `BubbleReactions` `align` and `side`; `Attachment` `state`, `size` and `orientation`, `AttachmentMedia` `variant`; `TraceLine` `status`, `TraceCollapsible` `open`; `MessageScrollerButton` `label` and `children`; and `REGEXP_ONLY_DIGITS`, whose description now sits on its export and no longer names products that use it. The composed components, hooks, providers and brand icons got the same treatment: descriptions for undocumented props and exports, English examples instead of Dutch ones, and no references to consumer applications, internal tickets or repository documents in the texts a reader of the API sees. The `ClientOnly` example no longer reads `window` in an expression passed as children, which runs on the server too; it renders a component that reads it. ### Added - **`--primary-text`** (`themes.css`, light and dark; utility `text-primary-text`): the readable text form of `--primary`, derived like the status tones (70% of the colour, 30% `--foreground`). For primary as text; fills keep `--primary`. - **`Table` `layout="text"`** (opt-in; `table-text-layout`): cells that hold running text wrap, align to the top and use the base size. The default, `layout="data"`, is unchanged. Identifiers in `Code` stay whole while the table fits, so a column is at least as wide as its longest name and running text wraps instead; only when it does not fit do they break, at their readable points (`data-identifiers="split"`), and only when even that does not fit does the table scroll in its container (`table-fit`). With the new optional `scrollLabel` that container is a named region while it scrolls. - **`CodeBlock` `variant="muted"` and `flush`** (opt-in; `code-block-surface`): a surface of its own for code, a fixed mix of `--card` and `--muted`; and a form without border and radius for a block inside a frame. - **`Code`** (`components/composed/code`): inline code outside running text, in the shape `.typeset` gives a bare ``. A name stays whole and moves to the next line as a word does; it breaks between characters only when it is longer than the line (`overflow-wrap: break-word`), so its minimum width is the whole name. Its readable break points (after `_` and `/`, after a `.` before a name, between camelCase words) are marked with ``, which adds no character, and stay off until a container turns them on. Every line of a broken name keeps its padding and radius. - **`Steps` and `Step`** (`components/composed/steps`): a numbered procedure in a document, as an ordered list with a decorative marker; the heading is the caller's. Not a `Stepper`, which shows the progress of a flow. - **`ExamplePanel`** (`components/composed/example-panel`): a working example with its source; title, description, a Preview/Code switch in the header and the preview on the application canvas. All text comes from the caller. - **`PropertyList` and `PropertyListItem`** (`components/composed/property-list`): a reference list of properties, with the name and its meaning leading and the metadata, labels and a folded-out extra from the caller; one column below `md`. ### Documentation - **No links to documents of another repository.** References to documents of the repository the package came from (Datyx) and to packages that are not part of this one are text now, marked as such (`(Datyx: …)`, or the package name), instead of links that resolve nowhere, or to another document, in the repository that holds the package. `README.md` § 6 and `docs/ARCHITECTURE.md` § Hergebruik en overdracht name the source repository's transfer route instead of Datyx paths. No code changed. ## \[8.0.0\] — 2026-10-20 8.0.0 is a major version because the managed package set changed: since ADR-038 and platform ADR-114 the package depends on `@workspace/active-format` instead of a translation package, so a consumer's documented formatter imports move (see "Changed — BREAKING for the managed package set" below). Component props are unchanged. ### Changed (platform ADR-115) — licence notices and transfer - **Third-party notices.** `THIRD-PARTY-NOTICES.md` lists the material that is not the package owner's property, with its terms: the shadcn/ui components, hooks, `lib/utils.ts`, `lib/highlighter.ts` and `styles/tailwind.css` (MIT, with the full licence text), and the brand marks of the sign-in icons (trademarks of their owners; source of the path data not established). `LICENSE` now says that its proprietary notice does not cover that material. No licence term of the package's own code changed. - **Byte-identical checkout.** The package carries `.gitattributes` with `* -text`: Git converts no line end in it, so a checkout with `core.autocrlf=true` keeps the bytes its content hash names. - **The package checks itself in a consumer.** Tests that read the source repository (its applications, active-grid, its formatter configuration) moved to `host-tests/`, which is not transferred; the tests in `src` and `scripts` read only this folder (a package-local `read-if-present` helper replaces the source repository's file helper). `typecheck`, `test` and `lint` run in a consumer that also requests the lint preset. No test was dropped: four mixed suites were split, one assertion became two. ### Added (shadcn stock sync, 2026-10-19) - **`CodeBlock`** (`components/primitives/code-block`), from the official shadcn registry (`base-vega/code-block`, MIT, added upstream 2026-10-14): a bordered code, terminal, log and diff view with `CodeBlockHeader`, `CodeBlockTitle`, `CodeBlockActions`, `CodeBlockCopyButton`, `CodeBlockContent` (`wrap`, `lineNumbers`, `startLine`), `CodeBlockLine` (`default | added | removed | highlighted`) and `CodeBlockFooter`. `CodeBlockCopyButton` takes its accessible name and its polite announcement from the host (`label`, `copiedLabel`, both required) instead of stock's English `"Copy"`/`"Copied"`. The content area carries no `scrollbar-thin`: scrollbar appearance is the platform contract (ADR-026). - **`Trace`** (`components/primitives/trace`), from the official shadcn registry (`base-vega/trace`, MIT, upstream 2026-10-14), exact stock: a list of steps with `TraceLine` (`status`: `running | error | pending`), `TraceIcon`, `TraceTitle`, `TraceDescription` and an expandable `TraceCollapsible` with trigger and content. It shows what the host passes; it runs and records nothing. - **`useHighlightedCode`** (`hooks/use-highlighted-code`) and **`loadHighlighter`/`highlightCode`** (`lib/highlighter`), from the registry item `use-highlighted-code`: syntax highlighting with shiki, one React node per line, light and dark colours, incremental while text streams. Thirteen languages plus ANSI; an unlisted language returns plain lines (hook) or `null` (lib). Shiki's core, engine, languages and themes load on first use, so a barrel import pulls no highlighter into a bundle (declared deviation `highlighter-lazy-core`). - New dependency **`shiki` `^4.5.0`**. ### Changed (shadcn stock sync, 2026-10-19) - **`@base-ui/react` 1.9.0** (was 1.8.0): fixes only for the components here (Select and Combobox typeahead reset and faster large lists, Popover and Menu focus guards, Toast timers during overlapping interactions). No declared deviation changed; `select-items-derivation` and `popup-border` still hold on 1.9.0. - **`cn` 0.3.3** (was 0.3.0, same 0.3 line): an axis utility now overrides its logical sides (`px-*` replaces an earlier `ps-*`/`pe-*`), and custom `animate-*` classes are no longer merged away. This matches what stock components expect. - **`styles/tailwind.css`** replaced by `dist/tailwind.css` of shadcn 4.21.4 (the new CLI pin, was 4.16.2): `shimmer` stops animating under `prefers-reduced-motion: reduce`. - `lucide-react` 1.55, `react-day-picker` 10.0.2, `react-resizable-panels` 4.14.4; test tooling `vitest` 5.0.4, `happy-dom` 21.0.1, `jsdom` 30.1.2. ### Fixed - **`SearchCombobox`: typing on the button no longer changes the value.** Base UI's trigger typeahead committed the first matching option on a single key while the button had focus (a focused closed button, or right after a click before the search field had focus). A printable key on the button now opens the menu and starts the query in the search field; Space still opens; only an explicit choice changes the value. Reaches `NationalityCombobox` and `CurrencyCombobox`. No prop changed. - **`LocalDateTimeField` reports its state again when a new `value` from outside ends an edit** (a form reset, a loaded record): `valid` or `empty`, so a host's submit guard on `onStateChange` is released. The docs now state that a form that saves must refuse to submit on `incomplete` or `invalid`: the kept previous value is data-loss prevention, not permission to save it. ### Added (ADR-039) - **`TimeField`** (`components/composed/time-field`): a time of day as a `LocalTimeString`, in the presentation's clock (`H24`/`H12`), with `precision`, `step` and `min`/`max` that refuse and never round. - **`LocalDateTimeField`** (`components/composed/local-date-time-field`): `DateField` plus `TimeField`, one `LocalDateTimeString` wall-clock value without a zone; `min`/`max` on the pair, `timeZoneLabel` as host text. - **`CurrencyCombobox`** (`components/composed/currency-combobox`): the sister of `NationalityCombobox`; the host supplies `{code, name}[]` in order. - `SearchCombobox`: `readOnly` (the list stays closed) and `required` (`aria-required`). `DateField`: `readOnly` (the calendar button is disabled). ### Changed (ADR-039) - **Light `--muted-foreground` is `oklch(0.52 …)`** (was `0.54`): muted text on `--muted` reaches 4,65:1 instead of 4,27:1. Every muted text in the light theme is slightly darker, `--separator` included. A host that redeclares the neutral tokens in its own blocks moves them along (Datyx: active-config's accent themes). `surface-ladder.test.ts` now also measures the pair against `--muted`. No prop changed; no import breaks. ### Changed (platform ADR-114) - **`next` is an optional peer only**, no longer a devDependency: a consumer that does not use the two Next integrations installs no Next (owner decision W2). In Datyx pnpm links the optional peer for this package's own typecheck and tests. The formatter vocabulary (date and zone brands, presets) that the composed fields name now comes from `@workspace/active-format`; the managed set of an active-ui consumer is active-ui and active-format. ### Changed — BREAKING for the managed package set (ADR-038) - **Formatting now comes from `@workspace/active-format`**, not from the `formatters` entry of a translation package. The package declares `@workspace/active-format` instead of `@workspace/active-i18n` and imports nothing from a translation package, type-only imports and tests included. Component props are unchanged: `DateField.locale` is still a `DatePresentation`, `NumberField.locale` a `NumberPresentation`, and every text is still an explicit prop. - A consumer that imports the formatters itself (for example `getDateFnsLocale` for `Calendar` or `todayIsoDate` for `DateField`) imports them from `@workspace/active-format`. --- ## \[7.0.0\] — 2026-10-18 ### Changed — breaking for a host: Datyx values to the host (2026-10-18, RPS-END / ADR-037, platform ADR-112) - **Removed exports** (moved to the Datyx host layer, unchanged in value): `./fonts.css` and the font files under `assets/fonts` → `@workspace/active-config` (`platform-appearance.css`, `assets/fonts`); `./grid-theme.css` → `@workspace/active-config` (in `platform-appearance.css`); `./lib/colors` → `@workspace/active-config/appearance/accent-colors`; `./lib/font-registry` → `@workspace/active-config/appearance/platform-fonts`; `./lib/sidebar-cookie` → `@workspace/active-config/constants/sidebar-cookie`. The six `.theme-*` accent blocks left `themes.css` for `@workspace/active-config` as well. - **Removed from `./lib/theme-registry`** (moved, unchanged in value, to `@workspace/active-config/appearance/website-theme`): `THEME_NEUTRAL_REGISTRY`, `THEME_RADIUS_REGISTRY`, `THEME_FONT_REGISTRY`, `themeFonts`, `themePresets`, `themeNeutrals` and the types `ThemeFontConfig` and `ThemePreset`. `NEUTRAL_TOKEN_NAMES`, `NeutralTokenName`, `ThemeNeutralFamily`, `neutralLadderStep` and `neutralExtremes` stay. - **`globals.css`** (the kit) is `_head` → `themes` → `typeset` → `_base`: no platform font and no grid mapping. The `--font-sans` floor moved with the platform fonts; without it `--font-sans` is Tailwind's sans stack. **Migration:** a Datyx host imports `@workspace/active-config/platform-appearance.css` right after the kit; another host supplies its own fonts and, if it wants them, its own grid mapping and accent classes. - **`ThemeProvider` requires `accentClasses`** (accent key → body class or `null`); its keys are the accents a cookie may carry. **Migration:** pass `{default: null}` for a host without accents; Datyx's `PlatformThemeProvider` passes the platform map. - **`SidebarProvider` writes no cookie.** A new optional `persistOpenState` receives every change of the open state. **Migration:** Datyx layouts render `PlatformSidebarProvider` (active-auth-ui). Another host that relied on the former `sidebar_state` cookie passes its own writer and reads the stored value back into `defaultOpen`; without one the open state lasts as long as the page. - **`lib/theme-registry` and `lib/theme-derivation` take values** (`ThemeSeeds`: brand colour, neutral, radius, body and heading family) instead of preset keys. **Migration:** resolve stored keys with `resolveThemeSeeds` from `@workspace/active-config/appearance/website-theme`. - **No dependency on `@workspace/active-config`** any more; the fontsource and `geist` packages left the manifest. Canonical manifest and a self-contained `tsconfig.json` (no workspace devDependency; `tsconfig.lint.json` removed). ### Fixed (2026-10-18, AUR-F18) - **`resolvedTheme` under `system` no longer causes a hydration mismatch.** It reads the system preference through `useSyncExternalStore` with the server snapshot `light`: the first client render equals the server render, then it follows the system. Test: `theme-provider-hydration.test.tsx`. ### Documented — external proof (2026-10-18, RPS-F5) - `ARCHITECTURE.md` § Hergebruik en overdracht names what the external proof established for a host: the declaration packages `@types/react` and `@types/react-dom` as optional peers of the generated manifest, theme scripts that need a server render, and Next with or without `transpilePackages`. No code change. - `ROADMAP.md`: `AUR-F18` reproduced (UI Lab package labs, pre-existing); a repair still needs its own decision. ### Changed — breaking for a host (2026-10-18, decoupling AUR-P1 to P5A / ADR-033 to ADR-036) - **Base, kit and host stylesheet** (ADR-033). New `./styles.css` (the base: Tailwind, own `@source`, tokens, base contracts; no platform font). The kit `./globals.css` keeps the old cascade order but no longer registers any source outside this package, no longer imports KaTeX and no longer carries `a:hover` or `nextjs-portal`. A host imports the base or the kit from its own stylesheet and adds its sources, KaTeX (`@workspace/active-content/styles.css`) and its host rules there. New optional exports `./fonts.css` (now with the `--font-sans` floor) and `./grid-theme.css`. **Migration:** every Datyx app imports `apps//app/styles.css` instead of `@workspace/active-ui/globals.css` and has its own `postcss.config.mjs`. - **`AppLoadingBar`** draws with its own `.active-ui-progress-bar` and `@keyframes active-ui-progress` instead of the grid's class and keyframes; same steps and colour. - **`StatCard` and `DashboardServiceRow` render a native ``** unless a `linkComponent` is passed (ADR-034). **Migration:** every Datyx caller with `href` passes `linkComponent={Link}` (`next/link`). - **`SearchParamTabs` and `useSearchParamState` left the barrels** (composed, hooks and package root); import them by their subpath (ADR-034). No Datyx importer used a barrel for them. - **`ThemeProvider` takes the host's values** (ADR-035): `fonts`, `fallbackFont` and an optional `persistence` ({`cookieNames`, `writeCookie`}); `cookieDomain` is gone. **Migration:** Datyx mounts `PlatformThemeProvider` from `@workspace/active-auth-ui`; `useTheme` is unchanged. ### Added (2026-10-18) - `lib/link-component` (`LinkComponent`, `LinkComponentProps`); the types `ThemePersistence`, `ThemeProviderProps` and `CookieBackedPreference`. - `public-api.json` `frameworkIntegrations`; `API.md` marks those modules. ### Changed — manifest (2026-10-18) - `next` is an optional peer; `tailwindcss` ^4 a required peer; `@tailwindcss/postcss` an optional peer (for `./postcss.config`). - `date-fns` and `@date-fns/tz` are declared (the `active-i18n/formatters` entry imports them); `katex` moved to active-content; the font source packages are dev dependencies (only `scripts/vendor-fonts.mjs` reads them). - active-ui reaches active-config only through `./constants/appearance` and `./constants/theme`, and `LocaleCode` through `active-i18n/formatters`; `Calendar` no longer types its label table on the platform language set. ### Changed (2026-09-29, portable runtime P4 / ADR-032) - **`Calendar` accepts every locale active-i18n accepts.** The five Datyx product languages keep react-day-picker's label sets exactly; any other locale keeps the `labels` its locale object carries, or gets Intl-derived labels (`getCalendarPhrases`). The render-time refusal of ADR-024 D4 is gone. Day numbers follow the locale's numbering system; the month dropdown asks Intl for the Gregorian calendar. - **`NumberField` reads any accepted locale** through the shared active-i18n parser (the one `GridNumberInput` uses): the locale's separators, native digits, Indian grouping on paste and the U+2212 minus. No API change; the five product languages parse exactly as before. ### Changed (2026-09-28, active-charts theming T5 / ADR-030) - **The Datyx chart palette is candidate A** (Walt's choice in T4). All twenty chart roles in `:root` and `.dark` of `themes.css` carry the new values: categorical theme blue, orange, green, cyan, coral, slate, sky, navy, teal, lime; new semantic, sequential and diverging values; on-fill unchanged. Light `--chart-1` is the light `--primary` as a literal; dark `--chart-1` keeps its hue, lighter. Every app sees the new palette through `globals.css`; no app changes, no accent block changes, no API. `src/__tests__/chart-palette.test.ts` pins the values in both modes. ### Removed (2026-09-28, active-charts theming T3 / ADR-045) - **`--bullet-bar` and its alias `--color-bullet-bar`.** The chart package no longer reads a bullet-specific role: the value bar is drawn in the on-fill token that contrasts with what lies beneath it. The declarations in both colour modes of `themes.css` and the `bg-bullet-bar` utility are gone; no palette value changed. ### Changed (2026-09-28, active-charts theming T1 / ADR-043) - **`globals.css` no longer registers the `active-charts` source for Tailwind.** The chart package uses no utility classes and loads its own stylesheet; its charts read the `--chart-*` tokens of `themes.css` directly. The compiled stylesheet was byte-identical with and without the registration. The `--chart-*` values and the `--color-chart-*` aliases stay; as with every `@theme` alias, Tailwind emits an alias where scanned host source uses it. ### Changed (2026-09-27, active-charts W18 / ADR-039) - **The six accent themes no longer redefine `--chart-1..10`.** The categorical chart palette belongs to the chart token contract, not to the accent (active-charts ADR-039, W18; closes active-charts AC-V6). Every accent theme now inherits the measured `:root` or `.dark` palette, so the chart palette budgets (distinction, contrast, colour-vision deficiency, dark mode) hold under every accent. The accent blocks carried the unmeasured stock-shadcn palette (orange first) until now. Charts read `--color-chart-*`, resolved on `:root` by `@theme inline`, and already kept the measured palette; the Tailwind chart utilities, which read `--chart-*` on the element, showed the accent palette instead. ### Added (2026-09-23, ADR-029) - **`ListScrollArea`** is public API at `@workspace/active-ui/components/composed/list-scroll-area`: the scroll viewport of a long popup option list, with the house scrollbar, no tab stop and `overscroll-contain`. The list inside gives up its own height limit and overflow (`max-h-none overflow-visible`). It moved from the internal `primitives/_parts`; there is no alias on the old path. ### Changed (2026-09-23, AGRID-CELL-SELECTION-UX-IMPL-01) - **The grid's active cell and cell range are drawn from the grid's state only** (`styles/grid-base.css`, CELL SELECTION AND THE ACTIVE CELL; `styles/grid-interactions.css`). The active cell's inset box-shadow ring on `.grid-cell[role='gridcell']:focus` is gone: the browser's focus and the grid's `data-focused` could disagree, and every disagreement drew half a state (a cue without a ring, a ring inside a range). One overlay (`::after`) now draws the line and fill of both the active cell and a range, from `data-focused`, `data-cell-selected`, `data-cell-edge-*`, `data-cell-cue`, and the grid-level `data-body-focus`, `data-cell-selection` and `data-cell-range` that active-grid sets. The active cell outside a range is one square pixel at 50% of `--ring`, plus the 5 px cue with cell selection on; inside a range it is an unfilled window without a mark of its own; a range has one outline and one cue. When the grid's body loses the focus the active cell draws nothing and a range stays. Square corners throughout. - **The tokens moved to `.grid-root`**: `--grid-range-outline` (was on `.grid-cell`) and the new `--grid-range-fill`, both theme-derived. - **The row-hover background changes at once.** Its 100 ms fade started under a freshly drawn mark on the first click after a reload (the browser applies no hover until the first pointer event), which read as bright-then-dim. - **While a cell range is on screen**, the row of the active cell takes no `:focus-within` tint, which crossed the range as a second band. - **Forced colours**: a range is `Highlight` with `HighlightText`, its window `Canvas`, and the active cell carries a 2 px `Highlight` mark; the platform focus outline on a body cell gives way to it. - **Removed** the token `--grid-z-cell-focus`. ### Changed (2026-09-23, AGRID-RANGE-CONTEXT-C) - **A grid cell range is painted, not bordered** (`styles/grid-base.css`, CELL SELECTION). The range drew a 2 px `--primary` border on its outer edges, which took its width from the cell's content box: on every edge change, and during a drag, the text in the cell moved by up to 1.6 px. The outline is now an `::after` overlay of one pixel at 50% of `--ring` (the field focus of ADR-022, the same value the active cell draws), the fill is 8% of `--ring`, and the far corner of each range carries a 5 px square cue (`::before`). Neither pseudo-element takes the pointer; the cue is not a fill handle. A single selected cell shows the cue; on the active cell a one-cell range adds no outline or fill of its own. New token: `--grid-range-outline` on `.grid-cell`. Measured in `@workspace/active-grid` `e2e/cell-range-presentation.spec.ts`. ### Changed (2026-09-23, AUI-S0-011b) - **The combobox icon buttons require a caller-supplied accessible name.** `ComboboxInput` with `showClear` now requires `clearLabel`, and a removable `ComboboxChip` (the default) requires `removeLabel`; `showRemove={false}` needs none. Before, both rendered an icon-only button without a name. Breaking at the type level only; no workspace caller used either. ### Fixed - **Grid focus follows the accent theme, at the field-focus strength.** `grid-base.css` declared the theme-derived grid tokens (filter focus border, active-filter icon, resize hover, filter hover, header and separator colours) on `:root` only. A `var()` inside a custom property resolves where it is declared, so they read ``'s default `--ring` and `--primary` and missed the `.theme-` accent on ``: a focused grid filter showed blue under a green accent. They are now declared on `:root, .grid-root`, the grid's outer element. The active cell's inset mark moved from the full `--ring` to 50% of it, the field focus of ADR-022. `input-focus-family.test.ts` binds both. - **The active grid cell is marked when a click makes it active.** `grid-interactions.css` marked the focused body cell with a rule of the same specificity as the global `*:focus:not(:focus-visible)` suppression in `globals.css`, which came later and won: a cell focused by the pointer showed no mark until an arrow key moved focus on. The rule is now `.grid-cell[role='gridcell']:focus`, one inset mark for pointer and keyboard alike, also in forced-colors mode. An editor inside the cell keeps its own field focus. - **A grid sort label focused by the pointer shows no keyboard ring.** A held Shift (multi-sort) auto-repeats, and the browser then treated the clicked label as keyboard-focused. `.grid-header-cell-label[data-pointer-focus]` withholds the ring; `@workspace/active-grid` sets and clears the attribute. Keyboard focus on the label keeps its ring. --- ## \[6.0.0\] — 2026-09-21 Everything after 5.0.0, newest first. The version was bumped to 6.0.0 with AUI-03 (2026-08-12); the later entries, several of them BREAKING, belong to the same major and were cut together on this date (VERSION-001, decided by Walt on 2026-09-21). ### Changed — BREAKING (2026-09-19, I18N-FINAL-007) — `Toaster` takes its labels from the host - **BREAKING: `Toaster` requires `regionLabel` and `closeLabel`.** It no longer calls `useTranslations()` and names no translation key; the host translates both names with its own product translator. There is no default text, and `` without them does not compile. It no longer needs to sit inside an `I18nProvider`. All ten consumers (the Datyx app layouts) migrated in the same workstream: each passes `t('common.toast.regionLabel')` and `t('common.button.close')` from the typed server translator. Stock deviation `toast-translated-labels` now describes the required props; ADR-025 amendment. ### Changed (2026-09-19, AUI-FINAL-REM-03) — scrollbar hover calibration - `--scrollbar-thumb-hover` is the foreground at 18% (was 25%): the thumb under the pointer and while scrolling is a subtler step above rest, in dark and light, for the house `ScrollArea` and active-grid alike (one shared token). Rest, geometry and the state model are unchanged. Measured in Chrome: dark hover rgb(52,52,54) (was rgb(69,69,70)) over rest rgb(33,34,36); light hover rgb(202,202,203) (was rgb(185,185,187)) over rest rgb(228,228,231). - Test hygiene (F07, completed): the composed-picker walk of `scrollbar-contract.test.ts` also reads each module through safe-walk (`readFileIfPresent`); no runtime change. ### Changed — BREAKING (2026-09-19, AUI-FINAL-REM-02) — Codex final review F05 to F08 - **BREAKING: the low-level toast parts own no text (F05).** `ToastViewport` requires `aria-label`, the translated name of the toast region; omitted, Base UI named it `Notifications` in every language. `ToastClose` without `children` is an X icon and requires `aria-label`; with its own naming `children` it takes no `aria-label` (the `MessageScrollerButton` shape). Type change only, no English default. `Toaster` already supplied both names and is unchanged; there are no other consumers. Stock deviation `aui09-caller-labels` extended to toast. - The five `scripts/` files that failed `format:check` (F06) now use LF line endings; their content is otherwise byte-identical. Test hygiene (F07) and stale JSDoc examples and architecture prose (F08) corrected; no runtime change. - Strict drift: 27 exact, 35 accepted (targets), 0 pending, 0 unexplained. ### Fixed (2026-09-19, UI-SCROLLBAR-03) — sidebar and grid thumb render the same colour - **The DOM thumbs are painted over `--background`.** In dark both thumb tokens are translucent (`--border` is white at 10%, the hover token the foreground at 25%), so as a plain `background-color` they took the colour of the surface behind the bar. Measured in Chrome on `/users`: the same token rendered rgb(47,48,50) on the sidebar and rgb(33,34,36) on the grid at rest, rgb(80,80,82) against rgb(69,69,70) on hover. Both thumbs (`globals.css` `[data-slot='scroll-area-thumb']`, `grid-theme.css` `.grid-scrollbar-thumb`) now paint the token as a gradient layer over `var(--background)`: measured after, rest rgb(33,33,35) and hover rgb(69,69,70) on both in dark, and rgb(228,228,231) and rgb(185,185,186) on both in light. The grid's quieter rest is the target. Tokens, the state model, native bars and `ScrollArea` (exact stock) are unchanged; forced colours clear the layer. ### Fixed and Changed — BREAKING (2026-09-19, AUI-FINAL-REM-01) — Codex final review F01 to F04 - **Pending buttons stay disabled (F01, P2).** `SubmitButton` and `SaveAndContinueButton` declare `disabled?: boolean` and render `disabled={isPending || disabled}`. Before, a caller's `disabled` travelled in the rest props and was spread after the pending state, so `disabled={false}` re-enabled a pending button while its spinner showed; the Admin API-key editor (`disabled={!isDirty}`) reached it. Additive type change; no caller changes. - **BREAKING: `Calendar.today: Date` and `DateField.today: string` are required (F02).** The owner's calendar day drives the today marker, the month an empty calendar opens on and `DateField`'s navigation range. Nothing in the package reads the runtime clock any more; `DateField` no longer calls `new Date().getFullYear()`. No fallback. All consumers were migrated in the same tranche (see `DONE.md`); stock deviation `calendar-caller-today` added. - **An autofilled invalid field keeps its destructive border (F03).** In dark, the `!important` autofill border colours beat `aria-invalid:border-destructive/50`. A last rule of equal specificity on `[aria-invalid='true']` restores the same subdued destructive border in every state, without a ring or box-shadow. Light was not affected. - **Toast timeout lookup is own-key-safe (F04).** `resolveToastTimeout` resolves only own registered keys (`Object.hasOwn`); `constructor`, `toString`, `__proto__` and every other unknown string get `DEFAULT_TOAST_TIMEOUT_MS`. Public types unchanged. - Strict drift: 27 exact, 35 accepted (targets), 0 pending, 0 unexplained. ### Documentation (2026-09-19, AUI-FINAL-CLOSEOUT-01) — review and research lifecycle closed - No code, API or runtime change. The final review cycle is closed; its outcomes live in `DECISIONS.md`, `ARCHITECTURE.md`, `ROADMAP.md` and `DONE.md`. The package no longer carries temporary research or review documents: the UI-EXP-012 decision context moved to `ROADMAP.md` § 1, and references to earlier removed research now point at their canonical owner. ### Documentation (2026-09-18, AUI-DOC-01) — canonical docs reconciled with the source - No code, API or runtime change. README, INDEX, ARCHITECTURE, FUNCTIONEEL-OVERZICHT, API.md prose, ADDING-COMPONENTS and `forms/FIELD-GUIDE.md` now describe the current package. Claims that could mislead a consumer were corrected: an app imports only `globals.css` (not also `themes.css`); the knowledge and help components live in `@workspace/active-docs`; `Pagination` `text` is required; the Field Guide's imports, keys and action-call shape now resolve against the current source. - `DECISIONS.md`: ADR-024 gained the Calendar ownership boundary and revisit triggers (react-day-picker stays the engine); ADR-006 and ADR-012 are qualified. - `ROADMAP.md` now carries open work only; closed temporary research was removed after its conclusions moved to their canonical owners. ### Changed — BREAKING (2026-09-18, AUI-FOLLOWUP-02) — Questionnaire progress and error text are the caller's - **`QuestionnaireProgress`**: new required props `label: string` (the progressbar's accessible name) and `formatProgress: ({current, total}) => string` (the sentence, in the caller's language and word order). The same sentence is shown and is the `aria-valuetext`; it is called only while there are items to count. `children`, `render`, `aria-label` and `aria-valuetext` are no longer props: the wrapper owns those slots so the headless primitive's English "Questionnaire progress" and "Question X of Y" cannot surface. The numbers (`aria-valuenow`, `-min`, `-max`) stay the primitive's. - **`QuestionnaireError`**: `children` is required. The primitive's fallbacks "Choose an answer to continue." and "Choose an answer or skip this question." are unreachable for any caller that compiles. - Interaction, focus and navigation are unchanged. Stock deviation `aui09-caller-labels` extended with three questionnaire snippets; strict drift 27 exact, 35 accepted, 0 pending, 0 unexplained. ### Changed — BREAKING (2026-09-18, AUI-FOLLOWUP-01) — caller-owned text and names, no silent defaults - **`MessageScrollerButton`**: `label` is required while the button is an icon (no `children`), and excluded next to caller `children`, which then name the button. An icon-only jump button can no longer render without an accessible name (AUI-S0-011a). Same shape as `DialogContent.closeLabel`. - **`QuestionnairePrevious`, `QuestionnaireSkip`, `QuestionnaireNext`, `QuestionnaireSubmit`**: `children` (the visible label) is required. The English fallbacks "Previous", "Skip", "Next" and "Submit" are gone from active-ui; the headless `@shadcn/react` primitive still has them, so the required type is the guard (AUI-S0-011c). - **Questionnaire shortcut badge** is set in the UI typeface: `font-mono` removed (stock deviation `questionnaire-shortcut-typography`). - **`NationalityCombobox`**: `placeholder`, `searchPlaceholder` and `emptyText` are required, with no empty-string default and no fallback from `searchPlaceholder` to `placeholder` (the `SearchCombobox` contract). New prop `aria-invalid`, forwarded to the trigger button, where the field's invalid border keys on it; before, a caller's `aria-invalid` was silently dropped. Consumers: the `active-auth-ui` address form already passed all texts and `aria-invalid`; the `apps/admin` administration form now passes `aria-invalid` too. - **UI Lab**: `/ui-lab/composed/nationality-combobox` (six cases: caller list with search and scrollbar, `showCode`, subset, entries outside ISO, invalid, disabled). The `deferred` classification in `public-api.json` is removed. - **Stock deviations**: `calendar-caption-select` updated to the approved UI-SCROLLBAR-02 source (list below the trigger in `ListScrollArea`); its snippet predated the final edit. `aui09-caller-labels` extended to `questionnaire`. Strict drift: 27 exact, 35 accepted, 0 pending, 0 unexplained. ### Changed — BREAKING (2026-09-18, AUI-DEC-IMPL-01) — `NationalityCombobox` receives its countries from the caller - **New required prop `options: readonly NationalityComboboxOption[]`**, with the new exported type `NationalityComboboxOption` (`{code: string; name: string}`). The component renders exactly these entries, in this order, under these names. There is no built-in list and no fallback: omitting `options` is a type error. - **Removed from the component**: the embedded ISO 3166-1 list (249 codes), the embedded priority list (18 codes), the `Intl.DisplayNames` name lookup and the alphabetical sort of the tail. Which countries exist, what they are called in the reader's language and which come first are reference data and project policy, owned by the caller (ADR-028). `locale` stays required: it drives search matching, no longer the names. - **Unchanged**: the value is the code, the code is searchable without being shown, `showCode` renders `CODE - Name`, and every other prop. - **Migration**: pass the dataset. Datyx callers use `useMemo(() => getCountryOptions(locale), [locale])` from `@workspace/active-utils/helpers`, which returns the same codes, priority order, names and sort as the removed code; both consumers (`apps/admin` administration form, `active-auth-ui` address form) are migrated. active-ui gains no dependency: the type matches that shape structurally. - Proof: `nationality-combobox.test.tsx` (caller order, subset, empty array, non-ISO entries, names verbatim, locale-driven matching, `@ts-expect-error` witness for a missing `options`) and `src/__tests__/reference-data-ownership.test.ts` (no import of, and no dependency on, `@workspace/active-utils`). ### Decided (2026-09-18, AUI-DEC-IMPL-01) — zero consumers is not a removal reason - The conversation primitives (`attachment`, `bubble`, `marker`, `message`, `message-scroller`) and `questionnaire` stay. active-ui is reusable infrastructure for current and future projects; today's consumer count does not decide what it offers (ADR-027). No source or public API changed. ### Changed (2026-09-18, UI-SCROLLBAR-02) — one scrollbar experience across Datyx - **Pickers show the house scrollbar.** `SearchCombobox`, `SearchMultiCombobox`, `AsyncCombobox` and `NationalityCombobox` scrolled their list with the bar hidden (stock `ComboboxList`: `no-scrollbar`), so a 500-option list gave no position and no thumb to drag. The list now scrolls in the new internal `ListScrollArea` (`primitives/_parts`), which draws the stock `ScrollBar`: same lane, thumb, hover and scrolling state as the sidebar. Keyboard, `aria-activedescendant`, typeahead and selection are unchanged Base UI; the Viewport is not a tab stop (`tabIndex -1`, measured: Chrome otherwise put an unnamed focusable element in the popup) and keeps `overscroll-contain`. - **Calendar month and year are the platform `Select`**, behind react-day-picker's documented `Dropdown` extension point, instead of the native ``, whose popup belongs to the browser and is reached by `color-scheme` only). - **Native default**: every element gets `scrollbar-width: thin` and the token colours in layer `base`, standard properties only. Hiding utilities and Base UI's own `scrollbar-width: none` still win. - **`ScrollArea` thumb** reads the tokens through its `data-slot`, and takes the hover token under the pointer and while scrolling (`data-scrolling`). The primitive itself is unchanged exact stock. - **Forced colours**: the `ScrollArea` thumb is `CanvasText`; it vanished there before, because the browser replaced its background with `Canvas`. - **Grid tokens** `--grid-scrollbar-thumb`, `-thumb-hover` and `-track` alias the contract (`grid-base.css`); the grid thumb gets the same forced-colours rule (`grid-theme.css`). - No new public API and no new stock deviation (strict drift 27 exact, 35 accepted). Proof: `src/__tests__/scrollbar-contract.test.ts`; gate `lint-scrollbar-contract.mjs`. ### Fixed — BREAKING (2026-09-18, AUI-A11Y-N01) — the search field inside a picker menu has an accessible name - **New required prop `searchLabel: string`** on `SearchCombobox`, `SearchMultiCombobox`, `AsyncCombobox` and `NationalityCombobox`. It becomes the `aria-label` of the search field inside the menu. That field has no visible label, so until now a screen reader announced it as an unnamed combobox. `searchPlaceholder` stays a separate prop and is never used as the name. - **Migration:** pass translated caller wording, typically the contextual search key the call site already uses for `searchPlaceholder`, or the field's own label. Omitting the prop is a compile error; there is no fallback. - The primitive `ComboboxInput` is unchanged (stock). - Tests: `Stepper` and `DescriptionItem` no longer pin their props contract with `Object.keys(component)`, which is always `[]`; typed assertions replace it and fail typecheck when such a prop appears. ### Changed (2026-09-18, AUI-STD-02) — authored source brought onto CODING\_STANDARDS - **Array inputs accept readonly arrays.** `SearchCombobox.options`, `SearchMultiCombobox.options` and `value`, `AsyncCombobox`'s `onSearch` result, `ResponsiveTabs.tabs`, `Stepper.steps` and `PasswordStrengthIndicator.criteria` are typed `readonly T[]`. The components never mutated them; a caller can now pass an `as const` or otherwise readonly array. Widening only: every existing call site still typechecks. Callback parameters (`onValueChange`) are unchanged. - The generated tables in `API.md` carry English column headers. - Internal: comments, TSDoc, test names and developer diagnostics are English; control-flow bodies are braced; nested ternaries, top-level arrow functions and avoidable type assertions are gone outside upstream-synchronised stock code. No runtime behaviour changed. ### Changed (2026-09-18, AUI-STD-01) — test evidence brought onto TESTING\_STANDARDS - **Test setup no longer leaks per-test state.** `setup.ts` registered one `resize` listener per `matchMedia()` call and never removed one, and the cookie value was never reset between tests. There is now a single window listener per file, and viewport width, media subscribers, cookies, theme classes and fake timers are restored in `afterEach`, including after a failing assertion. `document.cookie` reads back `name=value` as a browser does; attributes are available through `recordedCookieWrites()`. - **No always-green placeholders and no real-clock sleeps.** Four `expect(true).toBe(true)` carriers became comments; three zero-ms yields in the AsyncCombobox suite wait on the component's own promise instead. - **Honest test names.** Names and comments that claimed layout, visibility, colour or responsive behaviour now name the class or attribute they assert; the rendered outcome is browser evidence. - Source walkers use the repository safe-walk helpers. No runtime behaviour and no public API changed. ### Changed (2026-09-17, UI-FOCUS-01) — one field focus for every input-like control (ADR-022 amendment) - **InputGroup, ComboboxChips, InputOTP, the Questionnaire text input and the Calendar month/year frame** carry the field focus: a border at 50% of `--ring` without `ring-3`, and an invalid border at 50% of `--destructive` without a ring. Declared as `field-focus-calibration`; strict drift is clean. Inside a combobox menu the search field no longer draws the full `--ring` border plus a 3px ring that the stock reset failed to remove. - **SearchCombobox, SearchMultiCombobox and AsyncCombobox triggers** keep rendering `Button` but take the field focus through `className`, replacing the button's `ring-3` focus and invalid ring. `Button` is unchanged. - **`--grid-filter-trigger-focus-border`** defaults to 50% of `--ring`. - No public API change. New guard: `src/__tests__/input-focus-family.test.ts`. ### Changed — BREAKING (2026-09-17, AUI-CORR-05) — presentation is a caller-owned capability (ADR-025) - **`Today.today` is required**: the current calendar day as ISO `YYYY-MM-DD`, from the caller's business zone (`todayIsoDate(timeZone)`). `Today` no longer reads `new Date()`; it selects and marks that day, including DayPicker's own `today` modifier, and throws on a value that is not a calendar day. The six dashboard callers derive both the heading (`formatDateOnly(today, 'full', presentation)`) and this prop from one value. - **`SearchCombobox.locale` and `SearchMultiCombobox.locale` are required** (`LocaleCode`) and reach Base UI's collator filter. Before, matching followed the browser's locale; under `es`, `Espana` no longer finds `España`. All 55 call sites in 45 files pass the reader's `useLocale()`; `NationalityCombobox` forwards its own `locale`. - **`AnnouncementBannerProps` is now a type union**: `dismissible: true` (or a runtime boolean) requires `dismissLabel`, the only name of the icon-only dismiss button. A banner that is never dismissible needs no label. No default label exists. - New gate `lint-ui-presentation-capability.mjs`: active-ui source imports no value from `@workspace/active-i18n/react` except the registered `Toaster` exception, and reads no host language or time zone. ### Fixed (2026-09-17, AUI-CORR-04) — small P3 runtime, a11y and contract fixes - **`ResponsiveTabs` mobile menu** is as wide as its trigger (`w-(--anchor-width)`; the former `w-[--anchor-width]` yielded no width) and exposes the tabs as one radio choice: the current tab is a `menuitemradio` with `aria-checked="true"`. The check mark is now the primitive's indicator for that state. Choosing still calls `onValueChange(value)` and closes the menu. - **`FullScreen`** consumes a refused `requestFullscreen()` or `exitFullscreen()` instead of leaving an unhandled rejection. Its state already follows `fullscreenchange`, which a refusal never fires, so it stays correct. - **`resolvePlatformFont`** resolves only registered font keys; inherited keys such as `constructor` or `toString` fall back to the default font like any other unknown key. - **`IconName`** names only lucide icon components (aliases included); `icons`, `createLucideIcon`, `LucideProvider` and `useLucideContext` are no longer accepted, and `DynamicIcon` no longer needs a type assertion. No consumer passed one of those four. - **Barrels**: `@workspace/active-ui/components/composed` now re-exports `announcement-banner` and `search-multi-combobox`, and `@workspace/active-ui/lib` re-exports `sidebar-cookie`, as `public-api.json` already declared. A register-derived test keeps every area barrel and the package root complete and free of internal modules. - **`ErrorScreen`** shows its reference in the UI font (weight 500) instead of a monospace `` element (PAGE\_STANDARDS § 3). - No props added or removed. ### Changed — BREAKING (2026-09-17, AUI-CORR-02) — Calendar: native month/year selects, required locale, translated labels - **`Calendar.locale` is required.** Formally breaking for the prop type. The three repository callers that passed none (active-grid `DateEditor`, active-content date node, mdm calendar detail) now pass the locale of their own presentation; no other consumer changed. - **Accessibility labels come from react-day-picker in the locale's language** (`Ga naar vorige maand`, `Kies de maand`, `…, geselecteerd`) instead of the English defaults. A locale whose language has no label set in the calendar's table, such as `en-US` or `it`, now throws at render instead of rendering English (ADR-024). - **Month and year are react-day-picker's native `` met `inputMode="decimal"` waarvan de weergave, de placeholder en de ontleding alle drie uit dezelfde meegegeven presentatie komen, zodat zij per constructie niet uit de pas kunnen lopen. **Waarom niet het native getalveld.** Gemeten in Chrome 151 onder een Nederlandse browser (UI-EXP-017), en het `lang`-attribuut van de pagina verandert er niets aan: ```text getypt "1234,56" -> value wordt "1234.56" komma stil omgezet getypt "1.234" -> value wordt "1.234" = 1,234; niet 1234 geplakt "1.234,56" -> value wordt "1.23456" GELDIG, en duizend keer mis ``` Daar bovenop is `selectionStart` op zo'n veld `null` en gooit `setSelectionRange()`, dus cursorbeheer is er onmogelijk; en elke onleesbare invoer wordt de lege string, waardoor "ongeldig" en "leeg" niet te onderscheiden zijn. **De waarde is canonieke decimale tekst** (`'1234.56'`, leeg is `''`) en geen `number`: een `number` kan de lege toestand niet dragen. `locale` is een generieke `NumberPresentation`, net als bij `DateField`, dus het component blijft eigenaar-blind en de app-laag componeert. Vier invoertoestanden (`empty`, `incomplete`, `invalid`, `valid`), waarvan alleen de eerste en de laatste een waarde zijn; onleesbare tekst blijft bij blur staan. **Typen en plakken zijn twee grammatica's**: tijdens het typen bestaat groepering niet, bij plakken mag zij mits de posities kloppen en de tekst zonder conventiewissel leesbaar is. Daardoor is uitvoer van Datyx zelf, mét haar onzichtbare NNBSP- en NBSP-tekens, in een Datyx-veld te plakken. Wat er bewust **niet** in zit: een spinbutton (op een bedrag zinloos, en `stepUp()` gooit al bij `step="any"`), groepering tijdens het typen, en een valutasymbool in het veld. Labpagina met een case per geratificeerd gedrag; volledige regels in `docs/standards/PAGE_STANDARDS.md` § Getalvelden. ### Changed - **`DateField.locale` neemt een generieke `DatePresentation` in plaats van een taalcode** (WS-11, 2026-08-16). Het type is verbreed van `LocaleCode` naar `DatePresentation` (`LocaleCode | DatePresentationContext`) -- dezelfde verbreding die `active-grid` en `active-charts` bij WS-07 op hun `locale`-ingang kregen. **Achterwaarts compatibel**: een kale taalcode blijft geldig en betekent onveranderd "notatie volgt de taal". **De reden is correctheid en geen symmetrie.** De helpers onder dit component (`getDateInputPattern`, `classifyDateInput`, `parseIsoDateFromInput`) namen al een `DatePresentation` aan; alleen de prop hield hen op een taalcode vast. Daardoor bepaalde de **taal** de volgorde van dag, maand en jaar in het invoerveld, terwijl de grid ernaast de notatie van de administratie volgde: een administratie op `MDY_NUMERIC` toonde `12/31/2026` in de tabel en verwachtte `31-12-2026` in het veld (CR-A06). Wat er nu uit elkaar loopt zoals het hoort: de **structurele** vorm (invoervolgorde, scheidingsteken, placeholder, ontleding) volgt de notatie, de **woorden** van de kalender (maandnamen, weekdagnamen) volgen de taal. Het component blijft generiek -- het kent geen administratie, tenant of profielresolver; de app-laag componeert met `usePresentation()` en dit component ontvangt. Ambiguïteit wordt geweigerd en nooit geraden: onder `MDY_NUMERIC` is `31/12/2026` ongeldig (31 kan geen maand zijn) en betekent `01/02/2026` 2 januari. Er is geen tweede-volgorde-terugval. ### Fixed - **`DateField` maakt geen opgeslagen datum meer leeg op grond van onleesbare tekst** (CORR-01, 2026-08-15). Het component meldde `''` zowel voor een leeg veld als voor tekst die (nog) geen datum is, en zijn docblock verklaarde dat onderscheid uitdrukkelijk irrelevant voor de caller. Voor een **optioneel** veld met een geladen waarde was het dat niet: een formulier las die lege string als een bewuste wissing en de actie schreef `null`. Wie `12/` typte en opsloeg, wiste de bestaande datum. De getypte tekst wordt nu in vier toestanden ingedeeld (`classifyDateInput` in `@workspace/active-i18n/formatters`). Alleen `empty` en `valid` zijn een waarde; bij `incomplete` en `invalid` blijft de bestaande waarde staan, blijft de tekst zichtbaar en blijft `aria-invalid` gezet. ### Added - **`DateField`-prop `onStateChange?: (status: DateInputStatus) => void`** (CORR-01, 2026-08-15). Meldt bij elke toetsaanslag de toestand van de getypte tekst, zodat een formulier verzending kan tegenhouden zolang er onleesbare tekst staat. Optioneel: zonder deze prop is het component zelf al veilig — het maakt nooit een bestaande waarde leeg. Het onderscheid tussen `incomplete` en `invalid` bestaat zodat een veld geen fout meldt terwijl de gebruiker nog typt. ### Added - **`DashboardChartModule`, de schil van een grafiekmodule** (2026-08-13). Woont in hetzelfde bestand als `DashboardModule` en deelt daarmee kaartvlak, randbeleid, scheidingssterkte, ondergrens en voetzone: geen tweede ontwerpwereld. Eén verschil, en dat is de kop. **Waarom apart en niet een `description` op `DashboardModule`.** Een grafiek kan haar eigen selectie niet benoemen; "Afgelopen 7 dagen" is daar geen toelichting maar de reikwijdte van wat je ziet. Een lijstmodule labelt zichzelf met kolommen en rijen. Zou de generieke schil die prop krijgen, dan kreeg elke lijstmodule een vrije tekstregel erbij - dezelfde affordance die op dezelfde dag uit de beveiligingsmodule van het accountdashboard is verwijderd. **Contract**: `title`, optionele `description`, `className`, `children`. Geen periodekeuze en **geen voetzone** (gemeten: geen enkele grafiekmodule in de repository heeft een periodekeuze of een bestemming), geen charttype, geen kleuren, geen legenda, geen gegevens. `footerActions` heeft tijdens het bouwen bestaan en is bij de afsluiting verwijderd: nul consumenten, en "het is toch dezelfde voetarchitectuur" verklaart waarom hij makkelijk zou zijn en niet waarom hij er hoort. De kop is 56 px zonder reikwijdte en 62 px met; uniformiteit hoort binnen het moduletype en niet tussen een grafiek en een lijst. Gemigreerd: 18 grafiekkaarten in vijf apps. - **`DashboardModule`, de schil van een dashboardmodule** (2026-08-13). Vier exports uit één module: `DashboardModule` (kop, groeiend lichaam, optionele voetzone), `DashboardModuleRows` (`