Migrating 0.8 to 0.9

Machine-readable migration graph: MIGRATIONS.json.

One required change, and it is a one-word addition.

1. Add ui-menu--dropdown to your menus

.ui-menu used to weld its placement into the surface: position: absolute plus an offset relative to its trigger. That made the class unusable for a menu opened at a POINT — a canvas context menu, a long-press sheet — so a consumer with one re-declared the panel, border, radius and shadow just to get a surface.

Placement is now opted into:

 <details class="ui-menu-host" data-bronto-menu>
   <summary class="ui-button ui-button--subtle">Menu</summary>
-  <div class="ui-menu">
+  <div class="ui-menu ui-menu--dropdown">

Without the modifier the surface renders in normal flow. Nothing else changed: --dropdown carries exactly the declarations that used to be unconditional.

For a menu you position yourself, use ui-menu--at-pointer and set left/top (or the logical equivalents) from the host — Bronto only takes it out of flow and gives it the popover layer.

2. Optional: adopt ui-row

New in the default bundle, so it costs nothing to try. If you have a list of selectable lines that is not a table and not a menu — search results, an explorer, an outline, backlinks, commits — that is ui-row:

<button class="ui-row ui-row--ruled" type="button" aria-selected="true">
  <span class="ui-row__mark" aria-hidden="true">◆</span>
  <span class="ui-row__title">apps/server/src/collab/room.ts</span>
  <span class="ui-row__meta">4m</span>
</button>

__title truncates; __meta does not. Selection reads aria-selected or aria-current, so the visual state cannot disagree with what a screen reader announces. Rows carrying a severity want ui-severity-row instead.

ui-menu__item composes it, so menu items and rows cannot drift apart.

3. Know what data-density actually does

No change in behaviour — a correction to what the docs claimed. The preset re-points the --space-* scale, so it moves the ~40 components whose padding is expressed in that scale and none of the rest. ui-alert and ui-menu__item are the two most likely to surprise you.

The others carry tuned pairs like 0.5rem 0.55rem that a seven-step scale cannot express; flattening them would change the default rendering everyone uses. If you need a denser variant of a component that does not respond, override its padding — and if you do that repeatedly for the same component, report it, because that is evidence for a real --dense modifier.

Nothing else changed

No class was removed or renamed. bronto-ui-check will not report anything new for a 0.8-clean consumer.