# Be Partner DS v1.4.8

> 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.
- **WCAG AA**: All components pass axe-core audits.

## 3-Level Constructor Pattern

Customization chain: `--bp-*` (base, never touch) → `--<component>-*` (your API) → `--_*` (internal, never touch).

Reference: https://www.giorgiosaud.io/notebook/custom-properties-with-defaults

## Responsive

Use `@container` queries, not `@media`. Every component root has `container-type: inline-size`.

## Grid

Root class: `.bp-content-grid`. Named-line CSS grid layout. Root class: .bp-content-grid. Zone classes go on DIRECT CHILDREN of the grid, not on the grid root itself.
Zones (class goes on the CHILD, not the grid root): content (default, no class), popout (class `.popout`), breakout (class `.breakout`), full-width (class `.full-width`).

## Component list

- Accordion — Native details/summary accordion — zero JavaScript required.
- Alert — Inline feedback message for persistent contextual notices — four semantic variants, optional dismiss, and left-accent stripe.
- Avatar — Circular user image using a native img element — with CSS-only initials fallback, size variants, and composable avatar groups.
- Badge — Inline label for status, counts, and categories — semantic color variants with solid, subtle, and outline styles.
- Breadcrumb — Navigation trail showing the user's location in a hierarchy — semantic `<nav>` + `<ol>` with CSS-only separators.
- Button — Interactive trigger element for actions and navigation.
- Card — Flexible content container with image, body, and footer slots.
- Carousel — CSS scroll-snap carousel — no JavaScript required for basic scrolling.
- Checkbox — Styled native checkbox with label wrapping, indeterminate support, error state, and group layout — built on the native `<input type="checkbox">` element.
- Date Picker — Styled native `<input type="date">` — browser calendar popup, zero JavaScript, full keyboard and screen reader support out of the box.
- Dropdown Menu — Accessible menu anchored to a trigger — CSS for appearance, a small Web Component for keyboard navigation and focus management.
- Footer — Site footer with a responsive column grid, brand slot, and link groups.
- Header — Sticky site header with glassmorphism and scroll-state shadow.
- Hero — Page hero section with CSS-only entrance animation via @starting-style.
- Input — Text inputs, textarea, and select — with label, hint, and error states.
- Modal — Native dialog element modal with CSS-only entrance animation and a blurred backdrop.
- Nav — Horizontal navigation with simple links, dropdowns, and a megamenu panel.
- Pagination — Page navigation controls built with `<nav>` + `<ol>` — active state via `aria-current`, disabled via `aria-disabled`. No JavaScript required.
- Popover — Floating panel anchored to a trigger — built on the native Popover API. No JavaScript required for show/hide.
- Radio — Single-select control for mutually exclusive options — uses native `<input type="radio">` inside a wrapping `<label>`.
- Skeleton / Spinner — Loading state placeholders — `.bp-skeleton` for content shapes with shimmer animation, `.bp-spinner` for indeterminate progress. Both respect `prefers-reduced-motion`.
- Table — Data table with sortable columns — CSS for appearance, a small Web Component for client-side sort. Scrollable on small viewports.
- Tabs — Accessible tabs component — CSS-driven visuals, minimal JS for state and keyboard navigation.
- theme — 
- Toast — Transient feedback notifications — semantic variants, auto-dismiss, optional action, WCAG AA.
- Toggle — On/off switch for boolean settings — a styled checkbox with role="switch" using native HTML and CSS only.
- Tooltip — Contextual label that appears on hover and focus — CSS-only, four placement variants, RTL-aware. No JavaScript required.

## Usage

```html
<link rel="stylesheet" href="https://unpkg.com/@be-partner-labs/ds/css/index.min.css" />
```

## Documentation

Full contract, live previews, and copy-paste HTML: https://ds.bepartnerlabs.com
Agent instructions: https://ds.bepartnerlabs.com/AGENTS.md
Machine-readable registry: https://ds.bepartnerlabs.com/registry/components.json
For AI agents: https://ds.bepartnerlabs.com/guides/for-ai/