steps

Steps can be used to show a list of steps in a process.

Base Steps

Exported source

steps = SingleValueFactory("steps", "Container of multiple step nodes") # Base steps component
step = SingleValueFactory("step", "A single step node") # step part
step_icon = SingleValueFactory("step-icon", "For custom icon inside step") # step icon part

Step Colors

Exported source

step_colors = enums_to_simple_factory(step, [SemanticColorBrand, SemanticColorStatus], "Step color variants using daisyUI semantic colors") # Step color variants

Steps Directions

Exported source

steps_directions = SimpleFactory(
    {
        "vertical": "steps-vertical",
        "horizontal": "steps-horizontal",
    },
    "steps directions (vertical, horizontal)"
) # steps directions

Steps Test Examples

source

test_steps_basic_examples

 test_steps_basic_examples ()

Test basic steps utilities.

Exported source

def test_steps_basic_examples():
    """Test basic steps utilities."""
    # Basic steps
    assert str(steps) == "steps"
    assert str(step) == "step"
    assert str(step_icon) == "step-icon"
    
    # steps with modifiers
    assert str(steps.hover) == "hover:steps"
    assert str(steps.md) == "md:steps"
    assert str(steps.dark) == "dark:steps"

# Run the tests
test_steps_basic_examples()

source

test_step_colors_examples

 test_step_colors_examples ()

Test step color variants.

Exported source

def test_step_colors_examples():
    """Test step color variants."""
    # All color variants
    assert str(step_colors.neutral) == "step-neutral"
    assert str(step_colors.primary) == "step-primary"
    assert str(step_colors.secondary) == "step-secondary"
    assert str(step_colors.accent) == "step-accent"
    assert str(step_colors.info) == "step-info"
    assert str(step_colors.success) == "step-success"
    assert str(step_colors.warning) == "step-warning"
    assert str(step_colors.error) == "step-error"
    
    # With modifiers
    assert str(step_colors.primary.hover) == "hover:step-primary"
    assert str(step_colors.success.focus) == "focus:step-success"

# Run the tests
test_step_colors_examples()

source

test_steps_directions_examples

 test_steps_directions_examples ()

Test steps direction utilities.

Exported source

def test_steps_directions_examples():
    """Test steps direction utilities."""
    assert str(steps_directions.vertical) == "steps-vertical"
    assert str(steps_directions.horizontal) == "steps-horizontal"

# Run the tests
test_steps_directions_examples()

source

test_steps_horizontal_fasthtml_examples

 test_steps_horizontal_fasthtml_examples ()

Test horizontal steps from daisyUI v5 documentation.

Exported source

def test_steps_horizontal_fasthtml_examples():
    """Test horizontal steps from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li
    
    # Horizontal steps
    horizontal_steps = Ul(
        Li("Register", cls=combine_classes(step, step_colors.primary)),
        Li("Choose plan", cls=combine_classes(step, step_colors.primary)),
        Li("Purchase", cls=str(step)),
        Li("Receive Product", cls=str(step)),
        cls=str(steps)
    )
    
    # Verify structure
    assert horizontal_steps.tag == "ul"
    assert horizontal_steps.attrs['class'] == "steps"
    
    # Verify li elements
    assert len(horizontal_steps.children) == 4
    
    # First li - completed step
    first_li = horizontal_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-primary" in first_li.attrs['class']
    assert first_li.children[0] == "Register"
    
    # Second li - completed step
    second_li = horizontal_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-primary" in second_li.attrs['class']
    assert second_li.children[0] == "Choose plan"
    
    # Third li - uncompleted step
    third_li = horizontal_steps.children[2]
    assert third_li.tag == "li"
    assert third_li.attrs['class'] == "step"
    assert third_li.children[0] == "Purchase"
    
    # Fourth li - uncompleted step
    fourth_li = horizontal_steps.children[3]
    assert fourth_li.tag == "li"
    assert fourth_li.attrs['class'] == "step"
    assert fourth_li.children[0] == "Receive Product"
    
    return horizontal_steps

# Run the tests
test_steps_horizontal_fasthtml_examples()

<ul class="steps">
  <li class="step step-primary">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>

test_func = test_steps_horizontal_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()

source

test_steps_vertical_fasthtml_examples

 test_steps_vertical_fasthtml_examples ()

Test vertical steps from daisyUI v5 documentation.

Exported source

def test_steps_vertical_fasthtml_examples():
    """Test vertical steps from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li
    
    # Vertical steps
    vertical_steps = Ul(
        Li("Register", cls=combine_classes(step, step_colors.primary)),
        Li("Choose plan", cls=combine_classes(step, step_colors.primary)),
        Li("Purchase", cls=str(step)),
        Li("Receive Product", cls=str(step)),
        cls=combine_classes(steps, steps_directions.vertical)
    )
    
    # Verify structure
    assert vertical_steps.tag == "ul"
    assert "steps" in vertical_steps.attrs['class']
    assert "steps-vertical" in vertical_steps.attrs['class']
    
    # Verify li elements
    assert len(vertical_steps.children) == 4
    
    # First li - completed step
    first_li = vertical_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-primary" in first_li.attrs['class']
    assert first_li.children[0] == "Register"
    
    # Second li - completed step
    second_li = vertical_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-primary" in second_li.attrs['class']
    assert second_li.children[0] == "Choose plan"
    
    # Third li - uncompleted step
    third_li = vertical_steps.children[2]
    assert third_li.tag == "li"
    assert third_li.attrs['class'] == "step"
    assert third_li.children[0] == "Purchase"
    
    # Fourth li - uncompleted step
    fourth_li = vertical_steps.children[3]
    assert fourth_li.tag == "li"
    assert fourth_li.attrs['class'] == "step"
    assert fourth_li.children[0] == "Receive Product"
    
    return vertical_steps

