## Color Palette

Primary
Primary Dark
Primary Light
Error
Success
Warning

## Buttons

### Button Variants

<button class="pb-button pb-button--text">Text Button</button> <button class="pb-button pb-button--outlined">Outlined Button</button> <button class="pb-button pb-button--contained">Contained Button</button>

### Button Sizes

### Icon Buttons

### Buttons with Icons

## Form Inputs

### Text Inputs with Floating Labels

Full Name
Email Address
We'll use this to contact you
Website URL

### Input States

Email (Error State)
Please enter a valid email address
Disabled Input

## Dropdowns

### Native Select

Select Option

### Custom Dropdown

## Tabs

### Overview

This is the overview panel content. It provides a general introduction to the design system and its components.

- Native HTML elements
- Material Design inspired
- Fully accessible
- Mobile responsive

### Features

Key features of the design system:

- CSS Custom Properties for theming
- Consistent spacing and typography
- Dark mode support
- Print-friendly styles

### Documentation

Documentation and resources:

- Component API documentation
- Accessibility guidelines
- Migration patterns
- Testing strategies

## Icons

### Icon Sizes

### Available Icons

save
edit
delete
search
expand-more
expand-less
add
copy
download
close
menu
chevron-right

## Responsive Design

### Resize to Test Responsiveness

Drag the right border of the container below to see how components adapt:

Responsive Input

## Accessibility Features

### Focus Management

Try navigating with the Tab key:

### Screen Reader Support

Icon button with proper aria-label