Box Kite 2.2.17

3 November 2026 · npm · 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:

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, 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.