A Material Design app bar (pp_app_bar/1), in the spirit of MUI's AppBar — a horizontal header bar with a leading slot (e.g. PhoenixPaper.Drawer.pp_drawer_toggle/1 on mobile), a title (the default slot), and trailing actions.

<.pp_app_bar position="sticky">
  <:leading><.pp_drawer_toggle for="app-drawer" /></:leading>
  My App
  <:actions>
    <.pp_button variant="icon"><.pp_icon name="hero-bell" /></.pp_button>
  </:actions>
</.pp_app_bar>

Named AppBar (not Navbar, an earlier name in this library) to match MUI's own naming — it's the same "toolbar" concept MUI's AppBar+ Toolbar pair covers, just one component here since there's no reason to split them when this library doesn't support multiple toolbar rows inside one bar the way MUI's composition technically allows.

position covers all five of MUI's values: static (normal flow), relative (normal flow, but establishes a positioning context for an absolutely-positioned child — e.g. a badge or a bottom-bar FAB notch you add yourself), sticky/fixed/absolute (self-explanatory, fixed pinned to the viewport, absolute pinned to the nearest positioned ancestor). There's no dedicated "bottom app bar" position value like some MUI examples build (sx={{ top: 'auto', bottom: 0 }}) — use position="fixed" with your own class="!top-auto !bottom-0" override instead; a real cut-out "notch" around a center FAB (MUI's bottom-app-bar demo) needs a CSS clip-path/mask shaped to a specific FAB size and isn't built in.

color="transparent" renders no background/text-color classes at all (fully see-through, inheriting the caller's own text color) — used over a hero image or video, for example. There's no MUI color="inherit" variant here: in this library's plain-CSS-class model there's no meaningful difference between "inherit text color, keep default background" and "no color classes at all", so only transparent is offered, covering both.

variant="dense" shrinks the toolbar row to MUI's dense Toolbar height (denser padding, smaller title text) — MUI's "prominent" app bar (a taller, two-row bar with the title below the icon row) isn't a single prop even in MUI itself, just a manually laid-out taller Toolbar; compose that yourself the same way, e.g. wrap the default slot's content across two flex rows and set class="h-32".