# Be Partner DS

> A CSS-first, token-driven, framework-agnostic design system by BePartnerLabs.

Be Partner DS is a production-grade CSS design system built on semantic HTML, CSS custom properties, and native browser APIs. No build step required for consumers — drop in a stylesheet and go.

## Core principles

- **CSS-first**: All visual state is driven by ARIA attributes and native CSS pseudo-classes. No style classes toggled from JS.
- **Token-driven**: Design decisions live in CSS custom properties (`--bp-*`). Theming is a one-file override.
- **Framework-agnostic**: Works with React, Vue, Svelte, Angular, plain HTML, or any server-rendered output.
- **Progressive enhancement**: Every component is functional without JavaScript. JS adds keyboard navigation and focus management via Custom Elements.
- **WCAG AA**: All components pass axe-core audits. Accessibility is built in, not bolted on.

## Component list

- Accordion — native `<details>`/`<summary>` with CSS animation
- Badge — semantic status labels
- Breadcrumb — `<nav>` + `aria-current="page"` for current item
- Button — `<button>` and `<a>` variants with danger, ghost, secondary modifiers
- Card — layout shell with header, body, footer slots
- Carousel — CSS scroll-snap with roving tabindex keyboard navigation
- Datepicker — native `<input type="date">` styled with `accent-color`
- Dropdown — Custom Element (`<bp-dropdown>`) with keyboard navigation
- Footer — semantic `<footer>` layout
- Header — site header with nav integration
- Hero — full-width splash section
- Input — text, email, select, textarea with validation states
- Modal — native `<dialog>` with `showModal()` / `close()`
- Nav — primary site navigation
- Pagination — `<nav>` + `<ol>` with `aria-current` / `aria-disabled`
- Popover — native Popover API (`[popover]`, `popovertarget`)
- Skeleton / Spinner — loading placeholders with shimmer animation
- Table — sortable via `<bp-table>` Custom Element, `aria-sort` on `<th>`
- Tabs — `[aria-selected]`-driven tab panels
- Theme — CSS color scheme switcher
- Toast — JS API (`BpToast.show()`) with four semantic variants
- Tooltip — CSS-only with optional CSS Anchor Positioning

## Usage

```html
<!-- CDN (stylesheet only, no JS required for most components) -->
<link rel="stylesheet" href="https://unpkg.com/@be-partner-labs/ds/css/index.min.css" />

<!-- npm -->
npm install @be-partner-labs/ds
```

## Design tokens

All tokens are CSS custom properties on `:root`. Key namespaces:

- `--bp-primary` — brand accent color
- `--bp-color-*` — semantic colors (text, bg, border, success, error, warning, info)
- `--bp-space-*` — spacing scale (1–10)
- `--bp-radius-*` — border radius (sm, md, lg, xl, full)
- `--bp-shadow-*` — elevation (sm, md, lg)
- `--bp-font-*` — typography (size, weight, leading)

## Documentation

Full component docs, live previews, and copy-paste HTML at: https://ds.bepartnerlabs.com

## Source

GitHub: https://github.com/BePartnerLabs/ds

## License

MIT — BePartnerLabs