Eva Sovereign Ui

MarcoPolo483

EVA Sovereign UI - Five Eyes Government Design System Components (Canada GC, US Federal, UK Gov, Australia, New Zealand) - Web Components, React, Svelte - WCAG 2.1 AA+ - Bilingual EN/FR

Download

EVA-Sovereign-UI

Production-ready Web Components for Government of Canada applications. WCAG AAA compliant, bilingual (EN-CA/FR-CA), and GC Design System certified.

🚀 Quick Start

Installation

npm install @eva-sovereign/web-components

Usage

import '@eva-sovereign/web-components';

<eva-button variant="primary">Submit Application</eva-button>
<eva-input type="email" placeholder="Enter your email"></eva-input>
<eva-chat-panel placeholder-text="Ask a question..."></eva-chat-panel>

React Integration

import { useRef, useEffect } from 'react';
import '@eva-sovereign/web-components';

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => console.log('Clicked!');
    buttonRef.current?.addEventListener('eva-click', handleClick);
    return () => buttonRef.current?.removeEventListener('eva-click', handleClick);
  }, []);

  return <eva-button ref={buttonRef} variant="primary">Submit</eva-button>;
}

📦 What's Included

11 Production-Ready Components

eva-button - 6 variants (supertask, primary, secondary, danger, link, contextual-signin)
eva-input - 6 types with validation and character counting
eva-select - Dropdown with keyboard navigation
eva-checkbox - Custom styled with 44px touch targets
eva-radio - Mutual exclusion with arrow navigation
eva-modal - 3 sizes with focus trap and Esc/backdrop close
eva-tabs - Tabbed interface with Home/End keyboard shortcuts
eva-card - 3 variants (default, bordered, elevated)
eva-alert - 4 types (success, info, warning, danger) + dismissible
eva-chat-panel ⭐ - Message bubbles, typing indicator, RAG-ready

Complete Documentation

Storybook (Coming Soon - Build in progress) - 40+ interactive stories
API Docs (Coming Soon - Build in progress) - TypeDoc reference
Quick Start Guide - 5-minute onboarding
React Integration - Complete guide
Vue Integration - Complete guide

Production Demos

Canada.ca Chatbot - RAG integration demo
GC Design Lab - Component showcase
DevKit - Developer onboarding

✅ Quality Standards

Accessibility (WCAG 2.2 AAA)

✅ 7:1 contrast ratio (text/background)
✅ 44px minimum touch targets
✅ Full keyboard navigation
✅ Screen reader support
✅ Focus indicators
✅ ARIA labels and live regions

GC Design System Compliance

✅ Official colors and typography
✅ Responsive design (mobile-first)
✅ Bilingual support (EN-CA/FR-CA)
✅ Government of Canada branding

Technical Excellence

✅ TypeScript strict mode
✅ Lit 3.x Web Components
✅ Shadow DOM encapsulation
✅ Tree-shakeable (87 KB / 20 KB gzipped)
✅ Browser support: Chrome 67+, Firefox 63+, Safari 13.1+, Edge 79+

📚 Documentation

For Developers

Quick Start - Get started in 5 minutes
Storybook (Coming Soon - Build in progress) - Interactive component playground
API Reference (Coming Soon - Build in progress) - Complete TypeScript API
React Guide - Integration patterns
Vue Guide - Composition API examples
Migration Guide - React to Web Components
Troubleshooting - Common issues + solutions

For Stakeholders

Canada.ca Chatbot Demo - Production example
GC Design Lab - All components showcase
Project Summary - Complete overview

🎯 Use Cases

Government Chatbots

<eva-chat-panel 
  placeholder-text="Ask about government services..."
  locale="en-CA">
</eva-chat-panel>

Bilingual Forms

<eva-input 
  type="email" 
  placeholder="Enter your email"
  locale="fr-CA"
  required>
</eva-input>
<eva-button variant="primary" locale="fr-CA">Soumettre</eva-button>

Accessible Modals

<eva-modal size="medium" open>
  <h2 slot="header">Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <div slot="footer">
    <eva-button variant="danger">Confirm</eva-button>
    <eva-button variant="secondary">Cancel</eva-button>
  </div>
</eva-modal>

🛠️ Framework Integration

React

See React Integration Guide for:

useRef + addEventListener patterns
State management with useState
Event handling
TypeScript declarations
Complete working examples

Vue 3

See Vue Integration Guide for:

Vite configuration (isCustomElement)
Composition API patterns
Two-way binding
Event handling
Complete working examples

Vanilla JavaScript

<script type="module">
  import '@eva-sovereign/web-components';
  
  const button = document.querySelector('eva-button');
  button.addEventListener('eva-click', () => {
    console.log('Button clicked!');
  });
</script>

🌐 Internationalization (i18n)

Global Locale

import { setGlobalLocale } from '@eva-sovereign/web-components';

// Switch to French
setGlobalLocale('fr-CA');

// Switch to English
setGlobalLocale('en-CA');

Per-Component Locale

<eva-button locale="fr-CA">Soumettre</eva-button>
<eva-alert type="info" locale="fr-CA">Message important</eva-alert>

🎨 Theming

Customize with CSS custom properties:

:root {
  /* Colors */
  --eva-color-primary: #26374a;
  --eva-color-secondary: #2b8a3e;
  --eva-color-danger: #c92a2a;
  
  /* Typography */
  --eva-font-family: "Noto Sans", Arial, sans-serif;
  --eva-font-size-base: 1rem;
  
  /* Spacing */
  --eva-spacing-sm: 0.5rem;
  --eva-spacing-md: 1rem;
  --eva-spacing-lg: 1.5rem;
  
  /* Borders */
  --eva-border-radius: 4px;
}

🧪 Development

Setup

# Clone repository
git clone https://github.com/MarcoPolo483/EVA-Sovereign-UI.git

# Install dependencies
cd EVA-Sovereign-UI/packages/web-components
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

Build

# Build components
npm run build

# Build Storybook
npm run build-storybook

# Generate API docs
npm run docs

Test

# Run unit tests
npm test

# Run tests with UI
npm run test:ui

# Run tests with coverage
npm run test:coverage

📊 Bundle Size

ESM Bundle: 87.73 KB (20.14 KB gzipped)
UMD Bundle: 74.90 KB (18.51 KB gzipped)
Tree-shakeable: Import only what you need

🤝 Contributing

We welcome contributions! Please see our contributing guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

MIT License - See LICENSE file for details

🙏 Acknowledgments

GC Design System - Official Government of Canada design guidelines
Lit - Fast, lightweight Web Components
Storybook - Component development environment
TypeDoc - TypeScript documentation generator

📞 Support

Documentation: GitHub Pages
Issues: GitHub Issues
Discussions: GitHub Discussions

Note: Storybook and API documentation builds are in progress. Demos are fully functional!

Status: ✅ Production-Ready | Version: 1.0.0 | Last Updated: December 7, 2025

Top categories