oks-ui 1.2 Release: New Features and Fixes

oks-ui 1.2 is available on npm. It is a big release for bundle size, accessibility and the TextEditor. Nothing was removed, so upgrading is safe.

npm install oks-ui@^1.2.0

Per-component imports

Every component can now be imported on its own, with its own stylesheet, so your app ships only what it uses:

import { Button } from "oks-ui/button";
import "oks-ui/button.css";

36 components have their own entry point. Each stylesheet includes the styles of the components it renders. The oks-ui barrel and oks-ui/styles.css keep working as before.

Colour that passes WCAG AA

Text on a colour, and text in a colour, now meets the 4.5:1 contrast ratio in both themes:

• Solid buttons, chips, badges, tabs, pagination and alerts use a deeper shade behind their labels.
• Labels on coloured fills flip with the theme instead of using hard-coded white or black.
• Coloured text variants (bordered, ghost, link, soft) use the deeper shade too.
• A new --oks-color-fg-muted token covers secondary text such as captions and table headers.

Brand colours themselves are unchanged and stay on decorative uses like dots and tints.

Focus traps that work

Modal and Drawer now trap Tab and Shift+Tab reliably. The trap used to miss the most common pattern — mounting the dialog closed and opening it later — and Shift+Tab could escape from the dialog panel.

TextEditor

The block editor got the biggest update:

• Headings 1–6 in the slash menu, in "Turn into", and in a new toolbar dropdown, with # to ###### shortcuts.
• Editing that behaves. Enter splits at the caret, Backspace merges at the join, the caret stays in place after every change, and undo groups typing into one step.
• Copy and paste keep headings, lists, code, tables and links from web pages, Google Docs and Word, and drop foreign fonts and colours.
• New exports blocksToHtml and blocksToMarkdown render saved content outside the editor.
• Tab indents list items, callouts have types, the toolbar stays visible in long documents, and read-only mode hides the toolbar.

Other additions

• Pagination accepts variant, color and radius, like Button and Chip.
• Checkbox accepts isSelected, defaultSelected and onSelectedChange, matching Chip.
• Chart can shorten long category labels with axisX.truncate and set its title level with titleAs.
• Table columns take an ariaLabel for icon-only columns.
• Nav has a --oks-nav-active-indicator token for an accent bar on the active link.

Fixes

• A horizontally scrolling Table no longer widens the page on phones.
• A small Chart (height={40}) renders at its real height instead of a 100 px minimum.
• A bare Checkbox no longer stretches across its row.
• Message renders a string avatar as an image.
• Accessibility fixes in Nav, Avatar, Calendar, DatePickerField, SplitLayout and Chart.

Upgrading

Install 1.2 and everything keeps working. For the bundle-size win, move imports to the per-component paths when convenient — the installation guide shows both styles.