feat(components): prepare package for public beta

Harden the component library ahead of a public beta release.

Accessibility:
- Darken --eb-color-border to meet the WCAG 2.2 3:1 non-text contrast
  minimum (1.95:1 -> 3.03:1 light, 2.04:1 -> 3.00:1 dark).
- Give Checkbox and Radio a 24x24px pointer target via a transparent
  ::before, leaving the 16px visual box unchanged.
- Add chart series tokens that meet 3:1 in both themes and sit in
  distinct lightness tiers, so series stay separable in grayscale and
  for red-green color vision deficiency.
- Let CardTitle render any heading level through `as`, so cards no
  longer force an h2 into the document outline.

Public API:
- Namespace every custom property under --eb-, including the internal
  primitives, so nothing collides with consumer properties. The library
  declares them at :where(:root), where an app's own :root rule wins.
- Rename primitives to describe their role: --eb-border-width,
  --eb-font-size-body, --eb-font-size-title, --eb-font-weight-*,
  --eb-line-height-*, --eb-color-scrim.
- Split --eb-color-red-700, which served both error borders and chart
  series 3, into --eb-color-danger and --eb-chart-series-*.
- Complete the spacing scale with --eb-size-5, -7, and -9, and promote
  the tooltip's inline shadow to --eb-shadow-raised-content.
- Publish all 38 tokens as supported API with a documented
  compatibility policy, enforced by tests/tokens.test.ts.

Packaging:
- Move charts to a @byearlybird/components/charts entry so the core
  entry no longer pulls in Recharts and its transitive redux and d3
  dependencies. Core bundle drops from 41.3kB to 30.5kB.
- Converge the Combobox backdrop on the same scrim treatment Dialog and
  Drawer use.

Release:
- Add CI running vp check, the workspace tests, and the workspace build
  on push and pull request.
- Document requirements, supported browsers, accessibility targets, and
  beta status; publish prereleases under the beta dist-tag.

BREAKING CHANGE: chart imports move to @byearlybird/components/charts,
and consumers referencing the old unprefixed tokens must adopt the
--eb- names.

Author: nickrmurphy

.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install Vite+
+        run: npm install -g vite-plus@0.2.6
+
+      - name: Install dependencies
+        run: vp install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: vp exec playwright install --with-deps chromium
+
+      - name: Format, lint, and type check
+        run: vp check
+
+      - name: Test
+        run: vp run -r test
+
+      - name: Build
+        run: vp run -r build

packages/components/README.md

@@ -2,9 +2,20 @@
 
 Reusable React components by Early Bird, built with TypeScript and CSS Modules.
 
-> [!WARNING]
-> **Status: Alpha.** The component library is under active development. Component APIs, styling,
-> and design tokens may change before 1.0.
+> [!NOTE]
+> **Status: Beta.** The public API is stabilizing. Breaking changes are still possible before 1.0,
+> but they will be called out in the changelog rather than shipped silently.
+
+## Requirements
+
+- **React** 19.2 or later (React 19 only).
+- **ESM only.** The package ships no CommonJS build.
+- **Browsers:** the current and previous release of Chrome, Edge, Firefox, and Safari. The styles
+  rely on `color-mix()` and CSS custom properties, so browsers without them are unsupported.
+- **Accessibility target:** WCAG 2.2 Level AA. Interactive controls meet the 3:1 non-text contrast
+  and 24×24px target-size minimums, and chart series meet 3:1 in distinct lightness tiers. Charts
+  still separate series by color and legend rather than by shape or dash pattern, so keep the
+  legend visible and do not rely on color as the sole cue in your own labeling.
 
 ## Install
 