# Run the tests
test_steps_vertical_fasthtml_examples()

<ul class="steps steps-vertical">
  <li class="step step-primary">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>

test_func = test_steps_vertical_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()

source

test_steps_responsive_fasthtml_examples

 test_steps_responsive_fasthtml_examples ()

Test responsive steps (vertical on small screen, horizontal on large screen) from daisyUI v5 documentation.

Exported source

def test_steps_responsive_fasthtml_examples():
    """Test responsive steps (vertical on small screen, horizontal on large screen) from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li
    
    # Responsive steps - vertical on small, horizontal on large
    responsive_steps = Ul(
        Li("Register", cls=combine_classes(step, step_colors.primary)),
        Li("Choose plan", cls=combine_classes(step, step_colors.primary)),
        Li("Purchase", cls=str(step)),
        Li("Receive Product", cls=str(step)),
        cls=combine_classes(steps, steps_directions.vertical, steps_directions.horizontal.lg)
    )
    
    # Verify structure
    assert responsive_steps.tag == "ul"
    assert "steps" in responsive_steps.attrs['class']
    assert "steps-vertical" in responsive_steps.attrs['class']
    assert "lg:steps-horizontal" in responsive_steps.attrs['class']
    
    # Verify li elements
    assert len(responsive_steps.children) == 4
    
    # First li - completed step
    first_li = responsive_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-primary" in first_li.attrs['class']
    assert first_li.children[0] == "Register"
    
    # Second li - completed step
    second_li = responsive_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-primary" in second_li.attrs['class']
    assert second_li.children[0] == "Choose plan"
    
    # Third li - uncompleted step
    third_li = responsive_steps.children[2]
    assert third_li.tag == "li"
    assert third_li.attrs['class'] == "step"
    assert third_li.children[0] == "Purchase"
    
    # Fourth li - uncompleted step
    fourth_li = responsive_steps.children[3]
    assert fourth_li.tag == "li"
    assert fourth_li.attrs['class'] == "step"
    assert fourth_li.children[0] == "Receive Product"
    
    return responsive_steps

# Run the tests
test_steps_responsive_fasthtml_examples()

<ul class="steps steps-vertical lg:steps-horizontal">
  <li class="step step-primary">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>

test_func = test_steps_responsive_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()

source

test_steps_with_custom_content_fasthtml_examples

 test_steps_with_custom_content_fasthtml_examples ()

Test steps with custom content in step-icon from daisyUI v5 documentation.

Exported source

def test_steps_with_custom_content_fasthtml_examples():
    """Test steps with custom content in step-icon from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li, Span
    
    # Steps with custom content in step-icon
    custom_content_steps = Ul(
        Li(
            Span("😕", cls=str(step_icon)),
            "Step 1",
            cls=combine_classes(step, step_colors.neutral)
        ),
        Li(
            Span("😃", cls=str(step_icon)),
            "Step 2",
            cls=combine_classes(step, step_colors.neutral)
        ),
        Li(
            Span("😍", cls=str(step_icon)),
            "Step 3",
            cls=str(step)
        ),
        cls=str(steps)
    )
    
    # Verify structure
    assert custom_content_steps.tag == "ul"
    assert custom_content_steps.attrs['class'] == "steps"
    
    # Verify li elements
    assert len(custom_content_steps.children) == 3
    
    # First li with custom icon
    first_li = custom_content_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-neutral" in first_li.attrs['class']
    assert first_li.children[0].tag == "span"
    assert first_li.children[0].attrs['class'] == "step-icon"
    assert first_li.children[0].children[0] == "😕"
    assert first_li.children[1] == "Step 1"
    
    # Second li with custom icon
    second_li = custom_content_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-neutral" in second_li.attrs['class']
    assert second_li.children[0].tag == "span"
    assert second_li.children[0].attrs['class'] == "step-icon"
    assert second_li.children[0].children[0] == "😃"
    assert second_li.children[1] == "Step 2"
    
    # Third li with custom icon
    third_li = custom_content_steps.children[2]
    assert third_li.tag == "li"
    assert third_li.attrs['class'] == "step"
    assert third_li.children[0].tag == "span"
    assert third_li.children[0].attrs['class'] == "step-icon"
    assert third_li.children[0].children[0] == "😍"
    assert third_li.children[1] == "Step 3"
    
    return custom_content_steps

