5.0.0

[felix-bohlin]

Ok this happened faster than anticipated! But it's not as big of a change as you think!

Breaking

This is technically very breaking, but with a little prompting from you it's probably not a big deal for you. Hopefully you'll understand the reasoning behind this.

Every OPUI-owned class now has a ui- prefix. This eliminates collisions with consumer styles and makes library classes self-identifying in the DOM.

• Component prop API is unchanged: <Button size="small" variant="outlined" color="primary"> works exactly as before.
• Raw HTML / CSS users must rename every library class. <button class="button outlined"> → <button class="ui-button ui-outlined">. .button { ... } overrides → .ui-button { ... }.
• CSS custom properties (--primary, --surface-default, --size-3, …) are unchanged.
• The framework component renders prefixed classes (<button class="ui-button ui-small ui-outlined ui-primary">); only the rendered HTML changes, not the public prop API.
• Divider, Progress, Table, Tabs, and Description List now render and style prefixed classes end-to-end (.ui-divider, .ui-progress, .ui-table, .ui-tab-label, .ui-tab-panel, .ui-term). Plain <hr>, <progress>, and <table> elements no longer pick up library styles unless the class is present.
• Toggle Button: pressed state no longer adds an unprefixed selected class.
• Avatar: removed unused spacing prop and related group gap classes.

Migration

Run a project-wide find/replace per token, prompt or whatever. Below are all the classes that got a ui- prefix.

Migrated classes

abbr, accordion, actions, align-end, anchor, anchor-floating, auto-fit, avatar, backdrop-transparent, badge, badge-indicator, block-end, block-start, blockquote, border-filled, border-primary, border-tonal, border-top, bordered, button, button-group, callout, caption, card, checkbox, chip, cite, close-button, code-block, content, critical, dark, default, del, dense, description, description-list, dfn, dialog, disabled, divider, dot, dotted, drawer, elevated, end, end-end, end-start, end-text, exiting, field, field-description, field-group, fieldset, fieldset-item, filled, footer, form, gutterless, h1, h2, h3, h4, h5, h6, header, hgroup, icon, icon-button, icon-checked, icon-only, icon-unchecked, info, inline-end, inline-start, ins, inset, invisible, item, kbd, label, large, legend, light, link, list, mark, multiline, neutral, not-rich-text, outlined, overline, p, prefix, primary, progress, radio, range, rich-text, rounded, row, s, samp, scroll-lock, select, small, spacious, spread, squared, squircle, sr-only, stack, start, start-start, start-text, sub, success, suffix, sup, switch, tab-input, tab-label, tab-panel, table, tabs, term, text, text-field, textarea, title, toast, toggle-button, toggle-group, tonal, tooltip, transparent, u, value, var, vertical, warning, with-arrow, x-small.

After the search/replace, do a visual smoke test — there is no automated codemod for consumer projects.

---

This discussion was created from the release 5.0.0.