AA Components

A professional component library built with Stencil and esbuild.

Installation

pnpm install

Build

To build the component library:

pnpm run build

Development

To start a local dev server with live reload:

pnpm start

Components

aa-button

A versatile button component with multiple variants and states.

Props

• variant: 'primary' | 'secondary' | 'danger' - Button style variant (default: 'primary')
• disabled: boolean - Disable the button (default: false)

Usage

<aa-button>Click me</aa-button>
<aa-button variant="secondary">Secondary Action</aa-button>
<aa-button variant="danger" disabled>Delete Disabled</aa-button>

Features

• Shadow DOM encapsulation
• Professional styling with CSS custom properties
• Smooth transitions and hover effects
• Accessible focus states
• Responsive design

Demo

Open demo/index.html in a browser to see all button variants and states.

Project Structure

.
├── src/
│   ├── components/
│   │   └── aa-button/
│   │       ├── aa-button.tsx      # Component definition
│   │       ├── aa-button.scss     # Component styles
│   │       └── aa-button.spec.ts  # Component tests
│   ├── global/
│   │   ├── app.ts                 # Global app initialization
│   │   └── app.css                # Global styles
│   ├── index.ts                   # Entry point
│   └── components.d.ts            # Type definitions
├── demo/
│   ├── index.html                 # Demo page
│   └── styles.css                 # Demo styles
├── stencil.config.ts              # Stencil configuration (esbuild bundler)
├── tsconfig.json                  # TypeScript configuration
└── package.json                   # Project dependencies

Technology Stack

• Framework: Stencil
• Bundler: esbuild
• Language: TypeScript
• Styling: Sass/SCSS
• Package Manager: pnpm