# Run the tests
test_steps_with_custom_content_fasthtml_examples()

<ul class="steps">
  <li class="step step-neutral">
<span class="step-icon">😕</span>Step 1  </li>
  <li class="step step-neutral">
<span class="step-icon">😃</span>Step 2  </li>
  <li class="step">
<span class="step-icon">😍</span>Step 3  </li>
</ul>

test_func = test_steps_with_custom_content_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()

source

test_steps_with_data_content_fasthtml_examples

 test_steps_with_data_content_fasthtml_examples ()

Test steps with data-content attribute from daisyUI v5 documentation.

Exported source

def test_steps_with_data_content_fasthtml_examples():
    """Test steps with data-content attribute from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li
    
    # Steps with data-content
    data_content_steps = Ul(
        Li("Step 1", data_content="?", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 2", data_content="!", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 3", data_content="✓", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 4", data_content="✕", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 5", data_content="★", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 6", data_content="", cls=combine_classes(step, step_colors.neutral)),
        Li("Step 7", data_content="●", cls=combine_classes(step, step_colors.neutral)),
        cls=str(steps)
    )
    
    # Verify structure
    assert data_content_steps.tag == "ul"
    assert data_content_steps.attrs['class'] == "steps"
    
    # Verify li elements
    assert len(data_content_steps.children) == 7
    
    # First li with data-content
    first_li = data_content_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-neutral" in first_li.attrs['class']
    assert first_li.attrs['data-content'] == "?"
    assert first_li.children[0] == "Step 1"
    
    # Second li with data-content
    second_li = data_content_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-neutral" in second_li.attrs['class']
    assert second_li.attrs['data-content'] == "!"
    assert second_li.children[0] == "Step 2"
    
    # Third li with data-content
    third_li = data_content_steps.children[2]
    assert third_li.tag == "li"
    assert "step" in third_li.attrs['class']
    assert "step-neutral" in third_li.attrs['class']
    assert third_li.attrs['data-content'] == "✓"
    assert third_li.children[0] == "Step 3"
    
    # Fourth li with data-content
    fourth_li = data_content_steps.children[3]
    assert fourth_li.tag == "li"
    assert "step" in fourth_li.attrs['class']
    assert "step-neutral" in fourth_li.attrs['class']
    assert fourth_li.attrs['data-content'] == "✕"
    assert fourth_li.children[0] == "Step 4"
    
    # Fifth li with data-content
    fifth_li = data_content_steps.children[4]
    assert fifth_li.tag == "li"
    assert "step" in fifth_li.attrs['class']
    assert "step-neutral" in fifth_li.attrs['class']
    assert fifth_li.attrs['data-content'] == "★"
    assert fifth_li.children[0] == "Step 5"
    
    # Sixth li with empty data-content
    sixth_li = data_content_steps.children[5]
    assert sixth_li.tag == "li"
    assert "step" in sixth_li.attrs['class']
    assert "step-neutral" in sixth_li.attrs['class']
    assert sixth_li.attrs['data-content'] == ""
    assert sixth_li.children[0] == "Step 6"
    
    # Seventh li with data-content
    seventh_li = data_content_steps.children[6]
    assert seventh_li.tag == "li"
    assert "step" in seventh_li.attrs['class']
    assert "step-neutral" in seventh_li.attrs['class']
    assert seventh_li.attrs['data-content'] == "●"
    assert seventh_li.children[0] == "Step 7"
    
    return data_content_steps

# Run the tests
test_steps_with_data_content_fasthtml_examples()

<ul class="steps">
  <li data-content="?" class="step step-neutral">Step 1</li>
  <li data-content="!" class="step step-neutral">Step 2</li>
  <li data-content="✓" class="step step-neutral">Step 3</li>
  <li data-content="✕" class="step step-neutral">Step 4</li>
  <li data-content="★" class="step step-neutral">Step 5</li>
  <li class="step step-neutral">Step 6</li>
  <li data-content="●" class="step step-neutral">Step 7</li>
</ul>

test_func = test_steps_with_data_content_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()

source

test_steps_custom_colors_fasthtml_examples

 test_steps_custom_colors_fasthtml_examples ()

Test steps with custom colors from daisyUI v5 documentation.

Exported source

def test_steps_custom_colors_fasthtml_examples():
    """Test steps with custom colors from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li
    
    # Steps with custom colors
    custom_colors_steps = Ul(
        Li("Fly to moon", cls=combine_classes(step, step_colors.info)),
        Li("Shrink the moon", cls=combine_classes(step, step_colors.info)),
        Li("Grab the moon", cls=combine_classes(step, step_colors.info)),
        Li("Sit on toilet", data_content="?", cls=combine_classes(step, step_colors.error)),
        cls=str(steps)
    )
    
    # Verify structure
    assert custom_colors_steps.tag == "ul"
    assert custom_colors_steps.attrs['class'] == "steps"
    
    # Verify li elements
    assert len(custom_colors_steps.children) == 4
    
    # First li with info color
    first_li = custom_colors_steps.children[0]
    assert first_li.tag == "li"
    assert "step" in first_li.attrs['class']
    assert "step-info" in first_li.attrs['class']
    assert first_li.children[0] == "Fly to moon"
    
    # Second li with info color
    second_li = custom_colors_steps.children[1]
    assert second_li.tag == "li"
    assert "step" in second_li.attrs['class']
    assert "step-info" in second_li.attrs['class']
    assert second_li.children[0] == "Shrink the moon"
    
    # Third li with info color
    third_li = custom_colors_steps.children[2]
    assert third_li.tag == "li"
    assert "step" in third_li.attrs['class']
    assert "step-info" in third_li.attrs['class']
    assert third_li.children[0] == "Grab the moon"
    
    # Fourth li with error color and data-content
    fourth_li = custom_colors_steps.children[3]
    assert fourth_li.tag == "li"
    assert "step" in fourth_li.attrs['class']
    assert "step-error" in fourth_li.attrs['class']
    assert fourth_li.attrs['data-content'] == "?"
    assert fourth_li.children[0] == "Sit on toilet"
    
    return custom_colors_steps

