# 🧩 Components


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## 🎯 Overview

This module provides a comprehensive set of Material Design components
for building FastHTML applications.

<table>
<colgroup>
<col style="width: 32%" />
<col style="width: 38%" />
<col style="width: 29%" />
</colgroup>
<thead>
<tr>
<th>Category</th>
<th>Components</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td>🔘 <strong>Buttons</strong></td>
<td><code>ButtonT</code>, <a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navtogglebutton"><code>NavToggleButton</code></a></td>
<td>Button variants and navigation toggles</td>
</tr>
<tr>
<td>🔗 <strong>Links</strong></td>
<td><code>AT</code> (AnchorChain)</td>
<td>Styled anchor/link variants</td>
</tr>
<tr>
<td>📐 <strong>Layout</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#grid"><code>Grid</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#gridcell"><code>GridCell</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divhstacked"><code>DivHStacked</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divvstacked"><code>DivVStacked</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divcentered"><code>DivCentered</code></a></td>
<td>Grid system and flex layouts</td>
</tr>
<tr>
<td>🎨 <strong>Icons</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#icon"><code>Icon</code></a></td>
<td>Material Design icons</td>
</tr>
<tr>
<td>🧭 <strong>Navigation</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navbar"><code>NavBar</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navcontainer"><code>NavContainer</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navsidebarcontainer"><code>NavSideBarContainer</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#bottomnav"><code>BottomNav</code></a></td>
<td>Navigation components</td>
</tr>
<tr>
<td>💬 <strong>Modals</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modal"><code>Modal</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalbutton"><code>ModalButton</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modaltitle"><code>ModalTitle</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalbody"><code>ModalBody</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalfooter"><code>ModalFooter</code></a></td>
<td>Dialog windows</td>
</tr>
<tr>
<td>📝 <strong>Forms</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#field"><code>Field</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#labelinput"><code>LabelInput</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#checkboxx"><code>CheckboxX</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#radio"><code>Radio</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#switch"><code>Switch</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textarea"><code>TextArea</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#range"><code>Range</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#select"><code>Select</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#formgrid"><code>FormGrid</code></a></td>
<td>Form inputs and layout</td>
</tr>
<tr>
<td>⏳ <strong>Feedback</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#progress"><code>Progress</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#loadingindicator"><code>LoadingIndicator</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#toast"><code>Toast</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#snackbar"><code>Snackbar</code></a></td>
<td>Loading and notifications</td>
</tr>
<tr>
<td>📊 <strong>Tables</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#table"><code>Table</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#td"><code>Td</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#th"><code>Th</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tablefromlists"><code>TableFromLists</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tablefromdicts"><code>TableFromDicts</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#pagination"><code>Pagination</code></a></td>
<td>Data tables</td>
</tr>
<tr>
<td>🃏 <strong>Cards</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#card"><code>Card</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#toolbar"><code>Toolbar</code></a></td>
<td>Content containers</td>
</tr>
<tr>
<td>🔤 <strong>Typography</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textt"><code>TextT</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textpresets"><code>TextPresets</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#codespan"><code>CodeSpan</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#codeblock"><code>CodeBlock</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#blockquote"><code>Blockquote</code></a></td>
<td>Text styling</td>
</tr>
<tr>
<td>🍪 <strong>Misc</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#faqitem"><code>FAQItem</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#cookiesbanner"><code>CookiesBanner</code></a>,
<code>Divider</code>, <code>Avatar</code></td>
<td>Utility components</td>
</tr>
</tbody>
</table>

------------------------------------------------------------------------

## 📚 Table of Contents

