Styling

A toolbar looks finished without any CSS:

• Plain <button>, <input>, <select> and checkboxes in a widget look like the toolbar's own push buttons and search field. Widget text is toolbar-sized, and unsized SVG such as <Icon name={Icon.Sun} /> is a 16 px icon.
• Window bodies style headings, paragraphs, buttons, fields, lists, tables, blockquote, .actions (a button row) and .engine (muted small print).
• Two classes cover the most common custom shapes:

<Readout label="Summary:" value={text} />     // .bundle-readout: a sunken label/value display
<button class="bundle-bubble">{line}</button> // a speech balloon (floating layout)

A Readout with onClick is a button with a hover state. The value truncates with an ellipsis.

Your CSS always wins. The defaults sit in a lower cascade layer, so any rule in styles overrides them, even a bare button { … }, without specificity tricks. Override single properties to keep the rest; give an element all: revert to start from the browser's look instead.

styles applies inside a CSS scope around this toolbar's band, floating body and window bodies. Select the band with :scope.bundle-bar and anything inside with ordinary selectors. Avoid the ID-based .bundle-bar--<id>, which breaks when a toolbar is duplicated. Unbalanced braces are rejected so a toolbar cannot restyle another.

Use the Banner 2 custom properties so widgets match the bar: --b2-text, --b2-text-2 and --b2-text-3 (text, secondary, tertiary), --b2-bar, --b2-window, --b2-field, --b2-field-border, --b2-hairline, --b2-focus and --b2-sans; and --ink-fill, --ink-plate, --ink-deep, --ink-edge and --ink-label for the toolbar's ink. The full sheet is src/assets/b2/tokens.css. The 0.3 families (--toolbar-*, --ui-*, --skin-*, --classic-*) are kept for existing scripts and now hold Banner 2 values; new styles should not use them.

Stable part classes: .bundle-brand (the plate), .bundle-button (toolbar buttons; it also turns a link into one), .bundle-search-input and .bundle-search-button, .bundle-split (split buttons), .bundle-readout with .bundle-readout-label and .bundle-readout-value, and .bundle-bubble. Put artwork in the file as SVG or CSS gradients; relative url() paths do not resolve to anything.