# Bloum

> A powerful library of modern web components for your design system. Bloum is a CSS-first UI component library for server-rendered multipage apps (Laravel, Django, Rails…), styled with plain CSS classes and enhanced with a small amount of vanilla JavaScript. It works well with htmx and Alpine.js and is not meant for React or Vue.

Key facts:

- Install with `npm install bloum` or from a CDN (`https://unpkg.com/bloum/dist/...`). Call `init()` (or `Bloum.init()` with the browser bundle) once the DOM is ready; it also re-initializes components on `htmx:load`.
- Components are plain HTML with Bloum classes (`.btn`, `.modal`, `.input`…) or light-DOM custom elements (`<bl-tabs>`, `<bl-copy-button>`, `<bl-calendar>`). There is no shadow DOM.
- `bloum.min.css` holds the tokens and component styles. `reset.min.css` and `utilities.min.css` are opt-in; with Tailwind CSS, load only `bloum.min.css`.
- Theme by overriding the semantic `--bl-*` CSS variables (see Design tokens). Dark mode is enabled with the `.dark` class or `data-theme="dark"`.
- Current version: 0.22.0. The complete documentation in one file is at https://www.bloum.dev/llms-full.txt.

## Docs

- [Introduction to Bloum](https://www.bloum.dev/llms/docs/introduction.md)
- [Getting Started](https://www.bloum.dev/llms/docs/getting-started.md)
- [Components Overview](https://www.bloum.dev/llms/docs/components.md)
- [Design Tokens](https://www.bloum.dev/llms/docs/design-tokens.md)
- [Tailwind CSS Integration](https://www.bloum.dev/llms/docs/tailwindcss.md)
- [Utilities](https://www.bloum.dev/llms/docs/utilities.md)

## Components

- [Accordion](https://www.bloum.dev/llms/components/accordion.md): Collapsible sections that expand and collapse to show/hide content panels
- [Alert](https://www.bloum.dev/llms/components/alert.md): Notification component that displays important messages with different severity levels
- [Avatar](https://www.bloum.dev/llms/components/avatar.md): Circular or rounded display for user profile pictures or initials
- [Badge](https://www.bloum.dev/llms/components/badge.md): Small status indicator or label that appears near other UI elements
- [Breadcrumb](https://www.bloum.dev/llms/components/breadcrumb.md): Navigation aid showing the user's current location within a hierarchical structure
- [Button](https://www.bloum.dev/llms/components/button.md): Interactive element that triggers actions when clicked or pressed
- [Icon Button](https://www.bloum.dev/llms/components/icon-button.md)
- [Calendar](https://www.bloum.dev/llms/components/calendar.md): Month view calendar that displays events, with localized navigation
- [Card](https://www.bloum.dev/llms/components/card.md): Container component that groups related content with consistent styling
- [Checkbox Card](https://www.bloum.dev/llms/components/checkbox-card.md): Card-style checkbox component for selection with enhanced visual presentation
- [Checkbox](https://www.bloum.dev/llms/components/checkbox.md): Input components for single and multiple selection with customizable styling and states
- [Collapse](https://www.bloum.dev/llms/components/collapse.md): Collapsible content component that can be expanded and collapsed
- [Combobox](https://www.bloum.dev/llms/components/combobox.md): Input field that suggests and completes text as the user types
- [Context Menu](https://www.bloum.dev/llms/components/context-menu.md): Right-click menu that provides contextual actions for specific elements
- [Copy Button](https://www.bloum.dev/llms/components/copy-button.md): Button that copies text to the clipboard
- [Drawer](https://www.bloum.dev/llms/components/drawer.md): Panel that slides in from the side of the screen over existing content
- [Form Field](https://www.bloum.dev/llms/components/form-field.md): Wrapper component that provides consistent styling and layout for form inputs with labels and help text
- [Input](https://www.bloum.dev/llms/components/input.md): Basic text input field for collecting user data
- [Menu](https://www.bloum.dev/llms/components/menu.md): Menu that appears when triggered, showing a list of selectable options
- [Modal](https://www.bloum.dev/llms/components/modal.md): Popup dialog that overlays the main content and requires user interaction
- [Navbar](https://www.bloum.dev/llms/components/navbar.md): Top-mounted navigation menu with primary actions and links
- [Pagination](https://www.bloum.dev/llms/components/pagination.md): Navigation controls for splitting large datasets across multiple pages
- [Phone Input](https://www.bloum.dev/llms/components/phone-input.md): Phone number field with a country selector, formatted as the user types
- [Pin Input](https://www.bloum.dev/llms/components/pin-input.md): Specialized input for one-time passwords with separate fields for each digit
- [Popover](https://www.bloum.dev/llms/components/popover.md): Small overlay that appears near a trigger element with contextual content
- [Progress](https://www.bloum.dev/llms/components/progress.md): Visual indicator showing completion status of tasks or processes
- [Segmented Control](https://www.bloum.dev/llms/components/segmented-control.md): Group of buttons that represent different states or values
- [Sidebar](https://www.bloum.dev/llms/components/sidebar.md): Side-mounted navigation menu with hierarchical structure
- [Skeleton](https://www.bloum.dev/llms/components/skeleton.md): Loading placeholder that mimics the structure of content being loaded
- [Spinner](https://www.bloum.dev/llms/components/spinner.md): Visual marker that shows status, progress, or active states
- [Steps](https://www.bloum.dev/llms/components/steps.md): Progress indicator showing the current step in a multi-step process
- [Switch](https://www.bloum.dev/llms/components/switch.md): Switch-style input for binary on/off states
- [Table](https://www.bloum.dev/llms/components/table.md): Structured data display with rows, columns, sorting, and filtering capabilities
- [Tabs](https://www.bloum.dev/llms/components/tabs.md): Horizontal navigation that switches between different content panels
- [Tag](https://www.bloum.dev/llms/components/tag.md): Label for categorizing and organizing content
- [Textarea](https://www.bloum.dev/llms/components/textarea.md): Multi-line text input field for longer content entry
- [Timeline](https://www.bloum.dev/llms/components/timeline.md): Component that displays events or milestones in chronological order
- [Toast](https://www.bloum.dev/llms/components/toast.md): Temporary notification that appears briefly to provide feedback
- [Tooltip](https://www.bloum.dev/llms/components/tooltip.md): Brief informational popup that appears on hover after a short delay

## Optional

- [Color Scheme Switcher (experimental)](https://www.bloum.dev/llms/components/color-scheme-switcher.md): Button that opens a dropdown menu with selectable color schemes
- [Command Menu (experimental)](https://www.bloum.dev/llms/components/command-menu.md): Searchable command interface activated by keyboard shortcuts
- [Data Table (experimental)](https://www.bloum.dev/llms/components/data-table.md): Advanced data table component with enhanced functionality for large datasets
- [Storybook](https://docs.bloum.dev): Interactive demos of every component
- [Source code](https://github.com/balsigergil/bloum): GitHub repository

---

<p align="center">
  <img
    src="https://raw.githubusercontent.com/balsigergil/bloum/main/.github/bloum_logo_dark.png"
    alt="Bloum Logo"
  />
</p>

# Introduction to Bloum

Welcome to **Bloum**, a modern web components library designed to help you build beautiful, accessible user interfaces with ease.

## What is Bloum?

Bloum is an open-source collection of web components that provides everything you need to create a design system for modern web applications. Whether you're building a simple website or a complex web application, Bloum offers a comprehensive set of UI components that work seamlessly across different frameworks and environments.

### Key Features

- 🚀 **Feature-rich:** A wide range of components to build modern web apps or design systems.
- 🪶 **Lightweight:** Less than 30KB minified and gzipped.
- 🔍 **Accessible:** Built with accessibility in mind, fully keyboard-navigable and [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) compliant.
- 🌓 **Dark mode:** Supports dark mode out of the box.
- 📱 **Responsive:** Works on all modern browsers and devices.
- 📦 **No dependencies:** Works standalone, with no CSS framework required, easy Tainwind integration.
- 🎨 **Theming:** Easy to customize with CSS variables.

## Who is Bloum for?

Bloum is perfect for:

- **Full-stack developers** using server-side frameworks like Laravel, Django, Rails, or any other full-stack framework
- **Frontend developers** who want pre-built, accessible components
- **Teams** looking for a consistent design system
- **Projects** that use progressive enhancement with tools like HTMX or Alpine.js

## Getting Started

Ready to start using Bloum? Check out our [Getting Started Guide](https://www.bloum.dev/llms/docs/getting-started.md) to get up and running in minutes.

## Support

- **GitHub**: [Report issues or contribute](https://github.com/balsigergil/bloum)
- **License**: MIT License - free for personal and commercial use

---

Built with ❤️ by [Gil Balsiger](https://github.com/balsigergil)

---

# Getting Started

## Choose your setup

Bloum ships its CSS as three separate stylesheets. Which ones you load depends on
whether your project already uses Tailwind CSS.

| Stylesheet          | Standalone | With Tailwind | Contains                                     |
| :------------------ | :--------- | :------------ | :------------------------------------------- |
| `reset.min.css`     | ✅ Yes     | ❌ No         | Cross-browser normalization                  |
| `bloum.min.css`     | ✅ Yes     | ✅ Yes        | Design tokens and all component styles       |
| `utilities.min.css` | ✅ Yes     | ❌ No         | Layout helpers (flex, grid, spacing, sizing) |

**Standalone** — Bloum has no dependency on Tailwind. The reset gives you the
same normalization a utility framework's preflight would, and the utilities give
you just enough layout classes to arrange components without pulling in a whole
framework.

**With Tailwind** — load only `bloum.min.css`. Tailwind's preflight already
covers the reset, and Tailwind's own utilities already cover the helpers, so the
other two files are redundant. See
[Tailwind CSS](https://www.bloum.dev/llms/docs/tailwindcss.md) for details.

## Installation

### CDN

The fastest way to get started. Add the following to your HTML `<head>` tag:

```html
<!-- Standalone (no Tailwind) -->
<link href="https://unpkg.com/bloum/dist/reset.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bloum/dist/bloum.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bloum/dist/utilities.min.css" rel="stylesheet" />

<script src="https://unpkg.com/bloum/dist/bloum.bundle.min.js" defer></script>
```

If you already use Tailwind, keep only the middle stylesheet:

```html
<!-- With Tailwind -->
<link href="https://unpkg.com/bloum/dist/bloum.min.css" rel="stylesheet" />

<script src="https://unpkg.com/bloum/dist/bloum.bundle.min.js" defer></script>
```

`bloum.bundle.min.js` is a self-contained browser build that exposes a global
`Bloum` object. Call `init()` on it once the DOM is ready to register all
components:

```html
<script>
  document.addEventListener("DOMContentLoaded", () => Bloum.init());
</script>
```

> **Note:** For production, pin a specific version to avoid unexpected breaking
> changes — replace `bloum` with `bloum@0.0.1` in each URL above _(using the
> latest version number)_.

### Package Manager

For projects using a build tool, install Bloum with your favorite package
manager:

```bash
# NPM
npm install bloum

# Yarn
yarn add bloum

# Pnpm
pnpm add bloum

# Bun
bun add bloum
```

## Usage

### 1. Import Styles

In your application's entry point, import the stylesheets for your setup.

**Standalone (no Tailwind)** — import all three:

```js
import "bloum/dist/reset.min.css";
import "bloum/dist/bloum.min.css";
import "bloum/dist/utilities.min.css";
```

**With Tailwind** — import only Bloum's core stylesheet, after Tailwind:

```js
import "tailwindcss";
import "bloum/dist/bloum.min.css";
```

Bloum's styles are organized with native CSS layers
(`@layer theme, base, components, utilities`), so the cascade stays predictable
regardless of import order. The order above is the one Bloum's own Storybook
environment uses, and the one we develop against.

### 2. Initialize Bloum

Import the `init` function and call it to register all components globally:

```js
import { init } from "bloum";

init();
```

### 3. Use Components

Now you can use the components in your HTML. Here is a simple example to verify
your installation:

```html
<button class="btn btn-primary">Hello Bloum!</button>
```

If you see a styled button, congratulations! You are ready to build.

## Using Bloum with AI assistants

Bloum publishes its documentation in the [llms.txt](https://llmstxt.org) format,
generated from these docs and the component stories:

- [`https://www.bloum.dev/llms.txt`](https://www.bloum.dev/llms.txt) — an index
  linking to one Markdown page per doc and per component.
- [`https://www.bloum.dev/llms-full.txt`](https://www.bloum.dev/llms-full.txt)
  — the whole documentation in a single file.

The same files ship in the npm package (`node_modules/bloum/dist/llms.txt`,
`llms-full.txt` and `llms/`), matching the version you installed.

## Upgrading from an earlier version

Earlier releases bundled a reset and a handful of helper classes directly into
`bloum.css`. Both are now separate, opt-in stylesheets. If you are upgrading and
are **not** using Tailwind, add the two new imports:

```js
import "bloum/dist/reset.min.css"; // new
import "bloum/dist/bloum.min.css";
import "bloum/dist/utilities.min.css"; // new
```

In particular, `sr-only`, `text-light`, `hstack` and `vstack` moved out of
`bloum.css` and now live in `utilities.min.css`.

## Next Steps

Now that you have Bloum installed, you can explore:

- **[Components](https://www.bloum.dev/llms/docs/components.md):** Browse the full list of available components.
- **[Utilities](https://www.bloum.dev/llms/docs/utilities.md):** The layout classes available in standalone mode.
- **[Design Tokens](https://www.bloum.dev/llms/docs/design-tokens.md):** Learn how to customize the design system using CSS variables.

---

# Components Overview

This page provides a comprehensive overview of all available components in Bloum, organized by category. Each component includes its current implementation status and links to detailed documentation.

## Elements

| Component             | Description                                                                            | Status         | Documentation                                                  |
| --------------------- | -------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------- |
| Accordion             | Collapsible sections that expand and collapse to show/hide content panels              | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/accordion.md)   |
| Alert                 | Notification component that displays important messages with different severity levels | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/alert.md)       |
| Avatar                | Circular or rounded display for user profile pictures or initials                      | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/avatar.md)      |
| Badge                 | Small status indicator or label that appears near other UI elements                    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/badge.md)       |
| Button                | Interactive element that triggers actions when clicked or pressed                      | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/button.md)      |
| Split Button          | Button that opens a dropdown menu with selectable options                              | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/button.md)      |
| Button Group          | Group of buttons that share a common purpose or action                                 | ⏳ Planned     | -                                                              |
| Toggle Button         | Button that switches between two states (on/off or active/inactive)                    | ⏳ Planned     | -                                                              |
| Copy Button           | Button that copies text to the clipboard                                               | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/copy-button.md) |
| Breadcrumb            | Navigation aid showing the user's current location within a hierarchical structure     | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/breadcrumb.md)  |
| Carousel              | Slideshow component that cycles through multiple content items                         | ⏳ Planned     | -                                                              |
| Chat Bubble           | Speech bubble-styled container for displaying chat messages                            | ⏳ Planned     | -                                                              |
| Menu                  | Menu that appears when triggered, showing a list of selectable options                 | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/menu.md)       |
| Spinner               | Visual marker that shows status, progress, or active states                            | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/spinner.md)     |
| Panel Splitter        | Resizable divider that allows users to adjust the size of adjacent panels              | ⏳ Planned     | -                                                              |
| Keyboard Key          | Visual representation of keyboard keys for shortcuts or instructions                   | ⏳ Planned     | -                                                              |
| Tag                   | Label for categorizing and organizing content                                          | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/tag.md)         |
| Progress              | Visual indicator showing completion status of tasks or processes                       | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/progress.md)    |
| Timeline              | Component that displays events or milestones in chronological order                    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/timeline.md)    |
| Color Scheme Switcher | Button that opens a dropdown menu with selectable color schemes                        | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/color-scheme-switcher.md)       |
| Collapse              | Collapsible content component that can be expanded and collapsed                       | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/collapse.md)    |

## Inputs

| Component             | Description                                                                                             | Status         | Documentation                                                           |
| --------------------- | ------------------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------- |
| Combobox              | Input field that suggests and completes text as the user types                                          | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/combobox.md)               |
| Color Picker          | Interface for selecting colors using various input methods (palette, sliders, etc.)                     | ⏳ Planned     | -                                                                       |
| Pin Input             | Specialized input for one-time passwords with separate fields for each digit                            | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/pin-input.md)              |
| Phone Input           | Phone number field with a country selector, formatted as the user types                                 | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/phone-input.md)            |
| Date Picker           | Calendar-based interface for selecting dates and date ranges                                            | ⏳ Planned     | -                                                                       |
| Rich Text Editor      | WYSIWYG editor with formatting tools for creating styled content                                        | ⏳ Planned     | -                                                                       |
| Input                 | Basic text input field for collecting user data                                                         | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/input.md)                  |
| Input Mask            | Input field with predefined format patterns (phone numbers, dates, etc.)                                | ⏳ Planned     | -                                                                       |
| Knob                  | Circular control for selecting values by rotating a dial interface                                      | ⏳ Planned     | -                                                                       |
| Password Indicator    | Visual feedback component showing password strength and requirements                                    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/input.md) |
| Textarea              | Multi-line text input field for longer content entry                                                    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/textarea.md)               |
| Select                | Dropdown component for choosing from a list of predefined options                                       | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/input.md)               |
| Checkbox / Radio      | Input components for single and multiple selection with customizable styling and states                 | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/checkbox.md)               |
| Checkbox / Radio Card | Card-style checkbox component for selection with enhanced visual presentation                           | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/checkbox-card.md)          |
| Switch                | Switch-style input for binary on/off states                                                             | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/switch.md)                 |
| Segmented Control     | Group of buttons that represent different states or values                                              | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/segmented-control.md)      |
| Range                 | Slider input for selecting numeric values within a specified range                                      | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/input.md)      |
| Rating                | Star or icon-based input for collecting user ratings or reviews                                         | ⏳ Planned     | -                                                                       |
| File Input            | Component for uploading and selecting files from the user's device                                      | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/input.md)           |
| Form Field            | Wrapper component that provides consistent styling and layout for form inputs with labels and help text | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/form-field.md)             |

## Navigation

| Component    | Description                                                            | Status         | Documentation                                                   |
| ------------ | ---------------------------------------------------------------------- | -------------- | --------------------------------------------------------------- |
| Bottom Tabs  | Tab navigation positioned at the bottom of the screen or container     | ⏳ Planned     | -                                                               |
| Command Menu | Searchable command interface activated by keyboard shortcuts           | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/command-menu.md)        |
| Pagination   | Navigation controls for splitting large datasets across multiple pages | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/pagination.md) |
| Steps        | Progress indicator showing the current step in a multi-step process    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/steps.md)      |
| Tabs         | Horizontal navigation that switches between different content panels   | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/tabs.md)       |
| Sidebar      | Side-mounted navigation menu with hierarchical structure               | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/sidebar.md)    |
| Navbar       | Top-mounted navigation menu with primary actions and links             | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/navbar.md)     |

## Overlays

| Component    | Description                                                               | Status         | Documentation                                                   |
| ------------ | ------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------- |
| Modal        | Popup dialog that overlays the main content and requires user interaction | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/modal.md)        |
| Drawer       | Panel that slides in from the side of the screen over existing content    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/drawer.md)       |
| Popover      | Small overlay that appears near a trigger element with contextual content | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/popover.md)      |
| Tooltip      | Brief informational popup that appears on hover after a short delay       | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/tooltip.md)      |
| Context Menu | Right-click menu that provides contextual actions for specific elements   | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/context-menu.md) |
| Toast        | Temporary notification that appears briefly to provide feedback           | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/toast.md)        |
| Tour         | Guided walkthrough component that highlights and explains UI features     | ❌ Not planned | Use [Sheperd](https://www.shepherdjs.dev/)                      |

## Layout

| Component | Description                                                             | Status         | Documentation                                             |
| --------- | ----------------------------------------------------------------------- | -------------- | --------------------------------------------------------- |
| Card      | Container component that groups related content with consistent styling | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/card.md)     |
| Container | Wrapper component that provides consistent spacing and maximum width    | ⏳ Planned     | -                                                         |
| Skeleton  | Loading placeholder that mimics the structure of content being loaded   | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/skeleton.md) |

## Data

| Component                 | Description                                                                     | Status         | Documentation                                           |
| ------------------------- | ------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------- |
| Table                     | Structured data display with rows, columns, sorting, and filtering capabilities | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/table.md)    |
| Data Table                | Advanced data table component with enhanced functionality for large datasets    | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/data-table.md)           |
| Calendar                  | Month view calendar that displays events, with localized navigation             | ✅ Implemented | [View Docs](https://www.bloum.dev/llms/components/calendar.md) |
| Order List                | Sortable list component where items can be reordered by dragging                | ⏳ Planned     | -                                                       |
| Tree                      | Hierarchical data structure with expandable/collapsible nodes                   | ⏳ Planned     | -                                                       |
| Pick List / Transfer List | Dual-panel component for moving items between available and selected lists      | ⏳ Planned     | -                                                       |

---

# Design Tokens

Bloum uses a comprehensive system of CSS custom properties (design tokens) to maintain consistency across the UI. These tokens control colors, typography, spacing, and more. You can override these variables to customize the look and feel of your application.

## Colors

Bloum includes a predefined color palette with multiple shades (50-950) for each color.

### Semantic Colors

These colors are used throughout the components to convey meaning. They are mapped to specific colors from the palette by default but can be customized.

| Token Name                 | Default Mapping | Description                          |
| :------------------------- | :-------------- | :----------------------------------- |
| `--bl-clr-primary-{shade}` | Blue            | Main brand color                     |
| `--bl-clr-success-{shade}` | Green           | Success states and feedback          |
| `--bl-clr-warning-{shade}` | Orange          | Warning states and alerts            |
| `--bl-clr-danger-{shade}`  | Red             | Error states and destructive actions |
| `--bl-clr-info-{shade}`    | Sky             | Informational messages               |

**Usage:**

```css
.my-element {
  background-color: var(--bl-clr-primary-500);
  color: var(--bl-clr-primary-50);
}
```

### Contextual Colors

These tokens are used for general layout elements like text and backgrounds. They automatically adjust for dark mode.

| Token Name                     | Light Mode Value | Dark Mode Value          | Description                           |
| :----------------------------- | :--------------- | :----------------------- | :------------------------------------ |
| `--bl-clr-background`          | `white`          | `gray-900`               | Page background                       |
| `--bl-clr-surface`             | `white`          | `gray-800`               | Component backgrounds (cards, modals) |
| `--bl-clr-text`                | `gray-700`       | `gray-200`               | Primary text color                    |
| `--bl-clr-text-light`          | `gray-500`       | `gray-400`               | Secondary/lighter text color          |
| `--bl-clr-text-inverted`       | `gray-200`       | `gray-700`               | Text on dark backgrounds              |
| `--bl-clr-text-light-inverted` | `gray-400`       | `gray-500`               | Muted text on dark backgrounds        |
| `--bl-border-color`            | `gray-200`       | `gray-700` (50% opacity) | Default border color                  |
| `--bl-clr-text-danger`         | `danger-600`     | `danger-400`             | Text of destructive items             |
| `--bl-clr-hover-bg-danger`     | `danger-50`      | `danger-950`             | Hover background of destructive items |

### Color Palette

Bloum ships its own copy of a Tailwind-compatible color palette — the values are
bundled in `bloum.css`, so **Tailwind is not required** to use them. It provides
the following color ranges:

- **Reds & Pinks:** `red`, `rose`, `pink`, `fuchsia`
- **Purples:** `purple`, `violet`, `indigo`
- **Blues:** `blue`, `sky`, `cyan`
- **Greens & Teals:** `teal`, `emerald`, `green`, `lime`
- **Yellows & Oranges:** `yellow`, `amber`, `orange`
- **Grays:** `slate`, `gray`, `zinc`, `neutral`, `stone`
- **Base:** `black`, `white`

Each color ranges from `50` (lightest) to `950` (darkest).
Example: `--bl-clr-blue-500`

## Typography

### Font Families

| Token Name        | Value                        | Description             |
| :---------------- | :--------------------------- | :---------------------- |
| `--bl-font-sans`  | System UI / Sans-serif stack | Default sans-serif font |
| `--bl-font-serif` | Georgia / Serif stack        | Serif font              |
| `--bl-font-mono`  | Monospace stack              | Monospace font for code |
| `--bl-font-body`  | `var(--bl-font-sans)`        | Main body font          |

### Font Sizes

Bloum sets `html { font-size: 87.5% }` (14px with the browser's default
setting), and every `rem` in Bloum (text, spacing, control sizes) scales from
it. Override it once to rescale the whole interface:

```css
html {
  font-size: 100%; /* 16px base */
}
```

The size steps are ratios of the 14px base, so they land on whole pixels at the
default root size.

| Token Name     | Value (default) | Definition             |
| :------------- | :-------------- | :--------------------- |
| `--bl-fs-xs`   | 10px            | `calc(10 / 14 * 1rem)` |
| `--bl-fs-sm`   | 12px            | `calc(12 / 14 * 1rem)` |
| `--bl-fs-base` | 14px            | `1rem`                 |
| `--bl-fs-lg`   | 16px            | `calc(16 / 14 * 1rem)` |
| `--bl-fs-xl`   | 18px            | `calc(18 / 14 * 1rem)` |
| `--bl-fs-2xl`  | 20px            | `calc(20 / 14 * 1rem)` |
| `--bl-fs-3xl`  | 24px            | `calc(24 / 14 * 1rem)` |
| `--bl-fs-4xl`  | 30px            | `calc(30 / 14 * 1rem)` |
| `--bl-fs-5xl`  | 36px            | `calc(36 / 14 * 1rem)` |
| `--bl-fs-6xl`  | 48px            | `calc(48 / 14 * 1rem)` |
| `--bl-fs-7xl`  | 60px            | `calc(60 / 14 * 1rem)` |
| `--bl-fs-8xl`  | 72px            | `calc(72 / 14 * 1rem)` |
| `--bl-fs-9xl`  | 96px            | `calc(96 / 14 * 1rem)` |

### Font Weights

| Token Name       | Value |
| :--------------- | :---- |
| `--bl-fw-medium` | 600   |
| `--bl-fw-bold`   | 700   |

### Line Height

Line height of single-line text in controls (buttons, inputs, tabs, table
cells, list items).

| Token Name     | Value (default) | Definition             |
| :------------- | :-------------- | :--------------------- |
| `--bl-lh-base` | 20px            | `calc(20 / 14 * 1rem)` |

## Spacing & Layout

### Border Radius

| Token Name                | Value    |
| :------------------------ | :------- |
| `--bl-border-radius`      | 0.25rem  |
| `--bl-border-radius-md`   | 0.375rem |
| `--bl-border-radius-lg`   | 0.5rem   |
| `--bl-border-radius-xl`   | 0.75rem  |
| `--bl-border-radius-2xl`  | 1rem     |
| `--bl-border-radius-full` | 9999px   |

### Breakpoints

| Token Name            | Value  |
| :-------------------- | :----- |
| `--bl-breakpoint-sm`  | 640px  |
| `--bl-breakpoint-md`  | 768px  |
| `--bl-breakpoint-lg`  | 1024px |
| `--bl-breakpoint-xl`  | 1280px |
| `--bl-breakpoint-2xl` | 1536px |

## Effects

### Shadows

| Token Name       | Description        |
| :--------------- | :----------------- |
| `--bl-shadow-sm` | Small shadow       |
| `--bl-shadow`    | Default shadow     |
| `--bl-shadow-lg` | Large shadow       |
| `--bl-shadow-xl` | Extra large shadow |

### Transitions

| Token Name           | Duration |
| :------------------- | :------- |
| `--bl-transition-xs` | 50ms     |
| `--bl-transition-sm` | 100ms    |
| `--bl-transition-md` | 150ms    |
| `--bl-transition-lg` | 200ms    |
| `--bl-transition-xl` | 300ms    |

### Focus Ring

| Token Name              | Value                                        |
| :---------------------- | :------------------------------------------- |
| `--bl-focus-color`      | `primary-400` (Light) / `primary-600` (Dark) |
| `--bl-focus-width`      | 0.2rem                                       |
| `--bl-focus-fade`       | 50%                                          |
| `--bl-focus-transition` | 150ms                                        |

### Z-Index

Stacking order for layered components. Override these if Bloum's overlays need
to sit above (or below) something else in your app.

| Token Name        | Value |
| :---------------- | :---- |
| `--bl-z-topbar`   | 50    |
| `--bl-z-sidebar`  | 60    |
| `--bl-z-modal`    | 100   |
| `--bl-z-drawer`   | 100   |
| `--bl-z-popover`  | 200   |
| `--bl-z-dropdown` | 200   |
| `--bl-z-tooltip`  | 200   |
| `--bl-z-toast`    | 300   |

### Miscellaneous

| Token Name              | Value | Description                          |
| :---------------------- | :---- | :----------------------------------- |
| `--bl-disabled-opacity` | 0.7   | Opacity applied to disabled elements |
| `--bl-spinner-speed`    | 0.5s  | Spinner rotation duration            |

## Form Tokens

Specific tokens for form inputs:

| Token Name                 | Light Mode Value        | Dark Mode Value |
| :------------------------- | :---------------------- | :-------------- |
| `--bl-input-height`        | 2.25rem                 | _Same_          |
| `--bl-input-padding`       | 0.625rem                | _Same_          |
| `--bl-input-bg`            | `var(--bl-clr-surface)` | _Same_          |
| `--bl-input-border-color`  | `gray-300`              | `gray-600`      |
| `--bl-input-border-radius` | `md`                    | _Same_          |

## List Item Tokens

Shared by menu items and combobox options, so both lists have the same height
(32px, 40px on touch screens via `@media (pointer: coarse)`):

| Token Name                   | Value                | Description               |
| :--------------------------- | :------------------- | :------------------------ |
| `--bl-list-item-padding-x`   | 8px                  | Horizontal padding        |
| `--bl-list-item-padding-y`   | 6px (10px on touch)  | Vertical padding          |
| `--bl-list-item-line-height` | `--bl-lh-base`       | Line height of the item   |
| `--bl-list-item-radius`      | `--bl-border-radius` | Corner radius of the item |

---

# Tailwind CSS Integration

Bloum does not depend on Tailwind — but it is designed to pair with it. Bloum
provides the components as building blocks to make your UI, while Tailwind
provides the utility classes to glue everything together.

## Installation

Integrating Tailwind requires no specific configuration for Bloum. Follow the
official setup instructions from the Tailwind team:

[**Install Tailwind CSS**](https://tailwindcss.com/docs/installation)

### Import only the core stylesheet

This is the one rule that matters. With Tailwind, import **only**
`bloum.min.css`:

```js
import "tailwindcss";
import "bloum/dist/bloum.min.css";
```

Do **not** import `bloum/dist/reset.min.css` or
`bloum/dist/utilities.min.css`. Both exist for projects running Bloum
standalone, and both duplicate what Tailwind already gives you:

| Bloum stylesheet    | Why you skip it with Tailwind                                        |
| :------------------ | :------------------------------------------------------------------- |
| `reset.min.css`     | It is a port of Tailwind's Preflight — you already have the original. |
| `utilities.min.css` | Tailwind's utilities supersede it, with far broader coverage.         |

Loading them anyway is wasteful but not harmful: Bloum's utilities are declared
inside `@layer utilities`, so your real Tailwind classes still win the cascade.

## Customizing Colors

Bloum ships its own copy of the Tailwind color palette, so the default theme
matches a stock Tailwind project out of the box. If you use the default Tailwind
colors, no further action is needed.

If you have defined **custom colors** in your Tailwind theme, you will likely
want Bloum's components to reflect them. Bloum exposes semantic CSS variables
(e.g. `--bl-clr-primary-500`) that you can point at your own values.

### Example: Using the Indigo Color from Tailwind

For example, if you want your **Primary** color to be `indigo` instead of the
default `blue`:

```css
:root {
  --bl-clr-primary-50: var(--color-indigo-50);
  --bl-clr-primary-100: var(--color-indigo-100);
  --bl-clr-primary-200: var(--color-indigo-200);
  --bl-clr-primary-300: var(--color-indigo-300);
  --bl-clr-primary-400: var(--color-indigo-400);
  --bl-clr-primary-500: var(--color-indigo-500);
  --bl-clr-primary-600: var(--color-indigo-600);
  --bl-clr-primary-700: var(--color-indigo-700);
  --bl-clr-primary-800: var(--color-indigo-800);
  --bl-clr-primary-900: var(--color-indigo-900);
  --bl-clr-primary-950: var(--color-indigo-950);
}
```

The same works for a color you defined yourself. In Tailwind v4, theme values
are declared in CSS with `@theme`, and every entry becomes a custom property you
can reference directly:

```css
@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 260);
  /* ...remaining shades... */
}

:root {
  --bl-clr-primary-500: var(--color-brand-500);
  /* ...remaining shades... */
}
```

See [Design Tokens](https://www.bloum.dev/llms/docs/design-tokens.md) for the full
list of variables you can override.

---

# Utilities

Bloum ships a small, optional set of layout utility classes in a separate
stylesheet:

```js
import "bloum/dist/utilities.min.css";
```

**This file is opt-in and is not imported by `bloum.css`.** Core Bloum ships
with zero layout utilities, so projects that already use Tailwind hit no
class-name conflicts.

> **Using Tailwind?** Skip this stylesheet entirely — Tailwind's utilities cover
> everything here and much more. See
> [Tailwind CSS](https://www.bloum.dev/llms/docs/tailwindcss.md).

The goal is not to reimplement a utility framework. It is to give standalone
projects just enough classes to lay out Bloum components without adding a build
step. Class names follow Tailwind's conventions, and everything is declared
inside `@layer utilities`, so if Tailwind is ever loaded alongside, Tailwind
wins the cascade.

## The spacing scale

Numeric steps map to `step × 0.25rem` — so `4` is `1rem`. Every family below
exposes the same complete scale, rather than a cherry-picked subset:

```
0  1  2  3  4  5  6  8  10  12  16
```

| Class  | Value     |
| :----- | :-------- |
| `p-0`  | `0`       |
| `p-1`  | `0.25rem` |
| `p-2`  | `0.5rem`  |
| `p-4`  | `1rem`    |
| `p-8`  | `2rem`    |
| `p-16` | `4rem`    |

This scale is shared by **margin**, **padding**, **gap** and **space**. The
sizing utilities (`w-*`, `h-*`, `size-*`) extend it with three larger steps —
`20`, `24` and `32`.

## Layout

| Family       | Classes                                                                                |
| :----------- | :------------------------------------------------------------------------------------- |
| Display      | `block`, `inline-block`, `flex`, `inline-flex`, `grid`, `hidden`                        |
| Position     | `relative`, `absolute`, `fixed`, `sticky`                                               |
| Flex         | `flex-row`, `flex-col`, `flex-wrap`, `flex-1`, `grow`, `grow-0`, `shrink-0`             |
| Align        | `items-start`, `items-center`, `items-end`, `items-baseline`                            |
| Justify      | `justify-start`, `justify-center`, `justify-end`, `justify-between`                     |
| Grid         | `grid-cols-1` … `grid-cols-6`, `col-span-1` … `col-span-6`, `col-span-full`             |
| Place        | `place-items-center`                                                                    |
| Gap          | `gap-*`, `gap-x-*`, `gap-y-*`                                                            |
| Container    | `container` (full width, centered, capped at each breakpoint)                            |

### Stack shorthands

Two convenience classes cover the most common flex arrangements:

```html
<div class="hstack gap-2">
  <!-- display: flex; align-items: center -->
</div>

<div class="vstack gap-4">
  <!-- display: flex; flex-direction: column -->
</div>
```

## Spacing

| Family         | Classes                                                            |
| :------------- | :----------------------------------------------------------------- |
| Margin         | `m-*`, `mx-*`, `my-*`, `mt-*`, `mr-*`, `mb-*`, `ml-*`, `m-auto`     |
| Negative margin | `-mt-*`, `-mr-*`, `-mb-*`, `-ml-*`                                 |
| Padding        | `p-*`, `px-*`, `py-*`, `pt-*`, `pr-*`, `pb-*`, `pl-*`               |
| Space between  | `space-x-*`, `space-y-*` (applies to children, not the element)     |

## Sizing

| Family      | Classes                                                        |
| :---------- | :------------------------------------------------------------- |
| Width       | `w-*`, plus `w-px`, `w-auto`, `w-full`, `w-screen`              |
| Height      | `h-*`, plus `h-px`, `h-auto`, `h-full`, `h-screen`              |
| Square      | `size-*` (sets width and height together)                       |
| Max width   | `max-w-sm` … `max-w-7xl`, `max-w-full`, `max-w-none`            |
| Min size    | `min-w-0`, `min-w-full`, `min-h-0`, `min-h-full`                |

## Typography

Font sizes map to Bloum's design tokens, so `text-lg` resolves to
`var(--bl-fs-lg)` and stays in sync if you override the token.

| Family      | Classes                                                                     |
| :---------- | :-------------------------------------------------------------------------- |
| Size        | `text-xs` … `text-9xl`                                                       |
| Weight      | `font-normal`, `font-medium`, `font-semibold`, `font-bold`                   |
| Leading     | `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` |
| Tracking    | `tracking-tighter`, `tracking-tight`, `tracking-normal`, `tracking-wide`, `tracking-wider`, `tracking-widest` |
| Alignment   | `text-center`, `text-balance`                                                |
| Overflow    | `truncate`                                                                   |
| Transform   | `uppercase`                                                                  |
| Lists       | `list-disc`, `list-inside`                                                   |

## Colors

Color utilities are semantic — they reference Bloum's tokens rather than raw
palette values, so they follow your theme and adapt to dark mode automatically.

| Family     | Classes                                                                       |
| :--------- | :---------------------------------------------------------------------------- |
| Text       | `text-primary`, `text-success`, `text-warning`, `text-danger`, `text-info`     |
| Muted text | `text-light`, `text-muted` (both map to `--bl-clr-text-light`)                 |
| Background | `bg-primary`, `bg-success`, `bg-warning`, `bg-danger`, `bg-info`               |
| Surfaces   | `bg-surface`, `bg-muted`                                                       |

## Borders & effects

| Family   | Classes                                                                              |
| :------- | :----------------------------------------------------------------------------------- |
| Radius   | `rounded-none`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full` |
| Border   | `border-l`                                                                            |
| Cursor   | `cursor-pointer`                                                                      |

## Accessibility

`sr-only` visually hides an element while keeping it available to screen
readers:

```html
<button class="btn">
  <i class="fa-solid fa-xmark"></i>
  <span class="sr-only">Close</span>
</button>
```

## Responsive variants

Responsive coverage is intentionally narrow — utilities are **not** fanned out
across every breakpoint. Only the layout variants needed to make a page
responsive are provided:

| Prefix | Min-width | Available variants                          |
| :----- | :-------- | :------------------------------------------ |
| `sm:`  | 640px     | `flex`, `hidden`, `grid-cols-1` … `grid-cols-6` |
| `md:`  | 768px     | `flex`, `hidden`, `grid-cols-1` … `grid-cols-6` |
| `lg:`  | 1024px    | `flex`, `hidden`, `grid-cols-1` … `grid-cols-6` |
| `xl:`  | 1280px    | `container` cap only                         |
| `2xl:` | 1536px    | `container` cap only                         |

```html
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">...</div>
```

If you need broader responsive coverage, that is the point at which reaching for
Tailwind makes sense.

## Dark mode variants

Two display variants are available for light/dark asset swaps:

```html
<img src="logo-light.svg" class="dark:hidden" alt="Logo" />
<img src="logo-dark.svg" class="hidden dark:block" alt="Logo" />
```

These key off a `.dark` class or `[data-theme="dark"]` attribute on an
**ancestor** element — not the `prefers-color-scheme` media query — so they
follow whatever theme your app has explicitly applied.

---

# Accordion

> Collapsible sections that expand and collapse to show/hide content panels

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-accordion--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-accordion-header-color: var(--bl-clr-text);
```

## Examples

### Accordion

```html
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <button class="accordion-header" type="button" data-collapse="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Accordion Item #1
    </button>
    <div id="collapseOne" class="accordion-collapse collapsible show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header collapsed" type="button" data-collapse="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Accordion Item #2
    </button>
    <div id="collapseTwo" class="accordion-collapse collapsible" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header collapsed" type="button" data-collapse="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      Accordion Item #3
    </button>
    <div id="collapseThree" class="accordion-collapse collapsible" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
```

---

# Alert

> Notification component that displays important messages with different severity levels

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-alert--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-alert-bg: var(--bl-clr-surface);
--bl-alert-border: var(--bl-border-color-strong);
--bl-alert-color: var(--bl-clr-text);
--bl-alert-accent-width: 4px;
--bl-alert-padding: 0.75rem;
```

## Examples

### Alert

```html
<div class="alert">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
```

### Simple Alert

```html
<div class="alert">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores earum fugiat laborum nisi perferendis quibusdam. Consequuntur, delectus danger est illum incidunt ipsam, laudantium nesciunt optio recusandae sapiente suscipit veniam vero!
</div>
```

## Options

Markup for each value of the Storybook controls.

### `color`

```html
<!-- color: neutral -->
<div class="alert">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
<!-- color: primary -->
<div class="alert alert-primary">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
<!-- color: danger -->
<div class="alert alert-danger">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
<!-- color: success -->
<div class="alert alert-success">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
<!-- color: warning -->
<div class="alert alert-warning">
  <div class="alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="alert-content">
    <div class="alert-title">Alert Title</div>
    <div class="alert-text">This is an alert message.</div>
  </div>
</div>
```

---

# Avatar

> Circular or rounded display for user profile pictures or initials

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-avatar--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-avatar-size: 2.5rem;
--bl-avatar-fs: var(--bl-fs-lg);
--bl-avatar-bg: var(--bl-clr-control-bg);
--bl-avatar-color: var(--bl-clr-text);
--bl-avatar-border-color: var(--bl-border-color-strong);
--bl-avatar-border-width: 0;
```

## Examples

### Default

```html
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
```

### With Image

```html
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" />
    
  </div>
  
</div>
```

### Initials Only

```html
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-solid">
    
    <span class="avatar-initials">AB</span>
  </div>
  
</div>
```

### Sizes

```html
<div class="flex gap-4 items-center">
  <div class="avatar avatar-xs">
    <span class="avatar-initials">XS</span>
  </div>
  <div class="avatar avatar-sm">
    <span class="avatar-initials">SM</span>
  </div>
  <div class="avatar">
    <span class="avatar-initials">MD</span>
  </div>
  <div class="avatar avatar-lg">
    <span class="avatar-initials">LG</span>
  </div>
  <div class="avatar avatar-xl">
    <span class="avatar-initials">XL</span>
  </div>
</div>
```

### Variants

```html
<div class="flex gap-4 items-center">
  <div class="avatar">
    <span class="avatar-initials">AB</span>
  </div>
  <div class="avatar avatar-solid">
    <span class="avatar-initials">CD</span>
  </div>
  <div class="avatar avatar-outline">
    <span class="avatar-initials">EF</span>
  </div>
  <div class="avatar avatar-subtle">
    <span class="avatar-initials">GH</span>
  </div>
</div>
```

### With Images

```html
<div class="flex gap-4 items-center">
  <div class="avatar avatar-sm">
    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" />
  </div>
  <div class="avatar">
    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=256&h=256&fit=facearea&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Jean François" />
  </div>
  <div class="avatar avatar-lg">
    <img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Mike Johnson" />
  </div>
</div>
```

### With Badge

```html
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-solid">
    
    <span class="avatar-initials">JD</span>
  </div>
  <div class="badge badge-top-right badge-danger">3</div>
</div>
```

### Badge Examples

```html
<div class="flex gap-6 items-center">
  <div style="position: relative;">
    <div class="avatar avatar-solid">
      <span class="avatar-initials">AB</span>
    </div>
    <div class="badge badge-danger badge-top-right badge-sm">3</div>
  </div>
  
  <div style="position: relative;">
    <div class="avatar">
      <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=256&h=256&fit=facearea&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Jean François" />
    </div>
    <div class="badge badge-success badge-top-right badge-dot"></div>
  </div>
  
  <div style="position: relative;">
    <div class="avatar avatar-outline">
      <span class="avatar-initials">CD</span>
    </div>
    <div class="badge badge-primary badge-top-right badge-lg">12</div>
  </div>
  
  <div style="position: relative;">
    <div class="avatar">
      <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" />
    </div>
    <div class="badge badge-warning badge-top-right badge-dot badge-ping"></div>
  </div>
</div>
```

### Java Script API

```html
<div class="flex gap-4 items-center flex-wrap">
  <!-- Auto-initialized with data attributes -->
  <div 
    data-avatar 
    data-avatar-initials="JS" 
    data-avatar-variant="solid"
    data-avatar-size="sm"
  ></div>
  
  <div 
    data-avatar 
    data-avatar-src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
    data-avatar-alt="John Doe"
    data-avatar-initials="JD"
  ></div>
  
  <div 
    data-avatar 
    data-avatar-initials="AB" 
    data-avatar-variant="outline"
    data-avatar-size="lg"
  ></div>
  
  <div 
    data-avatar 
    data-avatar-initials="CD" 
    data-avatar-variant="subtle"
    data-avatar-size="xl"
  ></div>
  
  <!-- This one will fallback to initials when image fails -->
  <div 
    data-avatar 
    data-avatar-src="https://invalid-image-url.com/avatar.jpg"
    data-avatar-alt="Failed Image"
    data-avatar-initials="FI"
    data-avatar-variant="solid"
  ></div>
</div>

<div class="mt-4 p-4 rounded text-sm bg-surface">
  <p class="mb-2 font-bold">JavaScript API Usage</p>
  These avatars are initialized automatically using data attributes:<br/>
  <code>data-avatar</code> - Enables auto-initialization<br/>
  <code>data-avatar-src</code> - Image source URL<br/>
  <code>data-avatar-alt</code> - Image alt text<br/>
  <code>data-avatar-initials</code> - Fallback initials<br/>
  <code>data-avatar-size</code> - Size variant (xs, sm, md, lg, xl)<br/>
  <code>data-avatar-variant</code> - Style variant (default, solid, outline, subtle)
</div>
```

## Options

Markup for each value of the Storybook controls.

### `size`

```html
<!-- size: xs -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-xs">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- size: sm -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-sm">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- size: md -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- size: lg -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-lg">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- size: xl -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-xl">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
```

### `variant`

```html
<!-- variant: default -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- variant: solid -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-solid">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- variant: outline -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-outline">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- variant: subtle -->
<div style="position: relative; display: inline-block;">
  <div class="avatar avatar-subtle">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
```

### `showBadge`

```html
<!-- showBadge: true -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  <div class="badge badge-top-right ">3</div>
</div>
```

### `badgeType`

```html
<!-- badgeType: default -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- badgeType: primary -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- badgeType: success -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- badgeType: danger -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- badgeType: warning -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
<!-- badgeType: info -->
<div style="position: relative; display: inline-block;">
  <div class="avatar">
    
    <span class="avatar-initials">JD</span>
  </div>
  
</div>
```

---

# Badge

> Small status indicator or label that appears near other UI elements

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-badge--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-badge-bg: var(--bl-clr-background-inverted);
--bl-badge-color: var(--bl-clr-text-inverted);
--bl-badge-border-color: var(--bl-clr-background);
--bl-badge-height: round(1.25rem, 2px);
--bl-badge-dot-size: round(0.75rem, 2px);
--bl-badge-fs: var(--bl-fs-sm);
--bl-badge-fw: var(--bl-fw-bold);
```

## Examples

### Badge

```html
<button class="btn">
  This is a button
  <div class="badge ">12</div>
</button>
```

### Badge Top Right

```html
<button class="btn">
  This is a button
  <div class="badge  badge-top-right">12</div>
</button>
```

### Badge Dot

```html
<button class="btn">
  This is a button
  <div class="badge  badge-top-right badge-dot"></div>
</button>
```

## Options

Markup for each value of the Storybook controls.

### `type`

```html
<!-- type: default -->
<button class="btn">
  This is a button
  <div class="badge ">12</div>
</button>
<!-- type: primary -->
<button class="btn">
  This is a button
  <div class="badge badge-primary">12</div>
</button>
<!-- type: success -->
<button class="btn">
  This is a button
  <div class="badge badge-success">12</div>
</button>
<!-- type: danger -->
<button class="btn">
  This is a button
  <div class="badge badge-danger">12</div>
</button>
<!-- type: warning -->
<button class="btn">
  This is a button
  <div class="badge badge-warning">12</div>
</button>
<!-- type: info -->
<button class="btn">
  This is a button
  <div class="badge badge-info">12</div>
</button>
```

### `topRight`

```html
<!-- topRight: true -->
<button class="btn">
  This is a button
  <div class="badge  badge-top-right">12</div>
</button>
```

### `dot`

```html
<!-- dot: true -->
<button class="btn">
  This is a button
  <div class="badge  badge-dot"></div>
</button>
```

### `ping`

```html
<!-- ping: true -->
<button class="btn">
  This is a button
  <div class="badge  badge-ping">12</div>
</button>
```

---

# Breadcrumb

> Navigation aid showing the user's current location within a hierarchical structure

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-breadcrumb--docs

## Examples

### Breadcrumb

```html
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
```

### Breadcrumb With Icons

```html
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i>Home</a></li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i>Library</a></li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-database"></i>Data</li>
  </ol>
</nav>
```

### Breadcrumb With Menu

```html
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item">
      <div class="dropdown">
        <button data-menu-toggle class="flex items-center gap-2">Library<i class="fas fa-angle-down text-xs"></i></button>
        <div class="menu" id="menu">
          <div class="menu-group">
            <a href="#" class="menu-item">New File</a>
            <a href="#" class="menu-item">Open File...</a>
            <button class="menu-item">Save</button>
          </div>
          <div class="menu-divider"></div>
          <div class="menu-group">
            <button class="menu-item">Close</button>
          </div>
        </div>
      </div>
    </li>
    <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-database"></i>Data</li>
  </ol>
</nav>
```

---

# Button

> Interactive element that triggers actions when clicked or pressed

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-button--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-btn-color: var(--bl-clr-text);
--bl-btn-bg: var(--bl-clr-control-bg);
--bl-btn-hover-bg: hsl(from var(--bl-btn-bg) h s calc(l - 4));
--bl-btn-active-bg: hsl(from var(--bl-btn-hover-bg) h s calc(l - 4));
--bl-btn-border-radius: var(--bl-border-radius);
--bl-btn-border: solid var(--bl-border-width) transparent;
--bl-btn-height: 2.25rem;
--bl-btn-outline-color: var(--bl-clr-primary-600);
--bl-btn-fs: var(--bl-fs-base);
--bl-btn-fw: var(--bl-fw-medium);
--bl-btn-spinner-size: calc(1 / 2.25 * var(--bl-btn-height));
```

## Examples

### Primary

```html
<button class="btn btn-primary btn-default">Press me</button>
```

### Secondary

```html
<button class="btn btn-default">Press me</button>
```

### Split

```html
<div class="btn-group">
  <button type="button" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Send</button>
  <button type="button" class="btn btn-primary btn-icon btn-menu-toggle" data-menu="#menu-1">
    <i class="fas fa-chevron-down"></i>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="menu" id="menu-1">
    <li><a class="menu-item" href="#"><i class="fas fa-copy"></i> Copy</a></li>
    <li><a class="menu-item" href="#"><i class="fas fa-cut"></i> Cut</a></li>
    <li><a class="menu-item" href="#"><i class="fas fa-paste"></i> Paste</a></li>
    <li><hr class="menu-divider"></li>
    <li><a class="menu-item menu-item-danger" href="#"><i class="fas fa-trash"></i> Delete</a></li>
  </ul>
</div>
```

### Link

```html
<a href="#" class="btn btn-primary"><i class="fas fa-link"></i> I'm a link</a>
```

## Options

Markup for each value of the Storybook controls.

### `color`

```html
<!-- color: default -->
<button class="btn btn-default">Press me</button>
<!-- color: primary -->
<button class="btn btn-primary btn-default">Press me</button>
<!-- color: danger -->
<button class="btn btn-danger btn-default">Press me</button>
<!-- color: warning -->
<button class="btn btn-warning btn-default">Press me</button>
<!-- color: success -->
<button class="btn btn-success btn-default">Press me</button>
<!-- color: info -->
<button class="btn btn-info btn-default">Press me</button>
```

### `variant`

```html
<!-- variant: default -->
<button class="btn btn-primary btn-default">Press me</button>
<!-- variant: outline -->
<button class="btn btn-primary btn-outline">Press me</button>
<!-- variant: ghost -->
<button class="btn btn-primary btn-ghost">Press me</button>
```

### `size`

```html
<!-- size: xs -->
<button class="btn btn-primary btn-default btn-xs">Press me</button>
<!-- size: sm -->
<button class="btn btn-primary btn-default btn-sm">Press me</button>
<!-- size: default -->
<button class="btn btn-primary btn-default">Press me</button>
<!-- size: lg -->
<button class="btn btn-primary btn-default btn-lg">Press me</button>
```

### `loading`

```html
<!-- loading: true -->
<button class="btn btn-primary btn-default btn-loading">Press me</button>
```

### `disabled`

```html
<!-- disabled: true -->
<button disabled class="btn btn-primary btn-default">Press me</button>
```

---

# Icon Button

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-icon-button--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-btn-color: var(--bl-clr-text);
--bl-btn-bg: var(--bl-clr-control-bg);
--bl-btn-hover-bg: hsl(from var(--bl-btn-bg) h s calc(l - 4));
--bl-btn-active-bg: hsl(from var(--bl-btn-hover-bg) h s calc(l - 4));
--bl-btn-border-radius: var(--bl-border-radius);
--bl-btn-border: solid var(--bl-border-width) transparent;
--bl-btn-height: 2.25rem;
--bl-btn-outline-color: var(--bl-clr-primary-600);
--bl-btn-fs: var(--bl-fs-base);
--bl-btn-fw: var(--bl-fw-medium);
--bl-btn-spinner-size: calc(1 / 2.25 * var(--bl-btn-height));
```

## Examples

### Primary

```html
<button class="btn btn-icon btn-primary btn-default"><i class="fas fa-save"></i></button>
```

### Outline

```html
<button class="btn btn-icon btn-primary btn-outline btn-default"><i class="fas fa-save"></i></button>
```

## Options

Markup for each value of the Storybook controls.

### `color`

```html
<!-- color: default -->
<button class="btn btn-icon btn-default"><i class="fas fa-save"></i></button>
<!-- color: primary -->
<button class="btn btn-icon btn-primary btn-default"><i class="fas fa-save"></i></button>
<!-- color: danger -->
<button class="btn btn-icon btn-danger btn-default"><i class="fas fa-save"></i></button>
<!-- color: warning -->
<button class="btn btn-icon btn-warning btn-default"><i class="fas fa-save"></i></button>
<!-- color: success -->
<button class="btn btn-icon btn-success btn-default"><i class="fas fa-save"></i></button>
<!-- color: info -->
<button class="btn btn-icon btn-info btn-default"><i class="fas fa-save"></i></button>
```

### `variant`

```html
<!-- variant: default -->
<button class="btn btn-icon btn-primary btn-default"><i class="fas fa-save"></i></button>
<!-- variant: outline -->
<button class="btn btn-icon btn-primary btn-outline btn-default"><i class="fas fa-save"></i></button>
<!-- variant: ghost -->
<button class="btn btn-icon btn-primary btn-ghost btn-default"><i class="fas fa-save"></i></button>
```

### `size`

```html
<!-- size: xs -->
<button class="btn btn-icon btn-primary btn-default btn-xs"><i class="fas fa-save"></i></button>
<!-- size: sm -->
<button class="btn btn-icon btn-primary btn-default btn-sm"><i class="fas fa-save"></i></button>
<!-- size: default -->
<button class="btn btn-icon btn-primary btn-default"><i class="fas fa-save"></i></button>
<!-- size: lg -->
<button class="btn btn-icon btn-primary btn-default btn-lg"><i class="fas fa-save"></i></button>
```

### `loading`

```html
<!-- loading: true -->
<button class="btn btn-icon btn-primary btn-default btn-loading"><i class="fas fa-save"></i></button>
```

### `disabled`

```html
<!-- disabled: true -->
<button disabled class="btn btn-icon btn-primary btn-default"><i class="fas fa-save"></i></button>
```

---

# Calendar

> Month view calendar that displays events, with localized navigation

Interactive demo: https://docs.bloum.dev/?path=/docs/components-data-calendar--docs

A month view calendar that displays events. Multi-day events are shown as bars
spanning their days, timed events with their start time. When a day has more
events than fit, its last row becomes a "+N more" button that opens a popover
listing every event of that day. The calendar is read-only.

## Usage

Provide the events as JSON inside the element, which suits server-rendered
pages and htmx responses:

```html
<bl-calendar week-start="1">
  <script type="application/json">
    [
      { "title": "Team offsite", "start": "2026-10-12", "end": "2026-10-14", "color": "#16a34a" },
      { "title": "Standup", "start": "2026-10-08T09:00", "end": "2026-10-08T09:15", "url": "/events/42" }
    ]
  </script>
</bl-calendar>
```

or set them from JavaScript:

```js
document.querySelector("bl-calendar").events = [
  { title: "Standup", start: "2026-10-08T09:00" },
];
```

The element is registered by `Bloum.init()`, or manually with
`Bloum.Calendar.register()`.

## Attributes

- `locale`: language of the calendar, e.g. `en` or `fr-CH`. Defaults to
  the `lang` of the closest ancestor, then `en`.
- `week-start`: first day of the week, `0` (Sunday) to `6` (Saturday).
  Defaults to `1` (Monday).
- `date`: month displayed first, `YYYY-MM` or `YYYY-MM-DD`. Defaults to
  the current month.
- `max-events`: rows of events per day, including the "+N more" row.
  Defaults to `3`.

## Events

| Property | Description |
| --- | --- |
| `title` | Required. |
| `start` | Required. `YYYY-MM-DD` for an all-day event, `YYYY-MM-DDTHH:mm` for a timed event, or a `Date`. |
| `end` | Optional. For all-day events, the **last day, inclusive**: `2026-10-12` → `2026-10-14` covers three days (iCal and most calendar APIs use an exclusive end date). For timed events, the end date-time. |
| `allDay` | Optional. Defaults to `true` when `start` has no time. |
| `color` | Optional. Any CSS color, e.g. `#16a34a` or `var(--brand)`. |
| `url` | Optional. Renders the event as a link (`http(s):`, `mailto:`, `tel:` or relative URLs). |

Date-times without an offset are read in local time; with `Z` or an offset
they are shown in the browser's time zone. An event is shown on every day it
overlaps; an end at exactly midnight doesn't count the next day. Invalid
events are skipped with a warning in the console.

## JavaScript API

- `events`: get or set the events (assign a new array to update them)
- `month`: first day of the displayed month
- `prev()`, `next()`, `today()`: navigate between months
- `gotoDate(date)`: show the month of a `Date` or an ISO string

The `bl-calendar-navigate` event bubbles after the first render and every
time the visible range changes, e.g. to load the events of the new month.
`event.detail` holds `month`, `start` (first visible day), `end` (day after
the last visible day) and `startStr` / `endStr` as `YYYY-MM-DD`.

## Localization

Month and day names come from `Intl`, so they follow any locale. The few
labels of the calendar are translated in English and French; register other
languages on `Bloum.Calendar.locales` (without one, labels fall back to
English):

```js
Bloum.Calendar.locales.de = {
  today: "Heute",
  previousMonth: "Vorheriger Monat",
  nextMonth: "Nächster Monat",
  close: "Schließen",
  more: (count) => `+${count} weitere`,
  moreLabel: (count, date) => `${count} weitere Termine anzeigen, ${date}`,
};
```

## CSS classes

- `.calendar-header`, `.calendar-nav`, `.calendar-title`: the header
- `.calendar-grid`, `.calendar-weekdays`, `.calendar-week`: the grid
- `.calendar-day`, `.calendar-day-today`, `.calendar-day-outside` (other
  month), `.calendar-day-number`
- `.calendar-event`, `.calendar-event-bar` (all-day and multi-day),
  `.calendar-event-clip-start` / `-clip-end` (continues from / into another
  week), `.calendar-event-time`, `.calendar-event-title`
- `.calendar-more`, `.calendar-popover`

## CSS variables

Set on `bl-calendar`: `--bl-calendar-bg`, `--bl-calendar-border-color`,
`--bl-calendar-border-radius`, `--bl-calendar-title-fs`,
`--bl-calendar-title-fw`, `--bl-calendar-weekday-color`,
`--bl-calendar-day-color`, `--bl-calendar-outside-color`,
`--bl-calendar-today-bg`, `--bl-calendar-today-color`,
`--bl-calendar-hover-bg`, `--bl-calendar-day-header-height`,
`--bl-calendar-event-color` (default color of the events),
`--bl-calendar-event-height`, `--bl-calendar-event-gap`,
`--bl-calendar-popover-shadow`.

Give the calendar a height to make its weeks fill it.

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-calendar-bg: var(--bl-clr-surface);
--bl-calendar-border-color: var(--bl-border-color);
--bl-calendar-border-radius: var(--bl-border-radius-lg);
--bl-calendar-title-fs: var(--bl-fs-xl);
--bl-calendar-title-fw: var(--bl-fw-medium);
--bl-calendar-weekday-color: var(--bl-clr-text-light);
--bl-calendar-day-color: var(--bl-clr-text);
--bl-calendar-outside-color: var(--bl-clr-text-light);
--bl-calendar-today-bg: var(--bl-clr-background-inverted);
--bl-calendar-today-color: var(--bl-clr-text-inverted);
--bl-calendar-hover-bg: var(--bl-clr-hover-bg);
--bl-calendar-day-header-height: 2rem;
--bl-calendar-event-color: var(--bl-clr-text-light);
--bl-calendar-event-height: 1.375rem;
--bl-calendar-event-gap: 0.125rem;
--bl-calendar-popover-shadow: var(--bl-shadow-lg);
--bl-calendar-event-bg: color-mix( in oklab, var(--bl-calendar-event-color) 16%, var(--bl-calendar-bg) );
--bl-calendar-event-hover-bg: color-mix( in oklab, var(--bl-calendar-event-color) 26%, var(--bl-calendar-bg) );
--bl-calendar-event-fg: color-mix( in oklab, var(--bl-calendar-event-color) 55%, var(--bl-clr-text) );
```

## Examples

### Default

```html
<bl-calendar locale="en" week-start="1" max-events="3">
  <script type="application/json">[{"title":"Team offsite","start":"2026-10-03","end":"2026-10-04","color":"#16a34a"},{"title":"Sprint planning","start":"2026-10-06T09:30","end":"2026-10-06T11:00","color":"#2563eb"},{"title":"Lunch","start":"2026-10-06T12:30","end":"2026-10-06T13:30"},{"title":"Release 2.0","start":"2026-10-09","color":"#dc2626","url":"https://www.bloum.dev"},{"title":"Design review","start":"2026-10-14T09:00","color":"#7c3aed"},{"title":"1:1 with Sam","start":"2026-10-14T11:00"},{"title":"Customer call","start":"2026-10-14T14:00","color":"#0891b2"},{"title":"Code freeze","start":"2026-10-14","color":"#ea580c"},{"title":"Team drinks","start":"2026-10-14T18:00","color":"#db2777"},{"title":"Conference trip","start":"2026-10-17","end":"2026-10-24","color":"#0891b2"},{"title":"Dentist","start":"2026-10-21T16:15","end":"2026-10-21T17:00"},{"title":"Server migration","start":"2026-10-26T22:00","end":"2026-10-27T04:00","color":"#ea580c"},{"title":"Hackathon","start":"2026-10-28","end":"2026-10-30","color":"#7c3aed"},{"title":"Retrospective","start":"2026-10-28T15:00","color":"#2563eb"}]</script>
</bl-calendar>
```

### French

```html
<bl-calendar locale="fr" week-start="1" max-events="3">
  <script type="application/json">[{"title":"Team offsite","start":"2026-10-03","end":"2026-10-04","color":"#16a34a"},{"title":"Sprint planning","start":"2026-10-06T09:30","end":"2026-10-06T11:00","color":"#2563eb"},{"title":"Lunch","start":"2026-10-06T12:30","end":"2026-10-06T13:30"},{"title":"Release 2.0","start":"2026-10-09","color":"#dc2626","url":"https://www.bloum.dev"},{"title":"Design review","start":"2026-10-14T09:00","color":"#7c3aed"},{"title":"1:1 with Sam","start":"2026-10-14T11:00"},{"title":"Customer call","start":"2026-10-14T14:00","color":"#0891b2"},{"title":"Code freeze","start":"2026-10-14","color":"#ea580c"},{"title":"Team drinks","start":"2026-10-14T18:00","color":"#db2777"},{"title":"Conference trip","start":"2026-10-17","end":"2026-10-24","color":"#0891b2"},{"title":"Dentist","start":"2026-10-21T16:15","end":"2026-10-21T17:00"},{"title":"Server migration","start":"2026-10-26T22:00","end":"2026-10-27T04:00","color":"#ea580c"},{"title":"Hackathon","start":"2026-10-28","end":"2026-10-30","color":"#7c3aed"},{"title":"Retrospective","start":"2026-10-28T15:00","color":"#2563eb"}]</script>
</bl-calendar>
```

### Week Starts On Sunday

```html
<bl-calendar locale="en" week-start="0" max-events="3">
  <script type="application/json">[{"title":"Team offsite","start":"2026-10-03","end":"2026-10-04","color":"#16a34a"},{"title":"Sprint planning","start":"2026-10-06T09:30","end":"2026-10-06T11:00","color":"#2563eb"},{"title":"Lunch","start":"2026-10-06T12:30","end":"2026-10-06T13:30"},{"title":"Release 2.0","start":"2026-10-09","color":"#dc2626","url":"https://www.bloum.dev"},{"title":"Design review","start":"2026-10-14T09:00","color":"#7c3aed"},{"title":"1:1 with Sam","start":"2026-10-14T11:00"},{"title":"Customer call","start":"2026-10-14T14:00","color":"#0891b2"},{"title":"Code freeze","start":"2026-10-14","color":"#ea580c"},{"title":"Team drinks","start":"2026-10-14T18:00","color":"#db2777"},{"title":"Conference trip","start":"2026-10-17","end":"2026-10-24","color":"#0891b2"},{"title":"Dentist","start":"2026-10-21T16:15","end":"2026-10-21T17:00"},{"title":"Server migration","start":"2026-10-26T22:00","end":"2026-10-27T04:00","color":"#ea580c"},{"title":"Hackathon","start":"2026-10-28","end":"2026-10-30","color":"#7c3aed"},{"title":"Retrospective","start":"2026-10-28T15:00","color":"#2563eb"}]</script>
</bl-calendar>
```

### Initial Month

```html
<bl-calendar locale="en" week-start="1" max-events="3" date="2026-02">
  <script type="application/json">[{"title":"Winter break","start":"2026-02-09","end":"2026-02-13"},{"title":"Board meeting","start":"2026-02-17T10:00","color":"#2563eb"}]</script>
</bl-calendar>
```

### Fixed Height

```html
<bl-calendar locale="en" week-start="1" max-events="3" style="height: 48rem">
  <script type="application/json">[{"title":"Team offsite","start":"2026-10-03","end":"2026-10-04","color":"#16a34a"},{"title":"Sprint planning","start":"2026-10-06T09:30","end":"2026-10-06T11:00","color":"#2563eb"},{"title":"Lunch","start":"2026-10-06T12:30","end":"2026-10-06T13:30"},{"title":"Release 2.0","start":"2026-10-09","color":"#dc2626","url":"https://www.bloum.dev"},{"title":"Design review","start":"2026-10-14T09:00","color":"#7c3aed"},{"title":"1:1 with Sam","start":"2026-10-14T11:00"},{"title":"Customer call","start":"2026-10-14T14:00","color":"#0891b2"},{"title":"Code freeze","start":"2026-10-14","color":"#ea580c"},{"title":"Team drinks","start":"2026-10-14T18:00","color":"#db2777"},{"title":"Conference trip","start":"2026-10-17","end":"2026-10-24","color":"#0891b2"},{"title":"Dentist","start":"2026-10-21T16:15","end":"2026-10-21T17:00"},{"title":"Server migration","start":"2026-10-26T22:00","end":"2026-10-27T04:00","color":"#ea580c"},{"title":"Hackathon","start":"2026-10-28","end":"2026-10-30","color":"#7c3aed"},{"title":"Retrospective","start":"2026-10-28T15:00","color":"#2563eb"}]</script>
</bl-calendar>
```

### Events From Java Script

```html
<div><p class="mb-4"></p><bl-calendar max-events="3" week-start="1" locale="en"></bl-calendar></div>
```

---

# Card

> Container component that groups related content with consistent styling

Interactive demo: https://docs.bloum.dev/?path=/docs/components-layout-card--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-card-bg: var(--bl-clr-surface);
--bl-card-border-radius: var(--bl-border-radius-lg);
--bl-card-border: 1px solid var(--bl-border-color);
--bl-card-padding: 1rem;
--bl-card-title-fs: var(--bl-fs-lg);
--bl-card-title-fw: var(--bl-fw-bold);
--bl-card-title-color: var(--bl-clr-text);
--bl-card-image-max-height: 150px;
--bl-card-footer-bg: var(--bl-clr-surface-muted);
--bl-card-description-color: var(--bl-clr-text-light);
```

## Examples

### Card

```html
<div class="card max-w-lg">
  <div class="card-header">
    <div class="card-actions">
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Add user">
        <i class="fas fa-plus"></i>
      </button>
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Settings">
        <i class="fas fa-cog"></i>
      </button>
    </div>
    <h3 class="card-title">List of users</h3>
    <div class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur corporis deleniti dolores doloribus eius facere.</div>
  </div>
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
  </div>
  <div class="card-footer grid grid-cols-2">
    <button class="btn btn-primary">Action 1</button>
    <button class="btn btn-outline">Action 2</button>
  </div>
</div>
```

### Card Only Body

```html
<div class="card max-w-lg">
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
  </div>
</div>
```

### Card Only Header

```html
<div class="card max-w-lg">
  <div class="card-header">
    <div class="card-actions">
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Add user">
        <i class="fas fa-plus"></i>
      </button>
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Settings">
        <i class="fas fa-cog"></i>
      </button>
    </div>
    <h3 class="card-title">List of users</h3>
    <div class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur corporis deleniti dolores doloribus eius facere.</div>
  </div>
</div>
```

### Card With Image

```html
<div class="card" style="max-width: 350px">
  <img src="https://picsum.photos/300/200" alt="Nature" class="card-image" />
  <div class="card-header">
    <div class="card-actions">
      <span class="tag">Featured</span>
    </div>
    <h3 class="card-title">List of users</h3>
    <div class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, at, commodi ducimus eveniet fugit in, iste mollitia neque nulla obcaecati provident quibusdam repellat sit tempore tenetur ut voluptatem. Provident, quisquam!</div>
  </div>
  <div class="card-footer justify-end">
    <button class="btn btn-outline">Cancel</button>
    <button class="btn btn-primary">Save</button>
  </div>
</div>
```

### Card With Table

```html
<div class="card">
  <div class="card-header">
    <h3 class="card-title">List of users</h3>
    <div class="card-actions">
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Add user">
        <i class="fas fa-plus"></i>
      </button>
      <button class="btn btn-sm btn-icon btn-ghost" aria-label="Settings">
        <i class="fas fa-cog"></i>
      </button>
    </div>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>
          <input type="checkbox" class="input-check" aria-label="Select user" />
        </th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th><span class="sr-only">Actions</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" class="input-check" aria-label="Select user" />
        </td>
        <td>Facteur Hyacinthe</td>
        <td>john.doe@example.com</td>
        <td>Admin</td>
        <td>
          <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
            <i class="fas fa-pen"></i>
          </button>
          <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="input-check" aria-label="Select user" />
        </td>
        <td>Albert le Vert</td>
        <td>john.doe@example.com</td>
        <td>Admin</td>
        <td>
          <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
            <i class="fas fa-pen"></i>
          </button>
          <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="input-check" aria-label="Select user" />
        </td>
        <td>Mademoiselle Cassis</td>
        <td>john.doe@example.com</td>
        <td>Admin</td>
        <td>
          <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
            <i class="fas fa-pen"></i>
          </button>
          <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">Total: 1 user</td>
      </tr>
    </tfoot>
  </table>
</div>
```

---

# Checkbox Card

> Card-style checkbox component for selection with enhanced visual presentation

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-checkbox-card--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-checkbox-card-checked-border: var(--bl-clr-primary-600);
--bl-card-image-max-height: 100px;
--bl-card-border: 1px solid var(--bl-checkbox-card-checked-border);
```

## Examples

### Checkbox Card

```html
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <label for="pack1" class="card checkbox-card">
    <input type="checkbox" id="pack1" name="pack1" class="input-check">
    <img src="https://picsum.photos/id/25/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Basic</h3>
      <div class="card-description">Get started with the basics</div>
    </div>
    <div class="card-body text-xl">$10/month</div>
  </label>

  <label for="pack2" class="card checkbox-card">
    <input type="checkbox" id="pack2" name="pack2" class="input-check" checked>
    <img src="https://picsum.photos/id/27/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Pro</h3>
      <div class="card-description">For the professionals</div>
    </div>
    <div class="card-body text-xl">$20/month</div>
  </label>

  <label for="pack3" class="card checkbox-card">
    <input type="checkbox" id="pack3" name="pack3" class="input-check">
    <img src="https://picsum.photos/id/28/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Expert</h3>
      <div class="card-description">When you know what you're doing</div>
    </div>
    <div class="card-body text-xl">
      $50/month
    </div>
  </label>
</div>
```

### Radio Card

```html
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <label for="pack4" class="card checkbox-card">
    <input type="radio" id="pack4" name="pack" value="basic" class="input-check">
    <img src="https://picsum.photos/id/25/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Basic</h3>
      <div class="card-description">Get started with the basics</div>
    </div>
    <div class="card-body text-xl">
      $10/month
    </div>
  </label>

  <label for="pack5" class="card checkbox-card">
    <input type="radio" id="pack5" name="pack" value="pro" class="input-check" checked>
    <img src="https://picsum.photos/id/27/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Pro</h3>
      <div class="card-description">For the professionals</div>
    </div>
    <div class="card-body text-xl">
      $20/month
    </div>
  </label>

  <label for="pack6" class="card checkbox-card">
    <input type="radio" id="pack6" name="pack" value="enterprise" class="input-check" disabled>
    <img src="https://picsum.photos/id/28/300/200" alt="Nature" class="card-image" />
    <div class="card-header">
      <h3 class="card-title">Enterprise</h3>
      <div class="card-description">Contact us for pricing</div>
    </div>
    <div class="card-body text-xl">
      Custom pricing
    </div>
  </label>
</div>
```

### Simple Checkbox Cards

```html
<div class="space-y-4 max-w-lg">
  <label for="feature1" class="card checkbox-card">
    <input type="checkbox" id="feature1" class="input-check">
    <div class="card-body">
      <h4 class="font-semibold text-lg">Analytics</h4>
      Advanced analytics and reporting
    </div>
  </label>

  <label for="feature2" class="card checkbox-card">
    <input type="checkbox" id="feature2" class="input-check" checked>
    <div class="card-body">
      <h4 class="font-semibold text-lg">API Access</h4>
      Full API access for integrations
    </div>
  </label>

  <label for="feature3" class="card checkbox-card">
    <input type="checkbox" id="feature3" class="input-check">
    <div class="card-body">
      <h4 class="font-semibold text-lg">Priority Support</h4>
      24/7 priority customer support
    </div>
  </label>
</div>
```

### Simple Radio Cards

```html
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl">
  <label for="billing1" class="card checkbox-card">
    <input type="radio" id="billing1" name="billing" value="monthly" class="input-check" checked>
    <div class="card-body space-y-2">
      <h4 class="font-semibold text-lg">Monthly Billing</h4>
      <p class="">Pay month-to-month, cancel anytime</p>
      <p class="font-semibold">$29/month</p>
    </div>
  </label>

  <label for="billing2" class="card checkbox-card">
    <input type="radio" id="billing2" name="billing" value="yearly" class="input-check">
    <div class="card-body space-y-2">
      <h4 class="font-semibold text-lg">Yearly Billing</h4>
      <p class="">Save 20% with annual billing</p>
      <p class="font-semibold">$23/month</p>
    </div>
  </label>
</div>
```

---

# Checkbox

> Input components for single and multiple selection with customizable styling and states

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-checkbox--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-checkbox-checked-bg: var(--bl-clr-primary-600);
```

## Examples

### Checkbox

```html
<div class="space-y-4">
  <div class="field-check">
    <input type="checkbox" id="checkbox1" class="input-check">
    <label for="checkbox1" class="input-check-label">Accept terms and conditions</label>
  </div>

  <div class="field-check">
    <input type="checkbox" id="checkbox2" class="input-check" checked>
    <label for="checkbox2" class="input-check-label">Subscribe to newsletter</label>
  </div>

  <div class="field-check">
    <input type="checkbox" id="checkbox3" class="input-check" disabled>
    <label for="checkbox3" class="input-check-label">Disabled checkbox</label>
  </div>

  <div class="field-check">
    <input type="checkbox" id="checkbox4" class="input-check" checked disabled>
    <label for="checkbox4" class="input-check-label">Disabled checked checkbox</label>
  </div>
</div>
```

### Radio

```html
<div class="space-y-4">
  <p class="label">Select your plan:</p>
  <div class="space-y-2">
    <div class="field-check">
      <input type="radio" id="basic" name="plan" value="basic" class="input-check">
      <label for="basic" class="input-check-label">Basic - $10/month</label>
    </div>

    <div class="field-check">
      <input type="radio" id="pro" name="plan" value="pro" class="input-check" checked>
      <label for="pro" class="input-check-label">Pro - $20/month</label>
    </div>

    <div class="field-check">
      <input type="radio" id="enterprise" name="plan" value="enterprise" class="input-check">
      <label for="enterprise" class="input-check-label">Enterprise - $50/month</label>
    </div>

    <div class="field-check">
      <input type="radio" id="custom" name="plan" value="custom" class="input-check" disabled>
      <label for="custom" class="input-check-label">Custom (Contact us)</label>
    </div>
  </div>
</div>
```

### Checkbox Group

```html
<div class="space-y-4">
  <p class="label">Select your interests:</p>
  <div class="space-y-2">
    <div class="field-check">
      <input type="checkbox" id="design" class="input-check">
      <label for="design" class="input-check-label">Design</label>
    </div>
    <div class="field-check">
      <input type="checkbox" id="development" class="input-check" checked>
      <label for="development" class="input-check-label">Development</label>
    </div>
    <div class="field-check">
      <input type="checkbox" id="marketing" class="input-check">
      <label for="marketing" class="input-check-label">Marketing</label>
    </div>
    <div class="field-check">
      <input type="checkbox" id="sales" class="input-check">
      <label for="sales" class="input-check-label">Sales</label>
    </div>
  </div>
</div>
```

### Inline Checkboxes

```html
<div class="flex gap-4 flex-wrap items-start">
  <div class="field-check">
    <input type="checkbox" id="inline1" class="input-check">
    <label for="inline1" class="input-check-label">Option 1</label>
  </div>
  <div class="field-check">
    <input type="checkbox" id="inline2" class="input-check">
    <label for="inline2" class="input-check-label">Option 2</label>
  </div>
  <div class="field-check">
    <input type="checkbox" id="inline3" class="input-check">
    <label for="inline3" class="input-check-label">Option 3</label>
  </div>
</div>
```

### Inline Radios

```html
<div class="flex gap-4 flex-wrap items-start">
  <div class="field-check">
    <input type="radio" id="size-sm" name="size" value="sm" class="input-check">
    <label for="size-sm" class="input-check-label">Small</label>
  </div>
  <div class="field-check">
    <input type="radio" id="size-md" name="size" value="md" class="input-check" checked>
    <label for="size-md" class="input-check-label">Medium</label>
  </div>
  <div class="field-check">
    <input type="radio" id="size-lg" name="size" value="lg" class="input-check">
    <label for="size-lg" class="input-check-label">Large</label>
  </div>
</div>
```

---

# Collapse

> Collapsible content component that can be expanded and collapsed

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-collapse--docs

## Examples

### Collapse

```html
<a class="btn btn-primary" data-collapse="#collapse-1">Toggle collapse</a>
<div class="collapsible mt-4" id="collapse-1">
  <div class="card card-body">
    <p>Some content inside the collapse</p>
  </div>
</div>
```

---

# Color Scheme Switcher

> Button that opens a dropdown menu with selectable color schemes

**Experimental:** the API of this component may change.

Interactive demo: https://docs.bloum.dev/?path=/docs/lab-color-scheme-switcher--docs

## Examples

### Color Scheme Switcher

```html
<button class="btn btn-icon color-scheme-switcher">
  <div class="scheme-dark">
    <i class="fas fa-moon"></i>
  </div>
  <div class="scheme-light">
    <i class="fas fa-sun"></i>
  </div>
  <div class="scheme-system">
    <i class="fas fa-circle-half-stroke"></i>
  </div>
</button>
```

---

# Combobox

> Input field that suggests and completes text as the user types

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-combobox--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-combobox-menu-bg: var(--bl-clr-surface);
--bl-combobox-item-bg: var(--bl-clr-control-bg);
--bl-combobox-item-active-bg: var(--bl-clr-control-bg-hover);
--bl-combobox-placeholder-color: var(--bl-clr-text-subtle);
--bl-combobox-option-highlighted-bg: var(--bl-clr-hover-bg);
--bl-combobox-option-selected-bg: var(--bl-clr-active-bg);
--bl-combobox-option-padding-x: var(--bl-list-item-padding-x);
--bl-combobox-option-padding-y: var(--bl-list-item-padding-y);
--bl-combobox-option-radius: var(--bl-list-item-radius);
--bl-combobox-transition: var(--bl-transition);
```

## Examples

### Select

```html
<select name="fruits" id="combobox-1">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana" selected>Banana</option>
  <option value="grape">Grape</option>
  <option value="kiwi">Kiwi</option>
  <option value="mango">Mango</option>
  <option value="strawberry">Strawberry</option>
  <option value="watermelon">Watermelon</option>
  <option value="pineapple">Pineapple</option>
  <option value="pear">Pear</option>
</select>
<script>
new Bloum.Combobox('#combobox-1');
</script>
```

### Select Searchable

```html
<select name="fruits" id="combobox-2">
  <option value="">-----------</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="grape">Grape</option>
  <option value="kiwi">Kiwi</option>
  <option value="mango">Mango</option>
  <option value="strawberry">Strawberry</option>
  <option value="watermelon">Watermelon</option>
  <option value="pineapple">Pineapple</option>
  <option value="pear">Pear</option>
</select>
<script>
new Bloum.Combobox('#combobox-2', { isSearchable: true });
document.getElementById("combobox-2").addEventListener("change", (event) => {
  console.log("Changed");
})
</script>
```

### Select Multiple

```html
<select name="fruits" id="combobox-3" required multiple>
  <option value="">Choose a fruit</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana" selected>Banana</option>
  <option value="grape">Grape</option>
  <option value="kiwi">Kiwi</option>
  <option value="mango">Mango</option>
  <option value="strawberry" selected>Strawberry</option>
  <option value="watermelon">Watermelon</option>
  <option value="pineapple">Pineapple</option>
  <option value="pear">Pear</option>
</select>
<script>
new Bloum.Combobox('#combobox-3', { isSearchable: true });
document.getElementById("combobox-3").addEventListener("change", (event) => {
  console.log("Changed");
})
</script>
```

### Select With Data Attributes

```html
<select name="fruits" id="combobox-4" multiple data-combobox-placeholder="Select a fruit" data-combobox-no-results="No fruits found" data-combobox-searchable="true">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="grape">Grape</option>
  <option value="kiwi">Kiwi</option>
  <option value="mango">Mango</option>
  <option value="strawberry">Strawberry</option>
  <option value="watermelon">Watermelon</option>
  <option value="pineapple">Pineapple</option>
  <option value="pear">Pear</option>
</select>
<script>
new Bloum.Combobox('#combobox-4');
</script>
```

---

# Command Menu

> Searchable command interface activated by keyboard shortcuts

**Experimental:** the API of this component may change.

Interactive demo: https://docs.bloum.dev/?path=/docs/lab-command-menu--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-cmd-item-bg-hover: var(--bl-clr-hover-bg);
--bl-cmd-item-color: var(--bl-clr-text);
--bl-cmd-group-color: var(--bl-clr-text-light);
```

## Examples

### Command Menu

```html
<button class="btn" data-modal="#my-command-menu">Open command menu</button>
<div class="modal" id="my-command-menu">
  <div class="modal-content cmd">
    <div class="cmd-search">
      <i class="fas fa-magnifying-glass"></i>
      <input type="text" placeholder="Search" />
    </div>
    <div class="cmd-group">
      <h3 class="cmd-group-title">Home</h3>
      <div class="cmd-list">
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fas fa-home"></i> Dashboard
          </div>
          <div class="cmd-item-right">Link</div>
        </a>
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fas fa-bars-progress"></i> Projects
          </div>
          <div class="cmd-item-right">Action</div>
        </a>
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fas fa-cog"></i> Settings
          </div>
          <div class="cmd-item-right">Link</div>
        </a>
      </div>
    </div>
    <div class="cmd-group">
      <h3 class="cmd-group-title">Social</h3>
      <div class="cmd-list">
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fab fa-twitter"></i> Twitter
          </div>
          <div class="cmd-item-right">Link</div>
        </a>
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fab fa-github"></i> GitHub
          </div>
          <div class="cmd-item-right">Link</div>
        </a>
        <a href="#" class="cmd-item">
          <div class="cmd-item-left">
            <i class="fab fa-discord"></i> Discord
          </div>
          <div class="cmd-item-right">Link</div>
        </a>
      </div>
    </div>
  </div>
</div>
```

---

# Context Menu

> Right-click menu that provides contextual actions for specific elements

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-context-menu--docs

A context menu is the [menu](?path=/docs/components-elements-menu--menu)
component opened with a right click and anchored to the pointer instead of a
trigger element.

## Usage

Give the menu the `menu` and `context-menu` classes, then point the elements
it belongs to at it with `data-context-menu`:

```html
<div data-context-menu="#file-menu">Right click me</div>

<div class="menu context-menu" id="file-menu">
  <div class="menu-group">
    <button type="button" class="menu-item">Rename</button>
    <button type="button" class="menu-item">Duplicate</button>
  </div>
</div>
```

Everything the menu offers works inside a context menu: groups, labels,
dividers, shortcuts, submenus, checkboxes and the danger variant.

Several elements can share the same menu — bind every row of a table to it and
the menu opens on the row that was right clicked. When targets are nested, the
innermost one wins.

Context menus are initialized by `Bloum.init()`, or manually:

```js
new Bloum.ContextMenu("#file-menu", ".file-row");
// or bind every `data-context-menu` element of the page
Bloum.initContextMenu();
```

## Data attributes

- `data-context-menu`: CSS selector of the menu to open on right click

## JavaScript API

- `open(x, y)`: open the menu at the given viewport coordinates, as reported
  by the `clientX` and `clientY` of a mouse event
- `close()`: close the menu
- `isOpen()`: whether the menu is open
- `destroy()`: remove all event listeners

## Keyboard

The menu behaves like a regular one: <kbd>↑</kbd> and <kbd>↓</kbd> move between
the items, <kbd>→</kbd> and <kbd>←</kbd> enter and leave a submenu,
<kbd>Enter</kbd> activates the focused item and <kbd>Escape</kbd> closes the
menu.

## CSS classes

- `.context-menu`: added next to `.menu`, grows the menu out of the pointer

## Examples

### Default

```html
<div class="rounded flex items-center justify-center text-muted" data-context-menu="#demo-context-menu"
  style="height: 10rem; border: 1px dashed var(--bl-border-color)">
  <i class="fas fa-arrow-pointer mr-2"></i> Right click anywhere in this area
</div>

<div class="menu context-menu" id="demo-context-menu">
  <div class="menu-group">
    <button type="button" class="menu-item">
      <i class="fas fa-arrow-rotate-left fa-fw"></i>
      Back
      <span class="menu-shortcut">⌘[</span>
    </button>
    <button type="button" class="menu-item" disabled>
      <i class="fas fa-arrow-rotate-right fa-fw"></i>
      Forward
      <span class="menu-shortcut">⌘]</span>
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-rotate fa-fw"></i>
      Reload
      <span class="menu-shortcut">⌘R</span>
    </button>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-group">
    <button type="button" class="menu-item">
      <i class="fas fa-copy fa-fw"></i>
      Copy
      <span class="menu-shortcut">⌘C</span>
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-paste fa-fw"></i>
      Paste
      <span class="menu-shortcut">⌘V</span>
    </button>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-group">
    <button type="button" class="menu-item menu-item-danger">
      <i class="fas fa-trash fa-fw"></i>
      Delete
    </button>
  </div>
</div>
```

### With Submenu

```html
<div class="rounded flex items-center justify-center text-muted" data-context-menu="#submenu-context-menu"
  style="height: 10rem; border: 1px dashed var(--bl-border-color)">
  <i class="fas fa-arrow-pointer mr-2"></i> Right click to open a menu with submenus
</div>

<div class="menu context-menu" id="submenu-context-menu">
  <div class="menu-group">
    <div class="menu-label">Selection</div>
    <button type="button" class="menu-item">
      <i class="fas fa-pen fa-fw"></i>
      Rename
      <span class="menu-shortcut">F2</span>
    </button>
    <div class="menu-item">
      <i class="fas fa-share-nodes fa-fw"></i>
      Share
      <i class="fas fa-chevron-right ml-auto"></i>
      <div class="submenu">
        <div class="menu-group">
          <button type="button" class="menu-item">
            <i class="fas fa-envelope fa-fw"></i>
            Email
          </button>
          <button type="button" class="menu-item">
            <i class="fas fa-link fa-fw"></i>
            Copy link
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-group">
    <div class="menu-label">View</div>
    <label class="menu-item">
      <input type="checkbox" class="input-check" checked>
      Hidden files
    </label>
    <label class="menu-item">
      <input type="checkbox" class="input-check">
      Preview panel
    </label>
  </div>
</div>
```

### Shared Between Targets

```html
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Owner</th>
        <th>Size</th>
      </tr>
    </thead>
    <tbody>
      <tr data-context-menu="#row-context-menu">
        <td><i class="fas fa-file-pdf fa-fw mr-2"></i>Quarterly report.pdf</td>
        <td>Ada Lovelace</td>
        <td>2.4 MB</td>
      </tr>
      <tr data-context-menu="#row-context-menu">
        <td><i class="fas fa-file-lines fa-fw mr-2"></i>Meeting notes.md</td>
        <td>Alan Turing</td>
        <td>12 KB</td>
      </tr>
      <tr data-context-menu="#row-context-menu">
        <td><i class="fas fa-file-image fa-fw mr-2"></i>Logo.svg</td>
        <td>Grace Hopper</td>
        <td>48 KB</td>
      </tr>
    </tbody>
  </table>
</div>
<p class="text-muted text-sm mt-4">Right click any row of the table.</p>

<div class="menu context-menu" id="row-context-menu">
  <div class="menu-group">
    <button type="button" class="menu-item">
      <i class="fas fa-up-right-from-square fa-fw"></i>
      Open
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-download fa-fw"></i>
      Download
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-pen fa-fw"></i>
      Rename
    </button>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-group">
    <button type="button" class="menu-item menu-item-danger">
      <i class="fas fa-trash fa-fw"></i>
      Move to trash
    </button>
  </div>
</div>
```

### Nested Targets

```html
<div class="rounded p-6 text-muted" data-context-menu="#canvas-context-menu"
  style="border: 1px dashed var(--bl-border-color)">
  <p class="mb-4"><i class="fas fa-arrow-pointer mr-2"></i> Right click the canvas</p>
  <div class="card" data-context-menu="#card-context-menu" style="max-width: 20rem">
    <div class="card-body">
      <div class="card-title">Sales widget</div>
      <div class="card-description">Right click the card for its own menu.</div>
    </div>
  </div>
</div>

<div class="menu context-menu" id="canvas-context-menu">
  <div class="menu-group">
    <button type="button" class="menu-item">
      <i class="fas fa-plus fa-fw"></i>
      Add widget
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-table-cells fa-fw"></i>
      Toggle grid
    </button>
  </div>
</div>

<div class="menu context-menu" id="card-context-menu">
  <div class="menu-group">
    <button type="button" class="menu-item">
      <i class="fas fa-gear fa-fw"></i>
      Configure
    </button>
    <button type="button" class="menu-item">
      <i class="fas fa-clone fa-fw"></i>
      Duplicate
    </button>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-group">
    <button type="button" class="menu-item menu-item-danger">
      <i class="fas fa-trash fa-fw"></i>
      Remove
    </button>
  </div>
</div>
```

---

# Copy Button

> Button that copies text to the clipboard

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-copy-button--docs

## Examples

### Copy Button

```html
<bl-copy-button class="btn btn-icon" value="This is a piece of text">
  <i class="fas fa-clipboard"></i>
</bl-copy-button>
```

---

# Data Table

> Advanced data table component with enhanced functionality for large datasets

**Experimental:** the API of this component may change.

Interactive demo: https://docs.bloum.dev/?path=/docs/lab-data-table--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-datatable-controls-gap: 1rem;
--bl-datatable-controls-padding: 0.5rem;
--bl-datatable-sort-indicator-size: 0.375rem;
--bl-datatable-sort-color: var(--bl-clr-text-light);
--bl-datatable-sort-active-color: var(--bl-clr-primary-600);
--bl-datatable-sortable-hover-bg: var(--bl-clr-hover-bg);
--bl-datatable-info-color: var(--bl-clr-text-light);
--bl-input-height: 2rem;
--bl-input-padding: 0.5rem;
--bl-input-fs: var(--bl-fs-base);
```

## Examples

### Default

```html
<div><table id="datatable-5599uhbii" class="table table-hover"><thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Department</th>
        <th>Salary</th>
        <th>Start Date</th>
      </tr>
    </thead><tbody><tr>
        <td>1</td>
        <td>Lisa Smith</td>
        <td>lisa.smith@example.com</td>
        <td>Sales</td>
        <td>$53,821</td>
        <td>5/9/2023</td>
      </tr><tr>
        <td>2</td>
        <td>Jane Jones</td>
        <td>jane.jones@example.com</td>
        <td>Engineering</td>
        <td>$110,024</td>
        <td>5/25/2022</td>
      </tr><tr>
        <td>3</td>
        <td>Mike Brown</td>
        <td>mike.brown@example.com</td>
        <td>Finance</td>
        <td>$53,542</td>
        <td>3/7/2022</td>
      </tr><tr>
        <td>4</td>
        <td>Mike Rodriguez</td>
        <td>mike.rodriguez@example.com</td>
        <td>Operations</td>
        <td>$84,843</td>
        <td>7/19/2023</td>
      </tr><tr>
        <td>5</td>
        <td>James Jones</td>
        <td>james.jones@example.com</td>
        <td>Marketing</td>
        <td>$58,710</td>
        <td>4/23/2022</td>
      </tr><tr>
        <td>6</td>
        <td>Robert Martinez</td>
        <td>robert.martinez@example.com</td>
        <td>Operations</td>
        <td>$62,482</td>
        <td>3/22/2023</td>
      </tr><tr>
        <td>7</td>
        <td>James Jones</td>
        <td>james.jones@example.com</td>
        <td>Finance</td>
        <td>$79,321</td>
        <td>8/27/2022</td>
      </tr><tr>
        <td>8</td>
        <td>Emily Martinez</td>
        <td>emily.martinez@example.com</td>
        <td>Engineering</td>
        <td>$86,374</td>
        <td>12/2/2021</td>
      </tr><tr>
        <td>9</td>
        <td>Emily Davis</td>
        <td>emily.davis@example.com</td>
        <td>Engineering</td>
        <td>$46,089</td>
        <td>11/20/2022</td>
      </tr><tr>
        <td>10</td>
        <td>David Johnson</td>
        <td>david.johnson@example.com</td>
        <td>Sales</td>
        <td>$115,854</td>
        <td>2/11/2021</td>
      </tr><tr>
        <td>11</td>
        <td>Sarah Miller</td>
        <td>sarah.miller@example.com</td>
        <td>Sales</td>
        <td>$108,007</td>
        <td>10/4/2021</td>
      </tr><tr>
        <td>12</td>
        <td>Mary Jones</td>
        <td>mary.jones@example.com</td>
        <td>Engineering</td>
        <td>$45,899</td>
        <td>4/14/2022</td>
      </tr><tr>
        <td>13</td>
        <td>Robert Garcia</td>
        <td>robert.garcia@example.com</td>
        <td>Sales</td>
        <td>$114,867</td>
        <td>6/19/2022</td>
      </tr><tr>
        <td>14</td>
        <td>Robert Garcia</td>
        <td>robert.garcia@example.com</td>
        <td>Finance</td>
        <td>$71,683</td>
        <td>8/19/2021</td>
      </tr><tr>
        <td>15</td>
        <td>Mary Martinez</td>
        <td>mary.martinez@example.com</td>
        <td>Sales</td>
        <td>$114,145</td>
        <td>7/6/2021</td>
      </tr><tr>
        <td>16</td>
        <td>Sarah Smith</td>
        <td>sarah.smith@example.com</td>
        <td>Finance</td>
        <td>$93,517</td>
        <td>10/27/2022</td>
      </tr><tr>
        <td>17</td>
        <td>Lisa Brown</td>
        <td>lisa.brown@example.com</td>
        <td>Engineering</td>
        <td>$109,314</td>
        <td>7/17/2023</td>
      </tr><tr>
        <td>18</td>
        <td>Mike Davis</td>
        <td>mike.davis@example.com</td>
        <td>Marketing</td>
        <td>$93,659</td>
        <td>12/10/2022</td>
      </tr><tr>
        <td>19</td>
        <td>Jane Martinez</td>
        <td>jane.martinez@example.com</td>
        <td>Marketing</td>
        <td>$108,473</td>
        <td>12/9/2022</td>
      </tr><tr>
        <td>20</td>
        <td>James Garcia</td>
        <td>james.garcia@example.com</td>
        <td>Marketing</td>
        <td>$114,625</td>
        <td>2/18/2021</td>
      </tr><tr>
        <td>21</td>
        <td>Sarah Williams</td>
        <td>sarah.williams@example.com</td>
        <td>Sales</td>
        <td>$61,674</td>
        <td>9/23/2020</td>
      </tr><tr>
        <td>22</td>
        <td>Emily Williams</td>
        <td>emily.williams@example.com</td>
        <td>Marketing</td>
        <td>$49,802</td>
        <td>11/9/2020</td>
      </tr><tr>
        <td>23</td>
        <td>Jane Jones</td>
        <td>jane.jones@example.com</td>
        <td>Engineering</td>
        <td>$102,948</td>
        <td>5/10/2022</td>
      </tr><tr>
        <td>24</td>
        <td>James Williams</td>
        <td>james.williams@example.com</td>
        <td>Operations</td>
        <td>$68,463</td>
        <td>7/12/2022</td>
      </tr><tr>
        <td>25</td>
        <td>James Davis</td>
        <td>james.davis@example.com</td>
        <td>Engineering</td>
        <td>$101,071</td>
        <td>7/22/2021</td>
      </tr></tbody></table></div>
```

### Small Dataset

```html
<div><table id="datatable-xxi21rrlf" class="table table-hover"><thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Department</th>
        <th>Salary</th>
        <th>Start Date</th>
      </tr>
    </thead><tbody><tr>
        <td>1</td>
        <td>James Rodriguez</td>
        <td>james.rodriguez@example.com</td>
        <td>Engineering</td>
        <td>$81,500</td>
        <td>7/15/2023</td>
      </tr><tr>
        <td>2</td>
        <td>Robert Johnson</td>
        <td>robert.johnson@example.com</td>
        <td>Finance</td>
        <td>$42,385</td>
        <td>12/14/2020</td>
      </tr><tr>
        <td>3</td>
        <td>Robert Garcia</td>
        <td>robert.garcia@example.com</td>
        <td>Finance</td>
        <td>$106,220</td>
        <td>12/9/2021</td>
      </tr><tr>
        <td>4</td>
        <td>Sarah Rodriguez</td>
        <td>sarah.rodriguez@example.com</td>
        <td>HR</td>
        <td>$111,559</td>
        <td>10/3/2020</td>
      </tr><tr>
        <td>5</td>
        <td>Mike Johnson</td>
        <td>mike.johnson@example.com</td>
        <td>HR</td>
        <td>$43,664</td>
        <td>6/2/2022</td>
      </tr><tr>
        <td>6</td>
        <td>Mary Smith</td>
        <td>mary.smith@example.com</td>
        <td>Engineering</td>
        <td>$83,815</td>
        <td>6/2/2021</td>
      </tr><tr>
        <td>7</td>
        <td>John Davis</td>
        <td>john.davis@example.com</td>
        <td>Operations</td>
        <td>$77,157</td>
        <td>1/16/2021</td>
      </tr><tr>
        <td>8</td>
        <td>Mike Johnson</td>
        <td>mike.johnson@example.com</td>
        <td>Operations</td>
        <td>$61,329</td>
        <td>11/18/2023</td>
      </tr><tr>
        <td>9</td>
        <td>Mary Jones</td>
        <td>mary.jones@example.com</td>
        <td>Marketing</td>
        <td>$59,410</td>
        <td>4/17/2021</td>
      </tr><tr>
        <td>10</td>
        <td>David Smith</td>
        <td>david.smith@example.com</td>
        <td>Sales</td>
        <td>$104,053</td>
        <td>9/11/2022</td>
      </tr></tbody></table></div>
```

### Basic Table Example

```html
<div>
      <table id="example-table" class="table table-striped">
        <thead>
          <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Price</th>
            <th>Stock</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Laptop Pro 15"</td>
            <td>Electronics</td>
            <td>$1,299</td>
            <td>45</td>
            <td>4.5</td>
          </tr>
          <tr>
            <td>Wireless Mouse</td>
            <td>Accessories</td>
            <td>$29</td>
            <td>150</td>
            <td>4.2</td>
          </tr>
          <tr>
            <td>USB-C Hub</td>
            <td>Accessories</td>
            <td>$49</td>
            <td>89</td>
            <td>4.7</td>
          </tr>
          <tr>
            <td>Monitor 27"</td>
            <td>Electronics</td>
            <td>$399</td>
            <td>23</td>
            <td>4.6</td>
          </tr>
          <tr>
            <td>Mechanical Keyboard</td>
            <td>Accessories</td>
            <td>$89</td>
            <td>67</td>
            <td>4.8</td>
          </tr>
          <tr>
            <td>Webcam HD</td>
            <td>Electronics</td>
            <td>$79</td>
            <td>112</td>
            <td>4.1</td>
          </tr>
          <tr>
            <td>Desk Lamp</td>
            <td>Office</td>
            <td>$45</td>
            <td>78</td>
            <td>4.3</td>
          </tr>
          <tr>
            <td>Standing Desk</td>
            <td>Office</td>
            <td>$599</td>
            <td>15</td>
            <td>4.7</td>
          </tr>
          <tr>
            <td>Office Chair</td>
            <td>Office</td>
            <td>$299</td>
            <td>34</td>
            <td>4.4</td>
          </tr>
          <tr>
            <td>Headphones</td>
            <td>Electronics</td>
            <td>$199</td>
            <td>56</td>
            <td>4.6</td>
          </tr>
          <tr>
            <td>Smartphone Stand</td>
            <td>Accessories</td>
            <td>$19</td>
            <td>234</td>
            <td>4.0</td>
          </tr>
          <tr>
            <td>Cable Organizer</td>
            <td>Accessories</td>
            <td>$12</td>
            <td>456</td>
            <td>3.9</td>
          </tr>
        </tbody>
      </table>
    </div>
```

### With Actions

```html
<div>
      <table id="actions-table" class="table">
        <thead>
          <tr>
            <th>
              <input type="checkbox" class="input-check" aria-label="Select all">
            </th>
            <th>User</th>
            <th>Role</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Alice Johnson</td>
            <td>Admin</td>
            <td><span class="tag tag-success">Active</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Bob Smith</td>
            <td>Editor</td>
            <td><span class="tag tag-success">Active</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Charlie Brown</td>
            <td>Viewer</td>
            <td><span class="tag tag-warning">Pending</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Diana Prince</td>
            <td>Editor</td>
            <td><span class="tag tag-danger">Inactive</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Ethan Hunt</td>
            <td>Admin</td>
            <td><span class="tag tag-success">Active</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" class="input-check" aria-label="Select user"></td>
            <td>Fiona Gallagher</td>
            <td>Viewer</td>
            <td><span class="tag tag-success">Active</span></td>
            <td>
              <button class="btn btn-xs btn-ghost">Edit</button>
              <button class="btn btn-xs btn-danger">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
```

### Api Example

```html
<div>
      <div style="margin-bottom: 1rem;">
        <h3 style="margin-bottom: 0.5rem;">DataTable API Example</h3>
        <p class="mb-4 text-light">
          Use the buttons below to interact with the DataTable API
        </p>
        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;">
          <button class="btn btn-sm btn-primary" id="search-btn">Set Search Term</button>
          <button class="btn btn-sm btn-primary" id="rows-btn">Set Rows Per Page</button>
          <button class="btn btn-sm btn-primary" id="refresh-btn">Refresh Data</button>
          <button class="btn btn-sm btn-danger" id="destroy-btn">Destroy DataTable</button>
        </div>
      </div>

      <table id="api-table" class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>1</td><td>Apple</td><td>50</td><td>$0.50</td></tr>
          <tr><td>2</td><td>Banana</td><td>30</td><td>$0.30</td></tr>
          <tr><td>3</td><td>Orange</td><td>25</td><td>$0.60</td></tr>
          <tr><td>4</td><td>Grape</td><td>100</td><td>$2.00</td></tr>
          <tr><td>5</td><td>Watermelon</td><td>5</td><td>$5.00</td></tr>
          <tr><td>6</td><td>Strawberry</td><td>40</td><td>$3.00</td></tr>
          <tr><td>7</td><td>Pineapple</td><td>10</td><td>$4.00</td></tr>
          <tr><td>8</td><td>Mango</td><td>15</td><td>$1.50</td></tr>
          <tr><td>9</td><td>Peach</td><td>20</td><td>$1.00</td></tr>
          <tr><td>10</td><td>Pear</td><td>35</td><td>$0.80</td></tr>
          <tr><td>11</td><td>Cherry</td><td>60</td><td>$4.00</td></tr>
          <tr><td>12</td><td>Kiwi</td><td>25</td><td>$1.20</td></tr>
        </tbody>
      </table>
    </div>
```

---

# Drawer

> Panel that slides in from the side of the screen over existing content

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-drawer--docs

The Drawer component provides a slide-out panel that appears from the left or right side of the screen, perfect for navigation, settings, or contextual content.

## Features
- **Accessible**: Includes proper ARIA attributes and focus management
- **Keyboard Navigation**: Supports ESC key to close
- **Focus Trap**: Keeps focus within the drawer while open
- **Multiple Sizes**: Small, medium, and large width variants
- **Position**: Can slide in from right (default) or left side
- **Backdrop Click**: Click outside to close
- **Dimmed Background**: Background is dimmed but not blurred
- **Animation**: Smooth slide-in and slide-out animations

## Usage
- Use `data-drawer` attribute on triggers to specify target drawer ID
- Use `data-drawer-close` attribute on elements to close the drawer
- Add `drawer-left` class to position drawer on the left side
- Add size classes (`drawer-sm`, `drawer-md`, `drawer-lg`) to drawer content
- Press ESC key to close any open drawer

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-drawer-animation-duration: var(--bl-transition-lg);
--bl-drawer-panel-bg: var(--bl-clr-surface);
--bl-drawer-footer-bg: var(--bl-clr-surface-muted);
--bl-drawer-title-color: var(--bl-clr-text);
--bl-drawer-padding: 1rem;
--bl-drawer-backdrop-bg: var(--bl-clr-overlay);
--bl-drawer-border-radius: var(--bl-border-radius-lg);
--bl-drawer-shadow: var(--bl-shadow-xl);
--bl-drawer-size-sm: 300px;
--bl-drawer-size-md: 400px;
--bl-drawer-size-lg: 500px;
```

## Examples

### Basic Drawer

A simple drawer that slides in from the right side with header, body, and footer sections.

```html
<button class="btn btn-primary" data-drawer="#basic-drawer">Open Drawer</button>

<div class="drawer" id="basic-drawer" aria-labelledby="basic-drawer-title" aria-hidden="true">
  <div class="drawer-content">
    <div class="drawer-header">
      <h3 class="drawer-title" id="basic-drawer-title">Navigation</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <nav>
        <ul style="list-style: none; padding: 0; margin: 0;">
          <li style="margin-bottom: 0.5rem;">
            <a href="#" class="btn btn-ghost" style="width: 100%; justify-content: flex-start;">
              <i class="fa-solid fa-house" style="margin-right: 0.5rem;"></i>
              Home
            </a>
          </li>
          <li style="margin-bottom: 0.5rem;">
            <a href="#" class="btn btn-ghost" style="width: 100%; justify-content: flex-start;">
              <i class="fa-solid fa-clipboard" style="margin-right: 0.5rem;"></i>
              Projects
            </a>
          </li>
          <li style="margin-bottom: 0.5rem;">
            <a href="#" class="btn btn-ghost" style="width: 100%; justify-content: flex-start;">
              <i class="fa-solid fa-user" style="margin-right: 0.5rem;"></i>
              Profile
            </a>
          </li>
          <li style="margin-bottom: 0.5rem;">
            <a href="#" class="btn btn-ghost" style="width: 100%; justify-content: flex-start;">
              <i class="fa-solid fa-gear" style="margin-right: 0.5rem;"></i>
              Settings
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="drawer-footer">
      <button type="button" class="btn btn-outline" data-drawer-close>Close</button>
    </div>
  </div>
</div>
```

### Drawer Sizes

Demonstrates different drawer sizes: small (300px), medium (400px), and large (500px).

```html
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
  <button class="btn btn-primary" data-drawer="#drawer-sm">Small Drawer</button>
  <button class="btn btn-primary" data-drawer="#drawer-md">Medium Drawer</button>
  <button class="btn btn-primary" data-drawer="#drawer-lg">Large Drawer</button>
</div>

<!-- Small Drawer -->
<div class="drawer" id="drawer-sm" aria-labelledby="drawer-sm-title" aria-hidden="true">
  <div class="drawer-content drawer-sm">
    <div class="drawer-header">
      <h3 class="drawer-title" id="drawer-sm-title">Small Drawer</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <p>This is a small drawer (300px width). Perfect for simple navigation or quick actions.</p>
    </div>
  </div>
</div>

<!-- Medium Drawer -->
<div class="drawer" id="drawer-md" aria-labelledby="drawer-md-title" aria-hidden="true">
  <div class="drawer-content drawer-md">
    <div class="drawer-header">
      <h3 class="drawer-title" id="drawer-md-title">Medium Drawer</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <p>This is a medium drawer (400px width). This is the default size, ideal for navigation and forms.</p>
    </div>
  </div>
</div>

<!-- Large Drawer -->
<div class="drawer" id="drawer-lg" aria-labelledby="drawer-lg-title" aria-hidden="true">
  <div class="drawer-content drawer-lg">
    <div class="drawer-header">
      <h3 class="drawer-title" id="drawer-lg-title">Large Drawer</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <p>This is a large drawer (500px width). Great for detailed content, settings panels, or complex navigation.</p>
    </div>
  </div>
</div>
```

### Drawer Positions

Demonstrates drawers that can slide in from either the right (default) or left side of the screen.

```html
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
  <button class="btn btn-primary" data-drawer="#drawer-left">Left Drawer</button>
  <button class="btn btn-primary" data-drawer="#drawer-right">Right Drawer</button>
</div>

<!-- Left Drawer -->
<div class="drawer drawer-left" id="drawer-left" aria-labelledby="drawer-left-title" aria-hidden="true">
  <div class="drawer-content">
    <div class="drawer-header">
      <h3 class="drawer-title" id="drawer-left-title">Left Drawer</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <p>This drawer slides in from the left side of the screen. Use the <code>drawer-left</code> class to position it on the left.</p>
      <p>Left drawers are commonly used for:</p>
      <ul>
        <li>Primary navigation menus</li>
        <li>Application sidebars</li>
        <li>Filter panels</li>
      </ul>
    </div>
  </div>
</div>

<!-- Right Drawer -->
<div class="drawer" id="drawer-right" aria-labelledby="drawer-right-title" aria-hidden="true">
  <div class="drawer-content">
    <div class="drawer-header">
      <h3 class="drawer-title" id="drawer-right-title">Right Drawer</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <p>This drawer slides in from the right side of the screen. This is the default position.</p>
      <p>Right drawers are commonly used for:</p>
      <ul>
        <li>Shopping cart contents</li>
        <li>User profile panels</li>
        <li>Settings and preferences</li>
        <li>Contextual actions</li>
      </ul>
    </div>
  </div>
</div>
```

### Drawer With Form

A drawer containing a form, demonstrating how to use drawers for data entry and settings.

```html
<button class="btn btn-primary" data-drawer="#form-drawer">Open Settings</button>

<div class="drawer" id="form-drawer" aria-labelledby="form-drawer-title" aria-hidden="true">
  <div class="drawer-content drawer-lg">
    <div class="drawer-header">
      <h3 class="drawer-title" id="form-drawer-title">User Settings</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-drawer-close>
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="drawer-body">
      <form id="settings-form">
        <div class="field">
          <label for="user-name" class="label">Display Name</label>
          <input type="text" id="user-name" name="displayName" class="input" placeholder="Enter your name" value="John Doe">
        </div>

        <div class="field">
          <label for="user-email" class="label">Email</label>
          <input type="email" id="user-email" name="email" class="input" placeholder="Enter your email" value="john@example.com">
        </div>

        <div class="field">
          <label for="user-timezone" class="label">Timezone</label>
          <select id="user-timezone" name="timezone" class="input">
            <option value="UTC">UTC</option>
            <option value="America/New_York">Eastern Time</option>
            <option value="America/Chicago">Central Time</option>
            <option value="America/Denver">Mountain Time</option>
            <option value="America/Los_Angeles" selected>Pacific Time</option>
          </select>
        </div>

        <div class="field">
          <label for="user-bio" class="label">Bio</label>
          <textarea id="user-bio" name="bio" class="input" rows="3" placeholder="Tell us about yourself...">Frontend developer with a passion for creating beautiful user experiences.</textarea>
        </div>

        <div class="field">
          <div class="field">
            <input type="checkbox" class="input-check" id="notifications" name="notifications" checked>
            <label class="label" for="notifications">Email notifications</label>
          </div>
        </div>

        <div class="field">
          <div class="field">
            <input type="checkbox" class="input-check" id="marketing" name="marketing">
            <label class="label" for="marketing">Marketing emails</label>
          </div>
        </div>

        <div class="field">
          <div class="field">
            <input type="checkbox" class="input-check" id="dark-mode" name="darkMode" checked>
            <label class="label" for="dark-mode">Dark mode</label>
          </div>
        </div>
      </form>
    </div>
    <div class="drawer-footer">
      <button type="button" class="btn btn-outline" data-drawer-close>Cancel</button>
      <button type="submit" form="settings-form" class="btn btn-primary">Save Settings</button>
    </div>
  </div>
</div>
```

---

# Form Field

> Wrapper component that provides consistent styling and layout for form inputs with labels and help text

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-form-field--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-field-text-help-color: var(--bl-clr-text-light);
--bl-field-danger-color: var(--bl-clr-danger-500);
--bl-field-text-danger-color: var(--bl-clr-danger-600);
--bl-field-success-color: var(--bl-clr-success-500);
--bl-field-text-success-color: var(--bl-clr-success-600);
--bl-focus-color: var(--bl-field-danger-color);
```

## Examples

### Default

```html
<div class="max-w-md">
  <div class="field">
    <label for="email" class="label">Email</label>
    <input type="email" id="email" class="input" placeholder="Enter your email">
  </div>
</div>
```

### With Help Text

```html
<div class="max-w-md">
  <div class="field">
    <label for="username" class="label">Username</label>
    <input type="text" id="username" class="input" placeholder="Choose a username">
    <p class="field-text-help">Your username will be visible to other users</p>
  </div>
</div>
```

### With Error

```html
<div class="max-w-md">
  <div class="field field-danger">
    <label for="password" class="label">Password</label>
    <input type="password" id="password" class="input" placeholder="Enter password">
    <p class="field-text-danger">Password must be at least 8 characters long</p>
  </div>
</div>
```

### With Success

```html
<div class="max-w-md">
  <div class="field field-success">
    <label for="email2" class="label">Email</label>
    <input type="email" id="email2" class="input" value="user@example.com">
    <p class="field-text-success">✓ Email is available</p>
  </div>
</div>
```

### With Adapative Help Text

```html
<div class="max-w-md">
  <div class="field field-success">
    <label for="email2" class="label">Email</label>
    <input type="email" id="email2" class="input" value="user@example.com">
    <p class="field-text">This is a valid email</p>
  </div>
  <div class="field field-danger">
    <label for="username" class="label">Username</label>
    <input type="text" id="username" class="input" value="Albert">
    <p class="field-text">This username is already taken</p>
  </div>
</div>
```

### Textarea Field

```html
<div class="max-w-md">
  <div class="field">
    <label for="message" class="label">Message</label>
    <textarea id="message" class="input" rows="4" placeholder="Type your message here..."></textarea>
    <p class="field-text-help">Maximum 500 characters</p>
  </div>
</div>
```

### Select Field

```html
<div class="max-w-md">
  <div class="field">
    <label for="country" class="label">Country</label>
    <select id="country" class="input">
      <option value="">Select a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
      <option value="au">Australia</option>
    </select>
    <p class="field-text-help">Select your country of residence</p>
  </div>
</div>
```

### Required Field

```html
<div class="max-w-md">
  <div class="field">
    <label for="fullname" class="label">
      Full Name <span class="text-danger">*</span>
    </label>
    <input type="text" id="fullname" class="input" placeholder="John Doe" required>
    <p class="field-text-help">This field is required</p>
  </div>
</div>
```

### Multiple Fields

```html
<form class="max-w-md space-y-4" action="" method="post" id="my-form">
  <div class="field">
    <label for="firstname" class="label">First Name</label>
    <input type="text" id="firstname" name="firstname" class="input" placeholder="John">
  </div>

  <div class="field">
    <label for="lastname" class="label">Last Name *</label>
    <input type="text" id="lastname" name="lastname" class="input" placeholder="Doe" required>
  </div>

  <div class="field field-danger">
    <label for="email3" class="label">Email</label>
    <input type="email" id="email3" name="email" class="input" placeholder="john@example.com">
    <p class="field-text-danger">Please enter a valid email address</p>
  </div>

  <div class="field">
    <label for="country" class="label">Country *</label>
    <select id="country" name="country" required>
      <option value="">Select a country</option>
      <option value="ch">Switzerland</option>
      <option value="de">Germany</option>
      <option value="fr">France</option>
      <option value="it">Italy</option>
      <option value="au">Austria</option>
    </select>
  </div>

  <div class="field">
    <label for="bio" class="label">Bio</label>
    <textarea id="bio" class="input" name="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
    <p class="field-text-help">Brief description for your profile (max 200 chars)</p>
  </div>

  <div class="field">
    <p class="label">Subscribe to the newsletter</p>
    <div class="flex gap-4">
      <div class="field-check">
        <input type="radio" name="newsletter" value="yes" id="newsletter-yes" class="input-check">
        <label for="newsletter-yes" class="input-check-label">Yes, please</label>
      </div>
      <div class="field-check">
        <input type="radio" name="newsletter" value="no" id="newsletter-no" class="input-check">
        <label for="newsletter-no" class="input-check-label">No, thanks</label>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
new Bloum.Combobox("#country", { isSearchable: true });
document.getElementById("my-form").addEventListener("submit", function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const data = Object.fromEntries(formData);
  alert(JSON.stringify(data, null, 2));
})
</script>
```

### Input Group Field

```html
<div class="max-w-md">
  <div class="field">
    <label for="search" class="label">Search</label>
    <div class="input-icon">
      <span class="input-icon-addon">
        <i class="fa-solid fa-magnifying-glass"></i>
      </span>
      <input type="text" id="search" class="input" placeholder="Search for items...">
    </div>
    <p class="field-text-help">Search by name, category, or description</p>
  </div>
</div>
```

---

# Input

> Basic text input field for collecting user data

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-input--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-input-file-bg: var(--bl-clr-control-bg);
--bl-input-file-bg-hover: var(--bl-clr-control-bg-hover);
--bl-input-fs: var(--bl-fs-base);
--bl-input-select-icon: url("../../icons/chevron.svg");
--bl-input-icon-padding: 2.25rem;
--bl-input-icon-color: var(--bl-clr-text-subtle);
--bl-password-toggle-color: var(--bl-clr-text-light);
--bl-password-toggle-hover: var(--bl-clr-text);
--bl-range-track-height: 0.375rem;
--bl-range-track-bg: var(--bl-clr-track-bg);
--bl-range-track-border-radius: var(--bl-border-radius-full);
--bl-range-thumb-size: 1.25rem;
--bl-range-thumb-bg: var(--bl-clr-primary-500);
--bl-range-thumb-border: 2px solid var(--bl-clr-background);
--bl-range-thumb-border-radius: var(--bl-border-radius-full);
--bl-range-thumb-shadow: var(--bl-shadow-sm);
--bl-range-thumb-hover-shadow: var(--bl-shadow);
```

## Examples

### Text Input

```html
<div class="max-w-md">
  <input class="input" type="text" placeholder="Enter your name">
</div>
```

### Password Input

```html
<div class="max-w-md">
  <input type="password" class="input" placeholder="Enter password">
</div>
```

### Password With Toggle

```html
<div class="max-w-md space-y-4">
  <div class="input-icon">
    <input type="password" class="input" placeholder="Enter password" id="password1">
    <button type="button" class="password-toggle" aria-label="Show password">
      <i class="fa-solid fa-eye"></i>
    </button>
  </div>

  <div class="input-icon">
    <input type="password" class="input" placeholder="Confirm password" id="password2">
    <button type="button" class="password-toggle" aria-label="Show password">
      <i class="fa-solid fa-eye"></i>
    </button>
  </div>

  <div class="field">
    <label class="label">With Label</label>
    <div class="input-icon">
      <input type="password" class="input" placeholder="Your secure password">
      <button type="button" class="password-toggle" aria-label="Show password">
        <i class="fa-solid fa-eye"></i>
      </button>
    </div>
    <p class="field-text-help">Password must be at least 8 characters long.</p>
  </div>
</div>
```

### Email Input

```html
<div class="max-w-md">
  <input type="email" class="input" placeholder="Enter email">
</div>
```

### File Input

```html
<div class="max-w-md">
  <input type="file" class="input">
</div>
```

### Select

```html
<div class="max-w-md space-y-4">
  <select class="input">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <div class="input-icon">
    <span class="input-icon-addon">
      <i class="fa-solid fa-user"></i>
    </span>
    <select class="input">
      <option value="">Select an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
</div>
```

### Multi Select

```html
<div class="max-w-md">
  <select class="input" multiple size="5">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="purple">Purple</option>
  </select>
</div>
```

### Input Group

```html
<div class="max-w-md space-y-4">
  <div class="input-icon">
    <span class="input-icon-addon">
      <i class="fa-solid fa-magnifying-glass"></i>
    </span>
    <input type="text" class="input" placeholder="Search...">
  </div>

  <div class="input-icon">
    <input type="text" class="input" placeholder="Username">
    <span class="input-icon-addon">
      <i class="fa-solid fa-user"></i>
    </span>
  </div>
</div>
```

### All Input Types

```html
<div class="max-w-md space-y-4">
  <input class="input" type="text" placeholder="Text input">
  <input type="password" class="input" placeholder="Password input">
  <input type="email" class="input" placeholder="Email input">
  <input type="number" class="input" placeholder="Number input">
  <input type="tel" class="input" placeholder="Phone input">
  <input type="url" class="input" placeholder="URL input">
  <input type="date" class="input">
  <input type="time" class="input">
  <input type="datetime-local" class="input">
  <input type="month" class="input">
  <input type="week" class="input">
  <input type="color" class="input">
  <input type="range" class="input">
</div>
```

---

# Menu

> Menu that appears when triggered, showing a list of selectable options

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-menu--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-menu-bg: var(--bl-clr-surface);
--bl-menu-item-hover-bg: var(--bl-clr-hover-bg);
--bl-menu-item-color: var(--bl-clr-text);
--bl-menu-divider-color: var(--bl-border-color);
--bl-menu-item-padding-x: var(--bl-list-item-padding-x);
--bl-menu-item-padding-y: var(--bl-list-item-padding-y);
--bl-menu-item-radius: var(--bl-list-item-radius);
--bl-menu-item-danger-color: var(--bl-clr-text-danger);
--bl-menu-item-danger-hover-bg: var(--bl-clr-hover-bg-danger);
--bl-menu-shortcut-color: var(--bl-clr-text-light);
--bl-menu-transition: var(--bl-transition);
```

## Examples

### Menu

```html
<div class="dropdown">
  <button class="btn btn-outline" data-menu-toggle>Options</button>
  <div class="menu" id="menu">
    <div class="menu-group">
      <div class="menu-label">My Account</div>
      <a href="#" class="menu-item">
        <i class="fas fa-user fa-fw"></i>
        Profile
        <span class="menu-shortcut">⇧⌘P</span>
      </a>
      <a href="#" class="menu-item">
        <i class="fas fa-credit-card fa-fw"></i>
        Billing
        <span class="menu-shortcut">⌘B</span>
      </a>
      <a href="#" class="menu-item">
        <i class="fas fa-cog fa-fw"></i>
        Settings
        <span class="menu-shortcut">⌘S</span>
      </a>
    </div>
    <div class="menu-divider"></div>
    <div class="menu-group">
      <button type="button" class="menu-item">
        <i class="fas fa-users fa-fw"></i>
        Team
      </button>
      <div class="menu-item">
        <i class="fas fa-user-plus fa-fw"></i>
        Invite users
        <i class="fas fa-chevron-right ml-auto"></i>
        <div class="submenu">
          <div class="menu-group">
            <a href="#" class="menu-item">Email</a>
            <a href="#" class="menu-item">Slack</a>
          </div>
          <div class="menu-divider"></div>
          <div class="menu-group">
            <div class="menu-item">
              More...
              <i class="fas fa-chevron-right ml-auto"></i>
              <div class="submenu">
                <div class="menu-group">
                  <a href="#" class="menu-item">Email</a>
                  <a href="#" class="menu-item">Slack</a>
                  <a href="#" class="menu-item">Phone</a>
                  <a href="#" class="menu-item">Pigeon</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="menu-item" href="#">
        New Team
        <span class="menu-shortcut">⌘T</span>
      </a>
    </div>
    <div class="menu-divider"></div>
    <div class="menu-group">
      <a class="menu-item" href="#">GitHub</a>
      <a class="menu-item" href="#" disabled>API</a>
      <a class="menu-item" href="#">Support</a>
    </div>
  </div>
</div>
```

### Menu With Icons

```html
<div class="dropdown" style="margin-left: 8rem">
  <button class="btn" data-menu-toggle><i class="fas fa-bars"></i> Options</button>
  <div class="menu">
    <a href="#" class="menu-item"><i class="fas fa-file fa-fw"></i> New File</a>
    <a href="#" class="menu-item"><i class="fas fa-folder-open fa-fw"></i> Open...</a>
    <button class="menu-item"><i class="fas fa-floppy-disk fa-fw"></i> Save</button>
    <button class="menu-item"><i class="fas fa-exclamation-triangle fa-fw"></i> This is an example with a name that is quite long but is still readable.</button>
    <div class="menu-divider"></div>
    <button class="menu-item"><i class="fas fa-arrow-right-to-bracket fa-fw"></i> Quit</button>
  </div>
</div>
```

### Menu With Danger

```html
<div class="dropdown">
  <button class="btn" data-menu-toggle>Click to open the menu</button>
  <div class="menu">
    <div class="menu-group">
      <a href="#" class="menu-item">New File</a>
      <a href="#" class="menu-item">Open File...</a>
      <button class="menu-item">Save</button>
    </div>
    <div class="menu-divider"></div>
    <div class="menu-group">
      <button class="menu-item menu-item-danger">Delete</button>
    </div>
  </div>
</div>
```

### Menu With Checkbox

```html
<div class="dropdown">
  <button class="btn" data-menu-toggle><i class="fas fa-cog"></i>Features</button>
  <div class="menu">
    <div class="menu-group">
      <label class="menu-item"><input type="checkbox" class="input-check">Feature 1</label>
      <label class="menu-item"><input type="checkbox" class="input-check">Feature 2</label>
    </div>
    <div class="menu-divider"></div>
    <div class="menu-group">
      <label class="menu-item"><input type="checkbox" class="switch">Feature 3</label>
      <label class="menu-item"><input type="checkbox" class="switch">Feature 4</label>
    </div>
  </div>
</div>
```

---

# Modal

> Popup dialog that overlays the main content and requires user interaction

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-modal--docs

The Modal component provides an accessible, focus-trapped dialog overlay for displaying content above the main page.

## Features
- **Accessible**: Includes proper ARIA attributes and focus management
- **Keyboard Navigation**: Supports ESC key to close
- **Focus Trap**: Keeps focus within the modal while open
- **Multiple Sizes**: Small, medium, large, extra-large, and full-width variants
- **Backdrop Click**: Click outside to close (can be configured)
- **Nested Support**: Multiple modals can be opened simultaneously
- **Animation**: Smooth fade animation

## Usage
- Use `data-modal` attribute on triggers to specify target modal ID
- Use `data-modal-close` attribute on elements to close the modal
- Modal automatically manages focus and prevents body scroll
- Press ESC key to close any open modal

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-modal-animation-opacity: var(--bl-transition);
--bl-modal-animation-transform: var(--bl-transition);
--bl-modal-dialog-bg: var(--bl-clr-surface);
--bl-modal-footer-bg: var(--bl-clr-surface-muted);
--bl-modal-title-color: var(--bl-clr-text);
--bl-modal-padding: 1.5rem;
--bl-modal-margin: 4rem;
--bl-modal-backdrop-bg: var(--bl-clr-overlay);
--bl-modal-backdrop-filter: blur(4px);
--bl-modal-border-radius: var(--bl-border-radius-lg);
--bl-modal-size-sm: 300px;
--bl-modal-size-md: 500px;
--bl-modal-size-lg: 800px;
--bl-modal-size-xl: 1200px;
--bl-modal-size-full: calc(100% - 1rem);
```

## Examples

### Basic Modal

A simple modal with header, body, and footer sections. Shows a login form as an example.

```html
<button class="btn btn-primary" data-modal="#my-basic-modal">Open Basic Modal</button>

<div class="modal" id="my-basic-modal" aria-labelledby="my-basic-modal-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="my-basic-modal-title">Login</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="field">
          <label for="email" class="label">Email</label>
          <input type="email" id="email" name="email" class="input" placeholder="Enter your email" required>
        </div>
        <div class="field">
          <label for="password" class="label">Password</label>
          <input type="password" id="password" name="password" class="input" placeholder="Enter your password" required>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Cancel</button>
      <button type="submit" class="btn btn-primary">Sign In</button>
    </div>
  </div>
</div>
```

### Modal Sizes

Demonstrates different modal sizes: small, medium (default), large, extra-large, and full-width.

```html
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
  <button class="btn btn-primary" data-modal="#modal-sm">Small Modal</button>
  <button class="btn btn-primary" data-modal="#modal-md">Medium Modal</button>
  <button class="btn btn-primary" data-modal="#modal-lg">Large Modal</button>
  <button class="btn btn-primary" data-modal="#modal-xl">Extra Large Modal</button>
  <button class="btn btn-primary" data-modal="#modal-full">Full Width Modal</button>
</div>

<!-- Small Modal -->
<div class="modal" id="modal-sm" aria-labelledby="modal-sm-title">
  <div class="modal-content modal-sm">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-sm-title">Small Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This is a small modal (300px max-width). Perfect for simple confirmations or alerts.</p>
    </div>
  </div>
</div>

<!-- Medium Modal -->
<div class="modal" id="modal-md" aria-labelledby="modal-md-title">
  <div class="modal-content modal-md">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-md-title">Medium Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p>This is a medium modal (500px max-width). This is the default size, ideal for forms and general content.</p>
    </div>
  </div>
</div>

<!-- Large Modal -->
<div class="modal" id="modal-lg" aria-labelledby="modal-lg-title">
  <div class="modal-content modal-lg">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-lg-title">Large Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This is a large modal (800px max-width). Great for detailed forms, data tables, or rich content.</p>
    </div>
  </div>
</div>

<!-- Extra Large Modal -->
<div class="modal" id="modal-xl" aria-labelledby="modal-xl-title">
  <div class="modal-content modal-xl">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-xl-title">Extra Large Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p>This is an extra large modal (1200px max-width). Perfect for dashboards, complex interfaces, or media galleries.</p>
    </div>
  </div>
</div>

<!-- Full Width Modal -->
<div class="modal" id="modal-full" aria-labelledby="modal-full-title">
  <div class="modal-content modal-full">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-full-title">Full Width Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This is a full-width modal (calc(100% - 2rem) max-width). Takes up almost the entire viewport width with small margins.</p>
    </div>
  </div>
</div>
```

### Confirmation Modal

A destructive action confirmation modal with prominent action buttons.

```html
<button class="btn btn-outline btn-danger" data-modal="#my-confirmation-modal">Delete Account</button>

<div class="modal" id="my-confirmation-modal" aria-labelledby="my-confirmation-modal-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="my-confirmation-modal-title">Confirm Deletion</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete your account? This action cannot be undone and will permanently remove all your data.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Cancel</button>
      <button type="button" class="btn btn-danger">Delete Account</button>
    </div>
  </div>
</div>
```

### Modal Without Footer

A modal that only contains header and body sections, without a footer.

```html
<button class="btn btn-primary" data-modal="#no-footer-modal">Open Modal</button>

<div class="modal" id="no-footer-modal" aria-labelledby="no-footer-modal-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="no-footer-modal-title">Information</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This modal doesn't have a footer section. You can close it using the X button, clicking outside, or pressing the ESC key.</p>
      <p>This pattern is useful for informational content that doesn't require specific actions.</p>
    </div>
  </div>
</div>
```

### Modal With Form

A comprehensive form modal showing various form elements and validation states.

```html
<button class="btn btn-primary" data-modal="#form-modal">Create User</button>

<div class="modal" id="form-modal" aria-labelledby="form-modal-title">
  <div class="modal-content modal-lg">
    <div class="modal-header">
      <h3 class="modal-title" id="form-modal-title">Create New User</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <form id="user-form">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
          <div class="field">
            <label for="first-name" class="label">First Name</label>
            <input type="text" id="first-name" name="firstName" class="input" placeholder="John" required>
          </div>
          <div class="field">
            <label for="last-name" class="label">Last Name</label>
            <input type="text" id="last-name" name="lastName" class="input" placeholder="Doe" required>
          </div>
        </div>

        <div class="field">
          <label for="user-email" class="label">Email Address</label>
          <input type="email" id="user-email" name="email" class="input" placeholder="john.doe@example.com" required>
        </div>

        <div class="field">
          <label for="user-role" class="label">Role</label>
          <select id="user-role" name="role" class="input" required>
            <option value="">Select a role</option>
            <option value="admin">Administrator</option>
            <option value="editor">Editor</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>

        <div class="field">
          <label for="user-bio" class="label">Bio</label>
          <textarea id="user-bio" name="bio" class="input" rows="3" placeholder="Tell us about yourself..."></textarea>
        </div>

        <div class="field">
          <div class="field">
            <input type="checkbox" class="input-check" id="notifications" name="notifications" checked>
            <label class="label" for="notifications">Send welcome email</label>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Cancel</button>
      <button type="submit" form="user-form" class="btn btn-primary">Create User</button>
    </div>
  </div>
</div>
```

### Nested Modals

Demonstrates opening multiple modals on top of each other. Each modal maintains its own focus trap.

```html
<button class="btn btn-primary" data-modal="#modal-1">Open First Modal</button>

<div class="modal" id="modal-1" aria-labelledby="modal-1-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-1-title">First Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This is the first modal. You can open another modal from here.</p>
      <button class="btn btn-primary" data-modal="#modal-2">Open Second Modal</button>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Close</button>
    </div>
  </div>
</div>

<div class="modal" id="modal-2" aria-labelledby="modal-2-title">
  <div class="modal-content modal-sm">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-2-title">Second Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p>This is the second modal, opened on top of the first one.</p>
      <button class="btn btn-primary" data-modal="#modal-3">Open Third Modal</button>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Close</button>
    </div>
  </div>
</div>

<div class="modal" id="modal-3" aria-labelledby="modal-3-title">
  <div class="modal-content modal-sm">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-3-title">Third Modal</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>This is the third modal! Press ESC to close all modals at once.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close>Close</button>
    </div>
  </div>
</div>
```

### Modal With Complex Content

A modal showcasing complex content including tabs, tables, and interactive elements.

```html
<button class="btn btn-primary" data-modal="#complex-modal">View User Details</button>

<div class="modal" id="complex-modal" aria-labelledby="complex-modal-title">
  <div class="modal-content modal-xl">
    <div class="modal-header">
      <h3 class="modal-title" id="complex-modal-title">User Details - John Doe</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
        <div class="content">
          <bl-tabs class="-mt-4">
            <bl-tab-list>
              <bl-tab href="#tab1">Overview</bl-tab>
              <bl-tab href="#tab2">Recent Activity</bl-tab>
              <bl-tab href="#tab3">Team Access</bl-tab>
            </bl-tab-list>
            <bl-tab-panel id="tab1">
              <div class="grid grid-cols-2 gap-4">
                <div class="card card-body">
                  <h5 class="mb-2 card-title">Contact Information</h5>
                  <p class="mb-1"><strong>Email:</strong> john.doe@example.com</p>
                  <p class="mb-1"><strong>Phone:</strong> +1 (555) 123-4567</p>
                  <p class="mb-1"><strong>Location:</strong> San Francisco, CA</p>
                </div>

                <div class="card card-body">
                  <h5 class="mb-2 card-title">Account Status</h5>
                  <p class="mb-1"><span class="badge badge-success">Active</span></p>
                  <p class="mb-1"><strong>Joined:</strong> March 15, 2023</p>
                  <p class="mb-1"><strong>Last Login:</strong> 2 hours ago</p>
                </div>
              </div>

              <h5 class="mt-4 mb-2">Recent Projects</h5>
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Project Name</th>
                    <th>Status</th>
                    <th>Progress</th>
                    <th>Last Updated</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Website Redesign</td>
                    <td><span class="badge badge-primary">In Progress</span></td>
                    <td>75%</td>
                    <td>2 hours ago</td>
                  </tr>
                  <tr>
                    <td>Mobile App</td>
                    <td><span class="badge badge-success">Completed</span></td>
                    <td>100%</td>
                    <td>1 day ago</td>
                  </tr>
                  <tr>
                    <td>API Documentation</td>
                    <td><span class="badge badge-warning">Review</span></td>
                    <td>90%</td>
                    <td>3 days ago</td>
                  </tr>
                </tbody>
              </table>
            </bl-tab-panel>
            <bl-tab-panel id="tab2">
              <h2>Recent Activity</h2>
            </bl-tab-panel>
            <bl-tab-panel id="tab3">
              <h2>Team Access</h2>
            </bl-tab-panel>
          </bl-tabs>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" data-modal-close>Close</button>
        <button type="button" class="btn btn-primary">Edit User</button>
      </div>
    </div>
  </div>
</div>
```

---

# Navbar

> Top-mounted navigation menu with primary actions and links

Interactive demo: https://docs.bloum.dev/?path=/docs/components-navigation-navbar--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-navbar-bg: var(--bl-clr-surface);
--bl-navbar-link-color: var(--bl-clr-text-light);
--bl-navbar-link-bg-hover: var(--bl-clr-hover-bg);
```

## Examples

### Navbar

```html
<nav class="navbar">
  <a class="navbar-brand" href="#">Bloum</a>
  <button class="btn btn-icon btn-ghost navbar-toggle" data-collapse="#navbar-collapse"><i class="fas fa-bars"></i></button>
  <div class="navbar-nav collapsible" id="navbar-collapse">
    <div class="nav-items">
      <div class="nav-item">
        <a class="nav-link active" href="#" aria-current="page">Home</a>
      </div>
      <div class="nav-item">
        <a class="nav-link" href="#">Page 1</a>
      </div>
      <div class="nav-item">
        <a class="nav-link" href="#">Page 2</a>
      </div>
      <div class="nav-item">
        <a class="nav-link" href="#">Page 3</a>
      </div>
      <div class="nav-item dropdown">
        <a class="nav-link hstack gap-2" href="#" data-menu-toggle>
          Dropdown <i class="fas fa-chevron-down"></i>
        </a>
        <div class="menu">
          <div class="menu-group">
            <a class="menu-item" href="#">Action</a>
            <a class="menu-item" href="#">Another action</a>
          </div>
          <div class="menu-divider"></div>
          <div class="menu-group">
            <a class="menu-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
    <div class="nav-items">
      <div class="nav-item dropdown">
        <div class="avatar cursor-pointer" data-menu-toggle>
          <span class="avatar-initials">JD</span>
        </div>
        <div class="menu">
          <div class="menu-group">
            <a class="menu-item" href="#">Action</a>
            <a class="menu-item" href="#">Another action</a>
          </div>
          <div class="menu-divider"></div>
          <div class="menu-group">
            <a class="menu-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
```

---

# Pagination

> Navigation controls for splitting large datasets across multiple pages

Interactive demo: https://docs.bloum.dev/?path=/docs/components-navigation-pagination--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-pagination-color: var(--bl-clr-text);
--bl-pagination-active-border-color: var(--bl-border-color-strong);
--bl-pagination-item-bg-hover: var(--bl-clr-hover-bg);
--bl-pagination-height: 2.25rem;
```

## Examples

### Pagination

```html
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li><a class="page-item" href="#"><i class="fas fa-angle-double-left"></i></a></li>
    <li><a class="page-item" href="#"><i class="fas fa-angle-left"></i></a></li>
    <li><a class="page-item" href="#">1</a></li>
    <li><a class="page-item active" href="#">2</a></li>
    <li><a class="page-item" href="#">3</a></li>
    <li><button class="page-item">...</button></li>
    <li><a class="page-item" href="#"><i class="fas fa-angle-right"></i></a></li>
    <li><a class="page-item" href="#"><i class="fas fa-angle-double-right"></i></a></li>
  </ul>
</nav>
```

---

# Phone Input

> Phone number field with a country selector, formatted as the user types

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-phone-input--docs

A phone number field with a country selector inside the same border. The number is formatted as it is typed with the pattern of the selected country, and limited to its length.

## Usage

Add the `data-phone-input` attribute to any text input:

```html
<input type="tel" class="input" name="phone" data-phone-input data-phone-input-country="CH" />
```

The input keeps the formatted national number (`79 123 45 67`). Its `name` moves to a hidden input that holds the E.164 value (`+41791234567`), so that is what the form submits. Typing or pasting an international number (`+33…` or `0033…`) selects its country, and a leading trunk prefix (`0` in most of Europe) is dropped.

A number with an incomplete length is reported as invalid through the constraint validation API, so the browser blocks the form submission like any other invalid field.

## Data Attributes

- `data-phone-input`: Enables the phone input
- `data-phone-input-country`: ISO code of the default country (defaults to the region of the browser language)
- `data-phone-input-countries`: Comma-separated ISO codes of the countries offered in the menu
- `data-phone-input-search-placeholder`: Placeholder of the country search field
- `data-phone-input-no-results`: Text shown when no country matches the search
- `data-phone-input-invalid-message`: Validation message of an incomplete number

## JavaScript

```js
const phone = new Bloum.PhoneInput("#phone", { country: "FR" });
phone.value; // "+33612345678"
phone.country = "BE";

// Support another country or format
Bloum.PhoneInput.countries.push({ code: "MC", dialCode: "377", format: "## ## ## ##" });
```

Changing the country from the menu dispatches `bl-phone-input-country-change` on the input, with `{ country, dialCode }` as its detail.

Flags are emoji: Windows does not ship flag glyphs and shows the two-letter country code instead.

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-phone-input-gap: 0.375rem;
--bl-phone-input-flag-size: var(--bl-fs-xl);
--bl-phone-input-dial-code-color: var(--bl-clr-text-light);
--bl-phone-input-country-hover-bg: var(--bl-clr-hover-bg);
--bl-phone-input-menu-bg: var(--bl-clr-surface);
--bl-phone-input-menu-width: 18rem;
--bl-phone-input-option-highlighted-bg: var(--bl-clr-hover-bg);
--bl-phone-input-option-selected-bg: var(--bl-clr-active-bg);
--bl-phone-input-option-dial-code-color: var(--bl-clr-text-light);
--bl-phone-input-option-padding-x: var(--bl-list-item-padding-x);
--bl-phone-input-option-padding-y: var(--bl-list-item-padding-y);
--bl-phone-input-option-radius: var(--bl-list-item-radius);
```

## Examples

### Default

```html
<div class="field" style="max-width: 20rem">
  <label class="label" for="phone-default">Phone number</label>
  <input type="tel" class="input" id="phone-default" name="phone" data-phone-input data-phone-input-country="CH" />
</div>
```

### With Value

```html
<div class="field" style="max-width: 20rem">
  <label class="label" for="phone-value">Phone number</label>
  <input type="tel" class="input" id="phone-value" name="phone" value="+33612345678" data-phone-input />
</div>
```

### Restricted Countries

```html
<div class="field" style="max-width: 20rem">
  <label class="label" for="phone-restricted">Phone number</label>
  <input type="tel" class="input" id="phone-restricted" name="phone" data-phone-input data-phone-input-country="CH" data-phone-input-countries="CH,FR,DE,IT,AT,LI" />
  <p class="field-text-help">Only Switzerland and its neighbours.</p>
</div>
```

### In Form

```html
<form style="max-width: 20rem" onsubmit="event.preventDefault(); alert('phone: ' + new FormData(event.target).get('phone'));">
  <div class="field">
    <label class="label" for="phone-form">Phone number</label>
    <input type="tel" class="input" id="phone-form" name="phone" required data-phone-input data-phone-input-country="US" />
    <p class="field-text-help">Submits the number in E.164 format.</p>
  </div>
  <div style="display: flex; gap: 0.5rem; margin-top: 1rem">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn">Reset</button>
  </div>
</form>
```

### Disabled

```html
<div class="field" style="max-width: 20rem">
  <label class="label" for="phone-disabled">Phone number</label>
  <input type="tel" class="input" id="phone-disabled" name="phone" value="+41791234567" disabled data-phone-input />
</div>
```

---

# Pin Input

> Specialized input for one-time passwords with separate fields for each digit

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-pin-input--docs

The Pin Input component is used for entering PIN codes, one-time passwords, or any other numeric codes that need to be entered digit by digit.

## Usage

Simply add the `data-pin-input` attribute to any input element:

```html
<input type="text" data-pin-input data-pin-input-size="6" value="542361" />
```

## Data Attributes

- `data-pin-input`: Enables the pin input functionality
- `data-pin-input-size`: Number of input fields (default: 6)

## CSS Classes

- `.pin-input`: Container for the pin input fields
- `.pin-input-field`: Individual input field
- `.pin-input-danger`: Error state
- `.pin-input-success`: Success state

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-input-border-color: var(--bl-clr-danger-500);
--bl-focus-color: var(--bl-clr-danger-500);
```

## Examples

### Default

```html
<div class="space-y-4">
  <div class="field">
    <label class="label">Enter PIN Code:</label>
    <input type="text" data-pin-input data-pin-input-size="6" name="pin" />
  </div>
</div>
```

### With Value

```html
<div class="space-y-4">
  <div class="field">
    <label class="label">PIN with initial value:</label>
    <input type="text" data-pin-input data-pin-input-size="6" value="123456" name="pin" />
  </div>
</div>
```

### In Form

```html
<form class="space-y-4" onsubmit="event.preventDefault(); alert('PIN: ' + new FormData(event.target).get('verification_code'));">
  <div class="field">
    <label class="label">Enter verification code:</label>
    <input 
      type="text" 
      data-pin-input 
      data-pin-input-size="6" 
      name="verification_code" 
      required 
    />
  </div>

  <div class="field">
    <label class="label">Your email:</label>
    <input type="email" class="input w-full" name="email" placeholder="your@email.com" />
  </div>
  
  <button type="submit" class="btn btn-primary">
    Verify Code
  </button>
</form>
```

### With States

```html
<div class="space-y-6">
  <div class="field">
    <label class="label">Default state:</label>
    <input type="text" data-pin-input data-pin-input-size="4" name="pin_default" />
  </div>
  
  <div class="field">
    <label class="label text-danger">Error state:</label>
    <div data-pin-input-container class="pin-input pin-input-danger">
      <input type="text" class="input pin-input-field" maxlength="1" value="1" />
      <input type="text" class="input pin-input-field" maxlength="1" value="2" />
      <input type="text" class="input pin-input-field" maxlength="1" value="3" />
      <input type="text" class="input pin-input-field" maxlength="1" />
    </div>
    <p class="text-sm mt-1 text-danger">Invalid PIN code</p>
  </div>

  <div class="field">
    <label class="label text-success">Success state:</label>
    <div data-pin-input-container class="pin-input pin-input-success">
      <input type="text" class="input pin-input-field" maxlength="1" value="1" />
      <input type="text" class="input pin-input-field" maxlength="1" value="2" />
      <input type="text" class="input pin-input-field" maxlength="1" value="3" />
      <input type="text" class="input pin-input-field" maxlength="1" value="4" />
     </div>
     <p class="text-sm mt-1 text-success">PIN code verified</p>
   </div>
</div>
```

---

# Popover

> Small overlay that appears near a trigger element with contextual content

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-popover--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-popover-bg: var(--bl-clr-surface);
--bl-popover-title-bg: var(--bl-clr-surface-muted);
```

## Examples

### Popover

```html
<button class="btn" data-popover="#my-popover">Click me</button>
<div class="popover" id="my-popover">
  <p class="font-bold mb-4">Set the dimensions for the layer.</p>
  <div class="grid grid-cols-2 gap-4">
    <label class="label">Width</label>
    <input class="input">
    <label class="label">Max. width</label>
    <input class="input">
    <label class="label">Height</label>
    <input class="input">
  </div>
</div>
```

---

# Progress

> Visual indicator showing completion status of tasks or processes

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-progress--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-progress-height: 1rem;
--bl-progress-bg: var(--bl-clr-track-bg);
--bl-progress-background-color: var(--bl-clr-background-inverted);
--bl-progress-border-radius: var(--bl-border-radius-full);
--bl-progress-animation-duration: 1.5s;
--bl-progress-label-color: var(--bl-clr-white);
```

## Examples

### Default

```html
<div class="progress">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
```

### Sizes

```html
<div class="flex flex-col gap-4">
  <div>
    <p class="text-sm font-medium mb-2">Small</p>
    <div class="progress progress-sm">
      <div class="progress-bar" style="width: 25%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Medium (Default)</p>
    <div class="progress">
      <div class="progress-bar" style="width: 50%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Large</p>
    <div class="progress progress-lg">
      <div class="progress-bar" style="width: 75%"></div>
    </div>
  </div>
</div>
```

### Variants

```html
<div class="flex flex-col gap-4">
  <div>
    <p class="text-sm font-medium mb-2">Default</p>
    <div class="progress">
      <div class="progress-bar" style="width: 20%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Primary</p>
    <div class="progress progress-primary">
      <div class="progress-bar" style="width: 35%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Success</p>
    <div class="progress progress-success">
      <div class="progress-bar" style="width: 50%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Danger</p>
    <div class="progress progress-danger">
      <div class="progress-bar" style="width: 65%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Warning</p>
    <div class="progress progress-warning">
      <div class="progress-bar" style="width: 80%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Info</p>
    <div class="progress progress-info">
      <div class="progress-bar" style="width: 95%"></div>
    </div>
  </div>
</div>
```

### Striped

```html
<div class="flex flex-col gap-4">
  <div>
    <p class="text-sm font-medium mb-2">Striped</p>
    <div class="progress progress-striped">
      <div class="progress-bar" style="width: 40%"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Striped Animated</p>
    <div class="progress progress-striped progress-animated">
      <div class="progress-bar" style="width: 60%"></div>
    </div>
  </div>
</div>
```

### With Labels

```html
<div class="flex flex-col gap-4">
  <div>
    <p class="text-sm font-medium mb-2">Progress with percentage</p>
    <div class="progress progress-lg progress-primary">
      <div class="progress-bar" style="width: 45%">
        <span class="progress-label">45%</span>
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Progress with custom text</p>
    <div class="progress progress-lg progress-success">
      <div class="progress-bar" style="width: 75%">
        <span class="progress-label">Loading...</span>
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Striped with label</p>
    <div class="progress progress-lg progress-warning progress-striped progress-animated">
      <div class="progress-bar" style="width: 90%">
        <span class="progress-label">90% Complete</span>
      </div>
    </div>
  </div>
</div>
```

### Indeterminate

```html
<div class="flex flex-col gap-4">
  <div>
    <p class="text-sm font-medium mb-2">Indeterminate Progress (Loading State)</p>
    <div class="progress progress-indeterminate">
      <div class="progress-bar"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Indeterminate with Color</p>
    <div class="progress progress-primary progress-indeterminate">
      <div class="progress-bar"></div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Large Indeterminate</p>
    <div class="progress progress-lg progress-danger progress-indeterminate">
      <div class="progress-bar"></div>
    </div>
  </div>
</div>
```

### More Examples

```html
<div class="flex flex-col gap-6">
  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium">File Upload Progress</span>
      <span class="text-sm">78%</span>
    </div>
    <div class="progress progress-lg progress-primary progress-striped progress-animated">
      <div class="progress-bar" style="width: 78%">
        <span class="progress-label">78% - 234MB/300MB</span>
      </div>
    </div>
  </div>

  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium">System Health</span>
      <span class="text-sm text-success">Good</span>
    </div>
    <div class="progress progress-success">
      <div class="progress-bar" style="width: 92%"></div>
    </div>
  </div>

  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium">Storage Usage</span>
      <span class="text-sm text-warning">Warning</span>
    </div>
    <div class="progress progress-warning">
      <div class="progress-bar" style="width: 85%"></div>
    </div>
  </div>

  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium">Processing...</span>
    </div>
    <div class="progress progress-info progress-indeterminate">
      <div class="progress-bar"></div>
    </div>
  </div>
</div>
```

## Options

Markup for each value of the Storybook controls.

### `size`

```html
<!-- size: sm -->
<div class="progress progress-sm">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- size: md -->
<div class="progress">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- size: lg -->
<div class="progress progress-lg">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
```

### `variant`

```html
<!-- variant: default -->
<div class="progress">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- variant: primary -->
<div class="progress progress-primary">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- variant: success -->
<div class="progress progress-success">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- variant: danger -->
<div class="progress progress-danger">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- variant: warning -->
<div class="progress progress-warning">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
<!-- variant: info -->
<div class="progress progress-info">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
```

### `striped`

```html
<!-- striped: true -->
<div class="progress progress-striped">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
```

### `animated`

```html
<!-- animated: true -->
<div class="progress">
  <div class="progress-bar" style="width: 60%">
    
  </div>
</div>
```

### `indeterminate`

```html
<!-- indeterminate: true -->
<div class="progress progress-indeterminate">
  <div class="progress-bar" >
    
  </div>
</div>
```

### `showLabel`

```html
<!-- showLabel: true -->
<div class="progress">
  <div class="progress-bar" style="width: 60%">
    <span class="progress-label">60%</span>
  </div>
</div>
```

---

# Segmented Control

> Group of buttons that represent different states or values

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-segmented-control--docs

A segmented control is a horizontal set of exclusive options. It is backed by a
native `<select>` element, so it submits with any HTML form without extra
JavaScript. The select is hidden but stays the source of truth: it holds the
options, the current value, the `name` sent with the form and the disabled
state.

## Usage

Add the `data-segmented-control` attribute to a `<select>` element:

```html
<select name="view" data-segmented-control>
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
```

Controls are initialized by `Bloum.init()`, or manually:

```js
new Bloum.SegmentedControl("#view", { size: "sm" });
// or initialize every control of the page
Bloum.initSegmentedControl();
```

## Data attributes

- `data-segmented-control`: enables the segmented control
- `data-segmented-control-size`: `sm`, `md` (default) or `lg`
- `data-segmented-control-block`: full width, with equally sized segments
- `data-icon` on an `<option>`: icon markup rendered before the label

Disable the whole control with the `disabled` attribute on the select, and a
single segment with `disabled` on its option.

## JavaScript API

- `value`: get or set the selected value
- `selectedIndex`: index of the selected segment
- `select(index, emitChange?)`: select a segment
- `sync()`: rebuild the control after the select was changed programmatically
- `focus()`, `destroy()`

Selecting a segment dispatches `input` and `change` on the select element, so
existing form listeners keep working.

## Keyboard

The control behaves like a radio group: it holds a single tab stop, and the
arrow keys, <kbd>Home</kbd> and <kbd>End</kbd> move the selection between the
enabled segments.

## CSS classes

- `.segmented-control`: the control itself
- `.segmented-control-sm`, `.segmented-control-lg`: sizes
- `.segmented-control-block`: full width variant
- `.segmented-control-item`: a segment
- `.segmented-control-indicator`: the sliding background of the selection

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-segmented-height: 2.25rem;
--bl-segmented-fs: var(--bl-fs-base);
--bl-segmented-fw: var(--bl-fw-medium);
--bl-segmented-padding: 0.1875rem;
--bl-segmented-border-radius: var(--bl-border-radius-md);
--bl-segmented-bg: var(--bl-clr-surface-muted);
--bl-segmented-color: var(--bl-clr-text-light);
--bl-segmented-hover-color: var(--bl-clr-text);
--bl-segmented-active-color: var(--bl-clr-text);
--bl-segmented-indicator-bg: var(--bl-clr-surface);
--bl-segmented-indicator-shadow: var(--bl-shadow-sm);
```

## Examples

### Default

```html
<select name="view" data-segmented-control data-segmented-control-size="md"  >
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
```

### Sizes

```html
<div class="flex flex-col items-start gap-4">
  <select name="size-sm" data-segmented-control data-segmented-control-size="sm">
    <option value="day">Day</option>
    <option value="week" selected>Week</option>
    <option value="month">Month</option>
  </select>
  <select name="size-md" data-segmented-control>
    <option value="day">Day</option>
    <option value="week" selected>Week</option>
    <option value="month">Month</option>
  </select>
  <select name="size-lg" data-segmented-control data-segmented-control-size="lg">
    <option value="day">Day</option>
    <option value="week" selected>Week</option>
    <option value="month">Month</option>
  </select>
</div>
```

### With Icons

```html
<select name="alignment" data-segmented-control>
  <option value="left" data-icon="<i class='fas fa-align-left'></i>" selected>Left</option>
  <option value="center" data-icon="<i class='fas fa-align-center'></i>">Center</option>
  <option value="right" data-icon="<i class='fas fa-align-right'></i>">Right</option>
</select>
```

### Icon Only

```html
<select name="layout" data-segmented-control>
  <option value="list" label="List view" data-icon="<i class='fas fa-list'></i>" selected></option>
  <option value="grid" label="Grid view" data-icon="<i class='fas fa-th-large'></i>"></option>
  <option value="table" label="Table view" data-icon="<i class='fas fa-table'></i>"></option>
</select>
```

### Block

```html
<div style="max-width: 30rem">
  <select name="plan" data-segmented-control data-segmented-control-block>
    <option value="monthly" selected>Monthly</option>
    <option value="yearly">Yearly</option>
  </select>
</div>
```

### Disabled

```html
<div class="flex flex-col items-start gap-4">
  <select name="disabled-control" data-segmented-control disabled>
    <option value="on" selected>On</option>
    <option value="off">Off</option>
  </select>
  <select name="disabled-option" data-segmented-control>
    <option value="draft" selected>Draft</option>
    <option value="published">Published</option>
    <option value="archived" disabled>Archived</option>
  </select>
</div>
```

### In Form

```html
<form onsubmit="event.preventDefault(); alert('Notifications: ' + new FormData(event.target).get('notifications'));">
  <div class="field">
    <label class="label" for="notifications">Notifications</label>
    <select id="notifications" name="notifications" data-segmented-control>
      <option value="all">All</option>
      <option value="mentions" selected>Mentions</option>
      <option value="none">None</option>
    </select>
    <p class="field-text-help">Choose what you want to be notified about.</p>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>
```

## Options

Markup for each value of the Storybook controls.

### `size`

```html
<!-- size: sm -->
<select name="view" data-segmented-control data-segmented-control-size="sm"  >
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
<!-- size: md -->
<select name="view" data-segmented-control data-segmented-control-size="md"  >
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
<!-- size: lg -->
<select name="view" data-segmented-control data-segmented-control-size="lg"  >
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
```

### `block`

```html
<!-- block: true -->
<select name="view" data-segmented-control data-segmented-control-size="md" data-segmented-control-block="" >
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
```

### `disabled`

```html
<!-- disabled: true -->
<select name="view" data-segmented-control data-segmented-control-size="md"  disabled>
  <option value="list">List</option>
  <option value="grid" selected>Grid</option>
  <option value="board">Board</option>
</select>
```

---

# Sidebar

> Side-mounted navigation menu with hierarchical structure

Interactive demo: https://docs.bloum.dev/?path=/docs/components-navigation-sidebar--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-topbar-bg: var(--bl-clr-surface);
--bl-topbar-height: 3.5rem;
--bl-sidebar-width: 16rem;
--bl-sidebar-border-color: var(--bl-border-color);
--bl-sidebar-color: var(--bl-clr-text);
--bl-sidebar-color-hover: var(--bl-clr-text);
--bl-sidebar-bg: var(--bl-clr-surface);
--bl-sidebar-item-bg-hover: var(--bl-clr-hover-bg);
--bl-sidebar-title-color: var(--bl-clr-text-light);
--bl-sidebar-backdrop-bg: var(--bl-clr-overlay);
```

## Examples

### Sidebar

```html
<div class="app">
  <header class="topbar">
    <button class="btn btn-icon btn-ghost md:hidden" data-sidebar="#collapsible-sidebar">
      <i class="fa-solid fa-bars"></i>
    </button>
    <div class="w-px h-full border-l md:hidden"></div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item breadcrumb-separator"><i class="fas fa-angle-right"></i></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>
  </header>
  <aside class="sidebar" id="my-sidebar">
    <div class="sidebar-content">
      <div class="sidebar-top">
        <div class="sidebar-brand">
          <a href="#">
            <img src="https://placehold.co/150x50" alt="Logo" />
          </a>
        </div>
        <div class="mx-4 py-4">
          <div class="input-icon">
            <div class="input-icon-addon">
              <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <input type="search" class="input" placeholder="Search...">
          </div>
        </div>
        <h3 class="sidebar-group-title">Dashboard</h3>
        <ul class="sidebar-nav">
          <li class="sidebar-item active">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-home fa-fw"></i>
              Home
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-bars-progress fa-fw"></i>
              Projects
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-list-check fa-fw"></i>
              Tasks
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-users fa-fw"></i>
              Users
            </a>
          </li>
        </ul>
        <h3 class="sidebar-group-title">Administration</h3>
        <ul class="sidebar-nav">
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-dollar fa-fw"></i>
              Finance
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-file fa-fw"></i>
              Reports
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-wrench fa-fw"></i>
              Parameters
            </a>
          </li>
        </ul>
      </div>
      <div class="sidebar-bottom">
        <ul class="sidebar-nav">
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-circle-question fa-fw"></i>
              Help
            </a>
          </li>
          <li class="sidebar-item">
            <a href="#" class="sidebar-link">
              <i class="fa-solid fa-cog fa-fw"></i>
              Settings
            </a>
          </li>
           <li class="sidebar-item">
             <form action="" method="post">
               <button class="sidebar-link" type="submit">
                 <i class="fa-solid fa-sign-out fa-fw"></i>
                 Logout
               </button>
             </form>
           </li>
        </ul>
        <div class="p-4 flex justify-between items-center">
          <div class="flex items-center gap-4">
            <div class="rounded-full size-10 grid place-items-center font-semibold" style="background-color: var(--bl-clr-gray-500); color: var(--bl-clr-white)">GB</div>
            <div class="text-sm">
              <div class="font-semibold">John Doe</div>
              <div class="text-light">Administrator</div>
            </div>
          </div>
          <div class="dropdown">
            <button class="btn btn-icon btn-ghost btn-sm" data-menu="#my-menu">
              <i class="fa-solid fa-ellipsis-vertical"></i>
            </button>
            <div class="menu" id="my-menu">
              <a href="#" class="menu-item"><i class="fas fa-fw fa-user"></i>Profile</a>
              <a href="#" class="menu-item"><i class="fas fa-fw fa-cog"></i>Settings</a>
              <div class="menu-divider"></div>
              <form action="" method="post">
                <button class="menu-item"><i class="fas fa-fw fa-right-from-bracket"></i>Logout</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
  <main class="main p-4 space-y-4">
    <h1 class="font-semibold text-3xl">Content</h1>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">List of users</h3>
            <div class="card-actions">
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Add user">
                <i class="fas fa-plus"></i>
              </button>
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Settings">
                <i class="fas fa-cog"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">List of users</h3>
            <div class="card-actions">
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Add user">
                <i class="fas fa-plus"></i>
              </button>
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Settings">
                <i class="fas fa-cog"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">List of users</h3>
            <div class="card-actions">
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Add user">
                <i class="fas fa-plus"></i>
              </button>
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Settings">
                <i class="fas fa-cog"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">List of users</h3>
            <div class="card-actions">
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Add user">
                <i class="fas fa-plus"></i>
              </button>
              <button class="btn btn-icon btn-ghost btn-sm" aria-label="Settings">
                <i class="fas fa-cog"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis culpa cumque ea ex exercitationem neque nulla perferendis porro rerum totam, veniam voluptates voluptatibus. Dolor dolorum iusto nemo provident quis!
          </div>
        </div>
      </div>
  </main>
</div>
```

---

# Skeleton

> Loading placeholder that mimics the structure of content being loaded

Interactive demo: https://docs.bloum.dev/?path=/docs/components-layout-skeleton--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-skeleton-color: var(--bl-clr-control-bg);
--bl-skeleton-height: 2rem;
--bl-skeleton-width: 100%;
--bl-skeleton-border-radius: var(--bl-border-radius);
```

## Examples

### Default

```html
<div class="skeleton"></div>
```

### Shapes

```html
<div class="flex gap-4 items-center">
  <div class="skeleton" style="width: 100px;"></div>
  <div class="skeleton skeleton-circle"></div>
  <div class="skeleton skeleton-text" style="width: 200px;"></div>
</div>
```

### Sizes

```html
<div class="flex gap-4 items-center">
  <div class="skeleton skeleton-xs" style="width: 80px;"></div>
  <div class="skeleton skeleton-sm" style="width: 100px;"></div>
  <div class="skeleton skeleton-md" style="width: 120px;"></div>
  <div class="skeleton skeleton-lg" style="width: 140px;"></div>
  <div class="skeleton skeleton-xl" style="width: 160px;"></div>
</div>
```

### Animations

```html
<div class="flex flex-col gap-4">
  <div class="flex gap-4 items-center">
    <span class="text-sm font-medium w-16">Pulse:</span>
    <div class="skeleton skeleton-pulse" style="width: 200px;"></div>
  </div>
  <div class="flex gap-4 items-center">
    <span class="text-sm font-medium w-16">Shine:</span>
    <div class="skeleton skeleton-shine" style="width: 200px;"></div>
  </div>
</div>
```

### Content Placeholder

```html
<div class="space-y-4 max-w-md">
  <div class="flex items-center gap-4">
    <div class="skeleton skeleton-circle skeleton-lg"></div>
    <div class="space-y-2 flex-1">
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text" style="width: 80%;"></div>
    </div>
  </div>
  <div class="space-y-2">
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 90%;"></div>
    <div class="skeleton skeleton-text" style="width: 85%;"></div>
  </div>
  <div class="skeleton" style="height: 200px;"></div>
</div>
```

### Shine Example

```html
<div class="space-y-4 max-w-md skeleton-shine">
  <div class="flex items-center gap-4">
    <div class="skeleton skeleton-circle skeleton-lg"></div>
    <div class="space-y-2 flex-1">
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text" style="width: 80%;"></div>
    </div>
  </div>
  <div class="space-y-2">
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 90%;"></div>
    <div class="skeleton skeleton-text" style="width: 85%;"></div>
  </div>
  <div class="skeleton" style="height: 200px;"></div>
</div>
```

## Options

Markup for each value of the Storybook controls.

### `shape`

```html
<!-- shape: box -->
<div class="skeleton"></div>
<!-- shape: circle -->
<div class="skeleton skeleton-circle"></div>
<!-- shape: text -->
<div class="skeleton skeleton-text"></div>
```

### `size`

```html
<!-- size: xs -->
<div class="skeleton skeleton-xs"></div>
<!-- size: sm -->
<div class="skeleton skeleton-sm"></div>
<!-- size: md -->
<div class="skeleton"></div>
<!-- size: lg -->
<div class="skeleton skeleton-lg"></div>
<!-- size: xl -->
<div class="skeleton skeleton-xl"></div>
```

### `animation`

```html
<!-- animation: pulse -->
<div class="skeleton"></div>
<!-- animation: shine -->
<div class="skeleton skeleton-shine"></div>
```

---

# Spinner

> Visual marker that shows status, progress, or active states

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-spinner--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-spinner-size: 1.5rem;
--bl-spinner-color: var(--bl-clr-text);
```

## Examples

### Spinner

```html
<span class="spinner"></span>
```

## Options

Markup for each value of the Storybook controls.

### `size`

```html
<!-- size: md -->
<span class="spinner"></span>
<!-- size: sm -->
<span class="spinner spinner-sm"></span>
<!-- size: lg -->
<span class="spinner spinner-lg"></span>
<!-- size: xl -->
<span class="spinner spinner-xl"></span>
```

---

# Steps

> Progress indicator showing the current step in a multi-step process

Interactive demo: https://docs.bloum.dev/?path=/docs/components-navigation-steps--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-steps-size: 2rem;
--bl-steps-border-width: 2px;
--bl-steps-fs: var(--bl-fs-base);
--bl-steps-description-fs: var(--bl-fs-base);
--bl-steps-line-color: var(--bl-clr-text);
--bl-steps-line-thickness: 3px;
--bl-steps-bg-color: transparent;
--bl-steps-border-color: var(--bl-clr-text);
--bl-steps-indicator-color: var(--bl-clr-text);
--bl-steps-title-color: var(--bl-clr-text);
--bl-steps-description-color: var(--bl-clr-text);
```

## Examples

### Default

```html
<div class="steps ">
  
  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Account</div>
        
      </div>
    </a>
  </div>

  <div class="step active">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Profile</div>
        
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Preferences</div>
        
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Confirmation</div>
        
      </div>
    </a>
  </div>

</div>
```

### With Descriptions

```html
<div class="steps ">
  
  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Account</div>
        <div class="step-description">Create your account</div>
      </div>
    </a>
  </div>

  <div class="step active">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Profile</div>
        <div class="step-description">Complete your profile</div>
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Preferences</div>
        <div class="step-description">Set your preferences</div>
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Confirmation</div>
        <div class="step-description">Review and confirm</div>
      </div>
    </a>
  </div>

</div>
```

### With Icons

```html
<div class="steps ">
  
  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Account</div>
        <div class="step-description">Create your account</div>
      </div>
    </a>
  </div>

  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Profile</div>
        <div class="step-description">Complete your profile</div>
      </div>
    </a>
  </div>

  <div class="step active">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        <i class="fas fa-cog"></i>
      </div>
      <div class="step-content">
        <div class="step-title">Preferences</div>
        <div class="step-description">Set your preferences</div>
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        <i class="fas fa-check-circle"></i>
      </div>
      <div class="step-content">
        <div class="step-title">Confirmation</div>
        <div class="step-description">Review and confirm</div>
      </div>
    </a>
  </div>

</div>
```

### Large Size

```html
<div class="steps steps-lg">
  
  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Account</div>
        <div class="step-description">Create your account</div>
      </div>
    </a>
  </div>

  <div class="step active">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        <i class="fas fa-id-card"></i>
      </div>
      <div class="step-content">
        <div class="step-title">Profile</div>
        <div class="step-description">Complete your profile</div>
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        <i class="fas fa-cog"></i>
      </div>
      <div class="step-content">
        <div class="step-title">Preferences</div>
        <div class="step-description">Set your preferences</div>
      </div>
    </a>
  </div>

  <div class="step ">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        <i class="fas fa-check-circle"></i>
      </div>
      <div class="step-content">
        <div class="step-title">Confirmation</div>
        <div class="step-description">Review and confirm</div>
      </div>
    </a>
  </div>

</div>
```

### All Completed

```html
<div class="steps ">
  
  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Account</div>
        <div class="step-description">Create your account</div>
      </div>
    </a>
  </div>

  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Profile</div>
        <div class="step-description">Complete your profile</div>
      </div>
    </a>
  </div>

  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Preferences</div>
        <div class="step-description">Set your preferences</div>
      </div>
    </a>
  </div>

  <div class="step done">
    <a href="#" class="step-inner">
      <div class="step-indicator">
        
      </div>
      <div class="step-content">
        <div class="step-title">Confirmation</div>
        <div class="step-description">Review and confirm</div>
      </div>
    </a>
  </div>

</div>
```

---

# Switch

> Switch-style input for binary on/off states

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-switch--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-switch-width: round(2.5rem, 2px);
--bl-switch-height: round(calc(var(--bl-switch-width) / 2), 1px);
--bl-switch-padding: round(calc(var(--bl-switch-height) * 0.1), 1px);
--bl-switch-bg: var(--bl-clr-track-bg);
--bl-switch-bg-checked: var(--bl-clr-primary-600);
--bl-switch-thumb-bg: var(--bl-clr-white);
```

## Examples

### Switch

```html
<div class="field-switch">
  <input type="checkbox" class="switch" role="switch" id="switch1"  >
  <label for="switch1" class="input-check-label">Toggle me</label>
</div>
```

## Options

Markup for each value of the Storybook controls.

### `checked`

```html
<!-- checked: true -->
<div class="field-switch">
  <input type="checkbox" class="switch" role="switch" id="switch1" checked >
  <label for="switch1" class="input-check-label">Toggle me</label>
</div>
```

### `disabled`

```html
<!-- disabled: true -->
<div class="field-switch">
  <input type="checkbox" class="switch" role="switch" id="switch1"  disabled>
  <label for="switch1" class="input-check-label">Toggle me</label>
</div>
```

---

# Table

> Structured data display with rows, columns, sorting, and filtering capabilities

Interactive demo: https://docs.bloum.dev/?path=/docs/components-data-table--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-table-cell-padding-block: 0.5rem;
--bl-table-cell-padding-inline: 1rem;
--bl-table-fs: var(--bl-fs-base);
--bl-table-header-fw: var(--bl-fw-bold);
--bl-table-border-color: var(--bl-border-color);
--bl-table-stripe-bg: rgba(0, 0, 0, 0.04);
--bl-table-hover-bg: var(--bl-clr-hover-bg);
```

## Examples

### Table

```html
<div class="table-responsive"><table class="table">
      <thead>
        <tr>
          <th>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </th>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Facteur Hyacinthe</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Albert le Vert</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Mademoiselle Cassis</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">Total: 3 users</td>
        </tr>
      </tfoot>
      </table></div>
```

### Table Striped

```html
<div class="table-responsive"><table class="table table-striped">
      <thead>
        <tr>
          <th>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </th>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Facteur Hyacinthe</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Albert le Vert</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Mademoiselle Cassis</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">Total: 3 users</td>
        </tr>
      </tfoot>
      </table></div>
```

### Table Hover

```html
<div class="table-responsive"><table class="table table-hover">
      <thead>
        <tr>
          <th>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </th>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Facteur Hyacinthe</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Albert le Vert</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Mademoiselle Cassis</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">Total: 3 users</td>
        </tr>
      </tfoot>
      </table></div>
```

### Table Compact

```html
<div class="table-responsive"><table class="table table-compact">
      <thead>
        <tr>
          <th>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </th>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Facteur Hyacinthe</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Albert le Vert</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="input-check" aria-label="Select user">
          </td>
          <td>Mademoiselle Cassis</td>
          <td>john.doe@example.com</td>
          <td>Admin</td>
          <td>
            <button class="btn btn-icon btn-xs btn-ghost" aria-label="Edit user">
              <i class="fas fa-pen"></i>
            </button>
            <button class="btn btn-icon btn-xs btn-danger" aria-label="Delete user">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">Total: 3 users</td>
        </tr>
      </tfoot>
      </table></div>
```

---

# Tabs

> Horizontal navigation that switches between different content panels

Interactive demo: https://docs.bloum.dev/?path=/docs/components-navigation-tabs--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-tab-padding: 1rem;
--bl-tab-color: var(--bl-clr-text);
--bl-tab-active-color: var(--bl-clr-primary-600);
```

## Examples

### Classic Tabs

```html
<bl-tabs>
<bl-tab-list>
  <bl-tab href="#tab1"><i class="fas fa-user"></i> Users</bl-tab>
  <bl-tab href="#tab2"><i class="fas fa-users"></i> Groups</bl-tab>
  <bl-tab href="#tab3"><i class="fas fa-bell"></i> Notifications</bl-tab>
  <bl-tab href="#tab4"><i class="fas fa-cog"></i> Settings</bl-tab>
</bl-tab-list>
<bl-tab-panel id="tab1">Tab 1 content</bl-tab-panel>
<bl-tab-panel id="tab2">
<button class="btn btn-primary" data-modal="#my-basic-modal">Open Basic Modal</button>

<div class="modal" id="my-basic-modal" aria-labelledby="my-basic-modal-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="my-basic-modal-title">Login</h3>
      <button type="button" class="btn btn-icon btn-ghost" aria-label="Close" data-modal-close="">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="field">
          <label for="email" class="label">Email</label>
          <input type="email" id="email" name="email" class="input" placeholder="Enter your email" required>
        </div>
        <div class="field">
          <label for="password" class="label">Password</label>
          <input type="password" id="password" name="password" class="input" placeholder="Enter your password" required>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" data-modal-close="">Cancel</button>
      <button type="submit" class="btn btn-primary">Sign In</button>
    </div>
  </div>
</div>
</bl-tab-panel>
<bl-tab-panel id="tab3">Tab 3 content</bl-tab-panel>
<bl-tab-panel id="tab4">Tab 4 content</bl-tab-panel>
    </bl-tabs>
```

---

# Tag

> Label for categorizing and organizing content

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-tag--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-tag-bg: var(--bl-clr-surface-muted);
--bl-tag-color: var(--bl-clr-text);
--bl-tag-border-color: var(--bl-border-color-strong);
--bl-tag-height: 1.5rem;
--bl-tag-padding-inline: 0.5rem;
--bl-tag-fs: var(--bl-fs-sm);
--bl-tag-fw: var(--bl-fw-bold);
--bl-tag-border-radius: var(--bl-border-radius);
```

## Examples

### Tag

```html
<div class="tag">JavaScript</div>
```

### Tag Sizes

```html
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
  <div class="tag tag-sm">Small</div>
  <div class="tag">Default</div>
  <div class="tag tag-lg">Large</div>
</div>
```

### Tag Variants

```html
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
  <div class="tag">Default</div>
  <div class="tag tag-primary">Primary</div>
  <div class="tag tag-success">Success</div>
  <div class="tag tag-danger">Danger</div>
  <div class="tag tag-warning">Warning</div>
  <div class="tag tag-info">Info</div>
</div>
```

### Tag Solid

```html
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
  <div class="tag tag-solid">Default</div>
  <div class="tag tag-solid tag-primary">Primary</div>
  <div class="tag tag-solid tag-success">Success</div>
  <div class="tag tag-solid tag-danger">Danger</div>
  <div class="tag tag-solid tag-warning">Warning</div>
  <div class="tag tag-solid tag-info">Info</div>
</div>
```

### Tag List

```html
<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
  <div class="tag tag-primary">React</div>
  <div class="tag tag-success">TypeScript</div>
  <div class="tag tag-info">CSS</div>
  <div class="tag tag-warning">JavaScript</div>
  <div class="tag">HTML</div>
  <div class="tag tag-danger">Legacy Code</div>
</div>
```

### Tag Long Text

```html
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 300px;">
  <div class="tag tag-primary">This is a very long tag that should truncate with ellipsis</div>
  <div class="tag tag-success" style="max-width: 150px;">Constrained width tag example</div>
</div>
```

## Options

Markup for each value of the Storybook controls.

### `type`

```html
<!-- type: default -->
<div class="tag">JavaScript</div>
<!-- type: primary -->
<div class="tag tag-primary">JavaScript</div>
<!-- type: success -->
<div class="tag tag-success">JavaScript</div>
<!-- type: danger -->
<div class="tag tag-danger">JavaScript</div>
<!-- type: warning -->
<div class="tag tag-warning">JavaScript</div>
<!-- type: info -->
<div class="tag tag-info">JavaScript</div>
```

### `size`

```html
<!-- size: sm -->
<div class="tag tag-sm">JavaScript</div>
<!-- size: default -->
<div class="tag">JavaScript</div>
<!-- size: lg -->
<div class="tag tag-lg">JavaScript</div>
```

### `solid`

```html
<!-- solid: true -->
<div class="tag tag-solid">JavaScript</div>
```

### `rounded`

```html
<!-- rounded: true -->
<div class="tag tag-rounded">JavaScript</div>
```

---

# Textarea

> Multi-line text input field for longer content entry

Interactive demo: https://docs.bloum.dev/?path=/docs/components-inputs-textarea--docs

## Examples

### Default

```html
<div class="max-w-md">
  <textarea class="input" rows="4" placeholder="Enter your message..."></textarea>
</div>
```

### With Content

```html
<div class="max-w-md">
  <textarea class="input" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
</div>
```

### Disabled

```html
<div class="max-w-md">
  <textarea class="input" rows="4" disabled placeholder="This textarea is disabled"></textarea>
</div>
```

### Autogrow Textarea

```html
<div class="max-w-md space-y-4">
  <p class="text-sm text-light">This textarea will automatically grow as you type:</p>
  <textarea class="input" data-autogrow placeholder="Start typing to see the autogrow effect..."></textarea>
</div>
```

### Multiple Autogrow

```html
<div class="max-w-md space-y-4">
  <textarea class="input" data-autogrow placeholder="First autogrow textarea"></textarea>
  <textarea class="input" data-autogrow placeholder="Second autogrow textarea"></textarea>
  <textarea class="input" data-autogrow placeholder="Third autogrow textarea"></textarea>
</div>
```

---

# Timeline

> Component that displays events or milestones in chronological order

Interactive demo: https://docs.bloum.dev/?path=/docs/components-elements-timeline--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-timeline-connector-color: var(--bl-border-color-strong);
--bl-timeline-indicator-bg: var(--bl-clr-background-inverted);
--bl-timeline-indicator-color: var(--bl-clr-text-inverted);
--bl-timeline-size: 2rem;
--bl-timeline-border-width: 2px;
--bl-timeline-line-thickness: 2px;
--bl-timeline-line-offset: 0.75rem;
--bl-timeline-description-color: var(--bl-clr-text-light);
--bl-timeline-title-fs: var(--bl-fs-base);
--bl-timeline-padding-left: 2.5rem;
```

## Examples

### Default

```html
<div class="timeline">
          <div class="timeline-item">
            <div class="timeline-indicator bg-green-600">
              <i class="fas fa-check"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">Application Submitted</div>
              <div class="timeline-description">15th March 2024</div>
              <div class="timeline-body">Your job application has been successfully submitted.</div>
            </div>
          </div>
        
          <div class="timeline-item timeline-item-completed">
            <div class="timeline-indicator">
              <i class="fas fa-check"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">Application Reviewed</div>
              <div class="timeline-description">18th March 2024</div>
              <div class="timeline-body">Your application has been reviewed by the hiring team.</div>
            </div>
          </div>
        
          <div class="timeline-item timeline-item-active">
            <div class="timeline-indicator">
              <i class="fas fa-clock"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">Interview Scheduled</div>
              <div class="timeline-description">22nd March 2024</div>
              <div class="timeline-body">Your interview has been scheduled.</div>
            </div>
          </div>
        
          <div class="timeline-item">
            <div class="timeline-indicator">
              <i class="fas fa-hourglass"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">Decision</div>
              
              <div class="timeline-body">Pending</div>
            </div>
          </div>
        </div>
```

### Inline Date

```html
<div class="timeline">
          <div class="timeline-item">
            <div class="timeline-indicator bg-green-600">
              <i class="fas fa-check"></i>
            </div>
            <div class="timeline-content">
              <div class="flex items-center gap-2">
                <div class="timeline-title">Application Submitted</div>
                <span class="text-light">&bullet;</span>
                <div class="timeline-description">15th March 2024</div>
              </div>
              <div class="timeline-body">Your job application has been successfully submitted.</div>
            </div>
          </div>
        
          <div class="timeline-item timeline-item-completed">
            <div class="timeline-indicator">
              <i class="fas fa-check"></i>
            </div>
            <div class="timeline-content">
              <div class="flex items-center gap-2">
                <div class="timeline-title">Application Reviewed</div>
                <span class="text-light">&bullet;</span>
                <div class="timeline-description">18th March 2024</div>
              </div>
              <div class="timeline-body">Your application has been reviewed by the hiring team.</div>
            </div>
          </div>
        
          <div class="timeline-item timeline-item-active">
            <div class="timeline-indicator">
              <i class="fas fa-clock"></i>
            </div>
            <div class="timeline-content">
              <div class="flex items-center gap-2">
                <div class="timeline-title">Interview Scheduled</div>
                <span class="text-light">&bullet;</span>
                <div class="timeline-description">22nd March 2024</div>
              </div>
              <div class="timeline-body">Your interview has been scheduled.</div>
            </div>
          </div>
        
          <div class="timeline-item">
            <div class="timeline-indicator">
              <i class="fas fa-hourglass"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">Decision</div>
              
              <div class="timeline-body">Pending</div>
            </div>
          </div>
        </div>
```

---

# Toast

> Temporary notification that appears briefly to provide feedback

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-toast--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-toast-gap: 1rem;
--bl-toast-bg: var(--bl-clr-surface);
--bl-toast-color: var(--bl-clr-text);
--bl-toast-border: var(--bl-border-color);
--bl-toast-shadow: var(--bl-shadow-lg);
--bl-toast-min-width: 20rem;
--bl-toast-max-width: 24rem;
--bl-toast-padding: 1rem;
--bl-toast-border-radius: var(--bl-border-radius);
--bl-toast-close-color: var(--bl-clr-text-subtle);
--bl-toast-close-hover-color: var(--bl-clr-text);
```

## Examples

### Default

```html
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
```

### Variants

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Toast Variants</h3>
  <div class="flex flex-wrap gap-2">
    <button
      class="btn"
      onclick="Toast.show({
        title: 'Default Toast',
        description: 'This is a default toast message',
        variant: 'default'
      })"
    >
      Default
    </button>

    <button
      class="btn btn-primary"
      onclick="Toast.primary('Primary Toast', 'This is a primary toast message')"
    >
      Primary
    </button>

    <button
      class="btn btn-success"
      onclick="Toast.success('Success!', 'Your action was completed successfully')"
    >
      Success
    </button>

    <button
      class="btn btn-danger"
      onclick="Toast.danger('Danger!', 'Something went wrong')"
    >
      Error
    </button>

    <button
      class="btn btn-warning"
      onclick="Toast.warning('Warning!', 'Please be careful')"
    >
      Warning
    </button>
  </div>
</div>
```

### Placements

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Toast Placements</h3>
  <div class="grid grid-cols-3 gap-2 max-w-2xl">
    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Top Left',
        placement: 'top-left'
      })"
    >
      Top Left
    </button>

    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Top Center',
        placement: 'top-center'
      })"
    >
      Top Center
    </button>

    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Top Right',
        placement: 'top-right'
      })"
    >
      Top Right
    </button>

    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Bottom Left',
        placement: 'bottom-left'
      })"
    >
      Bottom Left
    </button>

    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Bottom Center',
        placement: 'bottom-center'
      })"
    >
      Bottom Center
    </button>

    <button
      class="btn btn-sm"
      onclick="Toast.show({
        title: 'Bottom Right',
        placement: 'bottom-right'
      })"
    >
      Bottom Right
    </button>
  </div>
</div>
```

### Durations

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Toast Durations</h3>
  <div class="flex flex-wrap gap-2">
    <button
      class="btn"
      onclick="Toast.show({
        title: 'Quick Toast (2s)',
        description: 'This will disappear in 2 seconds',
        duration: 2000
      })"
    >
      2 seconds
    </button>

    <button
      class="btn"
      onclick="Toast.show({
        title: 'Normal Toast (5s)',
        description: 'This will disappear in 5 seconds',
        duration: 5000
      })"
    >
      5 seconds
    </button>

    <button
      class="btn"
      onclick="Toast.show({
        title: 'Long Toast (10s)',
        description: 'This will disappear in 10 seconds',
        duration: 10000
      })"
    >
      10 seconds
    </button>

    <button
      class="btn"
      onclick="Toast.show({
        title: 'Persistent Toast',
        description: 'This toast will stay until you close it',
        duration: 0,
        closeable: true
      })"
    >
      No auto-dismiss
    </button>
  </div>
</div>
```

### Multiple Toasts

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Multiple Toasts</h3>
  <div class="flex flex-wrap gap-2">
    <button
      class="btn btn-primary"
      onclick="
        Toast.success('First Toast', 'This is the first toast');
        setTimeout(() => Toast.warning('Second Toast', 'This is the second toast'), 500);
        setTimeout(() => Toast.danger('Third Toast', 'This is the third toast'), 1000);
      "
    >
      Show Multiple Toasts
    </button>

    <button
      class="btn btn-danger"
      onclick="Toast.dismissAll()"
    >
      Dismiss All
    </button>
  </div>
</div>
```

### Real World Examples

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Real World Examples</h3>
  <div class="flex flex-wrap gap-2">
    <button
      class="btn btn-success"
      onclick="Toast.success('Saved!', 'Your changes have been saved successfully.')"
    >
      Save Success
    </button>

    <button
      class="btn btn-danger"
      onclick="Toast.danger('Connection Failed', 'Unable to connect to the server. Please check your internet connection.')"
    >
      Network Error
    </button>

    <button
      class="btn btn-warning"
      onclick="Toast.warning('Low Storage', 'You are running low on storage space.')"
    >
      Storage Warning
    </button>

    <button
      class="btn btn-primary"
      onclick="Toast.show({
        title: 'Update Available',
        description: 'A new version is available. Click to update now.',
        variant: 'primary',
        duration: 0,
        closeable: true
      })"
    >
      Update Notification
    </button>
  </div>
</div>
```

### Without Description

```html
<div class="flex flex-col gap-4">
  <h3 class="text-lg font-semibold mb-2">Toasts Without Description</h3>
  <div class="flex flex-wrap gap-2">
    <button
      class="btn"
      onclick="Toast.show({ title: 'Simple notification' })"
    >
      Default
    </button>

    <button
      class="btn btn-success"
      onclick="Toast.success('Saved!')"
    >
      Success
    </button>

    <button
      class="btn btn-danger"
      onclick="Toast.danger('Failed!')"
    >
      Error
    </button>
  </div>
</div>
```

## Options

Markup for each value of the Storybook controls.

### `variant`

```html
<!-- variant: default -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- variant: primary -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'primary',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- variant: success -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'success',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- variant: danger -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'danger',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- variant: warning -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'warning',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
```

### `placement`

```html
<!-- placement: top-left -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-left',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- placement: top-center -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-center',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- placement: top-right -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- placement: bottom-left -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'bottom-left',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- placement: bottom-center -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'bottom-center',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
<!-- placement: bottom-right -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'bottom-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
```

### `closeable`

```html
<!-- closeable: true -->
<div class="flex flex-col gap-4">
  <button
    class="btn btn-primary"
    onclick="Toast.show({
      title: 'Toast Notification',
      description: '',
      variant: 'default',
      placement: 'top-right',
      duration: 5000,
      closeable: true
    })"
  >
    Show Toast
  </button>
</div>
```

---

# Tooltip

> Brief informational popup that appears on hover after a short delay

Interactive demo: https://docs.bloum.dev/?path=/docs/components-overlays-tooltip--docs

## CSS custom properties

Declared on the component selector. Override them on the same selector (or a more specific one) — setting them on `:root` has no effect.

```css
--bl-tooltip-bg: var(--bl-clr-background-inverted);
--bl-tooltip-color: var(--bl-clr-text-inverted);
```

## Examples

### Tooltip

```html
<button class="btn btn-primary" data-tooltip="Hello World!">Hover me</button>
```

### Long Tooltip

```html
<button class="btn btn-primary" data-tooltip="This is a longer tooltip text to test the tooltip component's behavior with longer content. lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">Hover me</button>
```

### No Delay

```html
<button class="btn btn-primary" data-tooltip="Shown immediately" data-tooltip-delay="0">Hover me</button>
```

### Toolbar

```html
<div style="display: flex; gap: 0.25rem">
  <button class="btn btn-icon btn-ghost" aria-label="Bold" data-tooltip="Bold"><i class="fas fa-bold"></i></button>
  <button class="btn btn-icon btn-ghost" aria-label="Italic" data-tooltip="Italic"><i class="fas fa-italic"></i></button>
  <button class="btn btn-icon btn-ghost" aria-label="Underline" data-tooltip="Underline"><i class="fas fa-underline"></i></button>
  <button class="btn btn-icon btn-ghost" aria-label="Link" data-tooltip="Insert link"><i class="fas fa-link"></i></button>
</div>
```