Default Card
Combine with layout utilities like `p-md` or `gap-sm` for content spacing.
Buttons
Each block shows the default, simulated hover, focus, and disabled states.
Primary (.btn)
Default
Hover (simulated)
Focus (simulated)
Disabled
Ghost (.btn-ghost)
Default
Hover (simulated)
Focus (simulated)
Disabled
Badges
Use `data-variant` for semantic colorways.
Default
Info
Critical
Neutral
Cards
Cards inherit focus-ring behaviour and support semantic states.
Hover (simulated)
Applies the hover shadow and lift.
Focus (simulated)
Rings appear on `focus-visible`.
Disabled
Opacity drops and the shadow is removed.
Layout Helpers
`.bv-stack` and `.bv-grid-video` consolidate our common feed and profile layouts.
Stack (.bv-stack)
Default spacing
Use `.bv-stack` for page-level groupings such as the watch history header and banners.
Nested card
The helper keeps consistent gaps without repeating `space-y-*` utilities.
Tight stack
Apply `.bv-stack--tight` when stacking compact forms or metadata blocks in profile views.
Form footer
The modifier inherits flex behaviour from `.bv-stack` while reducing the gap to `var(--space-md)`.
Video Grid (.bv-grid-video)
Feed Tile
Auto-fills with a 20rem minimum column size on desktop.
Subscription Tile
The grid collapses to a single column below 40rem.
Channel Tile
Reuse the same helper instead of duplicating inline grid declarations.
Form Inputs
`.input` works for both `<input>` and `<textarea>` elements.
Focus Ring Helper
Add `.focus-ring` to custom interactives when you opt out of `.btn` or other primitives.
Modal Surface
`.bv-modal` anchors the overlay, `.bv-modal-backdrop` dims the page, and `.bv-modal__panel` styles content.
Upload Video
Use `.input`, `.btn-ghost`, and `.modal-primary` primitives for consistent modal actions.
Profile & Edit Modal Shells
Both shells share the `.bv-modal` overlay and tokenized primitives (`.card`, `.btn`, `.btn-ghost`, `.badge`, `.grid-stack`, `.focus-ring`). Compatibility hooks like `modal-content` remain on the panels so legacy CSS selectors keep working alongside the new primitives.
Profile Modal
Static scaffold that mirrors `components/profile-modal.html`. Tab buttons keep their `aria-controls`/`data-state` attributes so designers can map the layout to controller behaviour.
Edit Video Modal
Layout reflects `components/edit-video-modal.html`. The `.bv-modal__panel.modal-content` pairing keeps backwards selectors alive while new primitives manage spacing and typography.
Grid Stack
Use `data-variant="cards"` for responsive columns or `data-orientation="vertical"` for flex stacks.
Card Grid
Card A
Card B
Card C
Vertical Stack
Row 1
Row 2
Row 3 (disabled)