Default x-navbar to a site-header look

[avanelsas]

Summary

Out of the box x-navbar shipped as a rounded, fully-bordered card (--x-navbar-radius: 1rem + border: 1px solid ... on all four sides), and the demo worked around it with its own overrides — a tell that the default was wrong for the primary use case. This PR makes a bare <x-navbar> look like a real site header: edge-to-edge, no rounded corners, a single 1px bottom separator.

Changes

• x_navbar.cljs styles. Host default --x-navbar-radius → 0. [part=base] replaces border: 1px solid ... with border: 0; border-bottom: 1px solid var(--x-navbar-border). The four variants (default, subtle, inverted, transparent) had border-related overrides assuming a 4-sided base border; rewritten to target border-bottom-color instead.
• docs/x-navbar.md. --x-navbar-radius row updated (default 0) and renamed --x-navbar-border description from "Border color" to "Bottom separator colour". Added a one-line note explaining the card look is one override away.
• demo/x-navbar.html. Removes the now-redundant --x-navbar-radius: 0 on .topbar. The demo proves the new default matches the old demo visually without any override.
• Regression tests. Two new deftests: default-has-bottom-border-only-test asserts border-top/left/right-style: none, a non-none border-bottom-style, and 0px on all four border-*-radius corners; radius-escape-hatch-test confirms that style="--x-navbar-radius: 1rem" still takes effect for consumers who want the card look.

Escape hatch

Anyone who relied on the old look sets --x-navbar-radius: 1rem (e.g. via inline style or a wrapper class) and optionally wraps <x-navbar> in a container that provides page-edge padding. The --x-navbar-* custom properties are unchanged; only their default fallback values moved.

Test plan

• clj-kondo --lint src test — 0 warnings.
• npx shadow-cljs compile test — 0 warnings.
• npx shadow-cljs release lib — 0 warnings under Closure Advanced.
• npx shadow-cljs watch test → http://localhost:8021 — all baredom.components.x-navbar.* deftests green including the two new ones.
• npx shadow-cljs watch app → http://localhost:8000 → x-navbar demo:
  • Default variant renders edge-to-edge with a single bottom separator and no rounded corners.
  • sticky and elevated still work.
  • variant="subtle": no visible separator, transparent feel.
  • variant="inverted": dark background with a subtle bottom edge (not a four-sided border).
  • variant="transparent": no background and no separator.
  • Set style="--x-navbar-radius:1rem" on an ad-hoc navbar — rounded corners reappear.
  • Mobile at 320px: no horizontal overflow, bottom border still visible.

Risk

Anyone who dropped <x-navbar> into a page without any styling will see a different look. The escape hatch is documented and one line. This is a default-CSS change rather than an API shape change, so no version bump in this PR — that's a release decision to make separately.

🤖 Generated with Claude Code