# Text Component

A versatile and modern text component built with Svelte 5 that provides comprehensive styling options, tooltip support, and interactive popup functionality that matches the original popup design.

## Features

- ✅ **Modern Svelte 5**: Built with the latest Svelte 5 runes system (`$state`, `$derived`, `$props`)
- ✅ **Flexible Styling**: Font size, weight, color, alignment, and more
- ✅ **Tooltip Integration**: Full tooltip support with customizable options
- ✅ **Original Popup Design**: Interactive popup system matching the exact original popup styling
- ✅ **Accessibility**: Full keyboard navigation and ARIA support
- ✅ **Loading States**: Built-in loading spinner support
- ✅ **Icon Support**: Display icons alongside text
- ✅ **Raw HTML**: Render HTML content when needed
- ✅ **TypeScript**: Full type safety with comprehensive interfaces

## Action Popups

The popup system uses the exact same design and layout as the original popup component:

```svelte
<Text label="Remove item" popup={{}} on:popupAction={handleRemove} />

<Text
	label="Delete item"
	popup={{
		title: 'Delete Item',
		subtitle: 'Alt + click',
		description: 'This action cannot be undone.',
		icon: DeleteIcon,
		active: true
	}}
	on:popupAction={handleDelete}
/>
```

### Popup Styling Features

The popup matches the original design with:

- **Grid Layout**: 3-column grid layout for icon, title, and subtitle
- **Exact Dimensions**: 200px width, minimum 80px height
- **Original Colors**: `#353535` background, `#363636` borders
- **Typography**: Same font sizes, weights, and colors
- **Hover Effects**: Original hover styling with `var(--hoverColor)`
- **Spacing**: Exact padding and gap values (8px, 12px)

### Default Popup Configuration

When you provide an empty `popup={}` object, you get these defaults:

- **Title**: "Remove" (matches original)
- **Subtitle**: "Alt + click"
- **Description**: "This action will remove the current selection."
- **Icon**: DeleteIcon (matches original default)

## Storybook Examples

View the popup examples in Storybook:

- **Default Popup**: Shows exact original styling
- **Original Popup Style**: Minimal configuration matching original
- **Custom Popup**: Demonstrates customization options
- **Active Popup**: Shows active state styling

```bash
npm run storybook
# Navigate to UI/Text to see all popup examples
```

The popup component now provides pixel-perfect matching with the original popup design while maintaining the modern Svelte 5 architecture and flexible configuration options.