bearnie

Marquee, Banner, Rating, Video — and smarter data components

Four new components, sortable tables, sidebar icon rail with persistence, gated steppers, responsive carousel breakpoints, and simpler default shadows.

registry 0.10.0
All releases

New components

  • Marquee — infinite CSS-only scrolling strip for logos and testimonials: duration, direction, gap, edge fade, pause on hover, and no animation under prefers-reduced-motion. Ships zero JavaScript.
  • Banner — announcement bar with default/muted/dark/outline variants and an optional dismissible button; give it an id and the dismissal persists in localStorage with no flash on return visits. position="top" | "bottom" pins it to a viewport edge, floating detaches it with margins, rounding, and a shadow, align shrinks floating banners to their content (start/center/end), and an actions slot holds button rows for privacy notices. Dispatches banner-dismiss.
  • Rating — static star rating with fractional values (value={4.5}), custom max, and a proper role="img" label for screen readers.
  • Video — lazy YouTube/Vimeo embed: renders a thumbnail facade and only creates the player iframe (via youtube-nocookie.com) when clicked, saving ~1MB of player JavaScript on page load. Accepts watch/share/shorts/embed URLs or bare YouTube ids.

Improved

  • Sidebar icon rail. collapsible="icon" keeps a 3rem rail of icons when collapsed on desktop — labels and group labels hide automatically.
  • Sidebar persistence. New persist prop (a localStorage key) saves and restores the open/collapsed state across page loads on desktop.
  • Sidebar mobile backdrop. When the sidebar overlays content on mobile, a backdrop appears behind it; clicking it closes the sidebar.
  • Sortable tables. TableHead accepts sortable — clicking cycles ascending/descending with aria-sort and indicator icons, sorting numerically when cell text is numeric (currency/percent formatting stripped) and alphabetically otherwise.
  • Stepper gating. New linear prop blocks clicking steps beyond the furthest step reached. Buttons with data-stepper-next/data-stepper-prev advance or rewind the stepper, and it dispatches a bubbling stepper-change CustomEvent with { step }.
  • Carousel breakpoints. New breakpoints prop maps media queries to slidesPerView/spacing overrides, e.g. { "(min-width: 1024px)": { slidesPerView: 3 } }.

Changed

  • Simpler shadows. bearnie.css no longer remaps Tailwind’s --shadow-* tokens to custom layered elevation values; components use Tailwind’s default shadow scale. The old shadows included a 1px ring layer that doubled up with component borders. If you liked them, define your own --shadow-* overrides in your @theme block.

Fixed

  • Horizontal steppers no longer overflow their container: StepperItem lost its shrink-0 so long titles and descriptions wrap, and StepperSeparator compresses before the row overflows.