@meetpaul/ui-angular

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

paul is a complete, production-ready Pattern, Asset & UI Library — a modern, scalable design system built for teams who ship great products. One decision made well, applied everywhere.

This is the Angular edition. Built with Angular CDK for accessibility primitives and styled with Tailwind CSS, it provides standalone Angular components using host-binding-based class composition via CVA.

Installation

npm install @meetpaul/ui-angular

Quick Start

Import the global styles once in your application entry point (styles.css / angular.json):

"styles": ["node_modules/@meetpaul/ui/styles/globals.css"]

Import and use components directly — all are standalone:

import { Component } from '@angular/core'
import { ButtonComponent, CardComponent, CardHeaderComponent, CardTitleComponent, CardContentComponent, InputComponent } from '@meetpaul/ui-angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent, CardComponent, CardHeaderComponent, CardTitleComponent, CardContentComponent, InputComponent],
  template: `
    <paul-card>
      <paul-card-header>
        <paul-card-title>Hello paul</paul-card-title>
      </paul-card-header>
      <paul-card-content>
        <input paul-input placeholder="Enter your name" />
        <button paul-button class="mt-2">Submit</button>
      </paul-card-content>
    </paul-card>
  `,
})
export class AppComponent {}

Component Library

Accessibility

Actions & Buttons

Data Display

Data Entry & Forms

Date & Time

Feedback

Layout

Overlays & Disclosure

European Localization & RTL Support

This version introduces comprehensive support for European locales and Right-to-Left (RTL) layouts, satisfying EN 301 549 and EAA (European Accessibility Act) requirements:

• RTL Support: All components migrated to CSS logical properties (ms-*, me-*, ps-*, pe-*). Full support for Arabic, Hebrew, and other RTL languages via dir="rtl".
• Intl-based i18n: Calendar and DatePicker now use the native Intl API. Pass a locale input (e.g., de-DE, fr-FR, ar-SA) to automatically localize month names, weekday headers, and week-start days.
• Auth Patterns (WCAG 3.3.8): New accessible authentication components including InputOTP, MagicLink, PasskeyButton, and HoneypotField.
• Print Optimization: Built-in @media print styles for accessible physical output.

Tech Stackpaul-dialog | DialogComponent | CDK Overlay modal with focus trap |

| paul-dialog-header | DialogHeaderComponent | Dialog top section | | paul-dialog-footer | DialogFooterComponent | Dialog bottom section | | paul-dialog-title | DialogTitleComponent | Accessible dialog title | | paul-dialog-description | DialogDescriptionComponent | Dialog description |

Navigation

Tooltip

Angular CDK Usage

The following components use Angular CDK under the hood:

• DialogComponent — @angular/cdk/overlay + @angular/cdk/portal + @angular/cdk/a11y (FocusTrap)
• TooltipDirective — @angular/cdk/overlay + @angular/cdk/portal with flexible position strategy

Attribute Directives Pattern

Several components use the attribute selector pattern for better HTML semantics:

<!-- ButtonComponent: selector is button[paul-button] -->
<button paul-button variant="destructive">Delete</button>
<a paul-button variant="link" href="/dashboard">Go to Dashboard</a>

<!-- InputComponent: selector is input[paul-input] -->
<input paul-input type="email" placeholder="you@example.com" />

<!-- LabelComponent: selector is label[paul-label] -->
<label paul-label for="email">Email address</label>

Forms Integration

Form components implement Angular's ControlValueAccessor and work with both template-driven and reactive forms:

// Template-driven
<paul-switch [(ngModel)]="isDarkMode" />

// Reactive
<paul-checkbox [formControl]="agreedControl" />

Peer Dependencies

npm install @angular/core @angular/common @angular/cdk @angular/forms \
  class-variance-authority clsx tailwind-merge

Tech Stack

• Angular 21+ — standalone components, @HostBinding, @HostListener, inject()
• Angular CDK — Overlay, Portal, A11y (FocusTrap)
• TypeScript 5.9+ — full type safety
• Tailwind CSS 4 — utility-first styling with CSS variables
• Class Variance Authority — variant-based class composition
• ng-packagr — Angular Package Format (APF) build output

Accessibility

Accessibility in paul isn't a checklist item — it's a design constraint that shapes every component from the start.

paul targets APCA (WCAG 3.0 draft) compliance alongside WCAG 2.2 Level AAA and EN 301 549 v3.2.1 to meet the requirements of the European Accessibility Act (EAA), enforceable since June 28, 2025.

APCA — Why we moved beyond WCAG 2.x contrast ratios

WCAG 2.x contrast ratios were a good start. But they treat all color pairs the same — a ratio of 4.5:1 passes whether the text is tiny body copy or a large heading, whether it's dark-on-light or light-on-dark. APCA fixes this. It's a perceptual model based on modern vision science that accounts for spatial frequency, polarity, and how the human visual system actually processes contrast.

paul validates every foreground-background token pair against APCA thresholds in CI. If a token fails, the build fails.

34/34 token pairs passing — 100% compliant

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

What's covered

• All color tokens validated against APCA thresholds — automated in CI, failures block merges
• 56 components with full keyboard navigation, ARIA roles, and screen reader support
• Touch targets audited to 44×44 px (WCAG 2.5.5 AAA) across all four frameworks
• Accessible authentication patterns: InputOTP, MagicLink, PasskeyButton, HoneypotField
• Automated axe-playwright audit on every CI run

Docs

Accessibility

Accessibility in paul isn't a checklist item — it's a design constraint that shapes every component from the start.

paul is The new European Standard for Inclusive Digital Products — 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 targets WCAG 2.2 Level AAA and the forward-looking APCA (WCAG 3.0 draft) perceptual contrast model.

• EN 301 549 v3.2.1 — full compliance matrix across all 56 components
• All color tokens validated against APCA thresholds (Lc 75 body text, Lc 60 UI components) — 34/34 passing
• Full keyboard navigation, ARIA roles, and screen reader support (NVDA + VoiceOver)
• Touch targets audited to 44×44 px (WCAG 2.5.5 AAA)
• Automated axe-playwright audit on every CI run

License

MIT — Copyright (c) 2026 SirPauls

Built with care (and too much coffee ☕) in Graz, Austria