list

List is a vertical layout to display information in rows.

Base List

The base list components:

list_ui = SingleValueFactory("list", "A vertical flex layout to include list rows") # List container
list_row = SingleValueFactory("list-row", "The item inside list - a horizontal grid layout to include data") # List row

List Modifiers

List modifier utilities for controlling column layout:

list_modifiers = SimpleFactory(
    {
        "col_wrap": "list-col-wrap",
        "col_grow": "list-col-grow"
    },
    "List modifiers for column layout (wrap to next line, fill remaining space)"
) # List modifiers

List Test Examples

---

test_list_basic_examples

def test_list_basic_examples(
    
):

Test basic list utilities.

def test_list_basic_examples():
    """Test basic list utilities."""
    # Basic components
    assert str(list_ui) == "list"
    assert str(list_row) == "list-row"
    
    # With modifiers
    assert str(list_ui.hover) == "hover:list"
    assert str(list_row.md) == "md:list-row"
    assert str(list_ui.dark) == "dark:list"

# Run the tests
test_list_basic_examples()

---

test_list_modifiers_examples

def test_list_modifiers_examples(
    
):

Test list modifier utilities.

def test_list_modifiers_examples():
    """Test list modifier utilities."""
    assert str(list_modifiers.col_wrap) == "list-col-wrap"
    assert str(list_modifiers.col_grow) == "list-col-grow"
    
    # With responsive modifiers
    assert str(list_modifiers.col_wrap.hover) == "hover:list-col-wrap"
    assert str(list_modifiers.col_grow.md) == "md:list-col-grow"

# Run the tests
test_list_modifiers_examples()

---

test_list_basic_fasthtml_examples

def test_list_basic_fasthtml_examples(
    
):

Test basic list example: second column grows (default behavior) from daisyUI v5 documentation.