# Run the tests
test_steps_custom_colors_fasthtml_examples()

<ul class="steps">
  <li class="step step-info">Fly to moon</li>
  <li class="step step-info">Shrink the moon</li>
  <li class="step step-info">Grab the moon</li>
  <li data-content="?" class="step step-error">Sit on toilet</li>
</ul>

test_func = test_steps_custom_colors_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()

source

test_steps_with_scrollable_wrapper_fasthtml_examples

 test_steps_with_scrollable_wrapper_fasthtml_examples ()

Test steps with scrollable wrapper from daisyUI v5 documentation.

Exported source

def test_steps_with_scrollable_wrapper_fasthtml_examples():
    """Test steps with scrollable wrapper from daisyUI v5 documentation."""
    from fasthtml.common import Div, Ul, Li
    from cjm_fasthtml_tailwind.utilities.layout import overflow
    
    # Steps with scrollable wrapper
    scrollable_steps = Div(
        Ul(
            Li("start", cls=str(step)),
            Li("2", cls=combine_classes(step, step_colors.secondary)),
            Li("3", cls=combine_classes(step, step_colors.secondary)),
            Li("4", cls=combine_classes(step, step_colors.secondary)),
            Li("5", cls=str(step)),
            Li("6", cls=combine_classes(step, step_colors.accent)),
            Li("7", cls=combine_classes(step, step_colors.accent)),
            Li("8", cls=str(step)),
            Li("9", cls=combine_classes(step, step_colors.error)),
            Li("10", cls=combine_classes(step, step_colors.error)),
            Li("11", cls=str(step)),
            Li("12", cls=str(step)),
            Li("13", cls=combine_classes(step, step_colors.warning)),
            Li("14", cls=combine_classes(step, step_colors.warning)),
            Li("15", cls=str(step)),
            Li("16", cls=combine_classes(step, step_colors.neutral)),
            Li("17", cls=combine_classes(step, step_colors.neutral)),
            Li("18", cls=combine_classes(step, step_colors.neutral)),
            Li("19", cls=combine_classes(step, step_colors.neutral)),
            Li("20", cls=combine_classes(step, step_colors.neutral)),
            Li("21", cls=combine_classes(step, step_colors.neutral)),
            Li("22", cls=combine_classes(step, step_colors.neutral)),
            Li("23", cls=combine_classes(step, step_colors.neutral)),
            Li("end", cls=combine_classes(step, step_colors.neutral)),
            cls=str(steps)
        ),
        cls=str(overflow.x.auto)
    )
    
    # Verify structure
    assert scrollable_steps.tag == "div"
    assert scrollable_steps.attrs['class'] == "overflow-x-auto"
    
    # Verify ul element
    ul_element = scrollable_steps.children[0]
    assert ul_element.tag == "ul"
    assert ul_element.attrs['class'] == "steps"
    
    # Verify total number of steps
    assert len(ul_element.children) == 24
    
    # Verify first step
    first_li = ul_element.children[0]
    assert first_li.tag == "li"
    assert first_li.attrs['class'] == "step"
    assert first_li.children[0] == "start"
    
    # Verify some secondary colored steps (2-4)
    for i in range(1, 4):
        li = ul_element.children[i]
        assert li.tag == "li"
        assert "step" in li.attrs['class']
        assert "step-secondary" in li.attrs['class']
        assert li.children[0] == str(i + 1)
    
    # Verify step 5 (no color)
    step_5 = ul_element.children[4]
    assert step_5.attrs['class'] == "step"
    assert step_5.children[0] == "5"
    
    # Verify accent colored steps (6-7)
    for i in range(5, 7):
        li = ul_element.children[i]
        assert "step" in li.attrs['class']
        assert "step-accent" in li.attrs['class']
        assert li.children[0] == str(i + 1)
    
    # Verify step 8 (no color)
    step_8 = ul_element.children[7]
    assert step_8.attrs['class'] == "step"
    assert step_8.children[0] == "8"
    
    # Verify error colored steps (9-10)
    for i in range(8, 10):
        li = ul_element.children[i]
        assert "step" in li.attrs['class']
        assert "step-error" in li.attrs['class']
        assert li.children[0] == str(i + 1)
    
    # Verify steps 11-12 (no color)
    for i in range(10, 12):
        li = ul_element.children[i]
        assert li.attrs['class'] == "step"
        assert li.children[0] == str(i + 1)
    
    # Verify warning colored steps (13-14)
    for i in range(12, 14):
        li = ul_element.children[i]
        assert "step" in li.attrs['class']
        assert "step-warning" in li.attrs['class']
        assert li.children[0] == str(i + 1)
    
    # Verify step 15 (no color)
    step_15 = ul_element.children[14]
    assert step_15.attrs['class'] == "step"
    assert step_15.children[0] == "15"
    
    # Verify neutral colored steps (16-23)
    for i in range(15, 23):
        li = ul_element.children[i]
        assert "step" in li.attrs['class']
        assert "step-neutral" in li.attrs['class']
        assert li.children[0] == str(i + 1)
    
    # Verify last step
    last_li = ul_element.children[23]
    assert last_li.tag == "li"
    assert "step" in last_li.attrs['class']
    assert "step-neutral" in last_li.attrs['class']
    assert last_li.children[0] == "end"
    
    return scrollable_steps

# Run the tests
test_steps_with_scrollable_wrapper_fasthtml_examples()

<div class="overflow-x-auto">
  <ul class="steps">
    <li class="step">start</li>
    <li class="step step-secondary">2</li>
    <li class="step step-secondary">3</li>
    <li class="step step-secondary">4</li>
    <li class="step">5</li>
    <li class="step step-accent">6</li>
    <li class="step step-accent">7</li>
    <li class="step">8</li>
    <li class="step step-error">9</li>
    <li class="step step-error">10</li>
    <li class="step">11</li>
    <li class="step">12</li>
    <li class="step step-warning">13</li>
    <li class="step step-warning">14</li>
    <li class="step">15</li>
    <li class="step step-neutral">16</li>
    <li class="step step-neutral">17</li>
    <li class="step step-neutral">18</li>
    <li class="step step-neutral">19</li>
    <li class="step step-neutral">20</li>
    <li class="step step-neutral">21</li>
    <li class="step step-neutral">22</li>
    <li class="step step-neutral">23</li>
    <li class="step step-neutral">end</li>
  </ul>
</div>

test_func = test_steps_with_scrollable_wrapper_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()