# Box Kite 2.2.17

_Box Kite 2.2.17 · a markdown copy of https://www.box-kite.dev/releases/2.2.17/_

_3 November 2026 · [npm](https://www.npmjs.com/package/@box-kite/react) · [Compare v2.2.16...v2.2.17](https://github.com/box-kite/box-kite/compare/v2.2.16...v2.2.17)_

A checkbox's tick and a radio's dot now follow the theme, a design and Windows High Contrast, where a checked box used to look unchecked — and a closing dialog, popover, menu or date picker keeps its content until its exit has finished.

## A checkbox's tick is a colour you choose, and it stays visible in high contrast

The tick, the indeterminate dash and the radio dot used to be images with white written into them, so nothing on the page could recolour them: not a dark theme, not a design, and not Windows High Contrast, which kept the white tick and replaced the fill under it with white. They are shapes now, drawn on the control's `::before` and painted by its `bgColor`, so a design recolours a mark the way it recolours anything else:

```tsx
Box.components({
  checkbox: { styles: { theme: { dark: { checked: { bgColor: 'base-50', before: { bgColor: 'base-950' } } } } } },
});
```

`maskImage` takes the three shapes as values (`'check'`, `'dash'`, `'dot'`) for a control of your own. Thanks to the reader who pointed out, under our [dark mode article](https://www.box-kite.dev/blog/dark-mode-without-the-flash/), that a colour written into an SVG does not follow the theme.

## Breaking changes

None.

## Fixes

- **A closing `Dialog`, `Popover`, `Menu` or `DatePicker` emptied before its exit ran**, so a sheet slid out as a blank panel and a date picker shrank to its padding before fading. Content gated with `{open && <Form />}` — the pattern each component's docs recommend — and the date picker's own calendar now stay on screen until the layer's exit transition has finished, then unmount. Under `prefers-reduced-motion` the exit takes no time, so they unmount in the same commit as before.
- **A closing `Combobox` left a scrollbar behind while its list faded out.** The layer an `Overlay` positions its content in took the browser's `overflow: auto` for popovers, so the few pixels the content slides on its exit made it scrollable. It is `overflow: visible` now, which also covers the `Dropdown`, `Tooltip` and DataGrid popups built on it.
- **An Azure dialog or popup with a text field could scroll on both axes for as long as it was open.** The design frosted its layers with `backdropBlur`, which makes an element the containing block of every `position: fixed` element inside it — so a password manager's badge on the field landed inside the dialog and made it scrollable. The Azure template from `npm create @box-kite` draws its dialog and floating layers near-opaque instead, and keeps the blur on the page behind a modal.
- **A checked `Checkbox` or `RadioButton` looked unchecked under forced colours on a light scheme** (bug #317). The fill is `Highlight` and the mark `HighlightText` there now, in every theme.
- **A `RadioButton` with no label stretched across its container in Firefox** (bug #318). It is `inline-block`, like `Checkbox`.

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_