Overlays & Feedback
Transient surfaces — they appear over the page, then leave. Shadows lift only what genuinely floats. Modals, drawers, and toasts run through window.AcrossUI; tooltips and popovers are CSS/markup.
Modal
AcrossUI.across-modalA centered dialog for focused tasks — backdrop, Esc, and click-out all close it. Trigger with data-modal-open; dismiss with data-modal-close.
<button class="across-btn across-btn--primary" data-modal-open="my-modal">Add a city</button>
<div class="across-modal-backdrop" id="my-modal" style="display:none">
<div class="across-modal" role="dialog" aria-modal="true">
<header class="across-modal__head"><h3 class="across-modal__title">Add a city</h3>
<button class="across-modal__close" data-modal-close><i class="ph-light ph-x"></i></button></header>
<div class="across-modal__body">…</div>
<footer class="across-modal__foot">
<button class="across-btn across-btn--ghost" data-modal-close>Cancel</button>
<button class="across-btn across-btn--primary" data-modal-close>Add</button></footer>
</div>
</div>Drawer & Sheet
AcrossUI.across-drawerAn edge-anchored panel for detail and settings — slides from the right (or left/bottom). Same trigger pattern as modal: data-drawer-open / data-drawer-close.
<button class="across-btn" data-drawer-open="my-drawer">Open details</button>
<div class="across-drawer" id="my-drawer">
<div class="across-drawer__backdrop"></div>
<div class="across-drawer__panel">
<div class="across-drawer__head">…<button class="across-drawer__close" data-drawer-close></button></div>
<div class="across-drawer__body">…</div>
<div class="across-drawer__foot"><button class="across-btn across-btn--primary" data-drawer-close>Done</button></div>
</div>
</div>Toast
AcrossUI.across-toastBrief confirmation that something happened. Fired imperatively; auto-dismisses; stacks bottom-right. Four semantic kinds.
AcrossUI.across-toast({ kind: "success", title: "Pinned", desc: "USD → EUR added." });
AcrossUI.across-toast({
kind: "info", title: "Removed",
action: { label: "Undo", onClick: function () { /* … */ } }
});Tooltip & Popover
.across-tip · .across-popTooltip is a tiny label on hover/focus (CSS only). Popover is a click-toggled panel of richer content — auto-wired by primitives.js, closes on outside-click and Esc.
<span class="across-tip across-tip--top">
<button class="across-btn across-btn--icon"><i class="ph-light ph-arrow-clockwise"></i></button>
<span class="across-tip__bubble">Refresh rates</span>
</span>
<span class="across-pop">
<button class="across-btn across-pop__trigger">Options</button>
<div class="across-pop__panel" hidden>…</div>
</span>Banner
.across-bannerA full-width notice — for context that outlives a toast (vs. the inline .across-alert). A leading accent rail carries the semantic; one filled --accent variant for the single top-of-app announcement.
<div class="across-banner across-banner--info">
<span class="across-banner__icon"><i class="ph-light ph-info"></i></span>
<div class="across-banner__body"><strong>Rates delayed 60s</strong> <span>on free.</span></div>
<div class="across-banner__actions"><button class="across-btn across-btn--sm">Upgrade</button></div>
</div>