<!DOCTYPE html>
<html>
<head>
    <title>Edge Cases</title>
</head>
<body>
    <!-- Components with no attributes -->
    <c-lb.button></c-lb.button>
    <c-lb.menu></c-lb.menu>

    <!-- Components with only whitespace content -->
    <c-lb.button variant="primary">   </c-lb.button>

    <!-- Self-closing components -->
    <c-lb.drawer.toggle />
    <c-lb.drawer.overlay />

    <!-- Components with unusual spacing -->
    <c-lb.button    variant="primary"    size="lg"   >Spaced Button</c-lb.button>

    <!-- Components across multiple lines -->
    <c-lb.drawer
        id="multiline-drawer"
        placement="end"
        open="true"
        classNames="custom-class another-class">
        <c-lb.drawer.content
            id="multiline-content"
            classNames="p-4">
            Multi-line content
        </c-lb.drawer.content>
    </c-lb.drawer>

    <!-- Nested identical components -->
    <c-lb.menu>
        <li>
            <c-lb.menu orientation="horizontal" size="sm">
                <li><a href="#">Nested 1</a></li>
                <li><a href="#">Nested 2</a></li>
            </c-lb.menu>
        </li>
    </c-lb.menu>

    <!-- Components with special characters in attributes -->
    <c-lb.button id="btn-with-special-chars_123" classNames="btn--custom btn__modifier">Special</c-lb.button>

    <!-- Components in comments (should be ignored) -->
    <!-- <c-lb.button variant="commented">This should be ignored</c-lb.button> -->

    <!-- Components in script tags (should be handled) -->
    <script>
        // <c-lb.button variant="in-script">Script button</c-lb.button>
    </script>

    <!-- Empty component names (invalid, but should be handled gracefully) -->
    <c-lb.>Invalid</c-lb.>

    <!-- Components with boolean attributes -->
    <c-lb.button disabled>Disabled Button</c-lb.button>
    <c-lb.drawer open>
        <c-lb.drawer.content>Open drawer</c-lb.drawer.content>
    </c-lb.drawer>
</body>
</html>
