Tabbed List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Tabbed List Component Styles - Copy from here
           ========================================================================== */
        .tabbed-list-template {
            --tab-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --tab-primary-text-color: #1e293b;
            --tab-secondary-text-color: #64748b;
            --tab-accent-color: #4f46e5;
            --tab-bg-color: #ffffff;
            --tab-border-color: #cbd5e1;

font-family: var(--tab-font-family);
            color: var(--tab-primary-text-color);
            width: 100%;
            max-width: 700px;
        }

.tabbed-list-template *,
        .tabbed-list-template *::before,
        .tabbed-list-template *::after {
            box-sizing: border-box;
        }

.tabbed-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .tabbed-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }
        
        [role="tablist"] {
            display: flex;
            gap: .25rem;
            border-bottom: 1px solid var(--tab-border-color);
        }
        
        [role="tab"] {
            background: transparent;
            border: none;
            padding: .75rem 1.25rem;
            font-size: .9rem;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            bottom: -1px; /* Align with border */
            border-bottom: 3px solid transparent;
            color: var(--tab-secondary-text-color);
            transition: color 0.2s ease;
        }

[role="tab"]:hover {
            color: var(--tab-accent-color);
        }
        
        [role="tab"]:focus-visible {
            outline: 2px solid var(--tab-accent-color);
            outline-offset: 2px;
            border-radius: .25rem;
        }
        
        [role="tab"][aria-selected="true"] {
            color: var(--tab-accent-color);
            border-bottom-color: var(--tab-accent-color);
        }
        
        [role="tabpanel"] {
            padding: 2rem;
            background: var(--tab-bg-color);
            border: 1px solid var(--tab-border-color);
            border-top: none;
            border-radius: 0 0 .5rem .5rem;
        }
        
        /* Hide non-active panels */
        [role="tabpanel"][hidden] {
            display: none;
        }
        
        .award-list {
            list-style: disc;
            padding-left: 1.5rem;
            margin: 0;
            line-height: 1.7;
        }

</style>
</head>
<body>

<div class="tabbed-list-template">
    <header class="list-header">
        <h2>Employee of the Month Awards</h2>
    </header>

<div role="tablist" aria-label="Award Categories">
        <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Most Enthusiastic</button>
        <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Best Coffee Maker</button>
        <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Quietest Typer</button>
    </div>

<div>
        <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
            <ul class="award-list">
                <li>Barbara for her unwavering excitement during the quarterly budget review.</li>
                <li>Steve for his spirited defense of the Oxford comma in company-wide emails.</li>
                <li>Brenda for organizing the mandatory "fun" day with unmatched zeal.</li>
            </ul>
        </div>
        <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
             <ul class="award-list">
                <li>Gary, whose brews somehow transcend the limitations of the ancient office coffee machine.</li>
                <li>Susan for remembering who takes cream and who is "strictly oat milk."</li>
            </ul>
        </div>
        <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
             <ul class="award-list">
                <li>Dave, whose keyboard sounds like a gentle whisper in a library.</li>
                <li>Eleanor, who manages to write entire manifestos without a single audible 'click'.</li>
                <li>The potted fern in the corner, which has yet to make any noise at all.</li>
            </ul>
        </div>
    </div>
    
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const listContainer = document.querySelector('.tabbed-list-template');
            if (!listContainer) return;
        
            const tabList = listContainer.querySelector('[role="tablist"]');
            const tabs = listContainer.querySelectorAll('[role="tab"]');
        
            tabList.addEventListener('click', (e) => {
                const clickedTab = e.target.closest('[role="tab"]');
                if (!clickedTab) return;
        
                e.preventDefault();
                switchTab(clickedTab);
            });
            
            tabList.addEventListener('keydown', (e) => {
                const currentTab = e.target.closest('[role="tab"]');
                let newTab;
        
                if (e.key === 'ArrowRight') {
                    newTab = currentTab.nextElementSibling || tabs[0];
                } else if (e.key === 'ArrowLeft') {
                    newTab = currentTab.previousElementSibling || tabs[tabs.length - 1];
                }
        
                if (newTab) {
                    newTab.focus();
                    switchTab(newTab);
                }
            });
            
            const switchTab = (newTab) => {
                // Find the panel for the new tab
                const activePanelId = newTab.getAttribute('aria-controls');
                const activePanel = listContainer.querySelector(`#${activePanelId}`);
        
                // Deactivate all other tabs and hide all other panels
                tabs.forEach(tab => {
                    tab.setAttribute('aria-selected', 'false');
                    tab.setAttribute('tabindex', '-1');
                    
                    const panelId = tab.getAttribute('aria-controls');
                    const panel = listContainer.querySelector(`#${panelId}`);
                    panel.hidden = true;
                });
        
                // Activate the new tab and show its panel
                newTab.setAttribute('aria-selected', 'true');
                newTab.setAttribute('tabindex', '0');
                activePanel.hidden = false;
            };
        });
    </script>
</div>

</body>
</html>