Skip to content

paul v1.0.3

Choose a tag to compare

View all tags
@simonpauls simonpauls released this 11 May 12:23
· 32 commits to main since this release
v1.0.3
0c419fc
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

"Never build this button again." — A sticky note on a monitor in Graz, Austria

The story

paul started with a simple frustration: every new project rebuilt the same button, the same input, the same modal — slightly differently, with slightly different accessibility, slightly different dark mode. One decision made poorly, repeated everywhere.

So we built paul. One design system, one set of tokens, one accessibility standard — applied across React, Vue 3, Svelte 5, and Angular 18. Built with care (and too much coffee) in Graz, Austria.

v1.0.3 is the final release of the v1.0.x series. It ships everything: 56 accessible components across four frameworks, full APCA/WCAG 3.0 contrast compliance, EN 301 549 conformance, property-based testing, and documentation that's honest about what's done and what's still coming.

♿ The new European Standard for Inclusive Digital Products

paul is built to fully comply with EN 301 549 v3.2.1 — the technical standard underpinning the European Accessibility Act (EAA), enforceable since June 28, 2025.

It also uses the Accessible Perceptual Contrast Algorithm (APCA) from the WCAG 3.0 working draft — a more accurate, perception-based contrast model than WCAG 2.x ratios.

34/34 token pairs passing — 100% compliant

Threshold Use case Equivalent
Lc 75 Body text ≈ WCAG 2.x AAA (7:1)
Lc 60 Large text & UI components ≈ WCAG 2.x AA (4.5:1)

Two dark mode tokens adjusted to meet thresholds (lightness only — hue and saturation unchanged):

Token Before After Lc before → after
--muted-foreground (dark) 240 5% 71% 240 5% 82.7% Lc 57.1 → 75.5
--destructive-text (dark) 0 90% 70% 0 90% 78.5% Lc 48.0 → 60.3

APCA validation runs automatically in CI — failures block merges.

WCAG 3.0 is a working draft. paul maintains backward compatibility with WCAG 2.2 Level AAA during the transition period.

🧰 APCA Tooling

pnpm --filter @meetpaul/tokens validate:apca               # Validate all tokens
pnpm --filter @meetpaul/tokens validate:apca:json          # JSON report
pnpm --filter @meetpaul/tokens recalculate:tokens          # Recalculate lightness
pnpm --filter @meetpaul/tokens recalculate:tokens:dry-run  # Preview only

🧪 Property-Based Testing

147 tests using fast-check and vitest — Lc range, polarity, hue/saturation preservation, parser round-trips, and error handling. All passing.

🖼️ 56 Accessible Components — 4 Frameworks

Every component ships in React, Vue 3, Svelte 5, and Angular 18 with full parity.

Accordion · Alert · AlertDialog · AspectRatio · Avatar · Badge · Button · ButtonGroup · Calendar · Card · Carousel · Chart · Checkbox · Collapsible · Combobox · Command · ContextMenu · DataTable · DatePicker · Dialog · Drawer · DropdownMenu · Empty · Field · Form · HoverCard · Input · InputGroup · InputOTP · Kbd · Label · Menubar · NavigationMenu · Pagination · Popover · Progress · RadioGroup · ResizablePanels · ScrollArea · Select · Separator · Sheet · Sidebar · Skeleton · Slider · Sonner · Switch · Table · Tabs · Textarea · Toast · Toggle · ToggleGroup · Tooltip · Typography

🔐 Accessible Authentication Patterns (WCAG 3.3.8)

Pattern Description
InputOTP autocomplete="one-time-code", single real <input>, slots aria-hidden
MagicLink Password-free, autocomplete="email", aria-live="polite" state announcements
PasskeyButton WebAuthn/biometric, aria-busy, live-region for success/error/unsupported
HoneypotField CAPTCHA-free bot prevention, aria-hidden, tabindex="-1"

📏 Touch Target Compliance (WCAG 2.5.5 — 44×44 px)

All interactive elements audited and fixed across all four frameworks — Slider, Toggle, TabsList, Button icon variant, Calendar day cells, and Pagination all meet the 44×44 px minimum.

🎨 Multi-Framework Storybook

Four independent Storybook apps composing into a single hub — 56 stories each for React, Vue 3, Svelte 5, and Angular 18.

👉 meetpaulds.github.io/paul

📦 Packages

Package Version
@meetpaul/tokens 1.0.3
@meetpaul/ui 1.0.3
@meetpaul/ui-vue 1.0.3
@meetpaul/ui-svelte 1.0.3
@meetpaul/ui-angular 1.0.3

🚀 Install

npm install @meetpaul/tokens          # Tokens only
npm install @meetpaul/ui              # React
npm install @meetpaul/ui-vue          # Vue 3
npm install @meetpaul/ui-svelte       # Svelte 5
npm install @meetpaul/ui-angular      # Angular 18

⚠️ Breaking Changes

None.

Full changelog: CHANGELOG.md · Built with care in Graz by @SirPauls

Assets 2
Loading