1.  [🔘 Buttons](#-buttons) - Button variants and chains
2.  [🔗 Anchor](#-anchor) - Link styling
3.  [📐 Grid](#-grid) - Grid system and layout
4.  [🎨 Icon](#-icon) - Material icons
5.  [🧭 NavBar](#-navbar) - Top navigation
6.  [💬 Modal Dialog](#-modal-dialog) - Dialogs and popups
7.  [📝 Label Input](#-label-input) - Input fields with labels
8.  [🏷️ Form Label](#-form-label) - Standalone form labels
9.  [☑️ Checkbox](#-checkbox) - Checkbox inputs
10. [🔘 Radio](#-radio) - Radio buttons
11. [🔀 Switch](#-switch) - Toggle switches
12. [📄 Text Area](#-text-area) - Multi-line text
13. [📊 Range](#-range) - Slider inputs
14. [📋 Select](#-select) - Dropdown menus
15. [📐 FormGrid](#-formgrid) - Form layouts
16. [📈 Progress](#-progress) - Progress bars
17. [⏳ Loading Indicator](#-loading-indicator) - Spinners
18. [📊 Tables](#-tables) - Data tables
19. [📄 Pagination](#-pagination) - Page navigation
20. [🃏 Card](#-card) - Content cards
21. [🔧 Toolbar](#-toolbar) - Action bars
22. [🔔 Toast / Snackbar](#-toast--snackbar) - Notifications
23. [📦 Nav Container](#-nav-container) - Navigation drawers
24. [📑 Sidebar](#-sidebar) - Side navigation
25. [🔤 Typography](#-typography) - Text styling

## 🔘 Buttons

Button variants and navigation toggle helpers.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ButtonT</code></td>
<td>Chainable button styles (<code>ButtonT.primary</code>,
<code>ButtonT.secondary</code>, etc.)</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navtogglebutton"><code>NavToggleButton</code></a></td>
<td>Button that toggles navigation rail visibility</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: `Button("Click", cls=ButtonT.primary.large)` creates
> a large primary button.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L31"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavToggleButton

``` python

def NavToggleButton(
    target, icon:str='menu', kwargs:VAR_KEYWORD
):

```

*Create a navigation toggle button that toggles the ‘max’ class on the
target element.*

Also toggles icon between ‘menu’ and ‘menu_open’ based on nav state.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_buttons(): 

    return  Article(
        Button("Default", cls=ButtonT.default),  
        Button("Primary", cls=ButtonT.primary),
        Button("Secondary", cls=ButtonT.secondary),
        Button("Danger", cls=ButtonT.destructive),
        Button("Text", cls=ButtonT.text),
        Button("Ghost", cls=ButtonT.ghost),
        Button("Small Primary", cls=ButtonT.primary.small),
        Button("Large Secondary", cls=ButtonT.secondary.large.elevate)
        
    )

preview(ex_buttons())
```

</details>

<iframe src="http://localhost:2222/_WmiNOPtUQ8a4u6BqDOcoZA" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔗 Anchor

Chainable anchor/link styles.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>AT</code></td>
<td>Chainable anchor styles (<code>AT.primary</code>,
<code>AT.chip</code>, <code>AT.button</code>, etc.)</td>
</tr>
</tbody>
</table>

> 💡 **Use case**:
> `A("Learn More", href="/docs", cls=AT.button.primary)` creates a
> button-styled link.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_links(): 
    return Article(
        A('Default Link'),
        Hr(),
        A('Muted Link', cls=AT.muted),
        Hr(),
        A('Text Link',  cls=AT.text), 
        Hr(),
        A('Reset Link', cls=AT.reset), 
        Hr(),
        A('Primary Link', cls=AT.primary), 
        Hr(),
        A('Classic Link', cls=AT.classic),  
        Hr(),
        cls="padding")

preview(ex_links())
```

</details>

<iframe src="http://localhost:2222/_GjTqVcpdSRi8PTM53k8KhQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📐 Grid

Responsive grid system and flex layout helpers.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#grid"><code>Grid</code></a></td>
<td>Responsive grid container</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#gridcell"><code>GridCell</code></a></td>
<td>Grid cell with span control</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#spacet"><code>SpaceT</code></a></td>
<td>Spacing enum (<code>SpaceT.small_space</code>, etc.)</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#gridspant"><code>GridSpanT</code></a></td>
<td>Grid span enum</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divhstacked"><code>DivHStacked</code></a></td>
<td>Horizontal flex container</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divvstacked"><code>DivVStacked</code></a></td>
<td>Vertical flex container</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divcentered"><code>DivCentered</code></a></td>
<td>Centered flex container</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divfullyspaced"><code>DivFullySpaced</code></a></td>
<td>Space-between flex container</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divlaligned"><code>DivLAligned</code></a>
/ <a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#divraligned"><code>DivRAligned</code></a></td>
<td>Left/right aligned containers</td>
</tr>
</tbody>
</table>

### Grid Parameters

<table style="width:100%;">
<colgroup>
<col style="width: 33%" />
<col style="width: 27%" />
<col style="width: 39%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cells</code></td>
<td>-</td>
<td>Grid children, auto-wrapped with span classes based on cols</td>
</tr>
<tr>
<td><code>space</code></td>
<td><code>SpaceT.medium_space</code></td>
<td>Spacing between grid cells</td>
</tr>
<tr>
<td><code>cols_min</code></td>
<td><code>1</code></td>
<td>Minimum columns at smallest breakpoint</td>
</tr>
<tr>
<td><code>cols_max</code></td>
<td><code>4</code></td>
<td>Maximum columns at largest breakpoint</td>
</tr>
<tr>
<td><code>cols</code></td>
<td><code>None</code></td>
<td>Fixed column count for all breakpoints</td>
</tr>
<tr>
<td><code>cols_sm</code></td>
<td><code>None</code></td>
<td>Column count for small screens</td>
</tr>
<tr>
<td><code>cols_md</code></td>
<td><code>None</code></td>
<td>Column count for medium screens</td>
</tr>
<tr>
<td><code>cols_lg</code></td>
<td><code>None</code></td>
<td>Column count for large screens</td>
</tr>
<tr>
<td><code>responsive</code></td>
<td><code>True</code></td>
<td>Center grid with responsive max-width</td>
</tr>
<tr>
<td><code>padding</code></td>
<td><code>True</code></td>
<td>Add padding around the grid</td>
</tr>
</tbody>
</table>

### GridCell Parameters

<table>
<colgroup>
<col style="width: 45%" />
<col style="width: 54%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>span</code></td>
<td>String like <code>'s12 m6 l4'</code> or tuple of <a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#gridspant"><code>GridSpanT</code></a>
values</td>
</tr>
<tr>
<td><code>cls</code></td>
<td>Additional CSS classes</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: `Grid(GridCell("A", span=6), GridCell("B", span=6))`
> creates a 2-column layout.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L187"
target="_blank" style="float:right; font-size:smaller">source</a>

### Grid

``` python

def Grid(
    cells:VAR_POSITIONAL, space:SpaceT=<SpaceT.medium_space: 'medium-space'>, cols_min:int=1, cols_max:int=4,
    cols:int=None, cols_sm:int=None, cols_md:int=None, cols_lg:int=None, responsive:bool=True, padding:bool=True,
    cls:str='', kwargs:VAR_KEYWORD
):

```

*BeerCSS responsive grid with smart column defaults and mobile-first
design.*

MonsterUI-compatible API: `cols` parameter auto-derives responsive
breakpoints: cols=4 -\> cols_sm=1, cols_md=2, cols_lg=4 (mobile stacks,
tablet halves, desktop full)

For explicit control, use cols_sm, cols_md, cols_lg directly.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L145"
target="_blank" style="float:right; font-size:smaller">source</a>

### GridCell

``` python

def GridCell(
    c:VAR_POSITIONAL, span:tuple=(), cls:str='', kwargs:VAR_KEYWORD
):

```

*Wrap content as a BeerCSS grid cell with responsive span control.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L100"
target="_blank" style="float:right; font-size:smaller">source</a>

### GridSpanT

``` python

def GridSpanT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Grid span classes for responsive layouts (BeerCSS)*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L92"
target="_blank" style="float:right; font-size:smaller">source</a>

### SpaceT

``` python

def SpaceT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Space types using BeerCSS spacing classes*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_grid():
    return Grid(
        Div(
            P("Column 1 Item 1"), 
            P("Column 1 Item 2"), 
            P("Column 1 Item 3")),
        Div(
            P("Column 2 Item 1"), 
            P("Column 2 Item 2"), 
            P("Column 2 Item 2")),
        Div(
            P("Column 3 Item 1"), 
            P("Column 3 Item 2"), 
            P("Column 3 Item 3")))


preview(ex_grid())
```

</details>

<iframe src="http://localhost:2222/_eWorouZCT8qQWaFjviGyiw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_product_grid():
    products = [
        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
    ]
    
    product_cards = [
        Card(
            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
            H4(p["name"], cls="mt-2"),
            P(p["price"]),
            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
        ) for p in products
    ]
    
    return Grid(*product_cards, cols_lg=3)

preview(ex_product_grid())
```

</details>

<iframe src="http://localhost:2222/_5CmRyDKjRWWTgREwuDM2xw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L236"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivHStacked

``` python

def DivHStacked(
    c:VAR_POSITIONAL, responsive:bool=True, padding:bool=True, cls:str='', kwargs:VAR_KEYWORD
):

```

*Responsive horizontal stack with padding and mobile compatibility.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L254"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivLAligned

``` python

def DivLAligned(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*MonsterUI-compatible left-aligned row using BeerCSS tokens.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_l_aligned_div():
    return Article(
        DivLAligned(
            Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
            H4("Left Aligned Title"),
            P("Some text that's left-aligned with the title and image.")
        ),
        cls="padding")

preview(ex_l_aligned_div())
```

</details>

<iframe src="http://localhost:2222/_1QhuRhk6SDun3iWfKfn1mg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L265"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivVStacked

``` python

def DivVStacked(
    c:VAR_POSITIONAL, responsive:bool=True, padding:bool=True, cls:str='', kwargs:VAR_KEYWORD
):

```

*Responsive vertical stack with padding and mobile compatibility.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_v_stacked_div():
    return Article(
        DivVStacked(
            H2("Vertical Stack"),
            P("First paragraph in the stack"),
            P("Second paragraph in the stack"),
            Button("Action Button", cls=ButtonT.secondary)
        ),
        cls="padding")

preview(ex_v_stacked_div())
```

</details>

<iframe src="http://localhost:2222/_ctDqPUm5QfGJCw0tuUujMw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_h_stacked_div():
    return Article(
        DivHStacked(
            Div(H4("Column 1"), P("Content for column 1")),
            Div(H4("Column 2"), P("Content for column 2")),
            Div(H4("Column 3"), P("Content for column 3"))
        ),
        cls="padding")

preview(ex_h_stacked_div())
```

</details>

<iframe src="http://localhost:2222/_Ah4CpAR_SDO_hi14E0-nLw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L283"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivRAligned

``` python

def DivRAligned(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*MonsterUI-compatible right-aligned row using BeerCSS tokens.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_r_aligned_div():
    return Article(
        DivRAligned(
            Button("Action", cls=ButtonT.primary),
            P("Right-aligned text"),
            Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
        ),
        cls="padding")

preview(ex_r_aligned_div())
```

</details>

<iframe src="http://localhost:2222/_XA0POM7vTJi7p1v7wI8q6g" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L292"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivCentered

``` python

def DivCentered(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*Center-aligned container using BeerCSS tokens.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_centered_div():
    return Article(
        DivCentered(
            H3("Centered Title"),
            P("This content is centered both horizontally and vertically.")
        ),
        cls="padding")

preview(ex_centered_div())
```

</details>

<iframe src="http://localhost:2222/_18PP4pBmQsqtHw5qsTWEtw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L301"
target="_blank" style="float:right; font-size:smaller">source</a>

### DivFullySpaced

``` python

def DivFullySpaced(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*Row with children stretched to far ends using BeerCSS `max` spacers.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_fully_spaced_div():
    return Article(
        DivFullySpaced(
            Button("Left", cls=ButtonT.primary),
            Button("Center", cls=ButtonT.secondary),
            Button("Right", cls=ButtonT.destructive),
            Button("Right2", cls=ButtonT.destructive)
        ),
        cls="padding"
    )

preview(ex_fully_spaced_div())
```

</details>

<iframe src="http://localhost:2222/_TvVt6r4FSK2fL0RWTaWZfA" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🎨 Icon

Material Design icon component.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#icon"><code>Icon</code></a></td>
<td>Material icon with optional click handler</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: `Icon("settings", cls="large primary")` creates a
> large primary settings icon.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L323"
target="_blank" style="float:right; font-size:smaller">source</a>

### Icon

``` python

def Icon(
    icon:str, size:str=None, fill:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Material Design icon with optional size and fill*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_icon():
    return Article(
        Grid(
            Icon('menu', size='large'),     
            Icon('settings', cls='primary-text'),
            Icon('favorite', fill=True)
        ),
        cls="padding")

preview(ex_icon())
```

</details>

<iframe src="http://localhost:2222/_PFs4EXabSgurqrDjOt0KAw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🧭 NavBar

Horizontal navigation bar component with HTMX SPA navigation defaults.

<table>
<colgroup>
<col style="width: 37%" />
<col style="width: 31%" />
<col style="width: 31%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Default</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>brand</code></td>
<td><code>None</code></td>
<td>Brand element (logo/title) positioned on the left</td>
</tr>
<tr>
<td><code>sticky</code></td>
<td><code>False</code></td>
<td>Stick navbar to top on scroll</td>
</tr>
<tr>
<td><code>blur</code></td>
<td><code>None</code></td>
<td>Glass effect: <code>'small-blur'</code>, <code>'medium-blur'</code>,
<code>'large-blur'</code></td>
</tr>
<tr>
<td><code>size</code></td>
<td><code>'small'</code></td>
<td>Navbar height: <code>'small'</code>, <code>'medium'</code>,
<code>'large'</code></td>
</tr>
<tr>
<td><code>center</code></td>
<td><code>False</code></td>
<td>Center navigation links (vs right-aligned)</td>
</tr>
<tr>
<td><code>hx_boost</code></td>
<td><code>True</code></td>
<td>Auto-enhance <code>&lt;a&gt;</code> links for HTMX navigation</td>
</tr>
<tr>
<td><code>hx_target</code></td>
<td><code>'#main-content'</code></td>
<td>Target element for boosted links</td>
</tr>
<tr>
<td><code>hx_swap</code></td>
<td><code>None</code></td>
<td>HTMX swap method (e.g., <code>'outerHTML'</code>)</td>
</tr>
</tbody>
</table>

> 💡 **Basic usage**:
> `NavBar(A("Home"), A("About"), brand=H3("MyApp"), sticky=True)`

> 💡 **With glass effect**:
> `NavBar(..., sticky=True, blur='small-blur', hx_swap='outerHTML')`

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L334"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavBar

``` python

def NavBar(
    children:VAR_POSITIONAL, brand:NoneType=None, sticky:bool=False, blur:NoneType=None, cls:str='',
    size:str='small', center:bool=False, end:NoneType=None, hx_boost:bool=True, hx_target:str='#main-content',
    hx_swap:NoneType=None, kwargs:VAR_KEYWORD
):

```

*Horizontal navigation bar with HTMX SPA navigation defaults.*

Args: brand: Brand element (logo/title) positioned on the left sticky:
Whether navbar sticks to top on scroll blur: Blur effect class
(‘small-blur’, ‘medium-blur’, ‘large-blur’) for glass effect size:
Navbar size - ‘small’ (default), ‘medium’, ‘large’, or None center:
Center the navigation links (default False = links on right) end:
Optional end slot content (shown at right when center=True) hx_boost:
Auto-enhance all <a> links for HTMX navigation (default True) hx_target:
Target element for boosted links (default ‘\#main-content’) hx_swap:
HTMX swap method (e.g., ‘outerHTML’ for full main swap)

Layout modes: center=False: \[brand\] \[spacer\] \[links…\] center=True:
\[brand\] \[spacer\] \[links centered\] \[spacer\] \[end?\]

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_navbar1():
    return NavBar(A("Page1",href='/rt1'),
                  A("Page2",href='/rt2'),
                  A("Page3",href='/rt3'),
                  brand=H3('My Blog'))

preview(ex_navbar1())
```

</details>

<iframe src="http://localhost:2222/_NNCxLungQ8qZa6lw-I7XVA" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 💬 Modal Dialog

Modal/dialog components for popups and confirmations.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modal"><code>Modal</code></a></td>
<td>Modal container with overlay</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalbutton"><code>ModalButton</code></a></td>
<td>Button that triggers modal</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modaltitle"><code>ModalTitle</code></a></td>
<td>Modal title header</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalbody"><code>ModalBody</code></a></td>
<td>Modal content area</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalfooter"><code>ModalFooter</code></a></td>
<td>Modal footer with actions</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalcancel"><code>ModalCancel</code></a>
/ <a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#modalconfirm"><code>ModalConfirm</code></a></td>
<td>Pre-styled action buttons</td>
</tr>
</tbody>
</table>

### Modal Parameters

<table style="width:100%;">
<colgroup>
<col style="width: 33%" />
<col style="width: 27%" />
<col style="width: 39%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>*c</code></td>
<td>-</td>
<td>Modal content (title, body, etc.)</td>
</tr>
<tr>
<td><code>id</code></td>
<td><code>None</code></td>
<td>Modal ID for <code>data-ui</code> targeting</td>
</tr>
<tr>
<td><code>footer</code></td>
<td><code>None</code></td>
<td>Footer content (auto-wrapped in Nav)</td>
</tr>
<tr>
<td><code>active</code></td>
<td><code>False</code></td>
<td>Whether modal starts active/visible</td>
</tr>
<tr>
<td><code>overlay</code></td>
<td><code>'default'</code></td>
<td>Overlay style: <code>'default'</code> (plain), <code>'blur'</code>,
<code>'small-blur'</code>, <code>'medium-blur'</code>,
<code>'large-blur'</code>, or <code>False</code>/<code>None</code> (no
overlay)</td>
</tr>
<tr>
<td><code>position</code></td>
<td><code>None</code></td>
<td>Position: <code>None</code> (center), <code>'left'</code>,
<code>'right'</code>, <code>'top'</code>, <code>'bottom'</code></td>
</tr>
<tr>
<td><code>cls</code></td>
<td><code>()</code></td>
<td>Additional CSS classes</td>
</tr>
</tbody>
</table>

### Helper Components

<table>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ModalButton(text, id)</code></td>
<td>Button that opens modal via <code>data-ui</code></td>
</tr>
<tr>
<td><code>ModalCancel(text, modal_id)</code></td>
<td>Cancel button that closes modal</td>
</tr>
<tr>
<td><code>ModalConfirm(text, modal_id)</code></td>
<td>Confirm button that closes modal</td>
</tr>
<tr>
<td><code>ModalTitle(*c)</code></td>
<td>H5-based title component</td>
</tr>
<tr>
<td><code>ModalBody(*c)</code></td>
<td>Div wrapper for body content</td>
</tr>
<tr>
<td><code>ModalFooter(*c)</code></td>
<td>Nav wrapper with right-aligned buttons</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Use `data-ui="#modal-id"` to link triggers to modals.
> Position dialogs as side drawers (`'left'`, `'right'`) or sheets
> (`'top'`, `'bottom'`).

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L475"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalFooter

``` python

def ModalFooter(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Modal footer with right-aligned action buttons.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L471"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalBody

``` python

def ModalBody(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Modal body wrapper for content layout.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L467"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalTitle

``` python

def ModalTitle(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Modal title using H5 element.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L459"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalConfirm

``` python

def ModalConfirm(
    text:str='Confirm', modal_id:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Confirm button that closes modal via data-ui.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L451"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalCancel

``` python

def ModalCancel(
    text:str='Cancel', modal_id:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Cancel button that closes modal via data-ui.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L446"
target="_blank" style="float:right; font-size:smaller">source</a>

### ModalButton

``` python

def ModalButton(
    text:str, id:str, icon:str=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Button that opens a modal via data-ui attribute.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L379"
target="_blank" style="float:right; font-size:smaller">source</a>

### Modal

``` python

def Modal(
    c:VAR_POSITIONAL, id:NoneType=None, footer:NoneType=None, active:bool=False, overlay:str='default',
    position:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS modal dialog with position and overlay options.*

Always returns a list for consistent unpacking with \*Modal(…). When
overlay is enabled, clicking the overlay closes the modal.

Args: \*c: Modal content (title, body, etc.) id: Modal ID for data-ui
targeting footer: Footer content (auto-wrapped in Nav if not already)
active: Whether modal starts active/visible overlay: Overlay style -
‘default’ (plain), ‘blur’, ‘small-blur’, ‘medium-blur’, ‘large-blur’, or
False/None (no overlay) position: Position - None (center), ‘left’,
‘right’, ‘top’, ‘bottom’ cls: Additional CSS classes

Returns: List of elements (overlay + dialog, or just \[dialog\] if no
overlay)

<details class="code-fold">
<summary>Code</summary>

``` python
def test_modal():
    """Test modal with position and overlay options."""
    return Article(
        # Centered modal with default (plain) overlay
        Button("Centered (Default Overlay)", data_ui="#modal-center", cls="primary"),
        *Modal(
            ModalTitle("Centered Dialog"),
            ModalBody("This modal uses the default plain overlay (no blur)"),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-center"),
                ModalConfirm(modal_id="modal-center")
            ),
            id="modal-center"
        ),
        
        # Left drawer with blur overlay
        Button("Left Drawer (Blur)", data_ui="#modal-left", cls="secondary"),
        *Modal(
            ModalTitle("Left Navigation"),
            ModalBody("This is a left-side drawer with blur overlay. Click overlay to close."),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-left"),
                ModalConfirm(modal_id="modal-left")
            ),
            id="modal-left",
            position='left',
            overlay='blur'
        ),
        
        # Right panel with default overlay
        Button("Right Panel", data_ui="#modal-right"),
        *Modal(
            ModalTitle("Right Panel"),
            ModalBody("This is a right-side panel. Click overlay to close."),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-right"),
                ModalConfirm(modal_id="modal-right")
            ),
            id="modal-right",
            position='right'
        ),
        
        # Bottom sheet
        Button("Bottom Sheet", data_ui="#modal-bottom", cls="tertiary"),
        *Modal(
            ModalTitle("Bottom Sheet"),
            ModalBody("This is a bottom sheet with medium blur"),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-bottom"),
                ModalConfirm(modal_id="modal-bottom")
            ),
            id="modal-bottom",
            position='bottom',
            overlay='medium-blur'
        ),
        
        cls="padding"
    )

preview(test_modal())
```

</details>

<iframe src="http://localhost:2222/_QyW9ArjMQ0KkXp9JEm175g" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📝 Label Input

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#field"><code>Field</code></a></td>
<td>Wrapper for form inputs with border/label/prefix/suffix styling</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#labelinput"><code>LabelInput</code></a></td>
<td>Complete labeled input with floating label and optional icons</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Building consistent form fields with Material Design
> floating labels and icon support.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L508"
target="_blank" style="float:right; font-size:smaller">source</a>

### LabelInput

``` python

def LabelInput(
    label:str, id:str=None, placeholder:str=None, input_type:str='text', prefix_icon:str=None, suffix_icon:str=None,
    value:str=None, cls:str='', kwargs:VAR_KEYWORD
):

```

*Labeled input field with floating label and optional icons.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L483"
target="_blank" style="float:right; font-size:smaller">source</a>

### Field

``` python

def Field(
    c:VAR_POSITIONAL, label:bool=False, prefix:bool=False, suffix:bool=False, cls:str='', kwargs:VAR_KEYWORD
):

```

*BeerCSS field wrapper for inputs with border/label/prefix/suffix
styling.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_input(): 
    return Article(
        LabelInput(label="Input", id='myid'),
        cls="padding")


preview(ex_input())
```

</details>

<iframe src="http://localhost:2222/_Mkdnxw1LQxKLeRKY0tRC4w" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🏷️ Form Label

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#formlabel"><code>FormLabel</code></a></td>
<td>Label element with proper <code>for</code> attribute linking</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Creating accessible form labels that click-focus
> their associated inputs.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L522"
target="_blank" style="float:right; font-size:smaller">source</a>

### FormLabel

``` python

def FormLabel(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Standalone form label element with MonsterUI-compatible signature.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L508"
target="_blank" style="float:right; font-size:smaller">source</a>

### LabelInput

``` python

def LabelInput(
    label:str, id:str=None, placeholder:str=None, input_type:str='text', prefix_icon:str=None, suffix_icon:str=None,
    value:str=None, cls:str='', kwargs:VAR_KEYWORD
):

```

*Labeled input field with floating label and optional icons.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_form_label(): 
    return Article(
        FormLabel("Username", fr="username-input"),
        LabelInput("Email", input_type="email"),
        cls="padding")


preview(ex_form_label())
```

</details>

<iframe src="http://localhost:2222/_kxj_aQuBSta72z9sUWWkfw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## ☑️ Checkbox

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#checkboxx"><code>CheckboxX</code></a></td>
<td>BeerCSS checkbox with label support</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Boolean form inputs with Material Design styling.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L530"
target="_blank" style="float:right; font-size:smaller">source</a>

### CheckboxX

``` python

def CheckboxX(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS checkbox with label support.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_checkbox(): 
    return Article(
        CheckboxX(),
        CheckboxX("Accept terms"),
        CheckboxX("Enabled", checked=True),
        CheckboxX("Option 1", name="options", value="opt1"),
        cls="padding")
        
preview(ex_checkbox())
```

</details>

<iframe src="http://localhost:2222/_f4wsiI8pRkiFxByByNdJeg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔘 Radio

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#radio"><code>Radio</code></a></td>
<td>BeerCSS radio button with label</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Single-selection from mutually exclusive options.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L540"
target="_blank" style="float:right; font-size:smaller">source</a>

### Radio

``` python

def Radio(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS radio button with label.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_Radio(): 
    return Article(
        Radio("Option 1", name="group1", value="opt1"),
        Radio("Option 2", name="group1", value="opt2", checked=True),
        cls="padding")

preview(ex_Radio())
```

</details>

<iframe src="http://localhost:2222/_jWPpf0R3SoeMet4COx6g8g" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔀 Switch

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#switch"><code>Switch</code></a></td>
<td>Toggle switch for on/off states</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Binary settings like dark mode, notifications,
> feature toggles.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L550"
target="_blank" style="float:right; font-size:smaller">source</a>

### Switch

``` python

def Switch(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS toggle switch for on/off states.*

If label text is provided, wraps in a nav with the label on the left and
the switch on the right (standard BeerCSS pattern).

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_switch(): 
    return Article(
        Switch("Enable notifications", name="notifications", checked=False),
        Switch("Dark mode", name="dark_mode", checked=True),
        Switch(name="no_label"),  # Switch without label
        cls="padding")

preview(ex_switch())
```

</details>

<iframe src="http://localhost:2222/_OYb1da3vSW6vACzrwWFxrQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📄 Text Area

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textarea"><code>TextArea</code></a></td>
<td>Multi-line text input with field wrapper</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Comments, descriptions, long-form text input.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L577"
target="_blank" style="float:right; font-size:smaller">source</a>

### TextArea

``` python

def TextArea(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS textarea with field wrapper for consistent styling.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_TextArea(): 
    return Article(
        TextArea(placeholder="Enter description..."),
        TextArea("Initial text", rows=5),
        TextArea(placeholder=" "),
        cls="padding")

preview(ex_TextArea())
```

</details>

<iframe src="http://localhost:2222/_QyCQn4PUSQ6QPluvHLd0jg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📊 Range

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#range"><code>Range</code></a></td>
<td>Slider input for numeric ranges</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Volume controls, price filters, numeric value
> selection within bounds.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L585"
target="_blank" style="float:right; font-size:smaller">source</a>

### Range

``` python

def Range(
    c:VAR_POSITIONAL, min:NoneType=None, max:NoneType=None, step:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS range slider with two-tone fill effect.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_range(): 
    return Article(
        Range(value=25),
        Range(min=0, max=100, value=50),
        cls="padding")

preview(ex_range())
```

</details>

<iframe src="http://localhost:2222/_iPmgT4hkQjCYTi8dKbB4DQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📋 Select & SelectMenu

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#select"><code>Select</code></a></td>
<td>Native HTML select for forms - uses standard <code>change</code>
event, works with HTMX</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#selectmenu"><code>SelectMenu</code></a></td>
<td>BeerCSS menu-based dropdown for display menus (profile, actions,
navigation)</td>
</tr>
</tbody>
</table>

### Select (Native HTML)

Uses the native `<select>` element with BeerCSS styling. Best for form
inputs where you need: - Standard `change` events for HTMX
(`hx-trigger="change"`) - Keyboard navigation and accessibility -
Mobile-friendly native picker - Cascading dropdown patterns

``` python
# Basic usage with label
Select("Option A", "Option B", "Option C", 
       name="category", label="Category")

# With HTMX for cascading dropdowns
Select("Electronics", "Clothing", "Books",
       name="category",
       label="Category",
       hx_get="/subcategories",
       hx_trigger="change",
       hx_target="#subcategory-wrapper")
```

#### Select Parameters

<table>
<colgroup>
<col style="width: 28%" />
<col style="width: 15%" />
<col style="width: 23%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>*options</code></td>
<td><code>str|Option|dict</code></td>
<td>-</td>
<td>Options (strings, Option elements, or dicts with value/label)</td>
</tr>
<tr>
<td><code>label</code></td>
<td><code>str</code></td>
<td><code>None</code></td>
<td>Floating label text</td>
</tr>
<tr>
<td><code>value</code></td>
<td><code>str</code></td>
<td><code>''</code></td>
<td>Currently selected value</td>
</tr>
<tr>
<td><code>name</code></td>
<td><code>str</code></td>
<td><code>''</code></td>
<td>Form field name</td>
</tr>
<tr>
<td><code>id</code></td>
<td><code>str</code></td>
<td>auto</td>
<td>Element ID (auto-generated from name)</td>
</tr>
<tr>
<td><code>placeholder</code></td>
<td><code>str</code></td>
<td><code>None</code></td>
<td>Placeholder option (disabled first option)</td>
</tr>
<tr>
<td><code>cls</code></td>
<td><code>str|tuple</code></td>
<td><code>()</code></td>
<td>Additional CSS classes</td>
</tr>
</tbody>
</table>

### SelectMenu (Display Menus)

Uses BeerCSS menu element for visual dropdowns. Best for: - Profile
menus, action dropdowns - Navigation menus - Any non-form UI where you
just need a clickable menu

``` python
# Simple menu display
SelectMenu("Home", "About", "Contact", value="Home")

# With icon and custom items
SelectMenu(
    Li(Label("Section"), cls="transparent"),
    Li("Item 1"),
    Li("Item 2"),
    prefix_icon="menu"
)
```

#### SelectMenu Parameters

<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>*items</code></td>
<td><code>str|Li</code></td>
<td>-</td>
<td>Menu items (strings or Li elements)</td>
</tr>
<tr>
<td><code>value</code></td>
<td><code>str</code></td>
<td><code>''</code></td>
<td>Display value text</td>
</tr>
<tr>
<td><code>placeholder</code></td>
<td><code>str</code></td>
<td><code>'Select...'</code></td>
<td>Placeholder text when empty</td>
</tr>
<tr>
<td><code>prefix_icon</code></td>
<td><code>str</code></td>
<td><code>None</code></td>
<td>Optional icon before input</td>
</tr>
<tr>
<td><code>id</code></td>
<td><code>str</code></td>
<td><code>None</code></td>
<td>Wrapper ID</td>
</tr>
<tr>
<td><code>cls</code></td>
<td><code>str|tuple</code></td>
<td><code>()</code></td>
<td>Additional CSS classes</td>
</tr>
</tbody>
</table>

> 💡 **Rule of thumb**: Use
> [`Select`](https://abhisheksreesaila.github.io/fh-matui/components.html#select)
> for forms,
> [`SelectMenu`](https://abhisheksreesaila.github.io/fh-matui/components.html#selectmenu)
> for display-only menus.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L657"
target="_blank" style="float:right; font-size:smaller">source</a>

### Select

``` python

def Select(
    options:VAR_POSITIONAL, label:NoneType=None, value:str='', name:str='', id:NoneType=None,
    placeholder:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS native HTML select with floating label support.*

Uses the native <select> element for full browser support including: -
Standard ‘change’ event for HTMX (hx-trigger=“change”) - Keyboard
navigation - Mobile-friendly native picker - Works seamlessly with
cascading dropdowns

Args: \*options: Option items - strings, Option elements, or dicts with
‘value’/‘label’ keys label: Floating label text (optional) value:
Currently selected value name: Form field name id: Element ID
(auto-generated from name if not provided) placeholder: Placeholder
option text (shown as disabled first option) cls: Additional CSS classes
for the field wrapper

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L614"
target="_blank" style="float:right; font-size:smaller">source</a>

### SelectMenu

``` python

def SelectMenu(
    items:VAR_POSITIONAL, value:str='', placeholder:str='Select...', prefix_icon:NoneType=None, id:NoneType=None,
    cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS menu-based dropdown for display menus (profile, actions,
navigation).*

Not intended for form input - use Select for forms with native change
events. This component uses BeerCSS’s menu element which opens/closes on
click.

Args: \*items: Menu items - strings are auto-wrapped in Li, or pass Li
elements directly value: Currently displayed value text placeholder:
Placeholder text when no value selected prefix_icon: Optional icon to
show before the input id: Optional wrapper ID cls: Additional CSS
classes

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_select(): 
    return Article(
        H6("Native Select (for forms)"),
        # Basic native select with label
        Select("Home", "About", "Contact", label="Page", value="Home", name="page"),
        # Native select with placeholder
        Select("Option 1", "Option 2", "Option 3", placeholder="Choose...", name="option"),
        # Native select with dict options (separate value/label)
        Select(
            {"value": "us", "label": "United States"},
            {"value": "uk", "label": "United Kingdom"},
            {"value": "ca", "label": "Canada"},
            label="Country", name="country", value="us"
        ),
        
        H6("SelectMenu (for display menus)", cls="top-margin"),
        # Menu-based dropdown for navigation/actions
        SelectMenu("Home", "About", "Contact", value="Home"),
        SelectMenu("Option 1", "Option 2", "Option 3", prefix_icon="list"),
        SelectMenu(
            Li(Label("Section"), cls="transparent"),
            Li("Item 1"),
            Li("Item 2"),
            Hr(),
            Li(I("star", cls="tiny"), Div("Special", cls="max")),
            value="Item 1",
            prefix_icon="menu"
        ),
        cls="padding")

preview(ex_select())
```

</details>

<iframe src="http://localhost:2222/_hZ0s65i0THek4GyMYy9O3A" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
# Cascading dropdown example with HTMX
# Demonstrates native Select's change event for dynamic form updates

categories = {
    "Electronics": ["Phones", "Laptops", "Tablets", "Cameras"],
    "Clothing": ["Shirts", "Pants", "Shoes", "Accessories"],
    "Books": ["Fiction", "Non-Fiction", "Comics", "Textbooks"]
}

@app.get("/cascade-demo")
def cascade_demo():
    """Demo page with cascading dropdowns."""
    return Article(
        H5("Cascading Select Demo"),
        P("Select a category to load subcategories via HTMX", cls="small-text grey-text"),
        
        # Parent select - triggers HTMX on native change event
        Select("Electronics", "Clothing", "Books",
               name="category",
               label="Category",
               placeholder="Select category...",
               hx_get="/cascade-subcategories",
               hx_trigger="change",
               hx_target="#subcategory-wrapper",
               hx_include="[name='category']"),
        
        P("Select a sub-category", cls="small-text grey-text"),
        # Child select - gets swapped by HTMX response
        Div(Select(placeholder="Select category first...", name="subcategory"), 
            id="subcategory-wrapper"),
        
        # Show current selection
        Div(id="selection-display", cls="padding"),
        
        cls="padding"
    )

@app.get("/cascade-subcategories")
def cascade_subcategories(category: str = ''):
    """Return subcategory Select based on parent selection."""
    subs = categories.get(category, [])
    if not subs:
        return Select(placeholder="No subcategories available...", name="subcategory")
    return Select(*subs, 
                  name="subcategory",
                  label="Subcategory",
                  placeholder="Select subcategory...",
                  hx_get="/cascade-selection",
                  hx_trigger="change",
                  hx_target="#selection-display",
                  hx_include="[name='category'], [name='subcategory']")

@app.get("/cascade-selection")
def cascade_selection(category: str = '', subcategory: str = ''):
    """Display current selection."""
    return Div(
        P(f"Selected: {category} → {subcategory}", cls="bold"),
        cls="surface padding round"
    )

# Preview the cascading demo
preview(cascade_demo())
```

</details>

<iframe src="http://localhost:2222/_n22S66GNRoyJu4huxvpA6g" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

### Cascading Dropdowns with HTMX

The native Select uses the standard `change` event, enabling cascading
dropdowns with pure HTMX - no custom JavaScript required:

``` python
# In your FastHTML app:

# Sample hierarchical data
categories = {
    "Electronics": ["Phones", "Laptops", "Tablets"],
    "Clothing": ["Shirts", "Pants", "Shoes"],
    "Books": ["Fiction", "Non-Fiction", "Comics"]
}

@app.get("/")
def home():
    return Layout(
        Form(
            # Parent select - triggers HTMX on native change event
            Select("Electronics", "Clothing", "Books",
                   name="category",
                   label="Category",
                   placeholder="Select category...",
                   hx_get="/subcategories",
                   hx_trigger="change",
                   hx_target="#subcategory-wrapper",
                   hx_include="[name='category']"),
            
            # Child select - swapped by HTMX
            Div(Select(placeholder="Select category first..."), 
                id="subcategory-wrapper"),
            
            cls="padding"
        ),
        title="Cascading Example"
    )

@app.get("/subcategories")
def get_subcategories(category: str):
    """Return new Select with subcategories for chosen category."""
    subs = categories.get(category, [])
    return Select(*subs, 
                  name="subcategory",
                  label="Subcategory",
                  placeholder="Select subcategory...")
```

The pattern works because: 1. Native Select fires the standard `change`
event when user selects an option 2. HTMX listens for this event
(`hx-trigger="change"`) 3. Server returns a new Select component with
filtered options 4. HTMX swaps it into the target container

**Note:** For display-only menus (profile dropdowns, action menus), use
[`SelectMenu`](https://abhisheksreesaila.github.io/fh-matui/components.html#selectmenu)
instead.

### Fieldset

``` python
def Fieldset(*c, cls=(), **kwargs):
    """Form fieldset container for grouping related inputs."""
    cls_str = stringify(cls) if cls else None
    if cls_str:
        return fc.Fieldset(*c, cls=cls_str, **kwargs)
    return fc.Fieldset(*c, **kwargs)
```

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_fs(): 
    return Article(
        Fieldset(
            Legend("Personal Info"),
            LabelInput("Name"),
            LabelInput("Email")
        ),
        cls="padding")

preview(ex_fs())
```

</details>

<iframe src="http://localhost:2222/_TG-KrxiLS2aSQ7vmmQCJdQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

### Legend

``` python
def Legend(*c, cls=(), **kwargs):
    """Fieldset legend/caption element."""
    cls_str = stringify(cls) if cls else None
    if cls_str:
        return fc.Legend(*c, cls=cls_str, **kwargs)
    return fc.Legend(*c, **kwargs)
```

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_l():
    return Article(
        Legend("Account Settings"),
        cls="padding")

preview(ex_l())
```

</details>

<iframe src="http://localhost:2222/_Pdn_9aW1QwGBR35TxOhlbQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📐 FormGrid

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#formgrid"><code>FormGrid</code></a></td>
<td>Responsive grid layout for form fields</td>
</tr>
</tbody>
</table>

### Parameters

<table>
<thead>
<tr>
<th>Parameter</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>*c</code></td>
<td>-</td>
<td>Child form fields to arrange in grid</td>
</tr>
<tr>
<td><code>cols</code></td>
<td><code>1</code></td>
<td>Number of columns (1, 2, 3, or 4)</td>
</tr>
</tbody>
</table>

Arranges children in columns on medium+ screens (full-width on small
screens). Uses BeerCSS 12-column grid.

> 💡 **Use case**: Two-column or multi-column form layouts that collapse
> on mobile. Defaults to single column for typical forms.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L720"
target="_blank" style="float:right; font-size:smaller">source</a>

### FormGrid

``` python

def FormGrid(
    c:VAR_POSITIONAL, cols:int=1
):

```

*Responsive grid layout for form fields that stacks on mobile.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_form_grid():
    """Example: FormGrid with different column configurations."""
    return Card(
        # Header
        Article(
            H5("Contact Form Example"),
            P("Demonstrating FormGrid layout capabilities", cls="small-text grey-text"),
            cls="center-align padding"
        ),
        Form(
            # 2-column layout (default)
            H6("Personal Information", cls="small padding"),
            FormGrid(
                LabelInput("First Name", id="fn"),
                LabelInput("Last Name", id="ln"),
                LabelInput("Email", id="em", input_type="email"),
                LabelInput("Phone", id="ph", input_type="tel")
            ),
            
            # 3-column layout
            H6("Address", cls="small padding"),
            FormGrid(
                LabelInput("City", id="city"),
                LabelInput("State", id="state"),
                LabelInput("Zip Code", id="zip"),
                cols=3
            ),
            
            # Single column layout
            H6("Additional Info", cls="small padding"),
            FormGrid(
                LabelInput("Full Address", id="addr"),
                cols=1
            ),
            
            # Mix with Select
            H6("Preferences", cls="small padding"),
            FormGrid(
                Select("Option A", "Option B", "Option C", value="Option A"),
                Select("Low", "Medium", "High", value="Medium", prefix_icon="priority_high"),
                cols=2
            ),
            
            # Submit
            Div(
                Button("Submit", cls=ButtonT.primary),
                cls="center-align padding"
            ),
            cls="padding"
        ),
        cls="surface-container border round"
    )

preview(ex_form_grid())
```

</details>

<iframe src="http://localhost:2222/_cdD1p3G1QeOhF8-YzqGqog" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📈 Progress

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#progress"><code>Progress</code></a></td>
<td>Linear progress bar with value/max</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: File uploads, loading states, completion indicators.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L729"
target="_blank" style="float:right; font-size:smaller">source</a>

### Progress

``` python

def Progress(
    c:VAR_POSITIONAL, value:str='', max:str='100', cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Linear progress bar with value/max support.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_progress():
    return Article(
        Progress(value=50, max=100),
        Progress(value=75),
        cls="padding")

preview(ex_progress())
```

</details>

<iframe src="http://localhost:2222/_MWC5EGBsSgCHwGJ2bJHw_A" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## ⏳ Loading Indicator

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#loadingindicator"><code>LoadingIndicator</code></a></td>
<td>Circular spinner for async operations</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: HTMX request indicators, lazy loading states,
> processing feedback.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L741"
target="_blank" style="float:right; font-size:smaller">source</a>

### LoadingIndicator

``` python

def LoadingIndicator(
    size:str='medium', cls:str='', kwargs:VAR_KEYWORD
):

```

*BeerCSS circular spinner for async operations.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_progress():
    return Article(
        LoadingIndicator(),
        LoadingIndicator(size='small', id='loading'),
        cls="padding")

preview(ex_progress())
```

</details>

<iframe src="http://localhost:2222/_x6OiMmO3SPSTO9c2aww2aw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📊 Tables

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#table"><code>Table</code></a></td>
<td>BeerCSS table wrapper</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#thead"><code>Thead</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tbody"><code>Tbody</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tfoot"><code>Tfoot</code></a></td>
<td>Table sections</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#th"><code>Th</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#td"><code>Td</code></a></td>
<td>Header and data cells</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tablefromlists"><code>TableFromLists</code></a></td>
<td>Build table from header/row lists</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#tablefromdicts"><code>TableFromDicts</code></a></td>
<td>Build table from list of dicts</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Data display, CRUD listings, reports with
> sorting/pagination.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L805"
target="_blank" style="float:right; font-size:smaller">source</a>

### TableFromDicts

``` python

def TableFromDicts(
    header_data, body_data, footer_data:NoneType=None, header_cell_render:function=Th,
    body_cell_render:function=<lambda>, footer_cell_render:function=<lambda>, cls:str='border', sortable:bool=False,
    kwargs:VAR_KEYWORD
):

```

*Create table from header keys and body list of dicts.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L796"
target="_blank" style="float:right; font-size:smaller">source</a>

### TableFromLists

``` python

def TableFromLists(
    header_data, body_data, footer_data:NoneType=None, header_cell_render:function=Th, body_cell_render:function=Td,
    footer_cell_render:function=Td, cls:str='border', sortable:bool=False, kwargs:VAR_KEYWORD
):

```

*Create table from header list and body list of lists.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L791"
target="_blank" style="float:right; font-size:smaller">source</a>

### Tfoot

``` python

def Tfoot(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Table footer section.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L785"
target="_blank" style="float:right; font-size:smaller">source</a>

### Tbody

``` python

def Tbody(
    c:VAR_POSITIONAL, cls:tuple=(), sortable:bool=False, kwargs:VAR_KEYWORD
):

```

*Table body section with optional SortableJS support.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L780"
target="_blank" style="float:right; font-size:smaller">source</a>

### Thead

``` python

def Thead(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Table header section.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L767"
target="_blank" style="float:right; font-size:smaller">source</a>

### Th

``` python

def Th(
    c:VAR_POSITIONAL, shrink:bool=False, expand:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Table header cell with shrink/expand width options.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L754"
target="_blank" style="float:right; font-size:smaller">source</a>

### Td

``` python

def Td(
    c:VAR_POSITIONAL, shrink:bool=False, expand:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Table data cell with shrink/expand width options.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L749"
target="_blank" style="float:right; font-size:smaller">source</a>

### Table

``` python

def Table(
    c:VAR_POSITIONAL, cls:str='border', kwargs:VAR_KEYWORD
):

```

*BeerCSS table with optional border/stripes classes.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_tablelists():
    return Article(
        TableFromLists(
            ["Name", "Age"],
            [["Alice", "25"], ["Bob", "30"]],
            footer_data=["Total", "2"]
        ),
        cls="padding")

preview(ex_tablelists())
```

</details>

<iframe src="http://localhost:2222/_xFKvpzzRRxqKRfeBQWZa0Q" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_tabledicts():
    return Article(
        TableFromDicts(
            ["name", "age"],
            [{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}],
            footer_data={"name": "Total", "age": "2"}
        ),
        cls="padding")

preview(ex_tabledicts())
```

</details>

<iframe src="http://localhost:2222/_cp6eKUq8QTm4_NuWnc768w" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L817"
target="_blank" style="float:right; font-size:smaller">source</a>

### TableControls

``` python

def TableControls(
    controls:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*Toolbar container for table filters, search, and actions.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_tablecontrols():
    return Article(
        TableControls(
            Field(Input(placeholder="Search...", hx_get="/table/rows", hx_trigger="keyup changed delay:500ms"), cls="border round"),
        ),
        cls="padding")

preview(ex_tablecontrols())
```

</details>

<iframe src="http://localhost:2222/_iA6qnRm2RMaJ8mjUhb03_g" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📄 Pagination

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#pagination"><code>Pagination</code></a></td>
<td>Page navigation with HTMX integration</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Table pagination, search results, infinite scroll
> fallback.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L824"
target="_blank" style="float:right; font-size:smaller">source</a>

### Pagination

``` python

def Pagination(
    current_page:int, total_pages:int, hx_get:str, hx_target:str='#table-container', show_first_last:bool=True,
    cls:str='', kwargs:VAR_KEYWORD
):

```

*HTMX-integrated pagination controls with first/prev/next/last buttons.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_tablePagination():
    return Article(
        Pagination(1, 10, '/table/rows'),
        cls="padding")

preview(ex_tablePagination())
```

</details>

<iframe src="http://localhost:2222/_BmIOv6hOSiirojDcz6D84w" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🃏 Card

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#card"><code>Card</code></a></td>
<td>Container with optional header/footer</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Content containers, product cards, user profiles,
> dashboard widgets.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L859"
target="_blank" style="float:right; font-size:smaller">source</a>

### Card

``` python

def Card(
    c:VAR_POSITIONAL, header:NoneType=None, footer:NoneType=None, body_cls:str='padding', header_cls:tuple=(),
    footer_cls:tuple=(), cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*BeerCSS card with optional header/footer sections.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_card():
    return Article(
        Card("Body content", header="Title", cls="border round"),
        Card(
            "Main content here",
            header=H5("Card Title"),
            footer=Button("Action"),
            cls="border round surface-container"
        ),
        cls="padding")

preview(ex_card())
```

</details>

<iframe src="http://localhost:2222/_dB-BEGZlSU_wwKHuh8tULg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔧 Toolbar

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#toolbar"><code>Toolbar</code></a></td>
<td>Action bar for buttons and icons</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Editor toolbars, bulk action bars, form action rows.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L873"
target="_blank" style="float:right; font-size:smaller">source</a>

### Toolbar

``` python

def Toolbar(
    items:VAR_POSITIONAL, cls:str='', elevate:str='large', fill:bool=True, kwargs:VAR_KEYWORD
):

```

*BeerCSS toolbar for action bars with elevation options.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_toolbar():
    return Article(
        Toolbar(
            A(Icon('videocam_off')),
            A(Icon('mic')),
            A(Icon('front_hand'), cls='active'),
            A(Icon('more_vert'))
        ),
        cls="padding")

preview(ex_toolbar())
```

</details>

<iframe src="http://localhost:2222/_o0rddyiSRsmxXScZXPK1Qg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔔 Toast / Snackbar

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#toast"><code>Toast</code></a></td>
<td>Notification popup with position and variants</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Success/error messages, action confirmations, brief
> notifications.

**Toast/Snackbar Documentation:**

- `position`: Position of the snackbar - `'top'` (default) or `'bottom'`
  only (per Beer CSS specification)
- `variant`: BeerCSS variant class (e.g., `'primary'`, `'secondary'`)
- `action`: Action button/link (string or component)
- `active`: Whether snackbar is active/visible
- `dur`: Duration in seconds before auto-hide (requires `id` parameter).
  If not specified, snackbar won’t auto-hide.

**Note:** When `dur` is provided, the component automatically generates
the JavaScript to show/hide the snackbar after the specified duration.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L921"
target="_blank" style="float:right; font-size:smaller">source</a>

### Snackbar

``` python

def Snackbar(
    c:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

```

*Alias for Toast component.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L883"
target="_blank" style="float:right; font-size:smaller">source</a>

### Toast

``` python

def Toast(
    c:VAR_POSITIONAL, cls:str='', position:str='top', variant:str='', action:NoneType=None, active:bool=False,
    dur:NoneType=None, kwargs:VAR_KEYWORD
):

```

*BeerCSS snackbar/toast notification with position (‘top’ or ‘bottom’)
and variant options.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_toast():
    """Toast examples showing position and auto-hide duration."""
    return Div(
        # Success toast at top with 3 second auto-hide
        Toast(
            "✅ Changes saved successfully!", 
            id="toast-success",
            position='top',
            variant='success', 
            action=A("Dismiss", cls='inverse-link'), 
            active=True,
            dur=3.0
        ),
        cls="padding"
    )

preview(ex_toast())
```

</details>

<iframe src="http://localhost:2222/_gYb-KCSoSDycZKBvRNeksg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
@rt("/test-toast")
def example_toast():
     return ex_toast()
```

</details>

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L927"
target="_blank" style="float:right; font-size:smaller">source</a>

### ContainerT

``` python

def ContainerT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Container size options (BeerCSS). Most alias to ‘responsive’; use
‘expand’ for full-width.*

## 📝 Form Field Components

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#formfield"><code>FormField</code></a></td>
<td>Render a single form input from column config</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#formmodal"><code>FormModal</code></a></td>
<td>Complete modal dialog for create/edit/view forms</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Auto-generated form fields and modals for CRUD
> operations. Integrates with
> [`FormGrid`](https://abhisheksreesaila.github.io/fh-matui/components.html#formgrid)
> for layout.

------------------------------------------------------------------------

### Column Form Config

Each column can include a `form` key to customize its form field:

``` python
{
    "key": "email",
    "label": "Email Address",
    "form": {
        "type": "email",        # text, email, number, date, select, textarea, checkbox, hidden
        "required": True,
        "placeholder": "user@example.com",
        "options": [...],       # For select type
        "disabled": False,
        "hidden": False
    }
}
```

> ⚠️ **Note**: Currently uses a column config dict schema (compatible
> with DataTable). Could be expanded to accept simpler field
> specifications in the future.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L954"
target="_blank" style="float:right; font-size:smaller">source</a>

### FormField

``` python

def FormField(
    col:dict, value:Any=None, mode:str='edit'
)->Any:

```

*Render a single form field based on column config.*

Note: Currently uses DataTable column config schema. Could be expanded
to accept simpler field specs in the future.

### FormModal Parameters

<table>
<colgroup>
<col style="width: 36%" />
<col style="width: 20%" />
<col style="width: 43%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>columns</code></td>
<td><code>list[dict]</code></td>
<td>Column configs with form key</td>
</tr>
<tr>
<td><code>mode</code></td>
<td><code>str</code></td>
<td><code>"view"</code>, <code>"edit"</code>, or
<code>"create"</code></td>
</tr>
<tr>
<td><code>record</code></td>
<td><code>dict</code></td>
<td>Current values (for view/edit)</td>
</tr>
<tr>
<td><code>modal_id</code></td>
<td><code>str</code></td>
<td>HTML id for the modal</td>
</tr>
<tr>
<td><code>title</code></td>
<td><code>str</code></td>
<td>Modal title (auto-generated from mode if None)</td>
</tr>
<tr>
<td><code>save_url</code></td>
<td><code>str</code></td>
<td>URL for form submission (hx_post)</td>
</tr>
<tr>
<td><code>save_target</code></td>
<td><code>str</code></td>
<td>Target element for save response</td>
</tr>
<tr>
<td><code>cancel_url</code></td>
<td><code>str</code></td>
<td>URL for cancel action</td>
</tr>
<tr>
<td><code>cancel_target</code></td>
<td><code>str</code></td>
<td>Target for cancel response</td>
</tr>
<tr>
<td><code>form_layout</code></td>
<td><code>Callable</code></td>
<td>Custom layout:
<code>fn(fields_dict, mode, record) -&gt; layout</code></td>
</tr>
<tr>
<td><code>row_id_field</code></td>
<td><code>str</code></td>
<td>Field name for record ID</td>
</tr>
<tr>
<td><code>indicator_id</code></td>
<td><code>str</code></td>
<td>Element ID for loading spinner</td>
</tr>
</tbody>
</table>

**Form Modes:** - `view`: All fields read-only (disabled) - `edit`:
Fields editable, prefilled with row data - `create`: Fields editable,
empty form

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1016"
target="_blank" style="float:right; font-size:smaller">source</a>

### FormModal

``` python

def FormModal(
    columns:list, mode:str='view', record:dict=None, modal_id:str='form-modal', title:str=None, save_url:str=None,
    save_target:str=None, cancel_url:str=None, cancel_target:str=None, form_layout:Callable=None,
    row_id_field:str='id', indicator_id:str=None
)->Any:

```

*Generate a modal dialog with form fields driven by column config.*

Uses FormGrid (single column by default) for field layout. Integrates
with HTMX for form submission.

## 📦 Nav Container

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navcontainer"><code>NavContainer</code></a></td>
<td>Slide-out navigation drawer</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Mobile navigation menus, side drawers, off-canvas
> menus.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1182"
target="_blank" style="float:right; font-size:smaller">source</a>

### BottomNav

``` python

def BottomNav(
    c:VAR_POSITIONAL, cls:str='bottom', size:str='s', kwargs:VAR_KEYWORD
):

```

*Mobile bottom navigation bar.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1178"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavSubtitle

``` python

def NavSubtitle(
    c:VAR_POSITIONAL, cls:str='small-text gray-text padding', kwargs:VAR_KEYWORD
):

```

*Navigation section subtitle label.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1174"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavCloseLi

``` python

def NavCloseLi(
    dialog_id:str, icon:str='close', cls:str='circle transparent', kwargs:VAR_KEYWORD
):

```

*Navigation close button.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1170"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavDividerLi

``` python

def NavDividerLi(
    cls:str='', kwargs:VAR_KEYWORD
):

```

*Navigation divider (horizontal rule).*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1166"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavHeaderLi

``` python

def NavHeaderLi(
    c:VAR_POSITIONAL, cls:str='horizontal-padding', kwargs:VAR_KEYWORD
):

```

*Navigation header element.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1133"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavContainer

``` python

def NavContainer(
    li:VAR_POSITIONAL, title:NoneType=None, brand:NoneType=None, position:str='left', close_button:bool=True,
    cls:str='active', id:NoneType=None, kwargs:VAR_KEYWORD
):

```

*Slide-out navigation drawer with header and close button.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_navcontainer():
    return NavContainer(
        Li(I('inbox'), Span('Inbox', cls='max'), B('24')),
        Li(I('send'), Span('Outbox')),
        Li(I('favorite'), Span('Favorites')),
        Li(I('delete'), Span('Trash')),
        Li(I('fiber_manual_record'), Span('Label')),
        Li(I('change_history'), Span('Label')),
        Li(I('stop'), Span('Label')),
        title='Title',
        brand='/favicon.png',
        id='main-nav'

    )

preview(ex_navcontainer())
```

</details>

<iframe src="http://localhost:2222/_WICPrZmdRruE6wyqyq1Nbg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📑 Sidebar & Layout

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navsidebarheader"><code>NavSideBarHeader</code></a></td>
<td>Header section for sidebar</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navsidebarcontainer"><code>NavSideBarContainer</code></a></td>
<td>Full sidebar with navigation (HTMX SPA enabled)</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#bottomnav"><code>BottomNav</code></a></td>
<td>Mobile bottom navigation bar</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#layout"><code>Layout</code></a></td>
<td>Complete page layout with sidebar, navbar, and mobile-responsive
navigation</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: App shells with persistent navigation, dashboard
> layouts.

### 📱 Mobile Responsive Navigation

The
[`Layout`](https://abhisheksreesaila.github.io/fh-matui/components.html#layout)
component automatically switches between desktop and mobile navigation:

<table>
<colgroup>
<col style="width: 43%" />
<col style="width: 56%" />
</colgroup>
<thead>
<tr>
<th>Screen Size</th>
<th>Navigation Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Desktop (&gt;992px)</td>
<td>Left sidebar (<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#navsidebarcontainer"><code>NavSideBarContainer</code></a>)
visible</td>
</tr>
<tr>
<td>Mobile (≤992px)</td>
<td>Bottom nav (<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#bottomnav"><code>BottomNav</code></a>)
visible</td>
</tr>
</tbody>
</table>

Both navigations use the same `sidebar_links` and share HTMX SPA
attributes for consistent behavior. The main container uses
`horizontal-margin` for symmetric spacing.

### 🚀 SPA Navigation (What App Developers Need to Know)

The
[`Layout`](https://abhisheksreesaila.github.io/fh-matui/components.html#layout),
[`NavBar`](https://abhisheksreesaila.github.io/fh-matui/components.html#navbar),
and
[`NavSideBarContainer`](https://abhisheksreesaila.github.io/fh-matui/components.html#navsidebarcontainer)
components now include **HTMX SPA navigation** by default. Links inside
the sidebar/navbar are automatically enhanced with `hx-boost`, so
clicking them swaps only the `#main-content` area instead of reloading
the entire page.

#### Route Pattern

Routes must check `req.headers` for HTMX requests to return just the
content (not the full layout):

``` python
@rt("/dashboard")
def dashboard(req):
    content = dashboard_content()
    if 'HX-Request' in req.headers: return content  # HTMX swap - just content
    return get_layout(content)  # Full page load with Layout
```

#### Active Link Highlighting

Add `cls='nav-link'` to sidebar links for automatic active state
highlighting:

``` python
A(Icon('home'), Span('Home'), href='/', cls='nav-link')
```

Include `active_nav_script` in your layout wrapper:

``` python
active_nav_script = Script("""
function updateActiveNav() {
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.toggle('active', link.getAttribute('href') === window.location.pathname);
    });
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', updateActiveNav);
} else {
    updateActiveNav();
}
document.body.addEventListener('htmx:afterSettle', updateActiveNav);
""")

def get_layout(content):
    return Div(
        Layout(content, sidebar_links=sidebar_items(), nav_bar=NavBar(...)),
        active_nav_script
    )
```

#### New Optional Parameters (backward-compatible)

<table style="width:100%;">
<colgroup>
<col style="width: 33%" />
<col style="width: 27%" />
<col style="width: 39%" />
</colgroup>
<thead>
<tr>
<th>Parameter</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hx_boost</code></td>
<td><code>True</code></td>
<td>Auto-enhance links for HTMX navigation</td>
</tr>
<tr>
<td><code>hx_target</code></td>
<td><code>'#main-content'</code></td>
<td>Target element for content swaps</td>
</tr>
<tr>
<td><code>main_id</code></td>
<td><code>'main-content'</code></td>
<td>ID for main content wrapper (Layout only)</td>
</tr>
<tr>
<td><code>size</code></td>
<td><code>'small'</code></td>
<td>Navbar thickness (NavBar only)</td>
</tr>
</tbody>
</table>

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1201"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavSideBarContainer

``` python

def NavSideBarContainer(
    children:VAR_POSITIONAL, position:str='left', size:str='m', cls:str='', active:bool=False, hx_boost:bool=True,
    hx_target:str='#main-content', kwargs:VAR_KEYWORD
):

```

*BeerCSS navigation sidebar with HTMX SPA navigation defaults.*

Args: position: Sidebar position (‘left’ or ‘right’) size: Sidebar size
(‘s’, ‘m’, ‘l’) active: Whether sidebar starts visible hx_boost:
Auto-enhance all <a> links for HTMX navigation (default True) hx_target:
Target element for boosted links (default ‘\#main-content’)

Usage: Routes should check `req.headers` for HX-Request and return
content only for HTMX requests:

    @rt("/dashboard")
    def dashboard(req):
        content = dashboard_content()
        if 'HX-Request' in req.headers: return content  # HTMX swap
        return Layout(content)  # Full page load

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1194"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavSideBarLinks

``` python

def NavSideBarLinks(
    children:VAR_POSITIONAL, as_list:bool=False, cls:str='', kwargs:VAR_KEYWORD
):

```

*Container for navigation links (optional list wrapper).*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1190"
target="_blank" style="float:right; font-size:smaller">source</a>

### NavSideBarHeader

``` python

def NavSideBarHeader(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

```

*Sidebar header section for menu buttons and branding.*

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_navsidebarcontainer():
         
        nav = NavSideBarContainer(
            NavSideBarHeader(
                NavToggleButton('#main-nav')
            ),
            A(I('home'), Span('Home')),
            A(I('dashboard'), Span('Dashboard')),
            A(I('settings'), Span('Settings')),
            A(I('help'), Span('Help')),
            A(I('info'), Span('About')),
            position='left',
            size='l',
            id='main-nav'
        )
        
        content = Main(
            H2("Navigation Toggle"),
            H3("Content Area"),
            P("Click the menu button to toggle the navigation."),
            cls="responsive"
        )
    
        return Div(nav, content)


preview(ex_navsidebarcontainer())
```

</details>

<iframe src="http://localhost:2222/_tBbpTPxjTruDc0UV5IaIrg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1254"
target="_blank" style="float:right; font-size:smaller">source</a>

### Layout

``` python

def Layout(
    content:VAR_POSITIONAL, sidebar:NoneType=None, sidebar_links:NoneType=None, nav_bar:NoneType=None,
    container_size:ContainerT=<ContainerT.expand: 'responsive max'>, main_bg:str='surface',
    sidebar_id:str='app-sidebar', main_id:str='main-content', cls:str='', kwargs:VAR_KEYWORD
):

```

*App layout with HTMX SPA navigation and responsive mobile support.*

Args: main_id: ID for main content area (default ‘main-content’) - use
as hx-target

HTMX SPA features: - hx-boost on sidebar automatically enhances all <a>
links - hx-history-elt for back/forward button caching - Routes should
check `req.headers` for HX-Request and return content only for HTMX
requests

Mobile Responsive: - Desktop (\>992px): Left sidebar visible, bottom nav
hidden - Mobile (≤992px): Bottom nav visible, sidebar hidden - Both
navigations share the same sidebar_links for consistent behavior

Usage: @rt(“/dashboard”) def dashboard(req): content =
dashboard_content() if ‘HX-Request’ in req.headers: return content \#
HTMX swap return Layout(content) \# Full page load

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1234"
target="_blank" style="float:right; font-size:smaller">source</a>

### Page

``` python

def Page(
    c:VAR_POSITIONAL, active:bool=True, position:NoneType=None, cls:str='', kwargs:VAR_KEYWORD
):

```

*BeerCSS animated page container.*

Pages are containers that can be a main page, multiple pages, or
animated elements.

Args: active: Show page (default True) position: Animation direction -
‘left’, ‘right’, ‘top’, ‘bottom’ (optional) cls: Additional classes

Example: Page(H1(“Dashboard”), P(“Content here”)) \# Default active page
Page(content, position=‘right’) \# Slide from right animation

<details class="code-fold">
<summary>Code</summary>

``` python
def nav_items():
    """Returns navigation items for NavBar - no hx_* attrs needed, hx-boost handles it"""
    return [
        A("Home", href='/'),
        A("Dashboard", href='/dashboard'),
        A("Cookies", href='/cookies'),
        A(Icon('light_mode'), cls='circle', onclick='toggleMode()', title='Toggle dark/light mode', style='margin-left: 1rem;'),
    ]


def sidebar_items():
    """Returns navigation items for NavSideBarContainer - no hx_* attrs needed, hx-boost handles it"""
    return [
        A(Icon('home'), Span('Home'), href='/', cls='nav-link'),
        A(Icon('dashboard'), Span('Dashboard'), href='/dashboard', cls='nav-link'),
        A(Icon('cookie'), Span('Cookies'), href='/cookies', cls='nav-link'),
        A(Icon('logout'), Span('Logout'), href='/login', cls='nav-link'),
    ]


# Script to highlight active nav link - uses BeerCSS 'active' class
active_nav_script = Script("""
function updateActiveNav() {
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.toggle('active', link.getAttribute('href') === window.location.pathname);
    });
}
// Run on initial page load (after DOM is ready)
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', updateActiveNav);
} else {
    updateActiveNav();
}
// Run after HTMX swaps
document.body.addEventListener('htmx:afterSettle', updateActiveNav);
""")


def get_layout(content):
    """App shell with HTMX SPA navigation."""
    return Div(
        Layout(
            content,
            sidebar_links=sidebar_items(),
            nav_bar=NavBar(*nav_items(), brand=H3('Admin Panel'), sticky=True)
        ),
        active_nav_script
    )
```

</details>

<details class="code-fold">
<summary>Code</summary>

``` python
# Content functions for each page
def home_content():
    return Div(
        H1("Home"),
        P("Welcome to the home page!", cls='grey-text'),
        cls='padding'
    )

def dashboard_content():
    return Div(
        H1("Dashboard"),
        P("Welcome to the admin panel!", cls='grey-text'),
        Grid(
            Card(H6("Total Users"), H2("1,234"), cls='padding'),
            Card(H6("Active Sessions"), H2("456"), cls='padding'),
            Card(H6("Page Views"), H2("12.5K"), cls='padding'),
            Card(H6("Conversion Rate"), H2("3.2%"), cls='padding'),
            cols=4  # Now auto-derives: cols_sm=1, cols_md=2, cols_lg=4
        ),
        Card(
            H5("Recent Activity"),
            Ul(
                Li("User john@example.com logged in"),
                Li("New order #1234 created"),
                Li("Payment processed for order #1233"),
                Li("User jane@example.com signed up")
            ),
            cls='padding margin-top'
        ),
        cls='padding'
    )

def cookies_content():
    return Div(
        H1("Cookies Settings"),
        P("Manage your cookie preferences here.", cls='grey-text'),
        cls='padding'
    )

# Routes - check HX-Request header for HTMX detection
@rt("/")
def home(req):
    content = home_content()
    if 'HX-Request' in req.headers: return content
    return get_layout(content)

@rt("/dashboard")
def dashboard(req):
    content = dashboard_content()
    if 'HX-Request' in req.headers: return content
    return get_layout(content)

@rt("/cookies")
def cookies(req):
    content = cookies_content()
    if 'HX-Request' in req.headers: return content
    return get_layout(content)
```

</details>

<details class="code-fold">
<summary>Code</summary>

``` python
@rt('/test_layout')
def test_layout():
 return get_layout(dashboard_content())
```

</details>

<details class="code-fold">
<summary>Code</summary>

``` python
preview(get_layout(dashboard_content()))
```

</details>

<iframe src="http://localhost:2222/_T61OZbdZQT2TwLoDtXFgzA" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔤 Typography

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textt"><code>TextT</code></a></td>
<td>Enum of text style classes</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#textpresets"><code>TextPresets</code></a></td>
<td>Pre-configured text combinations</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#codespan"><code>CodeSpan</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#codeblock"><code>CodeBlock</code></a></td>
<td>Code formatting</td>
</tr>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#sup"><code>Sup</code></a>,
<a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#sub"><code>Sub</code></a></td>
<td>Superscript/subscript</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Consistent text styling, code snippets, mathematical
> notation.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1361"
target="_blank" style="float:right; font-size:smaller">source</a>

### TextPresets

``` python

def TextPresets(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Common typography presets combining multiple TextT values.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1342"
target="_blank" style="float:right; font-size:smaller">source</a>

### TextT

``` python

def TextT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Text styles using BeerCSS typography classes.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1423"
target="_blank" style="float:right; font-size:smaller">source</a>

### Sup

``` python

def Sup(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Superscript text.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1418"
target="_blank" style="float:right; font-size:smaller">source</a>

### Sub

``` python

def Sub(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Subscript text.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1413"
target="_blank" style="float:right; font-size:smaller">source</a>

### Abbr

``` python

def Abbr(
    c:VAR_POSITIONAL, title:str='', cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Abbreviation with title tooltip.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1408"
target="_blank" style="float:right; font-size:smaller">source</a>

### Mark

``` python

def Mark(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Highlighted/marked text.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1404"
target="_blank" style="float:right; font-size:smaller">source</a>

### Small

``` python

def Small(
    c:VAR_POSITIONAL, cls:str='small-text', kwargs:VAR_KEYWORD
):

```

*Small text element.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1400"
target="_blank" style="float:right; font-size:smaller">source</a>

### Strong

``` python

def Strong(
    c:VAR_POSITIONAL, cls:str='bold', kwargs:VAR_KEYWORD
):

```

*Strong (bold) text.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1395"
target="_blank" style="float:right; font-size:smaller">source</a>

### Em

``` python

def Em(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Emphasized text.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1391"
target="_blank" style="float:right; font-size:smaller">source</a>

### Q

``` python

def Q(
    c:VAR_POSITIONAL, cls:str='italic large-text', kwargs:VAR_KEYWORD
):

```

*Styled inline quotation.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1386"
target="_blank" style="float:right; font-size:smaller">source</a>

### Blockquote

``` python

def Blockquote(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Blockquote element for quotes.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1379"
target="_blank" style="float:right; font-size:smaller">source</a>

### CodeBlock

``` python

def CodeBlock(
    c:VAR_POSITIONAL, cls:tuple=(), code_cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Block code with pre wrapper.*

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1374"
target="_blank" style="float:right; font-size:smaller">source</a>

### CodeSpan

``` python

def CodeSpan(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

```

*Inline code snippet.*

## ❓ FAQ

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#faqitem"><code>FAQItem</code></a></td>
<td>Collapsible question/answer item</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Help pages, documentation, support sections.  
> **Note**: For a complete FAQ section with title, use
> [`FAQSection`](https://abhisheksreesaila.github.io/fh-matui/web_pages.html#faqsection)
> from `web_pages`.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1430"
target="_blank" style="float:right; font-size:smaller">source</a>

### FAQItem

``` python

def FAQItem(
    question:str, answer:str, question_cls:str='', answer_cls:str=''
):

```

*Collapsible FAQ item using details/summary.*

Atomic component for a single collapsible Q&A item. Use FAQSection from
web_pages for a full FAQ section with title.

Args: question: The question text answer: The answer text  
question_cls: Additional classes for question styling answer_cls:
Additional classes for answer styling

``` python
def ex_faq_item():
    return Div(
        FAQItem("What is fh-matui?", "A small component layer for FastHTML."),
        FAQItem("How do I use FAQItem?", "Wrap multiple FAQItems in a column for a list."),
        cls="column small-space"
    )
```

``` python
preview(ex_faq_item())
```

<iframe src="http://localhost:2222/_HYh_V2OzS8O37vEXR4RM_Q" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🍪 Cookies Banner

<table>
<colgroup>
<col style="width: 55%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr>
<th>Component</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/components.html#cookiesbanner"><code>CookiesBanner</code></a></td>
<td>GDPR-compliant cookie consent banner</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Cookie consent, privacy compliance, user preference
> collection.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/components.py#L1448"
target="_blank" style="float:right; font-size:smaller">source</a>

### CookiesBanner

``` python

def CookiesBanner(
    message:str='We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.',
    accept_text:str='Accept', decline_text:str='Decline', settings_text:NoneType=None, policy_link:str='/cookies',
    policy_text:str='Learn more', position:str='bottom', on_accept:str='console.log("Accepted")',
    on_decline:str='console.log("Declined")', on_settings:str='console.log("Settings")', cls:str='',
    kwargs:VAR_KEYWORD
):

```

*GDPR-compliant cookie consent banner with accept/decline actions.*

<details class="code-fold">
<summary>Code</summary>

``` python
def get_CookiesBanner():
    return CookiesBanner()

preview(get_CookiesBanner())
```

</details>

<iframe src="http://localhost:2222/_3thmrL0rQf_Zl2wJHwvicQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 💬 BlockQuote

> 💡 **Use case**: Quotations, testimonials, highlighted text excerpts.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_other():
    return Article(
        Blockquote("This is a blockquote element"),
        CodeBlock("#This is a CodeBlock element\n\ndef add(a,b): return a+b"),
        cls="padding")

preview(ex_other())
```

</details>

<iframe src="http://localhost:2222/_XwQ6tc4IR0qhYB0dq_6IgQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🔤 TextT Examples

Preview of all
[`TextT`](https://abhisheksreesaila.github.io/fh-matui/components.html#textt)
enum values applied to text.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_textt():
    return Article(
        Grid(*[Div(P(f"This is {s.name} text", cls=s.value)) for s in TextT]),
        cls="padding")


preview(ex_textt())
```

</details>

<iframe src="http://localhost:2222/_voAV_m76Qmetl-7IGBMgpQ" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 🎨 Text Presets Examples

Preview of all
[`TextPresets`](https://abhisheksreesaila.github.io/fh-matui/components.html#textpresets)
enum values applied to text.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_textpresets():
    return Article(
        Grid(*[Div(P(f"This is {preset.name} text", cls=preset.value)) for preset in TextPresets]),
        cls="padding")

preview(ex_textpresets())
```

</details>

<iframe src="http://localhost:2222/_zhiSbttsS_a2lSXBEDHWDw" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

## 📝 Headings Examples

Preview of heading hierarchy (H1-H6) with `Titled` component.

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_headings():
    return Article(
        DivVStacked(
            Titled("Titled"),
            H1("Level 1 Heading (H1)"), 
            H2("Level 2 Heading (H2)"), 
            H3("Level 3 Heading (H3)"), 
            H4("Level 4 Heading (H4)"),
            H5("Level 5 Heading (H5)"),
            H6("Level 6 Heading (H6)"),
        ),
        cls="padding")

preview(ex_headings())
```

</details>

<iframe src="http://localhost:2222/_UhwVqbaYQPOlwaIuJBe0sg" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> 

<details class="code-fold">
<summary>Code</summary>

``` python
def ex_semantic_elements():
    return Article(
        H2("Semantic HTML Elements Demo"),
        # Text formatting examples
        P("Here's an example of ", Em("emphasized (Em)"), " and ", Strong("strong (Strong)"), " text."),
        P("Some ", I("italic text (I)"), " and ", Small("smaller text (Small)"), " in a paragraph."),
        P("You can ", Mark("highlight (Mark)"), " text, show ", Del("deleted (Del)"), " and ", 
          Ins("inserted (Ins)"), " content."),
        P("Chemical formulas use ", Sub("subscripts (Sub)"), " and ", Sup("superscripts (Sup)"), 
          " like H", Sub("2"), "O."),
        # Quote examples
        Blockquote(
            P("The only way to do great work is to love what you do."),
            Cite("Steve Jobs (Cite)")),
        P("As Shakespeare wrote, ", Q("All the world's a stage (Q)"), "."),
        # Time and Address
        P("Posted on ", Time("2024-01-29", datetime="2024-01-29")),
        Address(
            "Mozilla Foundation (Address)",
            Br(),
            "331 E Evelyn Ave (Address)",
            Br(),
            "Mountain View, CA 94041 (Address)",
            Br(),
            "USA (Address)"),
        # Technical and definition examples
        P(
            Dfn("HTML (Dfn)"), " (", 
            Abbr("HyperText Markup Language (Abbr)", title="HyperText Markup Language"), 
            ") is the standard markup language for documents designed to be displayed in a web browser."),
        P("Press ", Kbd("Ctrl (Kbd)"), " + ", Kbd("C (Kbd)"), " to copy."),
        P("The command returned: ", Samp("Hello, World! (Samp)")),
        P("Let ", Var("x (Var)"), " be the variable in the equation."),
        # Figure with caption
        Figure(
            # PicSumImg(),
            Caption("Figure 1: An example image with caption (Caption)")),
        # Interactive elements
        Details(
            Summary("Click to show more information (Summary)"),
            P("This is the detailed content that is initially hidden (P)")),
        # Data representation
        P(
            Data("123 (Data)", value="123"), " is a number, and here's a Meter showing progress: ",
            Meter(value=0.6, min=0, max=1)),
        P(
            "Temperature: ",
            Meter(value=-1, min=-10, max=40, low=0, high=30, optimum=21),
            " (with low/high/optimum values)"),
        P(
            Data("€42.00", value="42"), 
            " - price example with semantic value"),
        # Output example
        P("Form calculation result: ", Output("The sum is 42 (Output)", form="calc-form", for_="num1 num2")),
        # Meta information example
        Section(
            H3("Blog Post Title (H3)"),
            Small("By John Doe • 5 min read (Small)"),
            P("Article content here...")),
        # Text decoration examples
        P("This text has ",U("proper name annotation (U)"), " and this is ",S("outdated information (S)"), " that's been superseded."),
        cls='padding'
    )


preview(ex_semantic_elements())
```

</details>

<iframe src="http://localhost:2222/_Cl-eNubwTnGDkE5xNc0Sow" style="width: 100%; height: auto; border: none;" onload="{
        let frame = this;
        window.addEventListener('message', function(e) {
            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
        }, false);
    }" allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe>