Skip to content

v0.7.0 — Compact account control: <power-strip variant="compact">

Choose a tag to compare

View all tags
@sergeychernyshev sergeychernyshev released this 25 Oct 10:38
· 11 commits to main since this release
v0.7.0
58bf370
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

A compact variant of <power-strip>: one account control for your app's own header, instead of the corner strip.

<power-strip variant="compact"></power-strip>
  • Signed out: a "Log in" pill (person icon and words). With one provider it links straight to it; with several it opens the provider dialog. Hide its label with ::part(login-label) and it's a circle the size of the avatar, for narrow headers.
  • Signed in: a round avatar (picture or initials) opening an account menu with everything the full strip does: name and email, account switching, Account settings, Profile, Admin, Stop impersonating, Log out. Keyboard navigable, with focus returned to the avatar.
  • Right on the first paint: the worker now writes auth-state="signed-in|signed-out" onto the page's <power-strip> from the session, and the component remembers the last profile it showed, so the control appears in its final shape before /api/me answers.
  • Themable: new --ps-* tokens (control, menu, font, focus ring) and ::part names; your page's declarations win over the component's defaults.
  • JavaScript API for both variants: state, account, ready, and a power-strip:change event.

Good to know

  • Pages that carry auth-state are now sent with Cache-Control: private (they differ per visitor): public and s-maxage are dropped; private and no-store are kept.
  • A compact control that's hidden doesn't call /api/me until it's shown.
  • The full strip renders as before.

See the README's "Compact account control for your own header" and #115 for full detail.

Assets 2
Loading