open-index/open-npm huggingface dataset:
npm package: @litforge/badge
Description: A badge component for displaying status indicators with color variants, built with Lit.
Latest version: 0.1.22

# @litforge/badge

A badge component for displaying status indicators with color variants, built with Lit.

## Overview

The `Badge` component provides a simple way to display status indicators, labels, or tags with different color variants and sizes.

## Installation

```bash
npm install @litforge/badge
# or
pnpm add @litforge/badge
# or
yarn add @litforge/badge
```

## Basic Usage

```html
<script type="module">
  import '@litforge/badge';
</script>

<lf-badge label="Active" variant="success"></lf-badge>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Badge label text |
| `variant` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | Badge color variant |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Badge size |

## Examples

### Variants

```html
<lf-badge label="Primary" variant="primary"></lf-badge>
<lf-badge label="Success" variant="success"></lf-badge>
<lf-badge label="Warning" variant="warning"></lf-badge>
<lf-badge label="Danger" variant="danger"></lf-badge>
<lf-badge label="Info" variant="info"></lf-badge>
```

### Sizes

```html
<lf-badge label="Small" size="sm"></lf-badge>
<lf-badge label="Medium" size="md"></lf-badge>
<lf-badge label="Large" size="lg"></lf-badge>
```

### With Slot

```html
<lf-badge variant="success">
  <span>Custom Content</span>
