testio-tailwind 3.21.0 → 3.22.0

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -0,0 +1,2407 @@
+# Test IO Tailwind Design System - AI Reference Guide
+
+**Version:** 3.22.0
+**Framework:** Tailwind CSS 4.x
+**Package:** `testio-tailwind`
+**Last Updated:** January 2026
+**Node Version:** v23.11.0
+
+This document serves as a comprehensive reference for AI Agents to utilize the Test IO Tailwind design system when building pages and components in other projects.
+
+## Recent Updates (January 2026)
+
+- ✨ **HAML Preview**: New HAML preview functionality for live component viewing
+- ✨ **HAML Converter**: Added HAML conversion utility for template processing
+- ✨ **AI Documentation**: Comprehensive AI documentation across all component pages
+- ✨ **Date & Time Picker**: Flatpickr integration for date and time selection
+- 📊 **Tables Reorganization**: Tables moved to dedicated `/pages/tables/` section
+- 🎨 **Table Striped Style**: Fixed table alternating row styling with proper dark mode support
+- 📝 **Component Descriptions**: All component pages now include descriptions and use cases
+- 🎯 **Button Documentation**: Updated button pages with detailed descriptions
+- 🔄 **Drawer Fixes**: Improved drawer footer padding and responsive behavior
+- 🛡️ **Security Updates**: Addressed npm vulnerabilities
+- 🔧 **Splitview Improvements**: Fixed splitview details close button and responsive behavior
+- 🏷️ **Image Tags**: Added support for image tagging in components
+- 🔧 **HAML Conversion**: Tables documentation files converted to HAML format
+
+---
+
+## Table of Contents
+1. [Installation & Setup](#installation--setup)
+2. [Component Library Structure](#component-library-structure)
+3. [Color System](#color-system)
+4. [Typography](#typography)
+5. [Spacing & Layout](#spacing--layout)
+6. [Button Components](#button-components)
+7. [Card Components](#card-components)
+8. [Form Components](#form-components)
+9. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
+10. [Page Layout Components](#page-layout-components)
+11. [Navigation Components](#navigation-components)
+12. [Feedback Components](#feedback-components)
+13. [Data Display Components](#data-display-components)
+14. [List Components](#list-components)
+15. [Splitview Components](#splitview-components)
+16. [Chat Components](#chat-components)
+17. [Chart Components](#chart-components)
+18. [Status & Progress Components](#status--progress-components)
+19. [Utility Components](#utility-components)
+20. [AgenticQA Components](#agenticqa-components)
+21. [Dark Mode](#dark-mode)
+22. [Best Practices for AI Agents](#best-practices-for-ai-agents)
+
+---
+
+## Installation & Setup
+
+### NPM Installation
+```bash
+npm install testio-tailwind
+```
+
+### CSS Import
+```css
+@import 'testio-tailwind/dist/static/app.compiled.css';
+```
+
+### JavaScript Import
+```javascript
+import 'testio-tailwind/dist/static/app.bundled.js';
+```
+
+---
+
+## Component Library Structure
+
+The design system includes a comprehensive component library organized by category. All components are documented with live examples in the `src/pages/` directory.
+
+### Directory Organization
+
+```
+src/pages/
+├── agenticqa/           # AgenticQA-specific components
+│   ├── assets.haml
+│   ├── chat_*.haml      # Chat variants
+│   ├── header.haml
+│   ├── listitem.haml
+│   ├── pageheader.haml
+│   ├── splitview_items.haml
+│   ├── status_stepper.haml
+│   └── tables-*.haml
+├── buttons/             # Button components and variants
+│   ├── buttons.haml     # Standard buttons
+│   ├── buttons-sm.haml  # Small buttons
+│   ├── buttons-lg.haml  # Large buttons
+│   ├── buttons-xl.haml  # Extra large buttons
+│   ├── buttons-round.haml
+│   ├── square-buttons.haml
+│   ├── block.haml
+│   ├── button_group.haml
+│   ├── buttons_input.haml
+│   └── dropdown-menu.haml
+├── charts/              # ECharts data visualization
+│   ├── area.haml
+│   ├── bar_horizontal.haml
+│   ├── bar_vertical.haml
+│   ├── colors.haml
+│   ├── donut.haml
+│   ├── gauge.haml
+│   ├── legend.haml
+│   └── line.haml
+├── components/          # UI components
+│   ├── alerts.haml
+│   ├── cards.haml
+│   ├── cards_*.haml     # Card variants
+│   ├── chat_window.haml
+│   ├── drawer.haml
+│   ├── drawer_filter.haml
+│   ├── emptystate.haml
+│   ├── info_popover.haml
+│   ├── listitems.haml
+│   ├── listitems_*.haml # List item variants
+│   ├── loading_spinner.haml
+│   ├── modal_details.haml
+│   ├── notifications.haml
+│   ├── pagination.haml
+│   ├── progress.haml
+│   ├── splitview_*.haml
+│   └── tags.haml
+├── forms/               # Form components
+│   ├── forms.haml       # Basic inputs
+│   ├── checkboxes.haml
+│   ├── radiobuttons.haml
+│   ├── toggle-switch.haml
+│   ├── toggle-buttons.haml
+│   ├── select2.haml
+│   ├── tomselect.haml
+│   ├── flatpickr.haml   # Date/time picker
+│   ├── date-time.haml
+│   ├── textarea.haml
+│   ├── rating_scale.haml
+│   ├── selectable_token.haml
+│   └── form_grid.haml
+├── layout/              # Layout utilities
+│   ├── app_layout.haml
+│   ├── spacing.haml
+│   ├── paddings.haml
+│   ├── margins.haml
+│   └── max_width.haml
+├── navigation/          # Navigation components
+│   ├── header.haml
+│   ├── header_*.haml    # Portal-specific headers
+│   ├── sidebar.haml
+│   ├── sidebar_*.haml   # Portal-specific sidebars
+│   ├── tabnavigation.haml
+│   ├── tabnavigation_*.haml
+│   └── radio_tabs.haml
+├── tables/              # Table components
+│   ├── tables.haml
+│   ├── tables_alternating.haml
+│   ├── tables_borders.haml
+│   ├── tables_cells.haml
+│   ├── tables_footer.haml
+│   ├── tables_header.haml
+│   ├── tables_linked.haml
+│   ├── tables-cellstyle.haml
+│   └── tables-grid.haml
+└── typography/          # Typography examples
+    ├── headings.haml
+    ├── section_header.haml
+    └── text_with_icon.haml
+```
+
+### How to Use Components
+
+#### 1. **View Live Examples**
+All components have live documentation available at the local development server:
+```bash
+npm start
+# Visit: http://localhost:8080/buttons/
+# Visit: http://localhost:8080/components/
+# Visit: http://localhost:8080/forms/
+# Visit: http://localhost:8080/tables/
+# Visit: http://localhost:8080/charts/
+```
+
+#### 2. **HAML to HTML Reference**
+
+```haml
+<!-- HAML -->
+%button.btn.btn-primary{type:'submit', disabled:''}
+  %i.icon.icon-save.mr-xs
+  Save Changes
+
+<!-- Renders as -->
+<button class="btn btn-primary" type="submit" disabled="">
+  <i class="icon icon-save mr-xs"></i>
+  Save Changes
+</button>
+```
+
+**HAML Attribute Format:**
+- Use curly braces for attributes: `{key:'value'}`
+- Boolean attributes: `{checked:''}` or `{disabled:''}`
+- Multiple attributes: `{type:'checkbox', id:'check1'}`
+
+---
+
+## Color System
+
+### Semantic Colors
+Use these color utilities for consistent semantic meaning:
+
+```html
+<!-- Primary Actions -->
+<div class="bg-primary text-white">Primary action</div>
+<div class="bg-link text-white">Link color</div>
+
+<!-- Status Colors -->
+<div class="bg-success text-white">Success state</div>
+<div class="bg-danger text-white">Error/danger state</div>
+<div class="bg-info text-white">Information</div>
+<div class="bg-blocked text-white">Warning/blocked</div>
+<div class="bg-pending text-gray-darker">Pending state</div>
+
+<!-- Functional Colors -->
+<div class="bg-appbody text-appbody-textcolor">App background</div>
+<div class="bg-card">Card background</div>
+<div class="bg-header text-white">Header background</div>
+<div class="bg-listitem">List item background</div>
+<div class="bg-actionbar">Action bar (dark)</div>
+<div class="border-bordercolor">Standard border</div>
+```
+
+### Color Palette
+
+**Grays:** `gray-100` through `gray-900`, plus `gray-lightest`, `gray-lighter`, `gray-light`, `gray-dark`, `gray-darker`, `gray-darkest`
+
+**Brand Colors:**
+- **Primary (Petrol):** `petrol` (#236a84 light, #78eac1 dark)
+- **Success:** `green` (#8cbd24 light, #33BA9E dark)
+- **Danger/Critical:** `red` (#ec0404 light, #FF3131 dark)
+- **Warning:** `orange` (#f48d21)
+- **Info:** `blue` (#326dd1)
+- **Accent Colors:** `teal`, `purple`, `pink`, `yellow`
+
+**Priority Levels:**
+- `critical` - Red (#FF3131)
+- `high` - Yellow (#d8ce0d)
+- `low` - Gray (#9fa2a8)
+
+**Issue Types:**
+- `visual` - Orange (#f48d21)
+- `content` - Blue (#326dd1)
+- `usability` - Petrol dark (#263340)
+
+---
+
+## Typography
+
+### Font Families
+- **Body/Sans:** `font-sans` - Source Sans 3
+- **Monospace:** `font-mono` - Source Code Pro
+
+### Headings
+```html
+<h1 class="text-heading-1 font-light">Main Title (2.25rem)</h1>
+<h2 class="text-heading-2 font-light">Section Title (1.875rem)</h2>
+<h3 class="text-heading-3 font-light">Subsection (1.563rem)</h3>
+<h4 class="text-heading-4 font-light">Sub-heading (1.375rem)</h4>
+<h5 class="text-heading-5 font-light">Minor heading (1.125rem)</h5>
+<h6 class="text-heading-6 font-light">Smallest heading (1rem)</h6>
+```
+
+### Display Text
+```html
+<h1 class="text-display-1 font-extralight">Hero Text (3.25rem)</h1>
+<h2 class="text-display-2 font-extralight">Large Display (3rem)</h2>
+<h3 class="text-display-3 font-extralight">Medium Display (2.75rem)</h3>
+<h4 class="text-display-4 font-extralight">Small Display (2.5rem)</h4>
+```
+
+### Body Text Sizes
+```html
+<p class="text-base">Base text (0.875rem - default)</p>
+<p class="text-lg">Large text (1.25rem)</p>
+<p class="text-sm">Small text (0.813rem)</p>
+<p class="text-xs">Extra small (0.6875rem)</p>
+<p class="text-xxs">Tiny text (0.625rem)</p>
+```
+
+### Labels & Special Text
+```html
+<label class="text-label">Form Label (0.8125rem, 0.75rem in dark)</label>
+<label class="text-label-sm">Small Label (0.75rem)</label>
+<h3 class="text-card-header">Card Header (1.125rem in dark)</h3>
+```
+
+---
+
+## Spacing & Layout
+
+### Spacing Scale
+- `xxs` - 0.3125rem (5px)
+- `xs` - 0.625rem (10px)
+- `sm` - 0.9375rem (15px)
+- `md` - 1.25rem (20px)
+- `spacing` - 1.875rem (30px) - **base unit**
+- `lg` - 3.125rem (50px)
+- `xl` - 3.75rem (60px)
+- `xxl` - 5.625rem (90px)
+
+### Common Spacing Patterns
+```html
+<!-- Padding -->
+<div class="p-md">Standard padding (20px)</div>
+<div class="p-card-padding">Card padding (30px)</div>
+<div class="px-md py-sm">Mixed padding</div>
+
+<!-- Margins -->
+<div class="mb-spacing">Standard margin bottom (30px)</div>
+<div class="mt-xxs">Tiny margin top (5px)</div>
+<div class="mb-heading">Bottom margin for headings</div>
+
+<!-- Gaps (for flexbox/grid) -->
+<div class="flex gap-xs">Flex with 10px gap</div>
+<div class="grid gap-grid-gutter">Grid with gutter (20px light, 40px dark)</div>
+```
+
+### Breakpoints
+```css
+xs: 30rem (480px)
+sm: 640px (default Tailwind)
+md: 768px (default Tailwind)
+lg: 70rem (1120px)
+xl: 90rem (1440px)
+2xl: 100rem (1600px)
+3xl: 1930px
+```
+
+---
+
+## Button Components
+
+### Basic Buttons
+```html
+<!-- Primary button -->
+<button class="btn btn-primary">Primary Action</button>
+
+<!-- Secondary (outline) button -->
+<button class="btn btn-secondary">Secondary Action</button>
+
+<!-- Ghost button (no border/background) -->
+<button class="btn btn-ghost">Ghost Action</button>
+
+<!-- Link button (text style) -->
+<button class="btn btn-link">Link Style</button>
+
+<!-- Dashed border button -->
+<button class="btn btn-dashed">Add New</button>
+```
+
+### Semantic Button Variants
+```html
+<button class="btn btn-success">Success Action</button>
+<button class="btn btn-danger">Delete/Danger</button>
+<button class="btn btn-warning">Warning Action</button>
+<button class="btn btn-info">Info Action</button>
+```
+
+### Button Sizes
+```html
+<!-- Small button -->
+<button class="btn btn-sm btn-primary">Small</button>
+
+<!-- Default button (h-btn = 2.5rem/40px) -->
+<button class="btn btn-primary">Default</button>
+
+<!-- Large button (for icon buttons) -->
+<button class="btn btn-lg btn-primary">
+  <i class="icon icon-star"></i>
+</button>
+
+<!-- Extra large button with label -->
+<button class="btn btn-xl btn-primary">
+  <i class="icon icon-upload"></i>
+  Upload
+</button>
+```
+
+### Button Shapes
+```html
+<!-- Square icon button -->
+<button class="btn btn-square btn-primary">
+  <i class="icon icon-search"></i>
+</button>
+
+<!-- Circle button -->
+<button class="btn btn-circle btn-primary">
+  <i class="icon icon-add"></i>
+</button>
+
+<!-- Block button (full width) -->
+<button class="btn btn-block btn-primary">Full Width</button>
+```
+
+### Inverted Buttons (for dark backgrounds)
+```html
+<div class="bg-actionbar p-md">
+  <button class="btn btn-primary-inverted">Primary Inverted</button>
+  <button class="btn btn-inverted">Inverted</button>
+  <button class="btn btn-secondary-inverted">Secondary Inverted</button>
+  <button class="btn btn-outline-primary-inverted">Outline Primary Inverted</button>
+  <button class="btn btn-ghost-inverted">Ghost Inverted</button>
+</div>
+```
+
+### Buttons with Icons
+```html
+<button class="btn btn-primary">
+  <i class="icon icon-save mr-icon-spacing"></i>
+  Save Changes
+</button>
+
+<button class="btn btn-secondary">
+  <i class="icon icon-download mr-icon-spacing"></i>
+  Download
+</button>
+```
+
+### Dropdown Menu Button
+```html
+<details class="dropdown-actions">
+  <summary>
+    <div class="btn btn-square btn-primary">
+      <span class="icon icon-more"></span>
+    </div>
+  </summary>
+  <div class="popover-menu">
+    <a class="popover-action" href="#">
+      <span class="icon icon-pencil"></span>
+      Edit
+    </a>
+    <a class="popover-action" href="#">
+      <span class="icon icon-duplicate"></span>
+      Duplicate
+    </a>
+    <a class="popover-action" href="#">
+      <span class="icon icon-remove"></span>
+      Delete
+    </a>
+  </div>
+</details>
+
+<!-- Direction variants -->
+<details class="dropdown-actions dropright"><!-- Opens to right --></details>
+<details class="dropdown-actions dropup dropright"><!-- Opens up and right --></details>
+```
+
+### Button Groups
+```html
+<div class="btn-group">
+  <button class="btn btn-primary">Left</button>
+  <button class="btn btn-primary">Center</button>
+  <button class="btn btn-primary">Right</button>
+</div>
+```
+
+---
+
+## Card Components
+
+### Basic Card Structure
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Card Title</h3>
+  </div>
+  <div class="card-body">
+    <p>Card content goes here</p>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary btn-block">Action</button>
+    <button class="btn btn-secondary btn-block">Cancel</button>
+  </div>
+</div>
+```
+
+### Card Sizes
+```html
+<!-- Small card (11.25rem on sm+ screens) -->
+<div class="card card-sm">...</div>
+
+<!-- Medium card (17.5rem) -->
+<div class="card card-md">...</div>
+
+<!-- Large card (23.75rem) -->
+<div class="card card-lg">...</div>
+```
+
+### Card Variants
+```html
+<!-- Highlighted card (info blue background) -->
+<div class="card highlight">...</div>
+
+<!-- Card with highlighted header only -->
+<div class="card">
+  <div class="card-header highlight">
+    <h3 class="card-title">Highlighted Header</h3>
+  </div>
+  <div class="card-body">Regular content</div>
+</div>
+
+<!-- Card with image -->
+<div class="card">
+  <img src="image.jpg" alt="Card image" class="card-image">
+  <div class="card-header">
+    <h3 class="card-title">Card with Image</h3>
+  </div>
+  <div class="card-body">Content</div>
+</div>
+
+<!-- Card with icon header -->
+<div class="card">
+  <div class="card-icon-header">
+    <i class="icon icon-star"></i>
+  </div>
+  <div class="card-body">
+    <h3 class="card-title">Icon Card</h3>
+    <p>Content below icon</p>
+  </div>
+</div>
+
+<!-- Centered card content -->
+<div class="card text-center">...</div>
+```
+
+### Card with Info Popover
+```html
+<div class="card">
+  <details class="popover-wrapper dropright card-info-popover">
+    <summary>
+      <div class="btn btn-sm btn-square">
+        <div class="icon icon-info"></div>
+      </div>
+    </summary>
+    <div class="popover-menu info">
+      <div class="popover-title">Popover title</div>
+      <div class="popover-content">Popover content...</div>
+    </div>
+  </details>
+  <div class="card-header">
+    <h3 class="card-title">Card with info popover</h3>
+  </div>
+  <div class="card-body">Content</div>
+</div>
+```
+
+### Card Layouts
+```html
+<!-- Grid of cards (responsive) -->
+<div class="grid-cards">
+  <div class="card">...</div>
+  <div class="card">...</div>
+  <div class="card">...</div>
+</div>
+
+<!-- List of cards (horizontal wrap) -->
+<div class="list-cards">
+  <div class="card card-sm">...</div>
+  <div class="card card-sm">...</div>
+</div>
+
+<!-- Achievements grid (6 columns on 2xl screens) -->
+<div class="grid-cards-achievements">
+  <div class="card">...</div>
+</div>
+```
+
+---
+
+## Form Components
+
+### Form Group Structure
+```html
+<div class="form-group">
+  <label class="form-label">Email Address</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+</div>
+
+<!-- Optional field -->
+<div class="form-group">
+  <label class="form-label optional">Phone Number</label>
+  <input type="tel" class="form-control">
+</div>
+```
+
+### Form Inputs
+```html
+<!-- Text input -->
+<input type="text" class="form-control" placeholder="Enter text">
+
+<!-- Textarea -->
+<textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
+
+<!-- Disabled input -->
+<input type="text" class="form-control" disabled value="Read only">
+
+<!-- With validation error -->
+<div class="form-group">
+  <label class="form-label">Username</label>
+  <div class="field_with_errors">
+    <input type="text" class="form-control">
+  </div>
+  <div class="form-hint error">Username is required</div>
+</div>
+```
+
+### Form Hints
+```html
+<!-- Standard hint -->
+<div class="form-hint">This field is optional</div>
+
+<!-- Error hint -->
+<div class="form-hint error">Please enter a valid email</div>
+```
+
+### Form Grid Layout
+```html
+<!-- Standard form grid -->
+<div class="form-grid">
+  <div class="form-group">...</div>
+  <div class="form-group">...</div>
+</div>
+
+<!-- Single column form grid -->
+<div class="form-grid single">
+  <div class="form-group">...</div>
+</div>
+
+<!-- Narrow single column -->
+<div class="form-grid single narrow">
+  <div class="form-group">...</div>
+</div>
+```
+
+### Checkboxes
+```html
+<!-- Default checkbox -->
+<div class="form-check">
+  <input id="check1" type="checkbox">
+  <label for="check1">Checkbox</label>
+</div>
+
+<!-- Checked checkbox -->
+<div class="form-check">
+  <input id="check2" type="checkbox" checked="true">
+  <label for="check2">Checked</label>
+</div>
+
+<!-- Small checkbox -->
+<div class="form-check sm">
+  <input id="check3" type="checkbox">
+  <label for="check3">Checkbox SM</label>
+</div>
+
+<!-- Disabled checkbox -->
+<div class="form-check disabled">
+  <input id="check4" type="checkbox" disabled="true">
+  <label for="check4">Disabled</label>
+</div>
+
+<!-- With error state -->
+<div class="form-check">
+  <div class="field_with_errors">
+    <input id="check5" type="checkbox">
+  </div>
+  <label for="check5">Checkbox with error</label>
+</div>
+
+<!-- Inverted (for dark backgrounds) -->
+<div class="form-check inverted">
+  <input id="check6" type="checkbox">
+  <label for="check6">Inverted</label>
+</div>
+```
+
+### Radio Buttons
+```html
+<!-- Radio group -->
+<div class="form-radio">
+  <input id="radio1" type="radio" name="radio-group" value="1" checked="true">
+  <label for="radio1">Option 1</label>
+</div>
+<div class="form-radio">
+  <input id="radio2" type="radio" name="radio-group" value="2">
+  <label for="radio2">Option 2</label>
+</div>
+<div class="form-radio">
+  <input id="radio3" type="radio" name="radio-group" value="3">
+  <label for="radio3">Option 3</label>
+</div>
+
+<!-- Small radio -->
+<div class="form-radio sm">
+  <input id="radio4" type="radio" name="radio-sm" value="1">
+  <label for="radio4">SM Option 1</label>
+</div>
+
+<!-- Disabled radio -->
+<div class="form-radio disabled">
+  <input id="radio5" type="radio" name="radio-group" value="4" disabled="true">
+  <label for="radio5">Disabled</label>
+</div>
+
+<!-- Inverted (for dark backgrounds) -->
+<div class="form-radio inverted">
+  <input id="radio6" type="radio" name="radio-inv" value="1">
+  <label for="radio6">Inverted Option</label>
+</div>
+```
+
+### Toggle Switch
+```html
+<!-- Toggle switch -->
+<div class="form-toggle">
+  <label class="toggle-switch" for="toggle1">
+    <input id="toggle1" type="checkbox">
+    <span class="slider"></span>
+  </label>
+  <label class="toggle-switch-label" for="toggle1">Toggle Switch</label>
+</div>
+
+<!-- Active toggle -->
+<div class="form-toggle">
+  <label class="toggle-switch" for="toggle2">
+    <input id="toggle2" type="checkbox" checked="true">
+    <span class="slider"></span>
+  </label>
+  <label class="toggle-switch-label" for="toggle2">Active Toggle</label>
+</div>
+
+<!-- Small toggle -->
+<div class="form-toggle sm">
+  <label class="toggle-switch" for="toggle3">
+    <input id="toggle3" type="checkbox">
+    <span class="slider"></span>
+  </label>
+  <label class="toggle-switch-label" for="toggle3">Toggle SM</label>
+</div>
+
+<!-- Disabled toggle -->
+<div class="form-toggle">
+  <label class="toggle-switch disabled" for="toggle4">
+    <input id="toggle4" type="checkbox" disabled="disabled">
+    <span class="slider"></span>
+  </label>
+  <label class="toggle-switch-label" for="toggle4">Disabled</label>
+</div>
+```
+
+### Select Inputs
+
+#### Native Select
+```html
+<select class="form-control">
+  <option>Choose an option</option>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</select>
+```
+
+#### Select2 Enhanced Select
+```html
+<div class="form-group form-select">
+  <label class="form-label">Select</label>
+  <select class="select2" placeholder="Please select">
+    <option value="Option 1">Option 1</option>
+    <option value="Option 2">Option 2</option>
+    <option value="Option 3">Option 3</option>
+  </select>
+</div>
+
+<!-- Multi-select -->
+<div class="form-group multi-select">
+  <label class="form-label">Select multiple</label>
+  <select class="select2" multiple="true" placeholder="Please select">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+  </select>
+</div>
+
+<!-- With optgroup -->
+<div class="form-group form-select">
+  <label class="form-label">Optgroup select</label>
+  <select class="select2" placeholder="Please select">
+    <optgroup label="Category Label">
+      <option>Option 1</option>
+      <option>Option 2</option>
+    </optgroup>
+  </select>
+</div>
+```
+
+#### Tom Select Enhanced Select
+```html
+<div class="form-group form-select">
+  <label class="form-label">Select</label>
+  <select class="tom-select" placeholder="Please select">
+    <option value=""></option>
+    <option value="Option 1">Option 1</option>
+    <option value="Option 2">Option 2</option>
+  </select>
+</div>
+
+<!-- Multi-select -->
+<div class="form-group multi-select">
+  <label class="form-label">Select multiple</label>
+  <select class="tom-select-multi" multiple="true" placeholder="Please select">
+    <option>Option 1</option>
+    <option>Option 2</option>
+  </select>
+</div>
+```
+
+### Date & Time Picker (Flatpickr)
+```html
+<!-- Date picker -->
+<div class="form-group">
+  <label class="form-label">Select Date</label>
+  <div class="form-date">
+    <input class="form-control flatpickr" type="date" placeholder="Choose a date">
+  </div>
+</div>
+
+<!-- Date and time picker -->
+<div class="form-group">
+  <label class="form-label">Select Date & Time</label>
+  <div class="form-date">
+    <input class="form-control flatpickr-time" type="datetime-local" placeholder="Choose date and time">
+  </div>
+</div>
+```
+
+### Selectable Tokens
+```html
+<ul class="list-inline flex">
+  <li class="selectable-token">
+    <input id="token1" type="checkbox" checked="true">
+    <label for="token1">
+      <span class="icon icon-chrome mr-icon-spacing"></span>
+      Selectable token
+    </label>
+  </li>
+  <li class="selectable-token">
+    <input id="token2" type="checkbox">
+    <label for="token2">
+      <span class="icon icon-firefox mr-icon-spacing"></span>
+      Another token
+    </label>
+  </li>
+  <li class="selectable-token disabled">
+    <input id="token3" type="checkbox" disabled="true">
+    <label for="token3">Disabled token</label>
+  </li>
+</ul>
+
+<!-- Inverted (for dark backgrounds) -->
+<li class="selectable-token inverted">...</li>
+```
+
+### Rating Scale
+```html
+<div class="rating-scale">
+  <!-- Rating scale component -->
+</div>
+```
+
+### Form with Addon
+```html
+<div class="form-group with-addon">
+  <label class="form-label">Price</label>
+  <input type="number" class="form-control" placeholder="0.00">
+  <div class="form-addon">USD</div>
+</div>
+```
+
+### Inverted Forms (for dark backgrounds)
+```html
+<div class="form-group inverted">
+  <label class="form-label">Email</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+  <div class="form-hint">We'll never share your email</div>
+</div>
+```
+
+---
+
+## Overlay Components (Modal & Drawer)
+
+### Modal Component
+
+Modals are used to display content in a layer above the main content. They can contain forms, confirmations, and other interactive content.
+
+#### Basic Modal
+```html
+<details class="modal-wrapper">
+  <summary class="modal-trigger">
+    <div class="btn btn-primary">Open modal</div>
+  </summary>
+  <div class="modal-container">
+    <div class="modal">
+      <div class="modal-header">
+        <h2 class="modal-title">Modal Title</h2>
+        <div class="btn btn-square close-btn">
+          <div class="icon icon-cross"></div>
+        </div>
+      </div>
+      <div class="modal-content">
+        <p>Modal content goes here...</p>
+        <div class="form-grid">
+          <div class="form-group">
+            <label class="form-label">Input</label>
+            <input class="form-control" type="text" placeholder="">
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a class="btn btn-primary" href="">Primary</a>
+        <a class="btn btn-secondary close-btn" href="">Close</a>
+      </div>
+    </div>
+  </div>
+</details>
+```
+
+#### Modal Sizes
+```html
+<!-- Large modal -->
+<div class="modal modal-lg">...</div>
+
+<!-- Small modal (confirmation dialog) -->
+<div class="modal modal-sm">...</div>
+```
+
+#### Modal with Disabled Background Close
+```html
+<!-- Prevents closing when clicking outside the modal -->
+<details class="modal-wrapper fade-close-disabled">
+  <summary class="modal-trigger">
+    <div class="btn btn-primary">Open modal</div>
+  </summary>
+  <div class="modal-container">
+    <div class="modal">...</div>
+  </div>
+</details>
+```
+
+### Drawer Component
+
+Drawers are side panels that slide in from the edge of the screen. They're an alternative to modals for displaying additional content.
+
+#### Basic Drawer
+```html
+<details class="drawer-wrapper">
+  <summary class="drawer-trigger">
+    <div class="btn btn-primary">Open Drawer</div>
+  </summary>
+  <div class="drawer">
+    <div class="drawer-header">
+      <div class="drawer-title">Drawer title</div>
+    </div>
+    <div class="drawer-content">
+      <p>Drawer content goes here...</p>
+    </div>
+    <div class="drawer-footer">
+      <div class="btn btn-primary">Primary</div>
+      <div class="btn btn-secondary">Secondary</div>
+    </div>
+  </div>
+</details>
+```
+
+#### Drawer with Close Button
+```html
+<details class="drawer-wrapper">
+  <summary class="drawer-trigger">
+    <div class="btn btn-primary">Open Drawer</div>
+    <button class="btn btn-square close-btn">
+      <div class="icon icon-cross"></div>
+    </button>
+  </summary>
+  <div class="drawer">
+    <!-- Drawer content -->
+    <div class="drawer-footer">
+      <div class="btn btn-primary">Primary</div>
+      <div class="btn btn-secondary close-btn">Close</div>
+    </div>
+  </div>
+</details>
+```
+
+#### Filter Drawer
+```html
+<details class="drawer-wrapper">
+  <summary class="drawer-trigger">
+    <div class="btn btn-secondary">
+      <span class="icon icon-filter mr-icon-spacing"></span>
+      Filter
+    </div>
+  </summary>
+  <div class="drawer drawer-filter">
+    <!-- Filter form content -->
+  </div>
+</details>
+```
+
+---
+
+## Page Layout Components
+
+### Page Header Component
+
+A responsive grid layout component for dashboard and session management pages.
+
+#### Basic Page Header
+```html
+<div class="page-header">
+  <div class="card page-maincard p-card-padding">
+    <h1 class="text-card-header">Session Details</h1>
+    <h2 class="page-session-title">Test Session Title</h2>
+
+    <dl class="page-meta-info">
+      <dt class="label">Created on:</dt>
+      <dd>2025-10-21 10:45 AM</dd>
+
+      <dt class="label">Last test:</dt>
+      <dd>2025-10-21 11:30 AM</dd>
+
+      <dt class="label">ID:</dt>
+      <dd>321456987</dd>
+
+      <dt class="label">URL:</dt>
+      <dd class="row-testsuite">
+        <a href="#" class="label">Test Suite Name</a>
+      </dd>
+
+      <dt class="label">Status:</dt>
+      <dd class="text-white">Active</dd>
+    </dl>
+  </div>
+
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-main">
+      <span class="icon icon-test-running-xl"></span>
+      Start Test
+    </a>
+  </div>
+</div>
+```
+
+#### Page Header with Chart
+```html
+<div class="page-header with-chart">
+  <div class="card page-maincard p-card-padding">
+    <!-- Main card content -->
+  </div>
+
+  <div class="page-chart card p-card-padding">
+    <div class="echarts-container" id="chart"></div>
+  </div>
+
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-main">
+      <span class="icon icon-review-xl"></span>
+      Show Report
+    </a>
+    <a href="#" class="btn btn-secondary">Re-run All Checks</a>
+  </div>
+</div>
+```
+
+#### Page Header with Forms
+```html
+<div class="page-header">
+  <div class="card page-maincard p-card-padding">
+    <div class="form-grid">
+      <div class="form-group">
+        <label class="form-label">Test Name</label>
+        <input type="text" class="form-control" placeholder="Enter test name">
+      </div>
+      <div class="form-group">
+        <label class="form-label">URL for Testing</label>
+        <input type="url" class="form-control" placeholder="https://example.com">
+      </div>
+    </div>
+  </div>
+
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-xl">
+      <span class="icon icon-test-running-xl"></span>
+      Save and Run Test
+    </a>
+    <a href="#" class="btn btn-secondary">Save Draft</a>
+    <a href="#" class="btn btn-secondary">Cancel</a>
+  </div>
+</div>
+```
+
+**Key Classes:**
+- `.page-header` - Main grid container with responsive columns
+- `.page-maincard` - Primary content card (spans 2-4 columns based on screen size)
+- `.page-actions` - Action buttons column (vertical on md+, horizontal on mobile)
+- `.page-session-title` - Session/test title with bottom margin
+- `.page-meta-info` - Metadata grid (2 cols mobile, 6 cols xl)
+- `.row-testsuite` - Special metadata row that spans 5 columns on xl
+- `.with-chart` - Modifier for including chart column
+- `.btn-main` - Primary action button that grows to fill available space
+
+---
+
+## Navigation Components
+
+### Header Navigation
+```html
+<header class="header">
+  <div class="header-logo">
+    <img src="logo.svg" alt="Logo">
+  </div>
+  <nav class="header-nav">
+    <a href="#" class="nav-link">Dashboard</a>
+    <a href="#" class="nav-link active">Projects</a>
+    <a href="#" class="nav-link">Settings</a>
+  </nav>
+  <div class="header-actions">
+    <button class="btn btn-sm btn-primary">New Project</button>
+  </div>
+</header>
+```
+
+### Sidebar Navigation
+```html
+<aside class="sidebar">
+  <nav class="sidebar-nav">
+    <a href="#" class="sidebar-link active">
+      <i class="icon icon-home"></i>
+      Dashboard
+    </a>
+    <a href="#" class="sidebar-link">
+      <i class="icon icon-folder"></i>
+      Projects
+    </a>
+    <a href="#" class="sidebar-link">
+      <i class="icon icon-settings"></i>
+      Settings
+    </a>
+  </nav>
+</aside>
+```
+
+### Tab Navigation
+```html
+<nav class="nav-tabs">
+  <div class="navlink active" href="">Navlink active</div>
+  <div class="navlink" href="">Navlink</div>
+  <div class="navlink" href="">Navlink</div>
+  <div class="navlink" href="">
+    Counter
+    <div class="counter">99</div>
+  </div>
+  <div class="navlink disabled" href="">Disabled</div>
+</nav>
+```
+
+### Tab Navigation Variants
+```html
+<!-- Pills style -->
+<nav class="nav-tabs pills">...</nav>
+
+<!-- Small tabs -->
+<nav class="nav-tabs sm">...</nav>
+
+<!-- Tabs with actions -->
+<nav class="nav-tabs with-actions">
+  <div class="navlink active">Tab 1</div>
+  <div class="navlink">Tab 2</div>
+  <div class="tab-actions">
+    <button class="btn btn-sm btn-primary">Action</button>
+  </div>
+</nav>
+```
+
+### Radio Tabs
+```html
+<div class="radio-tabs">
+  <input type="radio" id="tab1" name="tabs" checked>
+  <label for="tab1">Tab 1</label>
+  <input type="radio" id="tab2" name="tabs">
+  <label for="tab2">Tab 2</label>
+</div>
+```
+
+### Product-Specific Headers
+```html
+<!-- Customer portal header -->
+<header class="header customer_header">...</header>
+
+<!-- Tester portal header -->
+<header class="header tester_header">...</header>
+
+<!-- Manager portal header -->
+<header class="header manager_header">...</header>
+
+<!-- AgenticQA header -->
+<header class="header agenticqa_header">...</header>
+```
+
+---
+
+## Feedback Components
+
+### Alerts
+
+Alerts notify users about important information or actions that require their attention.
+
+```html
+<!-- Default alert -->
+<div class="alert">
+  <div class="alert-message">Alert message</div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+
+<!-- Alert with button -->
+<div class="alert">
+  <div class="alert-message">
+    Alert with a button
+    <button class="btn btn-white">Alert action</button>
+  </div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+
+<!-- Info alert -->
+<div class="alert alert-info">
+  <div class="alert-message">Info Alert</div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+
+<!-- Success alert -->
+<div class="alert alert-success">
+  <div class="alert-message">Success Alert</div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+
+<!-- Warning alert -->
+<div class="alert alert-warning">
+  <div class="alert-message">Warning Alert</div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+
+<!-- Error alert -->
+<div class="alert alert-error">
+  <div class="alert-message">Error Alert</div>
+  <button class="close">
+    <div class="icon icon-cross"></div>
+  </button>
+</div>
+```
+
+### Notifications
+
+Notifications inform users about important updates. They can replace alerts and support various styles.
+
+```html
+<!-- Notification container -->
+<div class="notification-container">
+  <!-- Basic notification -->
+  <a class="notification" href="">
+    <div class="notification-title">Linked Info Notification</div>
+    <div class="notification-content">
+      <div class="notification-message">You have 60 min left to finish this task.</div>
+    </div>
+    <button class="btn btn-close">
+      <span class="icon icon-cross"></span>
+    </button>
+  </a>
+
+  <!-- Notification with icon -->
+  <a class="notification" href="">
+    <div class="notification-badge">
+      <div class="icon icon-bug-fix-confirmation-lg"></div>
+    </div>
+    <div class="notification-content">
+      <div class="notification-title">Notification with icon</div>
+      <div class="notification-message">Message content...</div>
+    </div>
+    <button class="btn btn-close">
+      <span class="icon icon-cross"></span>
+    </button>
+  </a>
+
+  <!-- Success notification -->
+  <a class="notification success" href="">...</a>
+
+  <!-- Warning notification -->
+  <a class="notification warning" href="">...</a>
+
+  <!-- Error notification -->
+  <a class="notification error" href="">...</a>
+
+  <!-- Notification with badge image -->
+  <a class="notification badges" href="">
+    <div class="notification-badge">
+      <img src="/assets/images/badge.svg">
+    </div>
+    <div class="notification-title">New badge received</div>
+    <div class="notification-content">Badge description</div>
+    <button class="btn btn-close">
+      <span class="icon icon-cross"></span>
+    </button>
+  </a>
+
+  <!-- Notification with dedicated button -->
+  <div class="notification">
+    <div class="notification-title">Notification with button</div>
+    <div class="notification-content">
+      <div class="notification-message">Message content...</div>
+      <a class="btn btn-sm btn-inverted" href="">Go to page</a>
+    </div>
+    <button class="btn btn-close">
+      <span class="icon icon-cross"></span>
+    </button>
+  </div>
+</div>
+```
+
+### Progress Bars
+
+```html
+<!-- Default progress bar -->
+<progress class="progress" value="32" max="100">32%</progress>
+
+<!-- Success progress bar -->
+<progress class="progress progress-bar-success" value="32" max="100">32%</progress>
+
+<!-- Danger progress bar -->
+<progress class="progress progress-bar-danger" value="32" max="100">32%</progress>
+
+<!-- Test progress (special styling) -->
+<progress class="progress test-progress" value="32" max="100">32%</progress>
+
+<!-- Thick progress bar -->
+<progress class="progress thick" value="32" max="100">32%</progress>
+```
+
+### Loading Spinner
+```html
+<div class="loading-spinner">
+  <div class="spinner"></div>
+  <p class="loading-text">Loading...</p>
+</div>
+```
+
+### Empty State
+
+Empty state messages inform users when there is no data to display.
+
+```html
+<!-- Default empty state -->
+<div class="empty-state-message">
+  No items here yet.
+</div>
+
+<!-- Search empty state -->
+<div class="empty-state-message search">
+  No search results found.
+</div>
+
+<!-- Sad empty state -->
+<div class="empty-state-message sad">
+  Something went wrong.
+</div>
+
+<!-- Smiling empty state -->
+<div class="empty-state-message smile">
+  All caught up!
+</div>
+
+<!-- Deceased empty state -->
+<div class="empty-state-message deceased">
+  This item has been archived.
+</div>
+
+<!-- Chat empty state -->
+<div class="empty-state-message chat">
+  No messages yet.
+</div>
+
+<!-- Bell empty state -->
+<div class="empty-state-message bell">
+  No notifications.
+</div>
+
+<!-- Horizontal empty state -->
+<div class="empty-state-message horizontal">
+  Horizontal layout message.
+</div>
+```
+
+---
+
+## Data Display Components
+
+### Tables
+
+The design system includes several table variants with comprehensive dark mode support.
+
+#### Basic Table
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>
+        <span class="badge badge-success">Active</span>
+      </td>
+      <td>
+        <button class="btn btn-sm btn-ghost">Edit</button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### Table Variants
+```html
+<!-- Bordered table -->
+<table class="table table-bordered">...</table>
+
+<!-- Borderless table -->
+<table class="table table-borderless">...</table>
+
+<!-- Striped/alternating rows -->
+<table class="table table-striped">...</table>
+
+<!-- Compact table -->
+<table class="table table-sm">...</table>
+
+<!-- Standard table (key-value style) -->
+<table class="table-standard">
+  <tbody>
+    <tr>
+      <td>Property</td>
+      <td>Value</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### Cell Style Table (Status Tracking)
+```html
+<table class="table-cellstyle">
+  <thead>
+    <tr>
+      <th class="completed">Feature A</th>
+      <th class="inprogress">Feature B</th>
+      <th class="missing">Feature C</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="completed">Implementation done</td>
+      <td class="inprogress">Working on it...</td>
+      <td class="missing">Not started</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+**Status Classes:**
+- `.completed` - Green checkmark icon
+- `.inprogress` - Clock icon, gray background, italic text
+- `.missing` - Exclamation icon, transparent bg, disabled text
+
+#### Table Cell Utilities
+```html
+<!-- Fixed width cell -->
+<td class="td-fixed-width">Limited to 150px</td>
+
+<!-- Actions cell (right-aligned) -->
+<td class="action-cell">
+  <button class="btn btn-sm btn-ghost">Edit</button>
+</td>
+
+<!-- Title cell (max 500px) -->
+<td class="title">Long title...</td>
+
+<!-- Full width cell -->
+<td class="cell-full-width">Takes all space</td>
+
+<!-- Text wrapping -->
+<td class="wrap">This text will wrap</td>
+<td class="pre">Preserves   whitespace</td>
+```
+
+#### Interactive Table Rows
+```html
+<!-- Hover to highlight row -->
+<tr class="linked-row">...</tr>
+
+<!-- Hover to highlight cell -->
+<td class="linked-cell">...</td>
+
+<!-- Highlight parent row on child hover -->
+<tr>
+  <td>
+    <a class="highlight-parent-row" href="#">Link</a>
+  </td>
+</tr>
+```
+
+---
+
+## List Components
+
+### Basic List Items
+
+```html
+<div class="list-listitems">
+  <div class="listitem">
+    <div class="listitem-title">List item title</div>
+  </div>
+
+  <!-- List item with badge -->
+  <div class="listitem">
+    <div class="listitem-badge">
+      <div class="icon icon-feature"></div>
+    </div>
+    <div class="listitem-title">
+      List-item title
+      <div class="listitem-label">Label</div>
+    </div>
+    <div class="listitem-metrics">
+      <div class="listitem-metric">
+        <div class="icon icon-critical"></div>
+        99
+      </div>
+      <div class="listitem-metric">
+        <div class="icon icon-high"></div>
+        99
+      </div>
+    </div>
+  </div>
+
+  <!-- List item with actions -->
+  <div class="listitem">
+    <div class="listitem-title">List-item with action</div>
+    <div class="listitem-actions">
+      <a class="btn btn-primary">Action</a>
+    </div>
+  </div>
+
+  <!-- Linked list item -->
+  <a class="listitem" href="#">
+    <div class="listitem-title">
+      <span class="icon icon-user-story mr-icon-spacing"></span>
+      Linked list item
+    </div>
+  </a>
+</div>
+```
+
+### List Item Variants
+
+```html
+<!-- With action bar -->
+<div class="listitem with-actionbar">...</div>
+
+<!-- With footer -->
+<div class="listitem with-footer">
+  <div class="listitem-title">Title</div>
+  <div class="listitem-footer">Footer content</div>
+</div>
+
+<!-- Collapsable list item -->
+<details class="listitem collapsable">
+  <summary class="listitem-header">
+    <div class="listitem-title">Collapsable Title</div>
+    <div class="btn collapse-btn"></div>
+  </summary>
+  <div class="listitem-content">Hidden content</div>
+</details>
+
+<!-- Nested list items -->
+<div class="listitem nested">
+  <div class="listitem-title">Parent</div>
+  <div class="list-listitems nested">
+    <div class="listitem">Child 1</div>
+    <div class="listitem">Child 2</div>
+  </div>
+</div>
+
+<!-- Selectable list item -->
+<div class="listitem selectable">
+  <input type="checkbox" id="select1">
+  <label for="select1">
+    <div class="listitem-title">Selectable Item</div>
+  </label>
+</div>
+
+<!-- White background list item -->
+<div class="listitem white">...</div>
+```
+
+### User Item
+```html
+<div class="user-item">
+  <div class="user-item-avatar">
+    <img src="avatar.jpg" alt="User">
+  </div>
+  <div class="user-item-info">
+    <h4 class="user-item-name">Jane Smith</h4>
+    <p class="user-item-email">jane@example.com</p>
+  </div>
+  <div class="user-item-actions">
+    <button class="btn btn-sm btn-secondary">Message</button>
+  </div>
+</div>
+```
+
+### Task/Issue Item
+```html
+<div class="task-item">
+  <div class="task-item-header">
+    <h4 class="task-item-title">Fix login bug</h4>
+    <span class="badge badge-danger">High</span>
+  </div>
+  <div class="task-item-body">
+    <p class="task-item-description">Description</p>
+  </div>
+  <div class="task-item-footer">
+    <span class="task-item-meta">Due: Oct 25, 2025</span>
+  </div>
+</div>
+```
+
+---
+
+## Splitview Components
+
+Two-pane layout for list and detail views with responsive behavior.
+
+### Basic Splitview
+```html
+<div class="splitview">
+  <div class="splitview-list">
+    <div class="splitview-item">
+      <div class="splitview-item-title">Item 1</div>
+    </div>
+  </div>
+  <div class="splitview-detail">
+    <h2>Detail View</h2>
+    <p>Selected item details</p>
+  </div>
+</div>
+```
+
+### Splitview List Header
+```html
+<div class="splitview-list-header">
+  <div class="form-check sm">
+    <input type="checkbox">
+  </div>
+  <h3 class="splitview-list-header-title">18 Bugs</h3>
+  <div class="splitview-list-header-actions">
+    <details class="dropdown-actions dropright">
+      <summary>
+        <a class="link-with-icon" href="">
+          <div class="icon icon-sort-descending"></div>
+          Severity (desc)
+        </a>
+      </summary>
+      <div class="popover-menu">
+        <a class="popover-action" href="#">Sort option 1</a>
+        <a class="popover-action" href="#">Sort option 2</a>
+      </div>
+    </details>
+    <a class="linked-icon" href="">
+      <div class="icon icon-filter"></div>
+    </a>
+    <a class="linked-icon" href="">
+      <div class="icon icon-search"></div>
+    </a>
+  </div>
+</div>
+```
+
+### Splitview Item
+```html
+<div class="splitview-list">
+  <div class="splitview-item">
+    <div class="splitview-item-checkbox form-check sm">
+      <input type="checkbox">
+    </div>
+    <div class="splitview-item-icon icon icon-critical"></div>
+    <div class="splitview-item-text">
+      <div class="splitview-item-title">Item title</div>
+      <div class="splitview-item-metainfo">
+        #123321321 | Product Detail Page
+      </div>
+    </div>
+    <div class="splitview-item-status">
+      <div class="status-icon status-submitted"></div>
+      <div class="status-icon status-manager-approved"></div>
+    </div>
+  </div>
+
+  <!-- Selected state -->
+  <div class="splitview-item selected">...</div>
+</div>
+```
+
+### Splitview with Status Groups
+```html
+<div class="splitview">
+  <div class="splitview-list">
+    <details class="splitview-group" open>
+      <summary class="splitview-group-header">
+        <h3 class="splitview-group-title">Test Group 1</h3>
+        <i class="icon icon-chevron-down"></i>
+      </summary>
+
+      <div class="splitview-group-status">
+        <div class="status-stepper">
+          <div class="status-step completed">
+            <i class="icon icon-check-thick-centered"></i>
+            3 done
+          </div>
+          <div class="status-step active">
+            <i class="icon icon-sync"></i>
+            Executing
+          </div>
+          <div class="status-step">
+            + 3 to do
+          </div>
+        </div>
+      </div>
+
+      <div class="splitview-item">...</div>
+      <div class="splitview-item">...</div>
+
+      <button class="splitview-btn">
+        Show 5 dismissed items
+      </button>
+    </details>
+  </div>
+</div>
+```
+
+### Collapsable Splitview Item
+```html
+<details class="splitview-item collapsable">
+  <summary class="splitview-item-header">
+    <div class="splitview-item-title">Collapsable Item</div>
+    <div class="btn collapse-btn"></div>
+  </summary>
+  <div class="splitview-item-content">
+    Expanded content
+  </div>
+</details>
+```
+
+---
+
+## Chat Components
+
+Comprehensive chat interface components with full dark mode support.
+
+### Chat Message List
+```html
+<div class="list-chat-messages">
+  <div class="chat-message-item">
+    <img src="avatar.jpg" alt="User" class="chat-avatar">
+
+    <div class="chat-header">
+      <span class="chat-title">
+        <span class="chat-author">John Doe</span>
+      </span>
+      <span class="chat-time">2 hours ago</span>
+    </div>
+
+    <div class="chat-message">
+      <p>This is a chat message with some content.</p>
+    </div>
+
+    <div class="chat-actions">
+      <button class="btn btn-ghost btn-sm">
+        <i class="icon icon-reply"></i>
+      </button>
+    </div>
+  </div>
+</div>
+```
+
+### Full Width Chat
+```html
+<div class="list-chat-messages full-width">
+  <div class="chat-message-item">...</div>
+</div>
+```
+
+### Chat Message Variants
+
+```html
+<!-- Announcement message -->
+<div class="chat-message">
+  <div class="message-banner announcement">
+    System Announcement: Maintenance scheduled
+  </div>
+  <p>The system will be down for maintenance on Saturday.</p>
+</div>
+
+<!-- Mentioned message -->
+<div class="chat-message">
+  <div class="message-banner mentioned">
+    <span class="text-mentioned">@YourName</span> mentioned you
+  </div>
+  <p>Hey, can you take a look at this?</p>
+</div>
+```
+
+### Chat Window Component
+```html
+<div class="chat-window">
+  <div class="chat-window-header">
+    <h3>Chat</h3>
+  </div>
+  <div class="chat-window-messages">
+    <div class="list-chat-messages">
+      <!-- Messages -->
+    </div>
+  </div>
+  <div class="chat-window-input">
+    <textarea class="form-control" placeholder="Type a message..."></textarea>
+    <button class="btn btn-primary">Send</button>
+  </div>
+</div>
+```
+
+---
+
+## Chart Components
+
+The design system integrates ECharts for data visualization with design system colors.
+
+### Chart Container
+```html
+<div class="echarts-container" id="my-chart"></div>
+```
+
+### Chart Types
+
+#### Horizontal Bar Chart
+```javascript
+import { createChartHorizontal } from './modules/echarts_horizontal';
+
+createChartHorizontal(
+  "element-id",      // Target element ID
+  dataArray,         // Data labels array
+  seriesArray,       // Series configuration
+  showLegend,        // Boolean: show legend
+  labelColor,        // Color for labels
+  valueColor         // Color for values
+);
+```
+
+#### Donut Chart
+```javascript
+import { createChartDonut } from './modules/echarts_donut';
+
+createChartDonut(
+  "element-id",      // Target element ID
+  dataArray,         // Data array with values
+  valueText,         // Center value text
+  labelText,         // Center label text
+  showLegend,        // Boolean: show legend
+  labelColor,        // Color for labels
+  valueColor         // Color for values
+);
+```
+
+#### Vertical Bar Chart
+```javascript
+import { createChartVertical } from './modules/echarts_vertical';
+```
+
+#### Line Chart
+```javascript
+import { createChartLine } from './modules/echarts_line';
+```
+
+#### Area Chart
+```javascript
+import { createChartArea } from './modules/echarts_area';
+```
+
+#### Gauge Chart
+```javascript
+import { createChartGauge } from './modules/echarts_gauge';
+```
+
+### Chart Colors
+```javascript
+// Available chart colors
+export const colorCritical = '#FF3131';
+export const colorHigh = '#d8ce0d';
+export const colorLow = '#9fa2a8';
+export const colorVisual = '#f48d21';
+export const colorContent = '#326dd1';
+export const colorUX = '#263340';
+export const colorSuccess = '#8cbd24';
+export const colorDanger = '#FF3131';
+export const colorNeutral = '#e6e6e6';
+export const colorInfo = '#326dd1';
+export const colorBlueLight = '#21bef4';
+```
+
+### Chart Data Examples
+```javascript
+// Bug distribution data
+export let dataBugs = [
+  { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+  { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+  { value: 19, name: 'Low', itemStyle: {color: colorLow}},
+];
+
+// Test case status
+export let dataTestCases = [
+  { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
+  { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
+  { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
+];
+```
+
+---
+
+## Status & Progress Components
+
+### Status Stepper
+
+A horizontal stepper component for visualizing multi-step processes.
+
+#### Icon-based Status Stepper
+```html
+<div class="status-stepper">
+  <div class="status-step completed">
+    <div class="icon icon-check-thick-centered"></div>
+    3 done
+  </div>
+  <div class="status-step active">
+    <div class="icon icon-sync"></div>
+    Executing checks
+  </div>
+  <div class="status-step">
+    + 3 to do
+  </div>
+</div>
+```
+
+#### Counter-based Status Stepper
+```html
+<div class="status-stepper">
+  <div class="status-step completed">
+    <div class="counter">99</div>
+    Completed
+  </div>
+  <div class="status-step active">
+    <div class="counter">12</div>
+    Active
+  </div>
+  <div class="status-step">
+    <div class="counter">5</div>
+    Pending
+  </div>
+</div>
+```
+
+**Component Classes:**
+- `.status-stepper` - Container (flex row, items-stretch, full width)
+- `.status-step` - Individual step (flex row, centered, rounded, px-md py-xs, bg-black)
+- `.status-step.active` - Active step (grow-1, white text, bg-gray-750)
+- `.status-step.completed` - Completed state (can combine with custom styling)
+- `.status-step .icon` - Icon within step (mr-xs, text-label-color)
+- `.status-step .counter` - Numeric counter (pr-xs, text-lg, font-bold)
+
+---
+
+## Utility Components
+
+### Tags
+```html
+<div class="list-tags">
+  <!-- Basic tag -->
+  <div class="tag">Tag</div>
+
+  <!-- Small tag -->
+  <div class="tag sm">Tag sm</div>
+
+  <!-- Focus group tag -->
+  <div class="tag focus-group">Focus-group</div>
+
+  <!-- Verified tag -->
+  <div class="tag teamleader-verified">
+    <div class="icon icon-verify-check mr-xxs"></div>
+    TL
+  </div>
+
+  <!-- Status tags -->
+  <div class="tag success">
+    <div class="icon icon-check-circle"></div>
+    Success
+  </div>
+  <div class="tag danger">
+    <div class="icon icon-cross-circle"></div>
+    Danger
+  </div>
+  <div class="tag pending">
+    <div class="icon icon-sync"></div>
+    Pending
+  </div>
+</div>
+```
+
+### Tag with Popover
+```html
+<details class="popover-wrapper">
+  <summary>
+    <div class="tag popover-tag">
+      <div class="icon icon-clock"></div>
+      Popover-tag
+    </div>
+  </summary>
+  <div class="popover-menu info">
+    <div class="popover-title">Popover title</div>
+    <div class="popover-content">Content...</div>
+    <div class="popover-actions">
+      <div class="btn btn-sm btn-inverted">Action</div>
+    </div>
+  </div>
+</details>
+
+<!-- Light popover tag -->
+<div class="tag popover-tag light">...</div>
+
+<!-- Colored popover tags -->
+<div class="tag popover-tag bg-info text-white">...</div>
+<div class="tag popover-tag bg-black text-white">...</div>
+<div class="tag popover-tag bg-danger text-white">...</div>
+```
+
+### Info Popover
+```html
+<details class="popover-wrapper">
+  <summary>
+    <div class="btn btn-sm btn-square">
+      <div class="icon icon-info"></div>
+    </div>
+  </summary>
+  <div class="popover-menu info">
+    <div class="popover-title">Popover title</div>
+    <div class="popover-content">Popover content...</div>
+    <div class="text-with-icon mt-xs">
+      <div class="icon icon-lock text-disabled mr-icon-spacing"></div>
+      <div class="text-sm">0/100 Completed</div>
+    </div>
+    <div class="text-with-icon mt-xs">
+      <div class="icon icon-unlock text-success mr-icon-spacing"></div>
+      <div class="text-sm">50/50 Done</div>
+    </div>
+    <div class="popover-actions">
+      <div class="btn btn-sm btn-inverted">Action</div>
+    </div>
+  </div>
+</details>
+```
+
+### Pagination
+```html
+<nav class="pagy-bootstrap nav">
+  <ul class="pagination">
+    <li class="page-item prev">
+      <a class="page-link" href="#">&lt;</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item active">
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item next disabled">
+      <a class="page-link" href="#">&gt;</a>
+    </li>
+  </ul>
+</nav>
+```
+
+### Badges
+```html
+<span class="badge badge-primary">New</span>
+<span class="badge badge-success">Active</span>
+<span class="badge badge-danger">Urgent</span>
+<span class="badge badge-warning">Pending</span>
+<span class="badge badge-info">Info</span>
+```
+
+### Icon Sizes
+```html
+<i class="icon icon-star text-icon-xxxs"></i>  <!-- 10px -->
+<i class="icon icon-star text-icon-xxs"></i>   <!-- 0.625rem -->
+<i class="icon icon-star text-icon-xs"></i>    <!-- 16px -->
+<i class="icon icon-star text-icon-sm"></i>    <!-- 18px -->
+<i class="icon icon-star text-icon"></i>       <!-- 20px - default -->
+<i class="icon icon-star text-icon-lg"></i>    <!-- 40px -->
+<i class="icon icon-star text-icon-xl"></i>    <!-- 60px -->
+<i class="icon icon-star text-icon-xxl"></i>   <!-- 90px -->
+```
+
+### Text with Icon
+```html
+<div class="text-with-icon">
+  <div class="icon icon-check text-success mr-icon-spacing"></div>
+  <span>Text with icon</span>
+</div>
+
+<div class="link-with-icon">
+  <div class="icon icon-external-link mr-icon-spacing"></div>
+  <a href="#">Link with icon</a>
+</div>
+```
+
+### Description List
+```html
+<dl class="description-list">
+  <dt>Term</dt>
+  <dd>Definition</dd>
+  <dt>Another term</dt>
+  <dd>Another definition</dd>
+</dl>
+
+<!-- Inline description list -->
+<dl class="list-inline">
+  <dt>Property</dt>
+  <dd>Value</dd>
+</dl>
+```
+
+---
+
+## AgenticQA Components
+
+Product-specific components for the AgenticQA platform.
+
+### AgenticQA Page Header
+```html
+<div class="page-header">
+  <div class="card page-maincard p-card-padding">
+    <h1 class="text-card-header">Session details</h1>
+    <h2 class="page-session-title">Test Session title</h2>
+    <dl class="page-meta-info">
+      <dt class="label">Created on:</dt>
+      <dd>2025-07-23 19:11</dd>
+      <dt class="label">Status:</dt>
+      <dd class="text-white">Running</dd>
+    </dl>
+  </div>
+  <div class="page-actions">
+    <a class="btn btn-primary btn-main" href="">
+      <span class="icon icon-test-running-xl"></span>
+      Start test
+    </a>
+  </div>
+</div>
+```
+
+### AgenticQA Status Stepper
+```html
+<div class="status-stepper">
+  <div class="status-step completed">
+    <div class="icon icon-check-thick-centered"></div>
+    3 done
+  </div>
+  <div class="status-step active">
+    <div class="icon icon-sync"></div>
+    Executing checks
+  </div>
+  <div class="status-step">
+    + 3 to do
+  </div>
+</div>
+```
+
+### AgenticQA List Item
+```html
+<div class="listitem agenticqa">
+  <!-- AgenticQA-specific list item styling -->
+</div>
+```
+
+### AgenticQA Header
+```html
+<header class="header agenticqa_header">
+  <!-- AgenticQA navigation -->
+</header>
+```
+
+---
+
+## Dark Mode
+
+The design system includes comprehensive dark mode support with customized theme variables.
+
+### Dark Mode Color Palette
+```css
+.dark {
+  /* Core Colors */
+  --color-appbody: #181818;
+  --color-appbody-textcolor: #f2f2f2;
+  --color-header: #1d1d1d;
+  --color-card: #1D1D1D;
+  --color-listitem: #262626;
+
+  /* Interactive Colors */
+  --color-primary: #78eac1;
+  --color-link: #8988eb;
+  --color-link-hover: #7954ff;
+
+  /* Status Colors */
+  --color-success: #33BA9E;
+  --color-danger: #FF3131;
+  --color-bordercolor: #2E2E2E;
+
+  /* Spacing & Style Adjustments */
+  --radius: 12px;              /* Increased from 5px */
+  --spacing-grid-gutter: 40px; /* Increased from 20px */
+  --card-padding: 30px;
+  --fontsize-card-header: 1.125rem;
+  --font-size-label: 0.75rem;
+}
+```
+
+### Using Dark Mode
+```html
+<!-- Apply dark class to container -->
+<div class="dark">
+  <div class="bg-appbody text-appbody-textcolor">
+    <div class="card p-card-padding">
+      <p>Content with dark mode styling</p>
+    </div>
+  </div>
+</div>
+
+<!-- Conditional dark mode classes -->
+<div class="bg-card dark:bg-listitem">
+  <!-- Light mode: #e6e6e6, Dark mode: #262626 -->
+</div>
+```
+
+### Dark Mode Differences
+- Border radius: `5px` → `12px`
+- Grid gutters: `20px` → `40px`
+- Table cell padding: `py-xs` → `py-md`
+- Chat layout: 3 columns → 2 columns (actions hidden)
+- Link colors: Petrol → Purple, Hover: Blue → Dark Purple
+
+---
+
+## Best Practices for AI Agents
+
+### When Building Pages:
+
+1. **Start with Layout Structure**
+   - Use semantic HTML5 elements
+   - Apply layout classes: `header`, `sidebar`, `main`, `section`
+   - Use grid or flex utilities for responsive layouts
+   - Consider using `.page-header` for dashboard pages
+
+2. **Component Selection**
+   - Choose the appropriate component variant for the use case
+   - Use semantic button/alert types (primary, success, danger, etc.)
+   - Apply consistent spacing using the spacing scale
+
+3. **Responsive Design**
+   - Use responsive grid classes: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+   - Apply responsive utilities: `hidden md:block`, `flex-col md:flex-row`
+   - Consider mobile-first approach
+
+4. **Accessibility**
+   - Include proper ARIA labels
+   - Use semantic HTML elements
+   - Ensure proper heading hierarchy
+   - Include alt text for images
+   - Use `<label>` elements with `for` attributes
+
+5. **Dark Mode Considerations**
+   - Always test components with `.dark` class applied
+   - Border radius is larger in dark mode (12px vs 5px)
+   - Grid gutters are larger in dark mode (40px vs 20px)
+   - Use `dark:` prefix for conditional dark mode styles
+
+6. **Form Best Practices**
+   - Use `.form-grid` for form layouts
+   - Apply `.form-group` wrapper around each field
+   - Use `.form-hint` for helper text
+   - Use `.field_with_errors` for validation states
+
+7. **Table Best Practices**
+   - Use `.table` for standard data tables
+   - Use `.table-standard` for key-value style tables
+   - Use `.table-cellstyle` for status tracking tables
+   - Use `.action-cell` for right-aligned action buttons
+
+8. **Page Header Best Practices**
+   - Use `.page-header` for dashboard/session pages
+   - Main card should have `.page-maincard` and `p-card-padding`
+   - Add `.with-chart` modifier when including charts
+   - Actions go in `.page-actions`
+
+---
+
+## Change Log
+
+### Version 3.22.0 - January 2026
+
+**New Features:**
+- HAML Preview functionality for live component viewing
+- HAML Converter utility for template processing
+- Comprehensive AI documentation across all component pages
+
+**Enhancements:**
+- All component pages now include descriptions and use cases
+- Enhanced form component documentation (checkboxes, radios, toggles)
+- Improved layout documentation with examples
+- Typography pages updated with link and icon examples
+
+**Documentation:**
+- Added descriptions to all forms pages
+- Updated textarea documentation
+- Enhanced typography component examples
+
+### Version 3.13.1 - January 21, 2026
+
+**Documentation Updates:**
+- Converted table example files from Pug to HAML format
+- Standardized HAML attribute syntax across all table examples
+
+### Version 3.13.0 - January 20, 2026
+
+**New Components:**
+- Date & Time Picker (Flatpickr integration)
+- Enhanced table variants with striped/alternating row styles
+
+**Reorganization:**
+- Tables section moved to dedicated `/pages/tables/` directory
+- Improved table documentation
+
+**Enhancements:**
+- Fixed table striped row styling
+- Improved drawer footer padding
+- Better splitview details close button
+- Added image tagging capability
+
+---
+
+## Version & Support
+
+**Current Version:** 3.22.0
+**Tailwind Version:** 4.1.11
+**Node Version:** v23.11.0
+**Template Language:** HAML (primary) and Pug formats supported
+
+For updates and examples, refer to:
+- NPM: `npm install testio-tailwind@latest`
+- Documentation: Included in package under `/dist/`
+- Source: GitHub repository (test-IO/testio-tailwind)
+
+---
+
+**END OF REFERENCE GUIDE**