def test_list_basic_fasthtml_examples():
    """Test basic list example: second column grows (default behavior) from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li, Div, Img, Button
    from fasthtml.svg import Svg, Path, G
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, uppercase
    from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
    
    # Create SVG icons as reusable components
    play_icon = Svg(
        G(
            Path(d="M6 3L20 12 6 21 6 3z"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="2",
            fill="none",
            stroke="currentColor"
        ),
        cls=str(size_util("[1.2em]")),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    heart_icon = Svg(
        G(
            Path(d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="2",
            fill="none",
            stroke="currentColor"
        ),
        cls=str(size_util("[1.2em]")),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # List with second column growing (default behavior)
    list_second_column_grows = Ul(
        Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/1@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Dio Lupa"),
                Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/4@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Ellie Beilish"),
                Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/3@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Sabrino Gardener"),
                Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
    )
    
    # Verify list structure
    assert "list" in list_second_column_grows.attrs['class']
    assert "bg-base-100" in list_second_column_grows.attrs['class']
    assert "rounded-box" in list_second_column_grows.attrs['class']
    assert "shadow-md" in list_second_column_grows.attrs['class']
    
    # Verify header
    header = list_second_column_grows.children[0]
    assert header.tag == "li"
    assert "p-4" in header.attrs['class']
    assert "pb-2" in header.attrs['class']
    assert "text-xs" in header.attrs['class']
    assert "opacity-60" in header.attrs['class']
    assert "tracking-wide" in header.attrs['class']
    assert header.children[0] == "Most played songs this week"
    
    # Verify first song row
    first_row = list_second_column_grows.children[1]
    assert first_row.tag == "li"
    assert "list-row" in first_row.attrs['class']
    assert len(first_row.children) == 4  # Image, text content, play button, heart button
    
    # Verify image column
    image_col = first_row.children[0]
    assert image_col.tag == "div"
    assert image_col.children[0].tag == "img"
    assert "size-10" in image_col.children[0].attrs['class']
    assert "rounded-box" in image_col.children[0].attrs['class']
    assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
    
    # Verify text column (second column that grows by default)
    text_col = first_row.children[1]
    assert text_col.tag == "div"
    assert len(text_col.children) == 2
    assert text_col.children[0].tag == "div"
    assert text_col.children[0].children[0] == "Dio Lupa"
    assert text_col.children[1].tag == "div"
    assert text_col.children[1].children[0] == "Remaining Reason"
    assert "text-xs" in text_col.children[1].attrs['class']
    assert "uppercase" in text_col.children[1].attrs['class']
    assert "font-semibold" in text_col.children[1].attrs['class']
    assert "opacity-60" in text_col.children[1].attrs['class']
    
    # Verify play button
    play_btn = first_row.children[2]
    assert play_btn.tag == "button"
    assert "btn" in play_btn.attrs['class']
    assert "btn-square" in play_btn.attrs['class']
    assert "btn-ghost" in play_btn.attrs['class']
    assert play_btn.children[0].tag == "svg"
    assert "size-[1.2em]" in play_btn.children[0].attrs['class']
    
    # Verify heart button
    heart_btn = first_row.children[3]
    assert heart_btn.tag == "button"
    assert "btn" in heart_btn.attrs['class']
    assert "btn-square" in heart_btn.attrs['class']
    assert "btn-ghost" in heart_btn.attrs['class']
    assert heart_btn.children[0].tag == "svg"
    assert "size-[1.2em]" in heart_btn.children[0].attrs['class']
    
    # Verify second song row has different content
    second_row = list_second_column_grows.children[2]
    assert "list-row" in second_row.attrs['class']
    assert second_row.children[1].children[0].children[0] == "Ellie Beilish"
    assert second_row.children[1].children[1].children[0] == "Bears of a fever"
    
    # Verify third song row has different content  
    third_row = list_second_column_grows.children[3]
    assert "list-row" in third_row.attrs['class']
    assert third_row.children[1].children[0].children[0] == "Sabrino Gardener"
    assert third_row.children[1].children[1].children[0] == "Cappuccino"
    
    # Return the created element in a Div
    return Div(list_second_column_grows)

# Run the tests
test_list_basic_fasthtml_examples()

• Most played songs this week
• 
  Dio Lupa

  Remaining Reason
• 
  Ellie Beilish

  Bears of a fever
• 
  Sabrino Gardener

  Cappuccino

test_func = test_list_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_list_column_grow_fasthtml_examples

def test_list_column_grow_fasthtml_examples(
    
):

Test list example: third column grows from daisyUI v5 documentation.

def test_list_column_grow_fasthtml_examples():
    """Test list example: third column grows from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li, Div, Img, Button
    from fasthtml.svg import Svg, Path, G
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, tabular_nums, font_weight, uppercase
    from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
    
    # Create reusable play icon
    play_icon = Svg(
        G(
            Path(d="M6 3L20 12 6 21 6 3z"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="2",
            fill="none",
            stroke="currentColor"
        ),
        cls=str(size_util("[1.2em]")),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # List with third column growing using list-col-grow
    list_third_column_grows = Ul(
        Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
        Li(
            Div("01", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/1@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Dio Lupa"),
                Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
                cls=str(list_modifiers.col_grow)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div("02", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/4@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Ellie Beilish"),
                Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
                cls=str(list_modifiers.col_grow)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div("03", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/3@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Sabrino Gardener"),
                Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
                cls=str(list_modifiers.col_grow)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
    )
    
    # Verify list structure
    assert "list" in list_third_column_grows.attrs['class']
    assert "bg-base-100" in list_third_column_grows.attrs['class']
    assert "rounded-box" in list_third_column_grows.attrs['class']
    assert "shadow-md" in list_third_column_grows.attrs['class']
    
    # Verify header
    header = list_third_column_grows.children[0]
    assert header.tag == "li"
    assert "p-4" in header.attrs['class']
    assert "pb-2" in header.attrs['class']
    assert "text-xs" in header.attrs['class']
    assert "opacity-60" in header.attrs['class']
    assert header.children[0] == "Most played songs this week"
    
    # Verify first song row
    first_row = list_third_column_grows.children[1]
    assert first_row.tag == "li"
    assert "list-row" in first_row.attrs['class']
    assert len(first_row.children) == 4  # Number, image, text content (with col-grow), play button
    
    # Verify number column (first column)
    number_col = first_row.children[0]
    assert number_col.tag == "div"
    assert number_col.children[0] == "01"
    assert "text-4xl" in number_col.attrs['class']
    assert "font-thin" in number_col.attrs['class']
    assert "opacity-30" in number_col.attrs['class']
    assert "tabular-nums" in number_col.attrs['class']
    
    # Verify image column (second column)
    image_col = first_row.children[1]
    assert image_col.tag == "div"
    assert image_col.children[0].tag == "img"
    assert "size-10" in image_col.children[0].attrs['class']
    assert "rounded-box" in image_col.children[0].attrs['class']
    assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
    
    # Verify text column (third column that grows with list-col-grow)
    text_col = first_row.children[2]
    assert text_col.tag == "div"
    assert "list-col-grow" in text_col.attrs['class']
    assert len(text_col.children) == 2
    assert text_col.children[0].tag == "div"
    assert text_col.children[0].children[0] == "Dio Lupa"
    assert text_col.children[1].tag == "div"
    assert text_col.children[1].children[0] == "Remaining Reason"
    assert "text-xs" in text_col.children[1].attrs['class']
    assert "uppercase" in text_col.children[1].attrs['class']
    assert "font-semibold" in text_col.children[1].attrs['class']
    assert "opacity-60" in text_col.children[1].attrs['class']
    
    # Verify play button (fourth column)
    play_btn = first_row.children[3]
    assert play_btn.tag == "button"
    assert "btn" in play_btn.attrs['class']
    assert "btn-square" in play_btn.attrs['class']
    assert "btn-ghost" in play_btn.attrs['class']
    assert play_btn.children[0].tag == "svg"
    assert "size-[1.2em]" in play_btn.children[0].attrs['class']
    
    # Verify second song row structure
    second_row = list_third_column_grows.children[2]
    assert "list-row" in second_row.attrs['class']
    assert second_row.children[0].children[0] == "02"
    assert "list-col-grow" in second_row.children[2].attrs['class']
    assert second_row.children[2].children[0].children[0] == "Ellie Beilish"
    assert second_row.children[2].children[1].children[0] == "Bears of a fever"
    
    # Verify third song row structure
    third_row = list_third_column_grows.children[3]
    assert "list-row" in third_row.attrs['class']
    assert third_row.children[0].children[0] == "03"
    assert "list-col-grow" in third_row.children[2].attrs['class']
    assert third_row.children[2].children[0].children[0] == "Sabrino Gardener"
    assert third_row.children[2].children[1].children[0] == "Cappuccino"
    
    # Verify all rows have the col-grow modifier on the text column
    for i in range(1, 4):  # Rows 1, 2, 3 (skip header)
        row = list_third_column_grows.children[i]
        text_column = row.children[2]  # Third column (index 2)
        assert "list-col-grow" in text_column.attrs['class']
    
    # Return the created element in a Div
    return Div(list_third_column_grows)

# Run the tests
test_list_column_grow_fasthtml_examples()

• Most played songs this week
• 01
  
  Dio Lupa

  Remaining Reason
• 02
  
  Ellie Beilish

  Bears of a fever
• 03
  
  Sabrino Gardener

  Cappuccino

test_func = test_list_column_grow_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_list_column_wrap_fasthtml_examples

def test_list_column_wrap_fasthtml_examples(
    
):

Test list example: third column wraps to next row from daisyUI v5 documentation.

def test_list_column_wrap_fasthtml_examples():
    """Test list example: third column wraps to next row from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li, Div, Img, Button, P
    from fasthtml.svg import Svg, Path, G
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, uppercase
    from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
    
    # Create reusable SVG icons
    play_icon = Svg(
        G(
            Path(d="M6 3L20 12 6 21 6 3z"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="2",
            fill="none",
            stroke="currentColor"
        ),
        cls=str(size_util("[1.2em]")),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    heart_icon = Svg(
        G(
            Path(d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="2",
            fill="none",
            stroke="currentColor"
        ),
        cls=str(size_util("[1.2em]")),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # List with third column wrapping to next row using list-col-wrap
    list_column_wraps = Ul(
        Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/1@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Dio Lupa"),
                Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            P(
                '"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa\'s most iconic tracks.',
                cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/4@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Ellie Beilish"),
                Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            P(
                '"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.',
                cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        Li(
            Div(
                Img(
                    src="https://img.daisyui.com/images/profile/demo/3@94.webp",
                    cls=combine_classes(size_util(10), border_radius.box)
                )
            ),
            Div(
                Div("Sabrino Gardener"),
                Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
            ),
            P(
                '"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song\'s success propelled Sabrino into the spotlight, solidifying their status as a rising star.',
                cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
            ),
            Button(
                play_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            Button(
                heart_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=str(list_row)
        ),
        cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
    )
    
    # Verify list structure
    assert "list" in list_column_wraps.attrs['class']
    assert "bg-base-100" in list_column_wraps.attrs['class']
    assert "rounded-box" in list_column_wraps.attrs['class']
    assert "shadow-md" in list_column_wraps.attrs['class']
    
    # Verify header
    header = list_column_wraps.children[0]
    assert header.tag == "li"
    assert "p-4" in header.attrs['class']
    assert "pb-2" in header.attrs['class']
    assert "text-xs" in header.attrs['class']
    assert "opacity-60" in header.attrs['class']
    assert header.children[0] == "Most played songs this week"
    
    # Verify first song row
    first_row = list_column_wraps.children[1]
    assert first_row.tag == "li"
    assert "list-row" in first_row.attrs['class']
    assert len(first_row.children) == 5  # Image, text content, description (col-wrap), play button, heart button
    
    # Verify image column (first column)
    image_col = first_row.children[0]
    assert image_col.tag == "div"
    assert image_col.children[0].tag == "img"
    assert "size-10" in image_col.children[0].attrs['class']
    assert "rounded-box" in image_col.children[0].attrs['class']
    assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
    
    # Verify text column (second column)
    text_col = first_row.children[1]
    assert text_col.tag == "div"
    assert len(text_col.children) == 2
    assert text_col.children[0].tag == "div"
    assert text_col.children[0].children[0] == "Dio Lupa"
    assert text_col.children[1].tag == "div"
    assert text_col.children[1].children[0] == "Remaining Reason"
    assert "text-xs" in text_col.children[1].attrs['class']
    assert "uppercase" in text_col.children[1].attrs['class']
    assert "font-semibold" in text_col.children[1].attrs['class']
    assert "opacity-60" in text_col.children[1].attrs['class']
    
    # Verify description column (third column that wraps with list-col-wrap)
    desc_col = first_row.children[2]
    assert desc_col.tag == "p"
    assert "list-col-wrap" in desc_col.attrs['class']
    assert "text-xs" in desc_col.attrs['class']
    assert '"Remaining Reason" became an instant hit' in desc_col.children[0]
    assert "making it one of Dio Lupa's most iconic tracks." in desc_col.children[0]
    
    # Verify play button (fourth column)
    play_btn = first_row.children[3]
    assert play_btn.tag == "button"
    assert "btn" in play_btn.attrs['class']
    assert "btn-square" in play_btn.attrs['class']
    assert "btn-ghost" in play_btn.attrs['class']
    assert play_btn.children[0].tag == "svg"
    assert "size-[1.2em]" in play_btn.children[0].attrs['class']
    
    # Verify heart button (fifth column)
    heart_btn = first_row.children[4]
    assert heart_btn.tag == "button"
    assert "btn" in heart_btn.attrs['class']
    assert "btn-square" in heart_btn.attrs['class']
    assert "btn-ghost" in heart_btn.attrs['class']
    assert heart_btn.children[0].tag == "svg"
    assert "size-[1.2em]" in heart_btn.children[0].attrs['class']
    
    # Verify second song row structure
    second_row = list_column_wraps.children[2]
    assert "list-row" in second_row.attrs['class']
    assert second_row.children[1].children[0].children[0] == "Ellie Beilish"
    assert second_row.children[1].children[1].children[0] == "Bears of a fever"
    assert "list-col-wrap" in second_row.children[2].attrs['class']
    assert '"Bears of a Fever" captivated audiences' in second_row.children[2].children[0]
    assert "earning Ellie critical acclaim." in second_row.children[2].children[0]
    
    # Verify third song row structure
    third_row = list_column_wraps.children[3]
    assert "list-row" in third_row.attrs['class']
    assert third_row.children[1].children[0].children[0] == "Sabrino Gardener"
    assert third_row.children[1].children[1].children[0] == "Cappuccino"
    assert "list-col-wrap" in third_row.children[2].attrs['class']
    assert '"Cappuccino" quickly gained attention' in third_row.children[2].children[0]
    assert "solidifying their status as a rising star." in third_row.children[2].children[0]
    
    # Verify all rows have the col-wrap modifier on the description column
    for i in range(1, 4):  # Rows 1, 2, 3 (skip header)
        row = list_column_wraps.children[i]
        desc_column = row.children[2]  # Third column (index 2)
        assert "list-col-wrap" in desc_column.attrs['class']
        assert "text-xs" in desc_column.attrs['class']
        assert desc_column.tag == "p"
    
    # Return the created element in a Div
    return Div(list_column_wraps)

# Run the tests
test_list_column_wrap_fasthtml_examples()

• Most played songs this week
• 
  Dio Lupa

  Remaining Reason

  "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa's most iconic tracks.

• 
  Ellie Beilish

  Bears of a fever

  "Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.

• 
  Sabrino Gardener

  Cappuccino

  "Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song's success propelled Sabrino into the spotlight, solidifying their status as a rising star.

test_func = test_list_column_wrap_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()