</lf-badge>
```

## Styling

The component uses CSS variables for theming:

```css
lf-badge {
  --lf-badge-radius: 12px;
  --lf-badge-padding-y: 4px;
  --lf-badge-padding-x: 8px;
  --lf-badge-font-size: 0.75rem;
  --lf-badge-primary-bg: #0b6efd;
  --lf-badge-primary-color: #ffffff;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { Badge, BadgeVariant, BadgeSize } from '@litforge/badge';
```

## License

Part of the LitForge component library.
npm package: @litforge/card
Description: A flexible card container component with header, footer, image slots, and customizable styling, built with Lit.
Latest version: 0.1.22

# @litforge/card

A flexible card container component with header, footer, image slots, and customizable styling, built with Lit.

## Overview

The `Card` component provides a reusable card container with slots for header, footer, image, and body content. It supports customizable elevation, padding, and styling through CSS variables.

## Installation

```bash
npm install @litforge/card
# or
pnpm add @litforge/card
# or
yarn add @litforge/card
```

## Basic Usage

```html
<script type="module">
  import '@litforge/card';
</script>

<lf-card title="Card Title" subtitle="Card subtitle">
  <p>Card body content</p>
</lf-card>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `title` | `string` | `''` | Card title |
| `subtitle` | `string` | `''` | Card subtitle |
| `imageUrl` | `string` | `''` | URL for card image |
| `elevation` | `number` | `1` | Shadow elevation (0-4) |
| `padding` | `string` | `''` | Custom padding for card body |

## Slots

- **default**: Card body content
- **header**: Custom header content (overrides title/subtitle)
- **footer**: Footer content
- **image**: Custom image content (overrides imageUrl)

## Examples

### Basic Card

```html
<lf-card title="Application" subtitle="SSO Application">
  <p>Application details here</p>
</lf-card>
```

### Card with Image

```html
<lf-card
  title="Application"
  image-url="https://example.com/icon.png"
  elevation="2"
>
  <p>Content with image</p>
</lf-card>
```

### Card with Custom Slots

```html
<lf-card>
  <div slot="header">
    <h3>Custom Header</h3>
  </div>
  <p>Body content</p>
  <div slot="footer">
    <button>Action</button>
  </div>
</lf-card>
```

### Card with Different Elevations

```html
<lf-card elevation="0">No shadow</lf-card>
<lf-card elevation="1">Small shadow</lf-card>
<lf-card elevation="3">Large shadow</lf-card>
```

## Styling

The component uses CSS variables for theming:

```css
lf-card {
  --lf-card-background: #ffffff;
  --lf-card-radius: 12px;
  --lf-card-border-color: rgba(15, 23, 42, 0.08);
  --lf-card-padding: 20px;
  --lf-card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --lf-card-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --lf-card-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  /* ... more variables */
}
```

## TypeScript

```typescript
import { Card } from '@litforge/card';
```

## License

Part of the LitForge component library.
npm package: @litforge/chip
Description: A chip component for filters and tags with removable option, built with Lit.
Latest version: 0.1.22

# @litforge/chip

A chip component for filters and tags with removable option, built with Lit.

## Overview

The `Chip` component provides a way to display filters, tags, or labels with an optional remove button. It's designed for use in filter bars and tag lists.

## Installation

```bash
npm install @litforge/chip
# or
pnpm add @litforge/chip
# or
yarn add @litforge/chip
```

## Basic Usage

```html
<script type="module">
  import '@litforge/chip';
</script>

<lf-chip label="Productivity" variant="primary" removable @chip-remove=${handleRemove}></lf-chip>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Chip label text |
| `variant` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'` | `'neutral'` | Chip color variant |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Chip size |
| `removable` | `boolean` | `false` | Show remove button |

## Events

### `chip-remove`

Fired when the remove button is clicked.

**Detail**: `{ chip: Chip }`

## Examples

### Basic Chip

```html
<lf-chip label="Tag"></lf-chip>
```

### Removable Chip

```html
<lf-chip label="Filter" removable @chip-remove=${handleRemove}></lf-chip>
```

### Variants

```html
<lf-chip label="Primary" variant="primary"></lf-chip>
<lf-chip label="Success" variant="success"></lf-chip>
<lf-chip label="Warning" variant="warning"></lf-chip>
<lf-chip label="Danger" variant="danger"></lf-chip>
<lf-chip label="Info" variant="info"></lf-chip>
<lf-chip label="Neutral" variant="neutral"></lf-chip>
```

### Filter Chips

```html
<div>
  <lf-chip label="Category: Productivity" variant="primary" removable></lf-chip>
  <lf-chip label="Status: Active" variant="success" removable></lf-chip>
</div>
```

## Styling

The component uses CSS variables for theming:

```css
lf-chip {
  --lf-chip-radius: 16px;
  --lf-chip-padding-y: 6px;
  --lf-chip-padding-x: 12px;
  --lf-chip-font-size: 0.875rem;
  --lf-chip-primary-bg: rgba(11, 110, 253, 0.1);
  --lf-chip-primary-color: #0b6efd;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { Chip, ChipVariant, ChipSize } from '@litforge/chip';
```

## License

Part of the LitForge component library.
npm package: @litforge/email-input
Description: An email input component with validation, built with Lit.
Latest version: 0.1.22

# @litforge/email-input

An email input component with validation, built with Lit.

## Overview

The `EmailInput` component provides a text input specifically for email addresses with built-in validation and error display.

## Installation

```bash
npm install @litforge/email-input
# or
pnpm add @litforge/email-input
# or
yarn add @litforge/email-input
```

## Basic Usage

```html
<script type="module">
  import '@litforge/email-input';
</script>

<email-input
  label="Email Address"
  placeholder="Enter your email"
  value="${email}"
  @input="${handleEmailChange}"
></email-input>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `undefined` | Input label |
| `placeholder` | `string` | `undefined` | Placeholder text |
| `value` | `string` | `''` | Input value |
| `error` | `string` | `undefined` | Error message to display |
| `disabled` | `boolean` | `false` | Disables the input |
| `required` | `boolean` | `false` | Marks input as required |

## Events

### `input`

Fired when the input value changes.

## Examples

### Basic Email Input

```html
<email-input
  label="Email"
  placeholder="your@email.com"
></email-input>
```

### With Error

```html
<email-input
  label="Email"
  value="${email}"
  error="${emailError}"
></email-input>
```

### Required Field

```html
<email-input
  label="Email Address"
  required
  error="${validationError}"
></email-input>
```

## Styling

The component uses CSS variables for theming:

```css
email-input {
  --lf-email-input-font-family: 'Inter', sans-serif;
  --lf-email-input-border-color: #e2e8f0;
  --lf-email-input-error-color: #b42318;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { EmailInput } from '@litforge/email-input';
```

## License

Part of the LitForge component library.
npm package: @litforge/horizontal-menu
Description: A horizontal navigation menu component with dropdown submenus, built with Lit.
Latest version: 0.1.22

# @litforge/horizontal-menu

A horizontal navigation menu component with dropdown submenus, built with Lit.

## Overview

The `HorizontalMenu` component provides a complete horizontal navigation menu with:
- Dropdown submenus on hover/click
- Active state management
- SPA mode support
- Fully customizable styling
- Role-based filtering

## Installation

```bash
npm install @litforge/horizontal-menu
# or
pnpm add @litforge/horizontal-menu
# or
yarn add @litforge/horizontal-menu
```

**Note**: This component depends on:
- `@litforge/menu-item`

## Basic Usage

```html
<script type="module">
  import '@litforge/horizontal-menu';
</script>

<horizontal-menu
  .items="${menuItems}"
  spa-mode
></horizontal-menu>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `items` | `VerticalMenuItem[]` | `undefined` | Menu items array |
| `spaMode` | `boolean` | `false` | Enables SPA navigation mode |
| `background` | `string` | `undefined` | Menu background color |
| `textColor` | `string` | `undefined` | Text color |
| `accentColor` | `string` | `undefined` | Accent color |
| `activeBackground` | `string` | `undefined` | Active item background |
| `activeText` | `string` | `undefined` | Active item text color |
| `userRoles` | `string[]` | `[]` | User roles for filtering |
| `isStaff` | `boolean` | `false` | Staff flag for filtering |

## Events

### `menu-select`

Fired when a menu item is selected.

```typescript
interface MenuSelectDetail {
  item: VerticalMenuItem;
}
```

## CSS Variables

```css
--lf-horizontal-menu-bg: #ffffff
--lf-horizontal-menu-text: #0f172a
--lf-horizontal-menu-muted: #64748b
--lf-horizontal-menu-accent: #0b6efd
--lf-horizontal-menu-active-bg: rgba(11, 110, 253, 0.12)
--lf-horizontal-menu-active-text: #0b6efd
--lf-horizontal-menu-hover-bg: rgba(15, 23, 42, 0.08)
--lf-horizontal-menu-dropdown-bg: #ffffff
--lf-horizontal-menu-dropdown-border: rgba(15, 23, 42, 0.1)
--lf-horizontal-menu-dropdown-shadow: 0 10px 40px rgba(15, 23, 42, 0.15)
```
npm package: @litforge/icon-button
Description: An icon-only button component with variants, sizes, loading state, and accessibility support, built with Lit.
Latest version: 0.1.22

# @litforge/icon-button

An icon-only button component with variants, sizes, loading state, and accessibility support, built with Lit.

## Overview

The `IconButton` component provides a button that displays only an icon (or uses a slot for custom content) with support for different variants, sizes, loading states, and full accessibility.

## Installation

```bash
npm install @litforge/icon-button
# or
pnpm add @litforge/icon-button
# or
yarn add @litforge/icon-button
```

## Basic Usage

```html
<script type="module">
  import '@litforge/icon-button';
</script>

<icon-button icon="✏️" label="Edit" @icon-button-click=${handleClick}></icon-button>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `icon` | `string` | `''` | Icon character or emoji |
| `label` | `string` | `''` | Accessibility label (aria-label) |
| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'ghost'` | `'ghost'` | Button variant |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
| `disabled` | `boolean` | `false` | Disabled state |
| `loading` | `boolean` | `false` | Loading state with spinner |

## Events

### `icon-button-click`

Fired when the button is clicked.

**Detail**: `{ originalEvent: MouseEvent }`

## Examples

### Basic Icon Button

```html
<icon-button icon="✏️" label="Edit" @icon-button-click=${handleEdit}></icon-button>
```

### Variants

```html
<icon-button icon="✏️" variant="primary" label="Edit"></icon-button>
<icon-button icon="🗑️" variant="danger" label="Delete"></icon-button>
<icon-button icon="👁️" variant="secondary" label="View"></icon-button>
<icon-button icon="⚙️" variant="ghost" label="Settings"></icon-button>
```

### Sizes

```html
<icon-button icon="✏️" size="sm" label="Edit"></icon-button>
<icon-button icon="✏️" size="md" label="Edit"></icon-button>
<icon-button icon="✏️" size="lg" label="Edit"></icon-button>
```

### Loading State

```html
<icon-button icon="💾" label="Save" loading></icon-button>
```

### With Custom Content (Slot)

```html
<icon-button label="Custom" variant="primary">
  <svg width="16" height="16">...</svg>
</icon-button>
```

## Styling

The component uses CSS variables for theming:

```css
icon-button {
  --lf-icon-button-radius: 8px;
  --lf-icon-button-padding: 8px;
  --lf-icon-button-color: #111827;
  --lf-icon-button-primary-bg: #0b6efd;
  --lf-icon-button-primary-color: #ffffff;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { IconButton, IconButtonVariant, IconButtonSize } from '@litforge/icon-button';
```

## Accessibility

- Always provide a `label` prop for accessibility (used as `aria-label`)
- The button is keyboard accessible
- Loading state sets `aria-busy="true"`
- Disabled state properly prevents interaction

## License

Part of the LitForge component library.
npm package: @litforge/kpi-card
Description: A Lit web component for displaying Key Performance Indicator (KPI) cards with values, labels, deltas, and status indicators.
Latest version: 0.1.22

# @litforge/kpi-card

A Lit web component for displaying Key Performance Indicator (KPI) cards with values, labels, deltas, and status indicators.

## Overview

The `KpiCard` component displays metrics in a card format with support for:
- Main value display with optional unit
- Delta indicators (up/down/neutral)
- Loading states
- Customizable styling via CSS variables

## Installation

```bash
npm install @litforge/kpi-card
# or
pnpm add @litforge/kpi-card
# or
yarn add @litforge/kpi-card
```

## Basic Usage

```html
<script type="module">
  import '@litforge/kpi-card';
</script>

<kpi-card
  label="Total Revenue"
  value="125000"
  unit="$"
  delta="12.5"
  status="up"
></kpi-card>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Label text displayed above the value |
| `value` | `number \| null` | `null` | The main KPI value to display |
| `unit` | `string` | `undefined` | Unit to display after the value (e.g., "$", "%", "k") |
| `delta` | `number \| null` | `null` | Percentage change to display |
| `loading` | `boolean` | `false` | Shows loading state |
| `status` | `'neutral' \| 'up' \| 'down'` | `'neutral'` | Visual status indicator |

## Examples

### Basic KPI Card

```html
<kpi-card
  label="Active Users"
  value="1234"
></kpi-card>
```

### With Delta and Status

```html
<kpi-card
  label="Revenue"
  value="125000"
  unit="$"
  delta="12.5"
  status="up"
></kpi-card>
```

### Loading State

```html
<kpi-card
  label="Processing"
  loading
></kpi-card>
```

## Styling

The component uses CSS variables for theming:

```css
kpi-card {
  --lf-kpi-card-font-family: 'Inter', sans-serif;
  --lf-kpi-card-font-size-base: 16px;
  --lf-kpi-card-bg: #ffffff;
  --lf-kpi-card-text: #111827;
  --lf-kpi-card-color-muted: #666666;
  --lf-kpi-card-accent: #0b6efd;
  --lf-kpi-card-space-md: 12px;
  --lf-kpi-card-radius-sm: 8px;
  --lf-kpi-card-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
}
```

## TypeScript

```typescript
import { KpiCard } from '@litforge/kpi-card';
import type { KpiCardProps, KpiStatus } from '@litforge/kpi-card';

const props: KpiCardProps = {
  label: 'Revenue',
  value: 125000,
  unit: '$',
  delta: 12.5,
  status: 'up'
};
```

## License

Part of the LitForge component library.
npm package: @litforge/loading-button
Description: A button component with built-in loading state support, built with Lit.
Latest version: 0.1.22

# @litforge/loading-button

A button component with built-in loading state support, built with Lit.

## Overview

The `LoadingButton` component provides a button with loading indicator functionality, perfect for async operations like form submissions.

## Installation

```bash
npm install @litforge/loading-button
# or
pnpm add @litforge/loading-button
# or
yarn add @litforge/loading-button
```

## Basic Usage

```html
<script type="module">
  import '@litforge/loading-button';
</script>

<loading-button
  label="Submit"
  loading="${isLoading}"
  @loading-button-click="${handleClick}"
></loading-button>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `undefined` | Button label text |
| `loading` | `boolean` | `false` | Shows loading spinner and disables button |
| `disabled` | `boolean` | `false` | Disables the button |
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type |

## Events

### `loading-button-click`

Fired when the button is clicked (not fired when loading or disabled).

```typescript
interface LoadingButtonClickDetail {
  originalEvent: MouseEvent;
}
```

## Examples

### Basic Button

```html
<loading-button label="Click Me"></loading-button>
```

### With Loading State

```html
<loading-button
  label="Save"
  loading="${saving}"
  @loading-button-click="${handleSave}"
></loading-button>
```

### Submit Button

```html
<loading-button
  label="Submit Form"
  type="submit"
  loading="${submitting}"
></loading-button>
```

## Styling

The component uses CSS variables for theming:

```css
loading-button {
  --lf-loading-button-radius: 8px;
  --lf-loading-button-padding: 12px;
  --lf-loading-button-text-color: #ffffff;
  --lf-loading-button-background: #0b6efd;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { LoadingButton } from '@litforge/loading-button';
import type { LoadingButtonProps, LoadingButtonClickDetail } from '@litforge/loading-button';
```

## License

Part of the LitForge component library.
npm package: @litforge/logo-img
Description: A simple logo image component with optional styling options, built with Lit.
Latest version: 0.1.22

# @litforge/logo-img

A simple logo image component with optional styling options, built with Lit.

## Overview

The `LogoImg` component provides a consistent way to display logos with support for rounded corners, elevation, and customizable sizing.

## Installation

```bash
npm install @litforge/logo-img
# or
pnpm add @litforge/logo-img
# or
yarn add @litforge/logo-img
```

## Basic Usage

```html
<script type="module">
  import '@litforge/logo-img';
</script>

<logo-img
  src="/logo.png"
  alt="Company Logo"
  size="48px"
></logo-img>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `src` | `string` | `undefined` | Image source URL |
| `alt` | `string` | `undefined` | Image alt text |
| `size` | `string` | `undefined` | Image size (width and height) |
| `rounded` | `boolean` | `false` | Applies rounded corners |
| `elevated` | `boolean` | `false` | Applies box shadow |
| `background` | `string` | `undefined` | Background color |
| `borderColor` | `string` | `undefined` | Border color |

## Examples

### Basic Logo

```html
<logo-img src="/logo.png" alt="Logo"></logo-img>
```

### Rounded with Size

```html
<logo-img
  src="/logo.png"
  alt="Logo"
  size="64px"
  rounded
></logo-img>
```

### With Styling

```html
<logo-img
  src="/logo.png"
  alt="Logo"
  size="48px"
  rounded
  elevated
  background="#ffffff"
  border-color="#e2e8f0"
></logo-img>
```

## Styling

The component uses CSS variables for theming:

```css
logo-img {
  --lf-logo-img-radius: 8px;
  --lf-logo-img-shadow: 0 1px 3px rgba(0,0,0,0.08);
  /* ... more variables */
}
```

## TypeScript

```typescript
import { LogoImg } from '@litforge/logo-img';
```

## License

Part of the LitForge component library.
npm package: @litforge/menu-item
Description: A menu item component for use in navigation menus, built with Lit.
Latest version: 0.1.22

# @litforge/menu-item

A menu item component for use in navigation menus, built with Lit.

## Overview

The `MenuItem` component provides a flexible menu item with support for icons, badges, nested items, and active states.

## Installation

```bash
npm install @litforge/menu-item
# or
pnpm add @litforge/menu-item
# or
yarn add @litforge/menu-item
```

## Basic Usage

```html
<script type="module">
  import '@litforge/menu-item';
</script>

<menu-item
  label="Dashboard"
  href="/dashboard"
  icon="home"
></menu-item>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `undefined` | Menu item label |
| `href` | `string` | `undefined` | Link URL |
| `icon` | `string` | `undefined` | Icon identifier or SVG |
| `badge` | `string \| number` | `undefined` | Badge text or number |
| `active` | `boolean` | `false` | Active state |
| `disabled` | `boolean` | `false` | Disabled state |
| `items` | `VerticalMenuItem[]` | `undefined` | Nested menu items |

## Examples

### Basic Menu Item

```html
<menu-item label="Home" href="/"></menu-item>
```

### With Icon and Badge

```html
<menu-item
  label="Messages"
  href="/messages"
  icon="envelope"
  badge="5"
></menu-item>
```

### Active State

```html
<menu-item
  label="Dashboard"
  href="/dashboard"
  active
></menu-item>
```

## TypeScript

```typescript
import { MenuItem } from '@litforge/menu-item';
import type { VerticalMenuItem } from '@litforge/menu-item';

const item: VerticalMenuItem = {
  label: 'Dashboard',
  href: '/dashboard',
  icon: 'home',
  active: true
};
```

## License

Part of the LitForge component library.
npm package: @litforge/modal
Description: A modal dialog component with backdrop, animations, keyboard support, and slots, built with Lit.
Latest version: 0.1.22

# @litforge/modal

A modal dialog component with backdrop, animations, keyboard support, and slots, built with Lit.

## Overview

The `Modal` component provides a flexible modal dialog with backdrop overlay, smooth animations, keyboard support (ESC to close), and slots for header, body, and footer content.

## Installation

```bash
npm install @litforge/modal
# or
pnpm add @litforge/modal
# or
yarn add @litforge/modal
```

## Basic Usage

```html
<script type="module">
  import '@litforge/modal';
</script>

<lf-modal open title="Modal Title" @modal-close=${handleClose}>
  <p>Modal content goes here</p>
</lf-modal>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `open` | `boolean` | `false` | Controls modal visibility |
| `title` | `string` | `''` | Modal title |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Modal size |
| `closable` | `boolean` | `true` | Allow closing via backdrop/close button/escape |
| `showFooter` | `boolean` | `false` | Show footer slot area |

## Events

### `modal-close`

Fired when the modal is closed (via backdrop click, close button, or ESC key).

**Detail**: `{ source: 'backdrop' | 'close-button' | 'escape' }`

## Slots

- **default**: Modal body content
- **header**: Custom header content (overrides title)
- **footer**: Footer content

## Examples

### Basic Modal

```html
<lf-modal open title="Confirm Action" @modal-close=${handleClose}>
  <p>Are you sure you want to proceed?</p>
</lf-modal>
```

### Modal with Footer

```html
<lf-modal open title="Edit Application" show-footer @modal-close=${handleClose}>
  <p>Form content here</p>
  <div slot="footer">
    <button @click=${handleSave}>Save</button>
    <button @click=${handleCancel}>Cancel</button>
  </div>
</lf-modal>
```

### Different Sizes

```html
<lf-modal open size="sm" title="Small Modal">Content</lf-modal>
<lf-modal open size="lg" title="Large Modal">Content</lf-modal>
```

### Non-closable Modal

```html
<lf-modal open title="Processing" closable="false">
  <p>Please wait...</p>
</lf-modal>
```

## Keyboard Support

- **ESC**: Closes the modal (if `closable` is true)

## Styling

The component uses CSS variables for theming:

```css
lf-modal {
  --lf-modal-backdrop: rgba(0, 0, 0, 0.5);
  --lf-modal-background: #ffffff;
  --lf-modal-radius: 12px;
  --lf-modal-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  --lf-modal-width-sm: 400px;
  --lf-modal-width-md: 500px;
  --lf-modal-width-lg: 700px;
  --lf-modal-width-xl: 900px;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { Modal, ModalSize } from '@litforge/modal';
```

## License

Part of the LitForge component library.
npm package: @litforge/password-input
Description: A password input component with visibility toggle, built with Lit.
Latest version: 0.1.22

# @litforge/password-input

A password input component with visibility toggle, built with Lit.

## Overview

The `PasswordInput` component provides a secure password input with optional visibility toggle functionality.

## Installation

```bash
npm install @litforge/password-input
# or
pnpm add @litforge/password-input
# or
yarn add @litforge/password-input
```

## Basic Usage

```html
<script type="module">
  import '@litforge/password-input';
</script>

<password-input
  label="Password"
  placeholder="Enter your password"
  value="${password}"
  @input="${handlePasswordChange}"
></password-input>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `undefined` | Input label |
| `placeholder` | `string` | `undefined` | Placeholder text |
| `value` | `string` | `''` | Input value |
| `error` | `string` | `undefined` | Error message to display |
| `disabled` | `boolean` | `false` | Disables the input |
| `required` | `boolean` | `false` | Marks input as required |
| `showToggle` | `boolean` | `false` | Shows password visibility toggle button |

## Events

### `input`

Fired when the input value changes.

## Examples

### Basic Password Input

```html
<password-input
  label="Password"
  placeholder="Enter password"
></password-input>
```

### With Visibility Toggle

```html
<password-input
  label="Password"
  show-toggle
  value="${password}"
></password-input>
```

### With Error

```html
<password-input
  label="Password"
  value="${password}"
  error="${passwordError}"
  required
></password-input>
```

## Styling

The component uses CSS variables for theming:

```css
password-input {
  --lf-password-input-font-family: 'Inter', sans-serif;
  --lf-password-input-border-color: #e2e8f0;
  --lf-password-input-error-color: #b42318;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { PasswordInput } from '@litforge/password-input';
```

## License

Part of the LitForge component library.
npm package: @litforge/select-input
Description: A select dropdown component with single and multiple selection support, built with Lit.
Latest version: 0.1.22

# @litforge/select-input

A select dropdown component with single and multiple selection support, built with Lit.

## Overview

The `SelectInput` component provides a flexible dropdown/select input with support for single or multiple selection, validation, and error display.

## Installation

```bash
npm install @litforge/select-input
# or
pnpm add @litforge/select-input
# or
yarn add @litforge/select-input
```

## Basic Usage

```html
<script type="module">
  import '@litforge/select-input';
</script>

<select-input
  label="Category"
  placeholder="Select a category"
  .options=${options}
  .value=${selectedValue}
  @select-change=${handleChange}
></select-input>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Input label |
| `placeholder` | `string` | `''` | Placeholder text (single select only) |
| `value` | `string \| string[]` | `''` | Selected value(s) |
| `options` | `SelectOption[]` | `[]` | Array of select options |
| `multiple` | `boolean` | `false` | Enable multiple selection |
| `error` | `string` | `undefined` | Error message to display |
| `disabled` | `boolean` | `false` | Disables the input |
| `required` | `boolean` | `false` | Marks input as required |
| `helper` | `string` | `undefined` | Helper text to display |

## Events

### `select-change`

Fired when the selection changes.

**Detail**: `{ value: string | string[] }`

## Types

### `SelectOption`

```typescript
interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}
```

## Examples

### Single Select

```html
<select-input
  label="Category"
  placeholder="Select category"
  .options=${[
    { value: 'productivity', label: 'Productivity' },
    { value: 'communication', label: 'Communication' }
  ]}
  .value=${selectedCategory}
  @select-change=${handleCategoryChange}
></select-input>
```

### Multiple Select

```html
<select-input
  label="Tags"
  multiple
  .options=${tagOptions}
  .value=${selectedTags}
  @select-change=${handleTagsChange}
></select-input>
```

### With Error

```html
<select-input
  label="Status"
  .options=${statusOptions}
  .value=${status}
  error=${statusError}
></select-input>
```

## Styling

The component uses CSS variables for theming:

```css
select-input {
  --lf-input-field-font-family: 'Inter', sans-serif;
  --lf-input-field-border-color: #e2e8f0;
  --lf-input-field-error-color: #b42318;
  --lf-input-field-accent-color: #0b6efd;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { SelectInput, SelectOption } from '@litforge/select-input';
```

## License

Part of the LitForge component library.
npm package: @litforge/text-input
Description: A generic text input component with validation, built with Lit.
Latest version: 0.1.22

# @litforge/text-input

A generic text input component with validation, built with Lit.

## Overview

The `TextInput` component provides a flexible text input for various input types (text, search, url, tel, etc.) with built-in validation and error display.

## Installation

```bash
npm install @litforge/text-input
# or
pnpm add @litforge/text-input
# or
yarn add @litforge/text-input
```

## Basic Usage

```html
<script type="module">
  import '@litforge/text-input';
</script>

<text-input
  label="Search"
  placeholder="Enter search term"
  type="search"
  value="${searchValue}"
  @text-change="${handleTextChange}"
></text-input>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `label` | `string` | `''` | Input label |
| `placeholder` | `string` | `''` | Placeholder text |
| `value` | `string` | `''` | Input value |
| `type` | `string` | `'text'` | Input type (text, search, url, tel, etc.) |
| `error` | `string` | `undefined` | Error message to display |
| `disabled` | `boolean` | `false` | Disables the input |
| `required` | `boolean` | `false` | Marks input as required |
| `helper` | `string` | `undefined` | Helper text to display |

## Events

### `text-change`

Fired when the input value changes.

**Detail**: `{ value: string }`

## Examples

### Basic Text Input

```html
<text-input
  label="Name"
  placeholder="Enter your name"
></text-input>
```

### Search Input

```html
<text-input
  label="Search"
  type="search"
  placeholder="Search applications..."
  @text-change="${handleSearch}"
></text-input>
```

### With Error

```html
<text-input
  label="URL"
  type="url"
  value="${url}"
  error="${urlError}"
></text-input>
```

### Required Field

```html
<text-input
  label="Application Name"
  required
  error="${validationError}"
></text-input>
```

## Styling

The component uses CSS variables for theming:

```css
text-input {
  --lf-input-field-font-family: 'Inter', sans-serif;
  --lf-input-field-border-color: #e2e8f0;
  --lf-input-field-error-color: #b42318;
  --lf-input-field-accent-color: #0b6efd;
  /* ... more variables */
}
```

## TypeScript

```typescript
import { TextInput } from '@litforge/text-input';
```

## License

Part of the LitForge component library.
npm package: @litforge/tokens
Description: Design tokens for the LitForge component library, providing a consistent design system.
Latest version: 0.1.22

# @litforge/tokens

Design tokens for the LitForge component library, providing a consistent design system.

## Overview

`@litforge/tokens` exports a comprehensive set of design tokens including colors, typography, spacing, shadows, and component-specific tokens. These tokens can be used to maintain consistency across all LitForge components.

## Installation

```bash
npm install @litforge/tokens
# or
pnpm add @litforge/tokens
# or
yarn add @litforge/tokens
```

## Usage

### JavaScript/TypeScript

```typescript
import { tokens } from '@litforge/tokens';

// Access tokens
const primaryColor = tokens.color.accent;
const baseFontSize = tokens.font.sizeBase;
const spacingMd = tokens.space.md;
```

### CSS Variables

The tokens are designed to work with CSS variables. You can set them globally:

```css
:root {
  --lf-color-accent: #0b6efd;
  --lf-color-text: #0f172a;
  --lf-space-md: 12px;
  --lf-radius-md: 12px;
  /* ... */
}
```

## Token Categories

### Colors

- `background`: Main background color
- `surface`: Surface/card background
- `surfaceMuted`: Muted surface color
- `text`: Primary text color
- `textMuted`: Muted text color
- `helper`: Helper text color
- `accent`: Primary accent color
- `accentMuted`: Muted accent color
- `accentStrong`: Strong accent color
- `border`: Border color
- `error`: Error color
- `errorSurface`: Error surface color
- `success`: Success color
- `warning`: Warning color

### Typography

- `family`: Font family
- `sizeBase`: Base font size
- `lineHeightBase`: Base line height

### Spacing

- `xs`, `sm`, `md`, `lg`, `xl`, `2xl`: Spacing scale

### Radius

- `xs`, `sm`, `md`, `lg`, `full`: Border radius scale

### Shadows

- `xs`, `sm`, `md`: Shadow scale

### Component Tokens

Component-specific tokens for:
- Cards
- Buttons
- Inputs
- And more...

## Examples

### Using in JavaScript

```typescript
import { tokens } from '@litforge/tokens';

// Apply tokens programmatically
element.style.color = tokens.color.text;
element.style.padding = tokens.space.md;
element.style.borderRadius = tokens.radius.md;
```

### Using in CSS

```css
.my-component {
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  padding: var(--lf-space-lg);
  border-radius: var(--lf-radius-md);
  box-shadow: var(--lf-shadow-sm);
}
```

### Custom Theme

You can override tokens to create custom themes:

```css
:root {
  --lf-color-accent: #your-color;
  --lf-space-md: 16px;
  /* Override any token */
}
```

## TypeScript Support

Fully typed with TypeScript:

```typescript
import type { TokenDefinition } from '@litforge/tokens';
```

## License

Part of the LitForge component library.