@leabankab/component-library 7.3.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,649 @@
 # Changelog
 
+## 8.0.0
+
+### Major Changes
+
+- 26dd9a1: **Migrating from 7.x:** follow the guide, which takes an app through this release step by step: what to install and remove, what TypeScript reports, and what it does not. It is in Storybook under Docs → Migrating to v8, and in the repo at `docs/migration/v7-to-v8.md`.
+- 1d1f026: `ActionButton` no longer wraps MUI's `Button`. It is built on Base UI's `Button` and styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. `ActionButtonProps` is exported.
+
+  Breaking:
+
+  - `component` and `href` are replaced by `render`, as on `Button`: `<ActionButton component={NextLink} href="/lan">` and `<ActionButton href="/lan">` become `<ActionButton render={<NextLink href="/lan" />}>` and `<ActionButton render={<a href="/lan" />}>`.
+  - The other props of MUI's `Button` are removed: `sx`, `startIcon`, `endIcon`, `size`, `color`, `fullWidth` and the rest. Use `className` or `style`.
+  - The markup no longer carries `MuiButton-*` class names, and there is no ripple.
+
+  Visible changes:
+
+  - The label is set in the page's font, Clash Grotesk. Before, it fell back to the browser's own button font (Arial), because the theme gave MUI's button no font.
+  - Keyboard focus shows the library's ring 2px outside the pill. Before, the line around the pill only grew from 1px to 2px.
+
+- dfc1ef0: `CheckAnimation`, `PulseAnimation` and `StatusAnimation` name their sizes like every other component.
+
+  Breaking: `size="small"` is `size="sm"`, and `size="large"` is `size="lg"`. The sizes themselves are the same (90px and 150px), and `lg` is still the default.
+
+- dbe22e6: `Autocomplete` no longer uses MUI. It is built on Base UI's `Combobox` and shares the box, the floating label and the helper text of `Input`, and the list of `Select`, so it renders without `LeaProvider`.
+
+  Breaking:
+
+  - The `email` mode is removed, with `domains` and `maxSuggestions`. Use `EmailInput`, which is the same control under its own name.
+  - `options` is required.
+  - The props are a defined list: `label`, `helperText`, `options`, `value`, `defaultValue`, `onValueChange`, `multiple`, `min`, `max`, `placeholder`, `noOptionsText`, `loading`, `error`, `required`, `disabled`, `onBlur`, `name`, `id`, `aria-label`, `aria-labelledby`, `aria-describedby`, `className`, `style` and `ref`. Everything else MUI's `Autocomplete` took is gone, among them `sx`, `size`, `fullWidth`, `renderOption`, `groupBy`, `loadingText`, `openOnFocus`, `disableClearable`, `open`, `onOpen`, `onClose`, `slots` and `slotProps`.
+  - `className` and `style` are applied to the outermost element, which also holds the helper text.
+  - The markup no longer carries `MuiAutocomplete-*`, `MuiOutlinedInput-*`, `MuiInputBase-*` and `MuiFormControl-*` class names. The list is a Base UI popup.
+  - Home and End move the cursor in the text. In MUI they moved to the first and the last option.
+  - Hovering an option no longer moves the option the arrow keys are on. The keyboard and the mouse each mark their own, as in `Select`.
+  - With `multiple`, an option that is chosen is disabled once `min` is reached, as in `MultiSelect`. Before, a click on it was ignored without a sign.
+
+  New:
+
+  - `value`, `defaultValue` and `onValueChange` take their type from the options, as in `Select`. `onValueChange` of a single `Autocomplete` gives `""` when the control is emptied.
+  - `disabled` on an option shows it without letting it be chosen.
+  - The control is named by its label through `aria-labelledby` as well as `for`.
+
+  Visible changes:
+
+  - The text is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`, the label `neutral-600` (`#5E5E5E`) instead of `rgba(0, 0, 0, 0.6)`, and the resting border `neutral-300` instead of `rgba(0, 0, 0, 0.23)`, as in `Input`. The text sits 1px lower, on the same line as in `Input`.
+  - The arrow is 20px and the cross 18px. Both were 24px. The arrow turns with a short transition.
+  - While the list is open, the field is square where the two meet, as in `Select`.
+  - Options are 40px high with rounded ends, as in `Select`. They were 48px on screens under 600px wide and 36px above. The chosen option has the fill of `Select`'s (`bg.accent`), a shade darker than before.
+  - With `multiple`, the text field shares the last line of chips while 64px is left on it, so a field with a few chips stays 54px high. Before, it moved to a line of its own once less than about 210px was left. The chips start 14px in, under the label, instead of 10px.
+
+- 1d1f026: `Card` no longer wraps MUI's `Card`, and the library now has its own `CardContent`. Both are a `div` styled with a CSS Module from the design tokens, so they render without `LeaProvider`. A card looks the same: white, a 1px `border.base` border, 16px corners and no shadow. `CardContent` has 16px of padding on every side; MUI's has 24px at the bottom when it is the last child.
+
+  Both take `className`, `style`, `render`, `ref` and the attributes of a `div`. `ref` gives the rendered element and is typed `Ref<HTMLElement>`, since `render` decides which element that is. `CardProps` and `CardContentProps` are exported.
+
+  Breaking:
+
+  - Import `CardContent` from `@leabankab/component-library` instead of `@mui/material`. MUI's still works inside the card, but needs MUI and Emotion installed.
+  - `raised`, `elevation`, `variant` and `square` are removed. A card is always flat.
+  - `sx` and `component` are removed. Use `className` or `style`, and `render` for another element: `<Card render={<section />}>`.
+  - The element no longer carries `MuiCard-*` and `MuiPaper-*` class names.
+  - Text placed straight in a card is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`.
+
+- 1d1f026: `Chip` no longer wraps MUI's `Chip`. It is a `span` styled with a CSS Module from the design tokens, so it renders without `LeaProvider`, and it has its own props: `label`, `color`, `variant`, `size`, `icon`, `onDelete`, `deleteLabel`, `disabled`, `className`, `style`, `ref` and the attributes of a `span`. `ChipColor`, `ChipVariant` and `ChipSize` are exported. The colours look the same; their names change with the colour props of the other components, described in this release.
+
+  Breaking:
+
+  - `size` takes `"sm"` and `"md"` instead of `"small"` and `"medium"`, like `Button`.
+  - `color` takes only the chip's own colours. MUI's `default` and `secondary` are no longer accepted, and `primary`, `success`, `info`, `warning` and `error` now mean the library's colours rather than MUI's.
+  - `avatar`, `deleteIcon`, `onClick`, `clickable`, `component` and `sx` are removed. `ref` is the `span`, where it was a `div`. A chip is no longer clickable as a whole. `deleteLabel` replaces `deleteIcon` for a different accessible name.
+  - With `onDelete`, the chip is no longer a focusable `role="button"` that is removed with Backspace or Delete. It has a real remove `<button>` named "Fjern" plus the label, reached with Tab and pressed with Enter or Space. Tests that click `.MuiChip-deleteIcon` can use `getByRole("button", { name: "Fjern Oslo" })`.
+  - The markup no longer carries `MuiChip-*` class names.
+
+  Visible changes, all small: a medium chip is 27px tall instead of 27.8px, an outlined chip is 2px wider, and the cross of the remove button is the `lucide-react` icon.
+
+- 3b123bb: One vocabulary for the `color` prop. A value names a group of colour tokens (a brand colour, a status, the greys), never a hue, and means the same on every component: `primary`, `secondary`, `tertiary`, `neutral`, `success`, `info`, `warning`, `error` and `contrast`. `ColorRole` is the shared type, and each component accepts the subset it has a design for.
+
+  **Breaking.** Rename:
+
+  | Component                                                | Before    | After                                        |
+  | -------------------------------------------------------- | --------- | -------------------------------------------- |
+  | `Button`, `IconButton`, `CloseButton`, `DownloadTrigger` | `accent`  | `primary`                                    |
+  |                                                          | `neutral` | `secondary`                                  |
+  |                                                          | `danger`  | `error`                                      |
+  | `Link`                                                   | `black`   | `secondary`                                  |
+  |                                                          | `purple`  | `primary`                                    |
+  |                                                          | `teal`    | `tertiary`                                   |
+  |                                                          | `white`   | `contrast`                                   |
+  | `Alert`, `GlobalAlert`                                   | `purple`  | `primary`                                    |
+  |                                                          | `grey`    | `neutral`                                    |
+  | `ProgressCircle`, `FormStepper`, `LinearFormStepper`     | `purple`  | `primary`                                    |
+  |                                                          | `teal`    | `tertiary`                                   |
+  | `StatusIcon`, `CheckAnimation`, `StatusAnimation`        | `purple`  | `primary`                                    |
+  |                                                          | `green`   | `tertiary`                                   |
+  | `Chip`                                                   | `purple`  | `primary`                                    |
+  |                                                          | `teal`    | `success` for a status, `tertiary` for a tag |
+  |                                                          | `blue`    | `info`                                       |
+  |                                                          | `orange`  | `warning`                                    |
+  |                                                          | `grey`    | `neutral`                                    |
+
+  The rename changes no colour (the warning colour itself changes in a separate change in this release): every value looks as it did under its old name, and the defaults are the same colours (`primary` on the buttons, `Chip`, the steppers and the animations; `secondary` on `Link` and `CloseButton`).
+
+  TypeScript reports every old name. Two things it cannot report:
+
+  - `neutral` has moved. On the buttons it meant near-black and is now `secondary`; `neutral` now means grey, on `Alert` and `Chip`. No component accepts both, so a missed rename is still a type error.
+  - An old name that reaches a component untyped (from JavaScript, or through `as any`) is not an error. The component renders in its default colour.
+
+  The `data-color` attribute on the rendered elements carries the new names, for a test or a stylesheet that selects on it.
+
+  New:
+
+  - `Chip` takes `error`, a red chip. A chip is either a tag (`primary`, `tertiary`, `neutral`) or a status (`success`, `info`, `warning`, `error`); the status colours are kept for statuses, so there is no blue tag.
+  - `ColorRole` is exported. `ButtonColor`, `LinkColor`, `AlertColor`, `AlertSeverity`, `ChipColor` and `ProgressCircleColor` keep their names and are subsets of it.
+
+  `Text` is not part of this: its `color` takes a palette token by its path (`text.subtle`, `primary.base`).
+
+- 1d1f026: `DataField`, `List.Root` and `List.Item` no longer use MUI's `Box`. They are styled with CSS Modules from the design tokens, so they render without `LeaProvider`, and they look the same.
+
+  Breaking:
+
+  - `sx` is removed from all three, and `DataField` no longer takes `component`. Use `className` or `style`.
+  - The elements no longer carry `MuiBox-root` class names. The marker of a `List.Item` is a `span` instead of a `div`.
+
+  `List.Root` and `List.Item` now also take `style` and the attributes of a `ul` and an `li`, so a list can have an `aria-label`.
+
+- af6b039: `DatePicker` has its own import path, and its own props.
+
+  ```tsx
+  import { DatePicker } from "@leabankab/component-library/date-picker";
+
+  <DatePicker label="Ansatt siden" value={value} onValueChange={setValue} />;
+  ```
+
+  It is the one component still built on MUI (`@mui/x-date-pickers`). Moving it out of the main entry is what lets MUI, Emotion and `date-fns` be optional peer dependencies: an app with a date picker installs `@mui/material`, `@mui/system`, `@mui/x-date-pickers`, `@emotion/react`, `@emotion/styled` and `date-fns`, and an app without one installs none of them.
+
+  It needs no provider. The picker brings its own MUI theme and localisation, and follows the `language` of `LeaProvider`. Its theme is private: it does not reach MUI components the app renders itself. It looks and behaves as before.
+
+  Breaking:
+
+  - Import it from `@leabankab/component-library/date-picker`. It is no longer exported from the main entry.
+  - `DatePickerProps` no longer extends MUI's. The props are:
+
+    | Props                                                                                   |                                                               |
+    | --------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+    | `value`, `defaultValue`, `onValueChange`, `onBlur`, `ref`, `name`                       | The form contract, as before. The value is `Date \| null`.    |
+    | `label`, `helperText`, `error`, `disabled`, `required`, `readOnly`                      | As before.                                                    |
+    | `minDate`, `maxDate`, `disablePast`, `disableFuture`                                    | What can be chosen.                                           |
+    | `views`, `monthYearOrder`, `format`, `referenceDate`                                    | Day picker or month/year picker, and how the date is written. |
+    | `open`, `onOpenChange`                                                                  | The calendar, controlled.                                     |
+    | `desktopModeMediaQuery`, `eyebrow`, `title`, `viewToggleLabels`, `calendarHeaderLabels` | The drawer and popover, as before.                            |
+    | `className`, `style`                                                                    | On the field.                                                 |
+
+  - `onOpen` and `onClose` are replaced by `onOpenChange(open)`, as on `Select`.
+  - The second argument of `onValueChange` is `{ validationError }`, typed by the library: `"invalidDate"`, `"minDate"`, `"maxDate"`, `"disablePast"`, `"disableFuture"` or `null`.
+  - Everything else MUI's `DatePicker` takes is no longer passed through. That includes `slots`, `slotProps`, `sx`, `localeText`, `adapterLocale`, `viewRenderers`, `dayOfWeekFormatter`, `openTo`, `closeOnSelect`, `shouldDisableDate`, `shouldDisableMonth`, `shouldDisableYear`, `onAccept`, `onError`, `timezone` and `autoFocus`. The locale and the texts follow `LeaProvider`; a date always commits when it is picked.
+  - `ViewToggleLabels` and `CalendarHeaderLabels` are exported from the new path, with `DatePickerView`, `DatePickerChangeDetails`, `DatePickerValidationError` and `MonthYearOrder`.
+
+- af6b039: `DevPanel` and its parts have their own import path, so an app only ships the dev panel where it imports it, and the panel no longer uses MUI. It is drawn with plain elements and a stylesheet of its own from the design tokens, `dev-panel.css`, which the import path loads with the component.
+
+  ```tsx
+  import { DevPanel } from "@leabankab/component-library/dev-panel";
+
+  <DevPanel.Root badge="MOCK">
+    <DevPanel.Country
+      value={country}
+      onChange={setCountry}
+      options={countries}
+    />
+  </DevPanel.Root>;
+  ```
+
+  Breaking:
+
+  - Import `DevPanel` from `@leabankab/component-library/dev-panel`. It is no longer exported from the main entry, and its parts are a namespace in this release: `DevPanel.Root`, `DevPanel.Country`, `DevPanel.Variant`, `DevPanel.StepState`, `DevPanel.Steps`, `DevPanel.Status`, `DevPanel.Flow`, `DevPanel.Payload`, `DevPanel.Footer`, `DevPanel.Section`, `DevPanel.useSectionLabelId` and their types.
+  - `sx` on the panel and on a section is removed. Both take `className` and `style`, on their outermost element: `<DevPanel sx={{ position: "fixed", bottom: 16, right: 16 }}>` becomes `<DevPanel.Root style={{ position: "fixed", bottom: 16, right: 16 }}>`.
+  - The markup no longer carries `MuiBox-root` class names.
+
+  The path needs no peer dependency, no theme and no provider: with the dev panel off MUI, `@mui/material`, `@mui/system`, `@mui/x-date-pickers`, `@emotion/react`, `@emotion/styled` and `date-fns` are needed by the `date-picker` path alone.
+
+  It looks as before, pixel for pixel. What behaves differently is listed under the dev panel fixes in this release.
+
+- dbe22e6: `EmailInput` no longer uses MUI. It is built on Base UI's `Autocomplete` and shares the box, the floating label and the helper text of `Input`, so it renders without `LeaProvider`. The suggestions work as before.
+
+  Breaking:
+
+  - The input has `autocomplete="email"`, so the browser offers the user's own address. MUI set `autocomplete="off"`. Pass `autoComplete="off"` where the address is somebody else's.
+  - `onBlur` is called with a `FocusEvent<HTMLElement>` when focus leaves the control. It was typed for the wrapping `div`.
+  - The markup no longer carries `MuiAutocomplete-*`, `MuiOutlinedInput-*` and `MuiFormControl-*` class names.
+
+  New:
+
+  - `id`, `autoComplete`, `aria-label`, `aria-labelledby`, `aria-describedby`, `className` and `style`.
+
+  Visible changes: the colours, the text position, the 18px cross and the list are those described for `Autocomplete`.
+
+- 079a525: Clash Grotesk now ships as a font file with the library stylesheet instead of inside the JavaScript. An app gets the font by using the package, with or without `LeaProvider`, and it is declared before any JavaScript runs, so a server-rendered page can start loading it straight away.
+
+  - The library's JavaScript (the ES build) is less than half the size: 163 kB, down from 359 kB, or 44 kB gzipped, down from 192 kB.
+  - One variable font file (47 kB, weights 200 to 700) replaces six files. The browser caches it separately from your JavaScript.
+  - The stylesheet sets the font on `body`, with the same font smoothing `LeaProvider` applied.
+  - Add the token `--lea-font-family`, and `font-sans` in the Tailwind theme.
+
+  **Breaking.**
+
+  - `LeaProvider` no longer declares the font. The ES build imports the stylesheet for you; with the UMD build, import `@leabankab/component-library/styles.css`, or the page has no Clash Grotesk.
+  - The font loads with `font-display: swap`, where it was `optional`. It now always appears once it has loaded. Until then text is set in Arial, resized to Clash Grotesk's letter width, so lines break in the same places and the layout barely moves.
+  - The font stack is `"ClashGrotesk", "ClashGrotesk Fallback", sans-serif`. Use `var(--lea-font-family)` instead of writing the family name yourself, so your own text gets the same fallback.
+  - Don't set a `font-family` on `body` in the app; the stylesheet does it.
+
+  At weights 400 and 500 the variable font draws some letters 1/1000 em wider than the old files did, which is about 0.02px per letter at 16px.
+
+- 31da3b6: Every form control now takes the same props for its value, its error state and its ref: `value`, `defaultValue`, `onValueChange`, `onBlur`, `ref`, `name`, `label`, `helperText`, `error`, `disabled` and `required`. `Checkbox`, `RadioGroup` and the new `RadioCardGroup` render their own label, helper text and error state, which used to take a `FormControl`, a `FormLabel` and a `FormControlLabel` around them.
+
+  Breaking, on every control:
+
+  - `onChange` is replaced by `onValueChange`, called with the value instead of an event, on `Select`, `MultiSelect`, `Autocomplete`, `EmailInput`, `PhoneNumberInput`, `DatePicker` and `RadioGroup`. `Select`: `onChange={(e) => set(e.target.value)}` becomes `onValueChange={set}`. `MultiSelect` no longer passes the event as a second argument. `Input` gains `onValueChange` and keeps the native `onChange`.
+  - `ref` now points at the element that takes focus instead of the wrapper: the `<input>` on `Input`, `Autocomplete`, `EmailInput`, `PhoneNumberInput` and `NumberInput`, the element with the `combobox` role on `Select` and `MultiSelect`, the first part of the date on `DatePicker`, and the chosen radio on the radio groups. `inputRef` is gone from `NumberInput`, `PhoneNumberInput` and `DatePicker`; use `ref`.
+  - The low-level parts are no longer exported: `FormControl`, `FormLabel`, `FormHelperText`, `InputLabel`, `FormControlLabel`, `InputAdornment`, `useFormField`, `RadioCircle` and `useRadioGroupSize`, with their types. Controls can no longer be composed inside a `FormControl`; pass `label` and `helperText` to the control.
+  - `startAdornment` and `endAdornment` on `Input` and `Select` take the content itself. Drop the `InputAdornment` around it: `startAdornment={<Search size={20} />}`.
+
+  Breaking, per control:
+
+  - `Input` has its own list of props instead of MUI's `OutlinedInputProps`: the native `<input>` attributes, plus `label`, `helperText`, `error`, `onValueChange`, `startAdornment`, `endAdornment` and `multiline` with `rows`, `minRows` and `maxRows`. `sx`, `inputProps`, `slotProps`, `size`, `color` and the other MUI-only props are gone. Native attributes go straight on the component (`<Input maxLength={6} inputMode="numeric" />`), and `className` and `style` go on the outermost element.
+  - `Checkbox` takes `label`, `helperText`, `error`, `checked`, `defaultChecked` and `onCheckedChange(checked)`. `onChange(event, checked)` and MUI's other props are gone. An accessible name is required in TypeScript: pass `label`, or `aria-label` when there is no visible label. `<FormControlLabel control={<Checkbox />} label="…" />` becomes `<Checkbox label="…" />`.
+  - `RadioGroup` takes `label`, `tooltip`, `helperText`, `error`, `value`, `defaultValue`, `onValueChange` and an `options` list, and no longer wraps MUI's `RadioGroup`: `row`, `sx` and `onChange(event, value)` are gone. Values are typed and compared with `===`, so `value="true"` no longer matches a radio whose value is `true`. An accessible name is required in TypeScript: `label`, `aria-label` or `aria-labelledby`.
+  - `Radio` takes `value`, `label`, `disabled` and `size`, and only works inside a `RadioGroup`: `checked`, `defaultChecked` and `onChange` are gone, and it throws outside a group. `<FormControlLabel value="a" control={<Radio />} label="A" />` becomes `<RadioGroup.Item value="a" label="A" />` (the radios are a namespace in this release), or an entry in `options`.
+  - The radio `size` values are renamed from `"small"` and `"medium"` to `"sm"` and `"md"`.
+  - `RadioCard` goes inside the new `RadioCardGroup` instead of a `RadioGroup` with a grid around the cards. `RadioCardGroup` has the same props as `RadioGroup`, plus `columns` for the layout and `size` for the card padding. `RadioCard` loses `sx`, `checked` and `onChange`, and `RadioCardContent` loses `sx`; both take `className` and `style`. `RadioCardIndicator` takes its own `size` instead of reading it from the group.
+  - `DatePicker` gains `onBlur`, called when focus leaves the field and when the calendar closes.
+  - `NumberInput` gains `tooltip`, for help text next to a label placed outside the field. It replaces composing a `FormLabel` with a `Tooltip` by hand.
+  - `Autocomplete` and `EmailInput` gain `name`, which submits the value in a native form.
+
+- 31da3b6: `Input`, `Checkbox`, `Radio`, `RadioGroup`, `RadioCard` and `RadioCardGroup` no longer wrap MUI. They are built on Base UI's `Input`, `Checkbox`, `Radio` and `RadioGroup` and styled with CSS Modules from the design tokens, so they render without `LeaProvider`. Their props are unchanged.
+
+  Breaking:
+
+  - The markup no longer carries `Mui*` class names, and the checkbox and the radios are no longer a native `<input>` with a picture on top: each is a `<button>` with the `checkbox` or `radio` role, next to a hidden `<input>` that submits the value. Stylesheets and tests that target `.MuiOutlinedInput-root`, `.MuiCheckbox-root`, `.lea-checkbox-box`, `.lea-radio-circle` or `input[type="radio"]` need updating. In tests, find the controls by role or by label (`getByRole("checkbox", { name })`, `getByLabelText`), which works as before.
+  - `id` on `Checkbox` and `Radio` is now on that button rather than on the `<input>`. `ref` is still the `<input>`, which is hidden; `ref.current.focus()` moves focus to the visible control.
+  - `RadioCard` no longer has a `data-checked` attribute. The radio inside it does: `.card:has([data-checked])`.
+  - `RadioGroup` and `RadioCardGroup` no longer generate a `name` when none is given. Pass `name` to include the choice in a native form submit; before, it was submitted under a generated name.
+  - The helper text of these controls is announced as an alert while the control is in error.
+
+  Visible changes, all small:
+
+  - Keyboard focus on a checkbox and a radio is the library's dark ring instead of a purple one, and a `RadioCard` now shows it too. It had no visible focus before.
+  - Text in an `Input` is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`, and its label and helper text are `neutral-600` (`#5E5E5E`) instead of `rgba(0, 0, 0, 0.6)`.
+  - A multiline `Input` has 24px rows instead of 19px, so the same number of rows is taller: three rows are 102px instead of 89px.
+  - The label above a radio group is 20px tall instead of 23px, so the group sits 3px higher. With a `tooltip` it now has the same 12px below it as without, where it had none.
+  - A `RadioCard` with a description is 2px taller, from the text styles its two lines now use.
+  - Helper text sits 4px below its control instead of 3px.
+
+- 31da3b6: The twelve react-hook-form wrappers are replaced by one binding, `FormField`, which works with every form control. It has its own import path, and `react-hook-form` is now an optional peer dependency: an app that does not use `FormField` no longer needs it installed.
+
+  ```tsx
+  import { Input } from "@leabankab/component-library";
+  import { FormField } from "@leabankab/component-library/react-hook-form";
+
+  <FormField
+    control={control}
+    name="email"
+    rules={{ required: "Skriv inn e-postadressen din." }}
+    render={({ field }) => <Input label="E-post" {...field} />}
+  />;
+  ```
+
+  `FormField` takes what `useController` takes (`name`, `control`, `rules`, `defaultValue`, `disabled`, `shouldUnregister`) and reads `control` from a `FormProvider` when the prop is left out. Spread `field` last. For a `Checkbox`, spread `checkedField` instead. The Forms page in Storybook has the full guide.
+
+  Breaking:
+
+  - `InputField`, `EmailField`, `NumberField`, `PhoneNumberField`, `SelectField`, `MultiSelectField`, `AutocompleteField`, `DatePickerField`, `CheckboxField`, `RadioField`, `RadioCardField` and `BooleanRadioCardField` are removed, with `useResolvedControl` and the types `BaseFieldProps`, `FieldOption` and `FieldValueTransform`. Wrap the control in a `FormField`: `<InputField name="email" label="E-post" />` becomes `<FormField name="email" render={({ field }) => <Input label="E-post" {...field} />} />`.
+  - `RadioField` becomes `<RadioGroup.Root label options {...field} />`, and `RadioCardField` becomes `<RadioCard.Group label options columns={2} size="sm" {...field} />`. The `columns` and `size` are needed to keep the old look: `RadioCardField` was two columns of small cards, and `RadioCardGroup` defaults to one column of large ones. `gridColumns="1fr 1fr"` is now `columns={2}` and `cardSize` is `size`.
+  - `format` and `parse` are gone, and with them `BooleanRadioCardField`. Radio values are compared with `===` and can be booleans or numbers, so give the options the real values: `options={[{ value: true, label: "Ja" }, { value: false, label: "Nei" }]}`.
+  - `SelectField` validated the field on every change, whatever the form's `mode`. `Select` in a `FormField` follows the `mode`, like every other control.
+  - The wrappers turned a missing value into `""`, `null` or `[]`. `FormField` passes the value through as react-hook-form gives it, so give every field a default in `defaultValues`.
+  - `DatePickerField` only marked the field as touched when the calendar closed. `DatePicker` now also does so when focus leaves the field, so a typed date is validated on blur.
+
+- 1d1f026: Helper text under every form control is now 14px with a 21px line (`body-sm`), as it already was under `Slider` and `AmountSlider`. It was 16px with a 24px line. A field with one line of helper text is 3px shorter.
+
+  This covers `Input`, `NumberInput`, `Checkbox`, `RadioGroup`, `RadioCardGroup`, `Select`, `MultiSelect`, `Autocomplete`, `EmailInput`, `PhoneNumberInput` and `DatePicker`.
+
+- af6b039: `LeaProvider` no longer brings MUI. It sets the language of the library's own texts and of the components that format by locale, and nothing else: no `ThemeProvider`, no `CssBaseline`, no Emotion. No component in the main entry needs it to render, and without it the language is Norwegian.
+
+  The main entry (`@leabankab/component-library`) no longer imports MUI, Emotion or `date-fns` at all. Its JavaScript (the ES build) is 97 kB, down from 151 kB, and a page without a date picker has no Emotion style tags.
+
+  Breaking:
+
+  - **The MUI theme is gone from the app.** A MUI component the app renders itself (`Box`, `Typography`, `Button`, anything from `@mui/material`) is no longer themed by the library: it gets MUI's default look, and `sx` no longer resolves the Lea tokens (`sx={{ color: "text.subtle" }}`, `borderRadius: "md"`, `theme.palette.bg.base`). Use the library's components, the `--lea-*` variables or the Tailwind theme instead. An app that keeps MUI code of its own for a while provides its own `ThemeProvider` and theme.
+  - **`theme`, `LeaBankTheme` and `LeaSxProps` are no longer exported.** The token values are in the stylesheet as `--lea-*` variables: `theme.palette.text.subtle` is `var(--lea-palette-text-subtle)`, `theme.colors.purple[600]` is `var(--lea-color-purple-600)`, `theme.shape.md` is `var(--lea-radius-md)` and `theme.space(2)` is `var(--lea-spacing-2)`. `breakpoints` is still exported.
+  - **The MUI type augmentation is gone.** The library no longer adds `bg`, `border`, `status` and `tertiary` to MUI's `Palette`, the radius names to `Shape`, the token groups to `Theme`, `fontSize` tokens and `text.*` colours to `Typography`, or the Lea colours to MUI's `Alert`, `Chip` and `Button`. An app's own MUI theme types are what MUI declares.
+  - **The `--mui-*` variables are no longer on the page.** Use the `--lea-*` equivalents.
+  - **`disableCssBaseline` is removed.** There is no `CssBaseline` to disable. What it did for the page is in the library stylesheet now; see the page defaults change in this release.
+  - **Every theme override goes with the theme**, from `MuiButton` and `MuiTypography` to `MuiOutlinedInput`. The 7.0.0 notes listed the `MuiDialog` and `MuiDrawer` overrides as removed, but 7.3.0 still applied them.
+
+  `@mui/material`, `@mui/system`, `@mui/x-date-pickers`, `@emotion/react`, `@emotion/styled` and `date-fns` are now optional peer dependencies. Only the `date-picker` import path needs them; see its change in this release.
+
+- 1d1f026: `Link` no longer wraps MUI's `Link`. It is a plain `a` styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. It keeps the size and line height of the text around it, regular weight and the same four colours (renamed with the colour props of the other components in this release). `LinkProps` and `LinkColor` are exported. `ref` gives the rendered element and is typed `Ref<HTMLElement>`, since `render` decides which element that is.
+
+  **A link is now underlined at rest**, and the line goes from 1px to 2px on hover. It had no line until it was hovered, which left colour as the only thing setting it apart from the sentence around it: 1.9:1 against body text for `primary`, and nothing at all for `secondary`, which is the colour of body text. Where a link is not in running text and should have no line, as in a menu, set `text-decoration: none` with `className` or `style`.
+
+  Breaking:
+
+  - `component` is replaced by `render`, as on `Button`: `<Link component={NextLink} href="/om-oss">` becomes `<Link render={<NextLink href="/om-oss" />}>`, and `<Link component="button">` becomes `<Link render={<button type="button" />}>`.
+  - `sx`, `underline` and `variant` are removed. Use `className` or `style`.
+  - The element no longer carries `MuiLink-*` and `MuiTypography-*` class names.
+
+  The focus ring now sits 2px off the text instead of 1px.
+
+- dbe22e6: `MultiSelect` no longer uses MUI. It is built on Base UI's `Select`, on the same field as `Select`, and renders without `LeaProvider`. Chips, the `+N` badge, the checkboxes in the list, and `min` and `max` work as before.
+
+  Breaking:
+
+  - The props are a defined list: those of `Select`, with `value`, `defaultValue` and `onValueChange` as arrays, plus `min`, `max` and `renderValue`. The props passed on to MUI's `Select` are gone, among them `sx`, `variant`, `size`, `MenuProps`, `inputProps`, `onOpen` and `onClose`.
+  - In a native form, `name` now submits one field per chosen value (`country=no&country=dk`). MUI submitted one field with the values joined by commas (`country=no,dk`). Read them with `formData.getAll("country")`.
+  - The chips are no longer inside the element with the `combobox` role. That element holds the chosen labels as text, separated by commas, so a screen reader reads them as the value; the remove buttons of the chips come after it in the tab order. Tests that looked for chips inside the combobox need to look in the field instead.
+  - The markup no longer carries MUI class names.
+
+  New, as in `Select`: values typed from the options, `disabled` on an option, `placeholder`, and `open` with `onOpenChange`.
+
+  Fixed:
+
+  - The remove button of a chip works from the keyboard. Enter or Space removes the chip and focus stays in the field. Before, the key opened the list and the chip stayed.
+
+- dfc1ef0: `Tabs`, `RadioGroup`, `RadioCard` and `DevPanel` are namespaces that hold their parts, the way `Dialog`, `Drawer`, `Accordion` and `List` already did. Only the names change. The props, the markup and the look are the same.
+
+  Breaking. Rename:
+
+  | Before                                                       | After                                                             |
+  | ------------------------------------------------------------ | ----------------------------------------------------------------- |
+  | `Tabs`, `TabsList`, `Tab`                                    | `Tabs.Root`, `Tabs.List`, `Tabs.Tab`                              |
+  | `TabsIndicator`, `TabPanel`                                  | `Tabs.Indicator`, `Tabs.Panel`                                    |
+  | `TabsProps`, `TabProps` and the other props types            | `Tabs.RootProps`, `Tabs.TabProps` and so on                       |
+  | `TabsVariant`                                                | `Tabs.Color`                                                      |
+  | `RadioGroup`, `Radio`                                        | `RadioGroup.Root`, `RadioGroup.Item`                              |
+  | `RadioGroupProps`, `RadioProps`, `RadioSize`                 | `RadioGroup.RootProps`, `RadioGroup.ItemProps`, `RadioGroup.Size` |
+  | `RadioCard`, `RadioCardProps`                                | `RadioCard.Root`, `RadioCard.RootProps`                           |
+  | `RadioCardContent`, `RadioCardLabel`, `RadioCardDescription` | `RadioCard.Content`, `RadioCard.Label`, `RadioCard.Description`   |
+  | `RadioCardIndicator`, `RadioCardIcon`, `RadioCardIconProps`  | `RadioCard.Indicator`, `RadioCard.Icon`, `RadioCard.IconProps`    |
+  | `DevPanel`, `DevPanelSection`                                | `DevPanel.Root`, `DevPanel.Section`                               |
+  | `DevPanelStatus`, `DevPanelSteps` and the other parts        | `DevPanel.Status`, `DevPanel.Steps` and so on                     |
+  | `DevPanelProps`, `DevPanelStep` and the other types          | `DevPanel.RootProps`, `DevPanel.Step` and so on                   |
+  | `useDevPanelSectionLabelId`                                  | `DevPanel.useSectionLabelId`                                      |
+
+  New in this release, so under their new names only: `RadioCard.Group`, `RadioCard.GroupProps`, `RadioCard.IndicatorProps`, `RadioGroup.Option` and `RadioGroup.Value`.
+
+  TypeScript reports every old name. Also new: `RadioCard.Size`, the card padding, which had no exported type, and `RadioCard.Option` and `RadioCard.Value`, the same types as on `RadioGroup`.
+
+  A server component cannot use a namespace: the library is one client bundle, and React throws "You cannot dot into a client module from a server component" for `<Tabs.Root>` in a Next.js App Router page. Use these components in a file that starts with `"use client"`. `Card`, `Alert`, `Grid`, `StepProgressProvider` and the other components a server page renders on its own keep their flat names for that reason.
+
+- 1d1f026: `NumberInput` no longer uses MUI. It is built on Base UI's `NumberField` alone and shares the box, the floating label and the helper text of `Input`, so it renders without `LeaProvider`. Its value, formatting, stepper and unit behave as before.
+
+  Breaking:
+
+  - `size` is removed. `Input` has no sizes either.
+  - `className` and `style` are now applied to the outermost element, as on `Input`. Before, they went to an element without a box of its own and had no effect. `render` is no longer accepted.
+  - The markup no longer carries `MuiOutlinedInput-*`, `MuiInputAdornment-*`, `MuiIconButton-*` and `MuiFormControl-*` class names.
+
+  Visible changes, all small:
+
+  - The value is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`, and the floating label is `neutral-600` (`#5E5E5E`) instead of `rgba(0, 0, 0, 0.6)`, as in `Input`.
+  - With `labelPlacement="outside"`, the label is 12px above the field with or without a `tooltip`. With a tooltip it used to touch the field. A click on the label now moves focus to the input.
+  - A click on the unit or the icon moves focus to the input.
+
+- af6b039: The library stylesheet now carries the page defaults that MUI's `CssBaseline` set while `LeaProvider` rendered one: `box-sizing: border-box` on every element, no margin on `body`, and body text in `text.base` on `bg.base` at 16px with line height 1.5. An app gets them with the stylesheet, with or without `LeaProvider`, and they are in the markup the server sends rather than injected by Emotion.
+
+  They sit in the cascade layer `base`, the layer Tailwind's preflight uses. A layered rule loses to every rule outside a layer and to every later layer, so the app's own stylesheet and its Tailwind utilities win without extra specificity: `<body class="bg-beige-50">` now works, where `CssBaseline` overrode it.
+
+  Breaking:
+
+  - Text that takes its colour from `body` is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`, which is `#212121` on white. Text in a library component already had its own colour.
+  - An unlayered `body` or `*` rule in the app now wins over the defaults, whatever the order of the stylesheets. Before, `CssBaseline` was injected at run time, after the app's stylesheets, and usually won. Check a rule that sets `margin`, `color`, `background-color`, `line-height` or `box-sizing` there.
+  - `html` no longer gets `color-scheme: light`. The page is light either way; set it yourself if the app relies on the property.
+  - With the UMD build, import `@leabankab/component-library/styles.css`, or the page has no defaults. The ES build imports it for you.
+
+- dbe22e6: `PhoneNumberInput` no longer uses MUI. It shares the box, the label and the helper text of `Input`, and its country list is built on Base UI's `Combobox`, so it renders without `LeaProvider`. Formatting, validation and the pinned countries work as before.
+
+  Breaking:
+
+  - The props are those of `Input` instead of MUI's `OutlinedInputProps`: the native `<input>` attributes, which land on the number input, plus `label`, `helperText`, `error`, `country`, `defaultCountry`, `onCountryChange`, `value`, `defaultValue`, `onValueChange`, `validateOnBlur`, `className`, `style` and `ref`. `sx`, `inputProps`, `slotProps`, `size`, `fullWidth`, `endAdornment`, `multiline` and the rest of MUI's props are gone. What went into `inputProps` is now passed directly.
+  - `className` and `style` are applied to the outermost element, which also holds the helper text.
+  - `onBlur` and the other event handlers are typed for the `<input>` alone.
+  - The markup no longer carries `MuiOutlinedInput-*`, `MuiInputAdornment-*`, `MuiAutocomplete-*`, `MuiPopper-*` and `MuiFormControl-*` class names, nor `LeaPhoneCountry*`.
+
+  Changed in the country list:
+
+  - The country in use is marked in the list, and the list opens scrolled to it.
+  - On a touch screen, opening the list no longer brings up the keyboard. Tap the search box to type.
+  - The country button has a visible focus ring, and the field has the accent border while the list is open.
+  - Tab in the open list closes it and moves on to the number. Before, the list stayed open.
+  - The popup has an accessible name, and the line under the pinned countries is no longer an item of the list to assistive tech.
+
+  Visible changes, all small:
+
+  - The text is `text.base` (`#0F1010`) instead of MUI's `rgba(0, 0, 0, 0.87)`, the label `neutral-600` (`#5E5E5E`) instead of `rgba(0, 0, 0, 0.6)`, and the resting border `neutral-300`, as in `Input`.
+  - The number starts 2px further in, under the label, and sits 1px lower, on the same line as in `Input`. The label was 4px to its left.
+  - The countries are 40px high with rounded ends, as the options of `Select`. They were 48px on screens under 600px wide and 36px above.
+  - The dial codes in the list are `neutral-600` (`#5E5E5E`) instead of `text.subtle` (`#757575`), which is below 4.5:1 on the fill of a row under the pointer.
+
+- 6aa14f4: React 18 is no longer supported. The peer range for `react` and `react-dom` is now `^19.0.0`.
+
+  `Button`, `IconButton` and `CloseButton` take `ref` as a regular prop instead of through `forwardRef`. Passing a `ref` works as before and points at the rendered element: the `<button>`, or the link passed to `render`. It is typed `Ref<HTMLElement>` on `ButtonProps`, `IconButtonProps` and `CloseButtonProps`.
+
+- dbe22e6: `Select` no longer uses MUI. It is built on Base UI's `Select` and shares the box, the floating label and the helper text of `Input`, so it renders without `LeaProvider`.
+
+  Breaking:
+
+  - The choices are `options` only, and `options` is required. MUI `MenuItem` children are no longer accepted.
+  - The props are a defined list: `label`, `helperText`, `options`, `value`, `defaultValue`, `onValueChange`, `placeholder`, `error`, `required`, `disabled`, `startAdornment`, `endAdornment`, `open`, `onOpenChange`, `onBlur`, `name`, `id`, `aria-label`, `aria-labelledby`, `aria-describedby`, `className`, `style` and `ref`. Everything else MUI's `Select` took is gone, among them `sx`, `variant`, `size`, `fullWidth`, `renderValue`, `displayEmpty`, `MenuProps`, `inputProps`, `IconComponent`, `onOpen` and `onClose`. Use `open` with `onOpenChange` instead of `onOpen` and `onClose`.
+  - `className` and `style` are applied to the outermost element, which also holds the helper text.
+  - The markup no longer carries `MuiSelect-*`, `MuiOutlinedInput-*`, `MuiMenu-*`, `MuiMenuItem-*` and `MuiFormControl-*` class names. The list is a Base UI popup, not a MUI `Menu`.
+
+  New:
+
+  - `value`, `defaultValue` and `onValueChange` take their type from the options. With options written `as const`, `onValueChange` gives `"no" | "se"` rather than `string`, which fits a state of that type without a cast. Plain strings work as before: a `value` of type `string` makes the whole select `string`.
+  - `disabled` on an option shows it without letting it be chosen.
+  - `placeholder` is shown while nothing is chosen. With a `label` it appears once the label has floated up.
+  - `open` and `onOpenChange` control the list from outside.
+  - When the list does not fit below the field, it opens above it. MUI moved it over the field.
+
+  Visible changes, all small:
+
+  - The chosen value sits 2.5px lower, on the same line as the text in `Input`.
+  - The arrow is centred in the field, 2px higher than before, and turns with a short transition.
+  - The option the keyboard is on is marked only while the keyboard is in use. Opening the list with the mouse while nothing is chosen no longer marks the first option.
+  - When the keyboard is on the chosen option, that option is darker than the chosen fill. Before, the two looked the same.
+
+- 679b741: One naming system for the brand colours. `primary`, `secondary` and `tertiary` each have `base`, `hover`, `subtle` and `contrast`, the same steps `bg`, `text` and `border` already use.
+
+  | Group       | Colour     | `base`    | `hover`   | `subtle`  | `contrast` |
+  | ----------- | ---------- | --------- | --------- | --------- | ---------- |
+  | `primary`   | purple     | `#70427B` | `#5A3463` | `#E2D8E4` | `#FFFFFF`  |
+  | `secondary` | near-black | `#0F1010` | `#2E2E2E` | `#EBEBEB` | `#FFFFFF`  |
+  | `tertiary`  | teal       | `#08C2A7` | `#46D1BD` | `#DAF6F1` | `#FFFFFF`  |
+
+  **Breaking.** `purple` and `teal` are no longer semantic groups, and `primary` and `secondary` no longer use MUI's `main`, `dark`, `light` and `contrastText`. Rename:
+
+  | Before                                    | After               |
+  | ----------------------------------------- | ------------------- |
+  | `purple.base`, `primary.main`             | `primary.base`      |
+  | `purple.hover`, `primary.dark`            | `primary.hover`     |
+  | `purple.subtle`, `primary.light`          | `primary.subtle`    |
+  | `purple.contrast`, `primary.contrastText` | `primary.contrast`  |
+  | `teal.base`, `secondary.main`             | `tertiary.base`     |
+  | `teal.hover`, `secondary.dark`            | `tertiary.hover`    |
+  | `teal.subtle`, `secondary.light`          | `tertiary.subtle`   |
+  | `teal.contrast`, `secondary.contrastText` | `tertiary.contrast` |
+
+  The same rename applies in every form the token takes:
+
+  - `var(--lea-palette-purple-base)` becomes `var(--lea-palette-primary-base)`. A stylesheet that still uses a removed variable gets no colour and no error, so search for `--lea-palette-purple-`, `--lea-palette-teal-`, `--lea-palette-primary-main` and `--lea-palette-secondary-`.
+  - Tailwind `bg-purple-base` becomes `bg-primary-base`, and `bg-teal-base` becomes `bg-tertiary-base`.
+
+  **`secondary` changes colour** from teal to near-black. Use `tertiary` where teal was meant.
+
+  Not changed: the raw scales (`colors.purple[600]`, `--lea-color-teal-300`, `bg-purple-600`), `bg`, `text`, `border` and `status`. The `color` props of `Chip`, `Alert`, `Link`, `ProgressCircle` and the steppers are renamed in a change of their own in this release.
+
+- 679b741: `Slider` no longer wraps MUI. It is built on Base UI's `Slider` and styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. It has a new look: a flat track and thumb with no shadow or hover halo, the current value shown next to the label, and `min` and `max` shown under each end of the track.
+
+  Breaking:
+
+  - `onChange(event, value)` is replaced by `onValueChange(value, details)`, and `onChangeCommitted` by `onValueCommitted`.
+  - An accessible name is required in TypeScript: pass `label`, or `aria-label` when there is no visible label.
+  - `Slider` is standalone only. It no longer picks up a label or helper text from a surrounding `FormControl`; pass `label` and `helperText` to the slider itself.
+  - Single value and horizontal only. Range sliders (an array `value`) and `orientation="vertical"` are not supported.
+  - MUI-only props are gone: `marks`, `valueLabelDisplay`, `valueLabelFormat`, `color`, `size`, `track`, `sx`, `slots` and `slotProps`. Use `format` and `locale` to control how the value, `min` and `max` are written, and `className` or `style` for one-off styling.
+  - `required` is gone. A slider always has a value.
+  - `ref` now points at the root `<div>` rather than MUI's `<span>`, and the markup no longer carries `MuiSlider-*` class names. Stylesheets that target those classes need updating.
+
+- 1d1f026: `FormStepper`, `ProgressCircle`, `StatusIcon`, `CheckAnimation`, `PulseAnimation` and `StatusAnimation` no longer use MUI. They are styled with CSS Modules from the design tokens, so they render without `LeaProvider`. Apart from the colour names, which change with the colour props of the other components in this release, and the size names of the three animations, their props are unchanged and they look and move the same.
+
+  Breaking:
+
+  - The markup no longer carries `MuiBox-root`, `MuiDivider-root` and `MuiCircularProgress-*` class names. The spinner in `StatusIcon` and `PulseAnimation` is the library's own.
+  - `StatusIcon` is built from `span` elements only, so it can sit inside a paragraph. Its spinner is hidden from assistive tech, which already gets the status from the icon's own name; before, it was an unnamed `progressbar` inside the image.
+  - The line under `FormStepper` is `border.base` (`#DBDBDB`) instead of MUI's `rgba(0, 0, 0, 0.12)`.
+
+- dfc1ef0: `Tabs` takes `color` instead of `variant`. The prop only ever chose the colour of the active pill, so it uses the role names of every other `color` prop. No colour changes, and the default is the same purple.
+
+  Breaking:
+
+  - `variant="brand"` is `color="primary"`, and `variant="greyscale"` is `color="secondary"`.
+  - `TabsVariant` is `Tabs.Color`.
+  - The root carries `data-color`, where it carried `data-variant`, for a test or a stylesheet that selects on it.
+
+- 1d1f026: `Tabs` and its parts are styled with a CSS Module from the design tokens instead of MUI's `sx`, so they render without `LeaProvider`. Their look is unchanged. So are their props, apart from `variant`, which is `color` in this release, and their names, which are a namespace in this release (`Tabs.Root`, `Tabs.List`, `Tabs.Tab`, `Tabs.Indicator`, `Tabs.Panel`).
+
+  Breaking: the markup no longer carries `MuiBox-root` class names.
+
+  The focus ring of a tab now sits 2px off the tab, like every other control, instead of against it.
+
+- 079a525: The Tailwind theme covers line heights, durations and the state opacities.
+
+  - `leading-none`, `leading-tight`, `leading-snug` and `leading-normal` are the Lea line heights: 1, 1.25, 1.4 and 1.5.
+  - `duration-fast`, `duration-normal` and `duration-emphasis` are the Lea durations: 0.15s, 0.2s and 0.3s.
+  - `opacity-hover`, `opacity-pressed` and `opacity-highlight`, also as a colour modifier: `bg-primary-base/hover`.
+
+  **Breaking**, for apps that use the theme: `leading-relaxed` and `leading-loose` no longer exist, and `leading-snug` is 1.4, where Tailwind's own is 1.375. A numbered line height such as `leading-6` is unchanged.
+
+- 1d1f026: `Text` no longer wraps MUI's `Typography`. It is a plain element styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. Text with no props looks the same: a `p` without margin, 16px regular at line height 1.5, in `text.base`.
+
+  `Text` now takes `textStyle`, `fontWeight`, `color`, the new `align`, `render`, `ref`, `className`, `style` and the attributes of the element. `TextProps` is exported. `ref` gives the rendered element and is typed `Ref<HTMLElement>`, since `render` decides which element that is.
+
+  Breaking:
+
+  - `component` is replaced by `render`, as on `Button` and `Stack`: `<Text component="h2">` becomes `<Text render={<h2 />}>`.
+  - `variant` is removed. `variant="body2"` becomes `textStyle="body-sm"`, which has line height 1.5 where `body2` had 1.43, so a line is 21px instead of 20px. `body1` was the default and needs no replacement. The other variants (`h1` to `h6`, `subtitle1`, `subtitle2`, `caption`, `button`) had no styles of their own in the Lea theme and rendered as body text: pick a `textStyle` for them.
+  - `sx` is removed. Space text with `Stack` and its `gap`, or use `className` or `style`.
+  - `color` takes a palette token by its path (`text.subtle`, `primary.base`, `status.error.base`) or `inherit`. MUI's own names (`primary`, `error`, `text.secondary`, `textSecondary`) and raw CSS colours are no longer accepted; pass a raw colour through `style`.
+  - `align` takes `start`, `center` or `end` instead of `left`, `center`, `right`, `justify` and `inherit`.
+  - `noWrap` and `gutterBottom` are removed.
+  - The element no longer carries `MuiTypography-*` class names.
+
+  `fontSize` still works and is still deprecated in favour of `textStyle`.
+
+- 1d1f026: `Tooltip` no longer wraps MUI's `Tooltip`. It is built on Base UI's `Tooltip` and `Popover` and styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. The bubble and the three built-in triggers look the same.
+
+  New: `openOn="hover" | "click"` chooses how it opens. Around `children` it defaults to `"hover"`: mouse hover and keyboard focus. The built-in trigger (`ariaLabel`, no children) defaults to `"click"`: click, tap, Enter or Space, and mouse hover as before; it stays open until dismissed, so it works on touch.
+
+  Breaking:
+
+  - `triggerSx` is replaced by `className` and `style`, which go on the built-in trigger button.
+  - The props passed through to MUI are removed: `arrow`, `slotProps`, `enterDelay`, `leaveDelay`, `open`, `onOpen`, `onClose`, `describeChild`, `id`, `disableHoverListener` and the rest. `title`, `placement`, `surfaceVariant`, `children`, `ariaLabel`, `triggerIcon` and `triggerVariant` are unchanged.
+  - Around a child, a text `title` no longer becomes the child's `aria-label`. The tooltip is now the child's description while it shows (`aria-describedby`), so an icon-only child that got its name from `title` needs its own `aria-label`.
+  - The bubble of the built-in trigger is a `dialog` named by the button instead of a `tooltip`. Focus moves into it when it is opened by click or keyboard, and Escape or Tab closes it and puts focus back on the button. Tests that look for `getByRole("tooltip")` after a click need `getByRole("dialog")`.
+  - A tooltip that opens on hover no longer opens on a long press on touch. Use `openOn="click"` for text people need on touch.
+  - The markup no longer carries `MuiTooltip-*` class names.
+
+  The focus ring of the built-in trigger is the library's dark ring instead of a purple one.
+
+### Minor Changes
+
+- 679b741: Add `AmountSlider`, for an amount that is chosen by dragging a slider or by typing it, such as the loan amount on the first page of an application. It shows a `label`, the amount in an editable field, the slider, and `min` and `max` under each end of the track.
+
+  The field and the slider share one value: moving the slider rewrites the amount, and typing an amount moves the thumb. A typed amount is kept as typed, also between two steps. One outside `min` and `max` is brought back into range when the field loses focus, and an emptied field goes back to the last amount.
+
+  The `label` is a real label for the amount field and also names the slider, `helperText` describes both, and `error` marks both invalid. `format` and `locale` decide how the amount, `min` and `max` are written. It is built on Base UI and styled with a CSS Module, so it renders without `LeaProvider`.
+
+- dfc1ef0: `AppHeader` takes a `logo`, shown in place of the Lea Bank logo, and a `className` for the `header` element.
+
+  ```tsx
+  <AppHeader logo={<img src="/partner-logo.svg" alt="Partner" width={100} />} />
+  ```
+
+- 1d1f026: Added `SkipLink`, a link for keyboard users to jump past the header to the main content: `<SkipLink href="#main">Hopp til hovedinnhold</SkipLink>`. It is hidden until it receives focus, looks like a neutral `Button`, and sits at the top left of the page. Place it first in the page.
+
+  The component existed in the source but was never exported, was always visible and removed its own focus outline.
+
+- 679b741: Add numbered spacing tokens, so a step no longer has to be multiplied out with `calc()`. `--lea-spacing-2` is two 8px steps, the same as `spacing(2)`, `<Stack gap={2}>` and `p-2` in the Tailwind theme.
+
+  | Token               | Value            |
+  | ------------------- | ---------------- |
+  | `--lea-spacing-0-5` | `0.25rem` (4px)  |
+  | `--lea-spacing-1`   | `0.5rem` (8px)   |
+  | `--lea-spacing-1-5` | `0.75rem` (12px) |
+  | `--lea-spacing-2`   | `1rem` (16px)    |
+  | `--lea-spacing-2-5` | `1.25rem` (20px) |
+  | `--lea-spacing-3`   | `1.5rem` (24px)  |
+  | `--lea-spacing-4`   | `2rem` (32px)    |
+  | `--lea-spacing-5`   | `2.5rem` (40px)  |
+  | `--lea-spacing-6`   | `3rem` (48px)    |
+  | `--lea-spacing-8`   | `4rem` (64px)    |
+
+  A half step writes the point as a hyphen, because a point is not valid in a custom property name. `--lea-spacing` is unchanged and is still the way to reach a value off the scale: `calc(var(--lea-spacing) * 7)`.
+
+- 3b123bb: Warning is amber. `status.warning` was the brand orange, 12 degrees of hue from the red of `status.error`, and the two tinted fills (`#FFDFD7` and `#FCDCDC`) could hardly be told apart. Error is unchanged.
+
+  | Token                   | Before    | After     |
+  | ----------------------- | --------- | --------- |
+  | `status.warning.base`   | `#FE653E` | `#F7A800` |
+  | `status.warning.subtle` | `#FFDFD7` | `#FFEFC7` |
+
+  - New scale `amber`, 50 to 950: `colors.amber[400]`, `var(--lea-color-amber-400)`, Tailwind `bg-amber-400`.
+  - `Alert` and `GlobalAlert` with `severity="warning"` and `Chip` with `color="warning"` are amber. The filled warning alert has dark text (`text.base`, 9.6:1), because white on amber is 2.0:1. The warning `Chip` takes its text from `amber-800` when filled and `amber-700` when outlined.
+  - `orange` is still a scale and still a brand colour. `BrandDivider` and the confetti of `CheckAnimation` look the same: they read the `blue` and `orange` scales now, not `status.info` and `status.warning`.
+
+  In an app:
+
+  - Anything that reads `status.warning` (`var(--lea-palette-status-warning-base)`, `bg-status-warning-subtle`) turns amber by itself. Text placed on `status.warning.base` should be `text.base`, not white.
+  - A warning drawn straight from the orange scale (`var(--lea-color-orange-400)`, `bg-orange-100`) stays orange. Move it to `status.warning`.
+  - Amber is too light for text or a thin line on white (`amber-400` is 2.0:1). Use `amber-700` (5.9:1).
+
+- 079a525: `Button`, `Alert`, `Dialog`, `Drawer`, `Accordion`, `Slider`, `AmountSlider` and `LinearFormStepper` take their text from the text styles and the type scale. Most look exactly as before. Three sizes move onto the scale:
+
+  | Text                      | Before | After |
+  | ------------------------- | ------ | ----- |
+  | `AmountSlider` label      | 24px   | 26px  |
+  | `AmountSlider` amount     | 40px   | 41px  |
+  | `LinearFormStepper` title | 24px   | 26px  |
+
+  Deprecate the older font sizes: the `FontSizeToken` type, `--lea-font-size-*`, the Tailwind classes `text-xs` to `text-6xl`, and the `fontSize` prop on `Text`. They are not on the type scale. They still work, and are removed in a later major. Use a text style instead: `--lea-text-heading-lg-*`, `text-heading-lg` or `<Text textStyle="heading-lg">`. The Type page in Storybook lists the nearest replacement for each size.
+
+  Add the colour token `bg.overlay` (`--lea-palette-bg-overlay`, `bg-bg-overlay`): the see-through layer behind a dialog or drawer, which `Dialog` and `Drawer` now use. Its value is the one they had.
+
+  Add Storybook pages for the tokens under Docs → Tokens: Colour, Type, Spacing, Radius and shadow, and Motion.
+
+- 679b741: Add text styles: size, weight, line height and letter spacing as one token, named `{role}-{size}` after what the text does rather than the element it sits in. `heading-lg` can be an `h1` on one page and an `h3` on the next, so the element still comes from the page hierarchy.
+
+  ```tsx
+  <Text render={<h2 />} textStyle="heading-lg">
+    Mine lån
+  </Text>
+  ```
+
+  ```css
+  .Title {
+    font-size: var(--lea-text-heading-lg-font-size);
+    font-weight: var(--lea-text-heading-lg-font-weight);
+    line-height: var(--lea-text-heading-lg-line-height);
+    letter-spacing: var(--lea-text-heading-lg-letter-spacing);
+  }
+  ```
+
+  The Tailwind theme has one utility per style: `text-heading-lg` sets all four.
+
+  | Role      | Sizes                              | Weight   | Line height |
+  | --------- | ---------------------------------- | -------- | ----------- |
+  | `display` | `sm` 52, `md` 66                   | semibold | 1           |
+  | `heading` | `xs` 16, `sm` 20, `md` 26          | semibold | 1.4         |
+  | `heading` | `lg` 32, `xl` 41                   | semibold | 1.25        |
+  | `body`    | `xs` 13, `sm` 14, `md` 16, `lg` 18 | regular  | 1.5         |
+  | `label`   | `sm` 13, `md` 14, `lg` 16          | medium   | 1.25        |
+
+  The sizes sit on a modular scale, 16px × 1.125 per step, rounded to a whole pixel. Two new token groups carry it: `--lea-font-step-{n}` for steps -2 to 12 (a step below body text is written `--lea-font-step-minus-1`), and `--lea-line-height-none`, `-tight`, `-snug` and `-normal`.
+
+  Nothing existing changes. The `fontSize` and `fontWeight` props on `Text`, `--lea-font-size-*` and the components keep their current sizes until each is moved to a text style.
+
+### Patch Changes
+
+- dfc1ef0: Three fixes in `DevPanel`:
+
+  - **The side payload (`placement="side"`) can be used.** A click inside it, on "Copy JSON" or on the close button, closed it before the click arrived, so nothing was copied. Focus did not move into it when it opened, and Tab did nothing while it was open. Now a click inside stays inside, focus moves to its close button, Tab stays within it, and Escape or a click outside closes it and returns focus to the toggle, as documented.
+  - **A step button is named by what it shows.** Its accessible name was an `aria-label`, `Steg 6: Skulder, gjeldende`, which did not contain the visible text as written and dropped a label that was not a string. The name is now the visible number and label with the status added for assistive tech: `Steg 6 Skulder (gjeldende)`. A test that finds a step by its full name needs the new one; matching on the label (`{ name: /Skulder/ }`) works as before.
+  - **The focus ring shows on the dark payload panels.** It was drawn in the colour of the panel, on the copy and close buttons and on "Copy JSON". It is white there now.
+
+- dfc1ef0: The asterisk of a required `RadioGroup` or `RadioCardGroup`, and of a `NumberInput` with its label outside the field, follows the label by a thin space, as on `Input`, `Select` and `Checkbox`. It sat about 12px from the text. When the label wraps, the asterisk stays with its last word.
+- 31da3b6: `Input`, `Autocomplete`, `EmailInput` and `PhoneNumberInput` are now named by their label. The wrapper around the field carried the same `id` as the input, and a `<label for>` resolves to the first element with that id, so the label pointed at the wrapper: screen readers announced the fields without a name, and clicking the label did not focus the input. The wrapper no longer has an id.
+
+  Three smaller fixes in the same area:
+
+  - The helper text link (`aria-describedby`) is now in the server-rendered markup. It used to be added after hydration.
+  - With a `tooltip`, the label of a radio group no longer includes the info button's name, and clicking the label text no longer opens the tooltip.
+  - The label of a radio card group without a tooltip sits 12px above the cards, like every other group label. It sat directly on them.
+
+- dfc1ef0: The `value/max` label of a `ProgressCircle` stays inside the ring. It was always 14px, so it ran into the ring in a small circle (`3/4` at `size={32}`) and with many digits (`20/20` at the default 48px). It is now set smaller where 14px does not fit, and is unchanged everywhere else. Below about 32px the label is too small to read: use `showValue={false}` there.
+- 6aa14f4: `@storybook/addon-a11y` is no longer installed with the library. It was listed as a runtime dependency, but only this repo's own Storybook uses it.
+- dfc1ef0: `Tabs` no longer pushes the page wider than the screen. The row of tabs was the least width the control could have wherever the layout sized it by its content, such as a flex row or a centred column, so three tabs with icons made a 390px page scroll sideways. The control is now as narrow as its container, and the tabs scroll inside their track, as they already did in a plain block.
+
 ## 7.3.0
 
 ### Minor Changes