Component library

Semantic by construction

30 components across 6 categories. Every one is built on a real HTML element — <button>, <dialog>, <details>, <table> — with data-bn-* attributes for variants and zero CSS classes.

• Button

  <button>

  Primary, secondary, destructive, and ghost variants on a native button.

• Input

  <input>

  Text, email, password, and search inputs with label, help, and error states.

• Textarea

  <textarea>

  Auto-sizing textarea with field-sizing: content and a vertical resize handle.

• Select

  <select>

  Native select with appearance: base-select progressive enhancement.

• Checkbox

  <input>

  Native checkbox with custom indicator built from CSS pseudo-elements.

• Radio Group

  <fieldset>

  Grouped radio inputs inside a fieldset/legend with keyboard support.

• Toggle

  <input>

  Switch-style checkbox with role="switch" and animated thumb.

• Combobox

  <div>

  Filterable single-select with listbox semantics and keyboard navigation.

• Multiselect

  <div>

  Tag-based multi-value select with chip removal and keyboard support.

• Alert

  <div>

  Inline status box with info, success, warning, and error variants.

• Progress

  <progress>

  Native progress element with deterministic and indeterminate states.

• Spinner

  <span>

  CSS-only loading indicator with three sizes and a screen-reader label.

• Skeleton

  <div>

  Animated placeholder for content that is still loading.

• Badge

  <span>

  Compact status pill with semantic color variants.

• Card

  <article>

  Article element with header/body/footer slots and hover affordance.

• Accordion

  <details>

  Native details/summary stack — exclusive or multi-open.

• Tabs

  <div>

  Tablist with arrow-key navigation and proper ARIA wiring.

• Avatar

  <span>

  Initials fallback with optional image source and four sizes.

• Breadcrumb

  <nav>

  Ordered list of links inside a nav with aria-current on the leaf.

• Pagination

  <nav>

  Page navigation with first, prev, next, last, and ellipsis handling.

• Command Palette

  <dialog>

  Modal dialog with grouped commands, fuzzy filter, and shortcuts.

• Table

  <table>

  Native table with caption, sticky header, and hover row highlight.

• Data Grid

  <table>

  Sortable, selectable grid built on native table with arrow-key navigation.

• Tree

  <ul>

  role="tree" list with expand/collapse and selection state.

• Virtual List

  <div>

  Windowed list — only renders the visible slice for long collections.

• Dialog

  <dialog>

  Native modal dialog with backdrop, focus trap, and escape-to-close.

• Drawer

  <aside>

  Side sheet for settings and secondary tasks. Slides in from any edge.

• Dropdown Menu

  <menu>

  Popover-anchored menu with keyboard navigation and shortcuts.

• Tooltip

  <span>

  Popover-anchored tooltip with role="tooltip" and four positions.

• Toast

  <output>

  Live region for non-blocking notifications. Auto-dismisses.

Design axioms

1. No namespace theater

   Components are built on W3C primitives. No app-button, no my-dialog. A button is a <button>.

2. Zero inline styles

   All CSS lives in cascade layers. No style="", no CSS-in-JS. Variants are addressed with data-variant="".

3. display: contents on hosts

   Wrappers don't affect layout. The component you ask for is the box you get.

4. Trinity standard

   State, logic, and template fuse in one file. No splitting across three.