Scoped bundle

A parallel CSS bundle prefixed _ao- and wrapped in @scope (._ao-admin-root). Use it when admin markup lives inside a host app that owns its own design system. The default @aortl/admin-css bundle stays unprefixed — use that one for full-page admin apps that own the document.

Vanilla CSS

<link rel="stylesheet" href="https://unpkg.com/@aortl/admin-css/dist/admin.scoped.min.css" />

<div class="_ao-admin-root">
  <button class="_ao-btn _ao-btn-primary">Save</button>
</div>

Via npm: import @aortl/admin-css/admin.scoped.css (or .min.css) from your bundler entry, then wrap admin markup in any element with class="_ao-admin-root". Every admin class — _ao-btn, _ao-card, _ao-input — must carry the prefix.

React

Nothing to switch on: @aortl/admin-react/styles.css is this bundle and there is no unscoped variant, so the React setup already produces a scoped subtree. Mount an <AdminRoot> around each admin surface rather than once at the app root.

Host-page style isolation

The _ao- prefix namespaces every admin class, so a host page’s .btn or .card rules can’t match admin elements. The @scope wrapper additionally pins admin’s tokens and color-scheme to ._ao-admin-root, which lets an embedded surface force its own theme without the host’s leaking in.

A host page’s bare element rules (h3 { … }, button { … }) can still target admin descendants; the prefix only namespaces classes, not tag selectors. The scoped bundle ships unlayered CSS so admin’s resets outrank an untouched host stylesheet. For hard isolation against arbitrary host CSS, put admin in a cascade layer the host can order (@layer host, admin;) or a shadow root.

Caveats

• Admin classes only match inside ._ao-admin-root. If you want admin’s tokens or utilities to apply across the whole host app, use the default unscoped bundle.
• Admin popups need their z-index lowered when host chrome should paint above them — see Popup layering.
• @scope is Baseline-modern (Chrome, Firefox, Safari). There is no legacy fallback.