Separator

from starhtml import *

Div(
    Div(
        Button(Icon("lucide:bold", cls="size-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:italic", cls="size-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:underline", cls="size-4"), variant="ghost", size="sm"),
        Separator(orientation="vertical", cls="mx-2 h-6"),
        Button(Icon("lucide:align-left", cls="size-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:align-center", cls="size-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:align-right", cls="size-4"), variant="ghost", size="sm"),
        Separator(orientation="vertical", cls="mx-2 h-6"),
        Button(Icon("lucide:list", cls="size-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:list-ordered", cls="size-4"), variant="ghost", size="sm"),
        cls="flex items-center rounded-lg border p-2"
    ),
    cls="flex justify-center"
)

from starhtml import *

Div(
    Div(
        P("Decorative", cls="mb-2 text-sm font-medium"),
        Separator(),
        P(
            "Default. Renders ",
            Code("aria-hidden=\"true\""),
            " — invisible to screen readers.",
            cls="mt-2 text-sm text-muted-foreground"
        ),
    ),
    Div(
        P("Semantic", cls="mb-2 text-sm font-medium"),
        Separator(decorative=False),
        P(
            "Renders ",
            Code("role=\"separator\""),
            " and ",
            Code("aria-orientation"),
            " — announced as a content boundary.",
            cls="mt-2 text-sm text-muted-foreground"
        ),
    ),
    cls="max-w-sm space-y-8"
)

from starhtml import *

styles = [
    ("Default", ""),
    ("Thick", "h-0.5"),
    ("Colored", "bg-blue-500"),
    ("Dashed", "h-0 border-t border-dashed border-muted-foreground bg-transparent"),
    ("Gradient", "bg-gradient-to-r from-transparent via-muted-foreground to-transparent"),
]
Div(
    *[
        Div(
            P(label, cls="mb-2 text-sm text-muted-foreground"),
            Separator(cls=cls) if cls else Separator()
        )
        for label, cls in styles
    ],
    cls="max-w-sm space-y-6"
)