@@ -31,7 +42,6 @@ pnpm add @fontsource-variable/karla
 ```tsx
 import "@fontsource-variable/karla";
 import {
-  BarChart,
   Button,
   ButtonIcon,
   Checkbox,
@@ -49,12 +59,10 @@ import {
   InputAction,
   InputGroup,
   InputIcon,
-  LineChart,
   Menu,
   MenuContent,
   MenuItem,
   MenuTrigger,
-  PieChart,
   Radio,
   RadioGroup,
   Select,
@@ -175,6 +183,18 @@ adornments need to sit beside it. `SelectLeadingIcon` and
 `ComboboxLeadingIcon` provide the same leading-icon composition for selection
 controls. `Textarea` extends the native textarea props.
 
+`CardTitle` renders an `h2` by default. Set `as` to the heading level that fits the
+surrounding document outline so cards do not break the page's heading order:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle as="h3">Recent activity</CardTitle>
+  </CardHeader>
+  <CardContent>...</CardContent>
+</Card>
+```
+
 ## Overlays
 
 Dialog and Drawer include themed backdrops, surfaces, titles, descriptions, triggers,
@@ -227,8 +247,40 @@ the shared tokens can import the standalone entry:
 ```
 
 `@byearlybird/components/style.css` already includes these tokens, so apps using the
-components should import only the component stylesheet. The standalone token entry
-contains the public theme values and the Pollen primitives used by the library.
+components should import only the component stylesheet.
+
+Every custom property the library defines is prefixed `--eb-` and every one of them is
+supported public API. Read them, compose them in `calc()`, or override them — they are
+meant to be built on, not just themed. Because the library declares them at
+`:where(:root)`, an application's own `:root` rule always wins without specificity tricks.
+
+```css
+.my-toolbar {
+  gap: var(--eb-size-2);
+  padding: var(--eb-size-3) var(--eb-size-4);
+  font-size: var(--eb-font-size-body);
+  border-block-end: var(--eb-border-width) solid var(--eb-color-border);
+}
+```
+
+### The token contract
+
+| Group      | Tokens                                                                                                                                                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Layout     | `--eb-border-width`, `--eb-size-1` … `--eb-size-10` (each step is 4px)                                                                                                                                 |
+| Typography | `--eb-font-family`, `--eb-font-size-body`, `--eb-font-size-title`, `--eb-font-weight-regular`, `--eb-font-weight-semibold`, `--eb-line-height-none`, `--eb-line-height-normal`                         |
+| Color      | `--eb-color-primary`, `--eb-color-primary-text`, `--eb-color-background`, `--eb-color-text`, `--eb-color-text-muted`, `--eb-color-border`, `--eb-color-muted`, `--eb-color-danger`, `--eb-color-scrim` |
+| Charts     | `--eb-chart-series-1`, `--eb-chart-series-2`, `--eb-chart-series-3`                                                                                                                                    |
+| Shape      | `--eb-radius-surface`, `--eb-radius-input`, `--eb-radius-button`                                                                                                                                       |
+| Elevation  | `--eb-shadow-raised-content`, `--eb-shadow-elevated-content`                                                                                                                                           |
+| Motion     | `--eb-motion-duration`, `--eb-motion-easing-standard`, `--eb-motion-easing-out`                                                                                                                        |
+
+**Compatibility policy.** Adding a token is a minor release. Renaming or removing one, or
+changing what it means, is a breaking change and will appear in the changelog. Adjusting a
+token's _value_ — a shade, a duration — is a minor release, so pin the value yourself if
+your design depends on an exact number. The set is enforced by `tests/tokens.test.ts`,
+which fails the build if a token is dropped, renamed, or added without being documented
+here.
 
 ```css
 :root {
@@ -237,8 +289,10 @@ contains the public theme values and the Pollen primitives used by the library.
   --eb-color-background: #faf9f6;
   --eb-color-text: #252523;
   --eb-color-text-muted: color-mix(in srgb, var(--eb-color-text) 65%, transparent);
-  --eb-color-border: #b8b5ad;
+  --eb-color-border: #939088;
   --eb-color-muted: #e3e1da;
+  --eb-color-danger: #b91c1c;
+  --eb-color-scrim: #000;
   --eb-font-family: "Karla Variable", "Karla", ui-sans-serif, system-ui, sans-serif;
   --eb-radius-surface: 2px;
   --eb-radius-input: 9999px;
@@ -249,11 +303,22 @@ contains the public theme values and the Pollen primitives used by the library.
 }
 ```
 
+Use `--eb-color-danger` for error and destructive states; it is the border color the
+Input and Textarea error styles already use. `--eb-color-scrim` is the base color for
+modal backdrops and is intentionally black in both themes — compose it with `color-mix()`
+rather than overriding it to a theme color.
+
 Use `--eb-color-text-muted` for secondary content such as timestamps,
 metadata, and supporting icons. It derives a translucent color from the active
 text color, so it follows both light and dark themes while preserving the color
 of the surface beneath it. Use `--eb-color-muted` for muted surfaces instead.
 
+> [!IMPORTANT]
+> Because `--eb-color-text-muted` is translucent, its contrast depends on whatever sits
+> behind it. Against the default background it measures 4.77:1 in light mode and 5.89:1
+> in dark mode. If you override `--eb-color-text` or `--eb-color-background`, or place
+> muted text on a `--eb-color-muted` surface, re-check it against the 4.5:1 minimum.
+
 The standard motion duration is the default for control feedback, visual-state
 changes, and larger surface or shape transitions. Pair it with the standard easing
 for general state changes, or use the out easing when movement or expansion should
@@ -296,9 +361,17 @@ tricks.
 
 ## Charts
 
+Charts ship from a separate entry so applications that do not render charts never pull
+Recharts into their bundle:
+
+```tsx
+import { BarChart, LineChart, PieChart } from "@byearlybird/components/charts";
+```
+
 The library includes opinionated line, bar, and pie charts powered by Recharts. Each chart
 is responsive, supports light and dark themes, and uses the existing component color
-tokens by default.
+tokens by default. `@byearlybird/components/style.css` covers both entries, so there is no
+separate chart stylesheet to import.
 
 ```tsx
 const data = [
@@ -338,8 +411,27 @@ const data = [
 />;
 ```
 
-Set a series `color` or pass a `colors` array to `PieChart` when a product-specific
-palette is needed. CSS color values, including application theme variables, are
+Series are colored from `--eb-chart-series-1` through `--eb-chart-series-3`, cycling if a
+chart has more series than that. Each one meets the 3:1 non-text contrast minimum against
+the default background in both themes, and the three sit in distinct lightness tiers so
+they stay separable in grayscale and for red-green color vision deficiency.
+
+Override them to match a product palette:
+
+```css
+:root {
+  --eb-chart-series-1: #1d4ed8;
+  --eb-chart-series-2: #0e7490;
+  --eb-chart-series-3: #b45309;
+}
+```
+
+If you do, keep each color at 3:1 or better against your chart background and vary
+lightness as well as hue — a palette that differs only by hue collapses for a
+meaningful share of users.
+
+Set a series `color` or pass a `colors` array to `PieChart` when a single chart needs to
+depart from the palette. CSS color values, including application theme variables, are
 supported.
 
 ## Develop
@@ -367,11 +459,13 @@ The package build is written to `dist/`, and the static Storybook site is writte
 
 ## Publish
 
-Authenticate with npm, choose a new version, then publish:
+Authenticate with npm, choose a new version, then publish under the `beta` dist-tag so
+prereleases never become `latest`:
 
 ```bash
 vp dlx bumpp
-pnpm publish
+pnpm publish --tag beta
 ```
 
-The package is configured for public scoped publishing.
+The package is configured for public scoped publishing. CI runs `vp check`, `vp test`,
+and the workspace build on every push and pull request; publishing stays manual.

packages/components/package.json

@@ -34,6 +34,10 @@
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
+    "./charts": {
+      "types": "./dist/charts.d.mts",
+      "import": "./dist/charts.mjs"
+    },
     "./package.json": "./package.json",
     "./tokens.css": "./dist/tokens.css",
     "./style.css": "./dist/style.css"

packages/components/src/charts.ts

@@ -0,0 +1,9 @@
+import "./styles/tokens.css";
+
+export { BarChart } from "./components/Charts/BarChart.tsx";
+export type { BarChartProps } from "./components/Charts/BarChart.tsx";
+export type { ChartSeries, ChartValueFormatter } from "./components/Charts/Chart.types.ts";
+export { LineChart } from "./components/Charts/LineChart.tsx";
+export type { LineChartProps } from "./components/Charts/LineChart.tsx";
+export { PieChart } from "./components/Charts/PieChart.tsx";
+export type { PieChartProps } from "./components/Charts/PieChart.tsx";

packages/components/src/components/Button/Button.module.css

@@ -5,16 +5,16 @@
   justify-content: center;
   box-sizing: border-box;
   max-width: 100%;
-  min-height: var(--size-10);
-  padding-inline: var(--size-4);
-  gap: var(--size-2);
-  border: var(--size-px) solid var(--eb-color-primary);
+  min-height: var(--eb-size-10);
+  padding-inline: var(--eb-size-4);
+  gap: var(--eb-size-2);
+  border: var(--eb-border-width) solid var(--eb-color-primary);
   border-radius: var(--eb-radius-button);
   font-family: var(--eb-font-family);
-  font-size: var(--scale-00);
+  font-size: var(--eb-font-size-body);
   font-style: normal;
-  font-weight: var(--weight-semibold);
-  line-height: var(--line-none);
+  font-weight: var(--eb-font-weight-semibold);
+  line-height: var(--eb-line-height-none);
   text-decoration: none;
   white-space: nowrap;
   cursor: default;
@@ -54,7 +54,7 @@
 }
 
 .iconSize {
-  width: var(--size-10);
+  width: var(--eb-size-10);
   padding-inline: 0;
   aspect-ratio: 1;
 }

packages/components/src/components/Card/Card.module.css

@@ -2,16 +2,16 @@
   box-sizing: border-box;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  border: var(--size-px) solid var(--eb-color-border);
+  border: var(--eb-border-width) solid var(--eb-color-border);
   border-radius: var(--eb-radius-surface);
   overflow: hidden;
   color: var(--eb-color-text);
   background: var(--eb-color-background);
   font-family: var(--eb-font-family);
-  font-size: var(--scale-00);
+  font-size: var(--eb-font-size-body);
   font-style: normal;
-  font-weight: var(--weight-regular);
-  line-height: var(--line-normal);
+  font-weight: var(--eb-font-weight-regular);
+  line-height: var(--eb-line-height-normal);
 }
 
 .card > :not(.image) {
@@ -20,26 +20,26 @@
 
 .header {
   box-sizing: border-box;
-  padding: var(--size-4) var(--size-4) 0;
+  padding: var(--eb-size-4) var(--eb-size-4) 0;
 }
 
 .title {
   margin: 0;
   color: var(--eb-color-text);
   font-family: var(--eb-font-family);
-  font-size: var(--scale-2);
+  font-size: var(--eb-font-size-title);
   font-style: normal;
-  font-weight: var(--weight-semibold);
-  line-height: var(--line-normal);
+  font-weight: var(--eb-font-weight-semibold);
+  line-height: var(--eb-line-height-normal);
 }
 
 .content {
   box-sizing: border-box;
-  padding: var(--size-4);
+  padding: var(--eb-size-4);
 }
 
 .header + .content {
-  padding-top: var(--size-2);
+  padding-top: var(--eb-size-2);
 }
 
 .image {
@@ -48,8 +48,8 @@
   grid-column: 1;
   align-self: center;
   width: 100%;
-  max-width: calc(var(--size-10) * 3);
-  margin: var(--size-3) 0 var(--size-3) var(--size-3);
+  max-width: calc(var(--eb-size-10) * 3);
+  margin: var(--eb-size-3) 0 var(--eb-size-3) var(--eb-size-3);
   aspect-ratio: 1;
   border-radius: var(--eb-radius-surface);
   object-fit: cover;
@@ -59,12 +59,12 @@
   grid-row: 1;
   grid-column: 2;
   align-self: end;
-  padding: var(--size-3) var(--size-3) 0;
+  padding: var(--eb-size-3) var(--eb-size-3) 0;
 }
 
 .image ~ .content {
   grid-row: 2;
   grid-column: 2;
   align-self: start;
-  padding: var(--size-2) var(--size-3) var(--size-3);
+  padding: var(--eb-size-2) var(--eb-size-3) var(--eb-size-3);
 }

packages/components/src/components/Card/Card.stories.tsx

@@ -23,7 +23,7 @@ const META = {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: "calc(var(--size-10) * 10)" }}>
+      <div style={{ width: "calc(var(--eb-size-10) * 10)" }}>
         <Story />
       </div>
     ),