@nuvia-ui/components 4.0.1

package/src/ds-header/ds-header.a11y.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-header.js';
+
+describe('ds-header a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks', async () => {
+        container.innerHTML = `
+            <ds-header>
+                <button slot="menu-trigger" aria-label="Menu">☰</button>
+                <h1 slot="app-name">My App</h1>
+                <nav slot="nav" aria-label="Main">
+                    <a href="#">Link 1</a>
+                </nav>
+            </ds-header>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+});

package/src/ds-header/ds-header.js

@@ -0,0 +1,149 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Header component for global application navigation and branding.
+ * 
+ * @element ds-header
+ * 
+ * @slot menu-trigger - Slot for the hamburger menu button (leftmost)
+ * @slot logo - Slot for the application logo
+ * @slot nav - Slot for main horizontal navigation
+ * @slot app-name - Slot for the application name text
+ * @slot nav - Slot for main horizontal navigation
+ * @slot actions - Slot for global actions (rightmost)
+ * 
+ * @csspart header - The main header container
+ * @csspart top-bar - The colored top bar
+ * @csspart content - The content wrapper
+ * @csspart divider - The vertical divider
+ */
+export class DsHeader extends LitElement {
+    static properties = {
+        logoHref: { type: String, attribute: 'logo-href' }
+    };
+
+    static styles = css`
+        :host {
+            display: block;
+            width: 100%;
+            position: relative;
+            z-index: var(--ds-z-index-sticky, 100);
+        }
+
+
+
+        /* Top Bar */
+        .top-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            width: 100%;
+            background-color: var(--ds-color-bg-brand);
+            z-index: 10;
+        }
+
+        /* Main Header Content */
+        .header {
+            height: 64px;
+            background-color: var(--ds-color-bg-header);
+            color: var(--ds-color-text-header);
+            padding: 0 var(--ds-space-md);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            border-bottom: 1px solid var(--ds-color-border-header);
+        }
+
+        /* Left Section: Menu, Logo, App Name */
+        .left-section {
+            display: flex;
+            align-items: center;
+            gap: var(--ds-space-md);
+            height: 100%;
+        }
+
+        .logo-link {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: inherit;
+            border-radius: var(--ds-radius-container);
+        }
+
+        .logo-link:focus-visible {
+            outline: 2px solid var(--ds-color-border-focus);
+            outline-offset: 2px;
+            border-radius: var(--ds-radius-container);
+        }
+
+        /* Slots handling */
+        ::slotted([slot="menu-trigger"]) {
+            display: flex;
+            align-items: center;
+        }
+
+        ::slotted([slot="logo"]) {
+            display: flex;
+            align-items: center;
+            height: 32px; /* Fixed height for logo container */
+        }
+
+        .divider {
+            width: 1px;
+            height: 32px;
+            background-color: var(--ds-color-border-header);
+            background-color: var(--ds-color-border-header);
+            opacity: 1; /* Reset opacity since valid border colors are used */
+        }
+
+        ::slotted([slot="app-name"]) {
+            font: var(--ds-typo-content-body-bold);
+            color: var(--ds-color-text-header);
+            white-space: nowrap;
+        }
+
+
+
+        /* Right Section: Actions */
+        .actions-section {
+            display: flex;
+            align-items: center;
+            gap: var(--ds-space-sm); /* 8px */
+            height: 100%;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.logoHref = '/';
+    }
+
+    render() {
+        return html`
+            <div class="top-bar" part="top-bar"></div>
+            <header class="header" part="header" role="banner">
+                <div class="left-section">
+                    <slot name="menu-trigger"></slot>
+                    
+                    <a href="${this.logoHref}" class="logo-link" part="logo-link" aria-label="Go to homepage">
+                        <slot name="logo"></slot>
+                    </a>
+
+                    <div class="divider" part="divider"></div>
+                    <slot name="app-name"></slot>
+                    
+                    <slot name="nav" style="display: flex; gap: 8px; margin-left: 16px; height: 100%;"></slot>
+                </div>
+
+                <div class="actions-section">
+                    <slot name="actions"></slot>
+                </div>
+            </header>
+        `;
+    }
+}
+
+customElements.define('ds-header', DsHeader);

package/src/ds-header/ds-header.stories.js

@@ -0,0 +1,63 @@
+import { html } from 'lit';
+import './ds-header.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-header-nav-item/ds-header-nav-item.js';
+import '../ds-header-nav/ds-header-nav.js';
+
+export default {
+    title: 'Components/Header',
+    component: 'ds-header',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        appName: { control: 'text' }
+    }
+};
+
+const Template = (args) => html`
+    <ds-header>
+        <ds-icon-button slot="menu-trigger" icon="menu" variant="action"></ds-icon-button>
+        
+        <div slot="logo" style="display: flex; align-items: center; height: 100%;">
+            <svg width="55" height="32" viewBox="0 0 55 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: var(--ds-color-text-header);">
+                <path d="M16.0539 12.04C15.2681 12.04 14.4999 12.2723 13.8465 12.7074C13.193 13.1425 12.6838 13.761 12.383 14.4846C12.0823 15.2082 12.0036 16.0044 12.1569 16.7726C12.3102 17.5407 12.6887 18.2463 13.2444 18.8001C13.8 19.354 14.508 19.7311 15.2788 19.8839C16.0495 20.0367 16.8484 19.9583 17.5745 19.6586C18.3005 19.3588 18.9211 18.8513 19.3577 18.2001C19.7943 17.5488 20.0273 16.7832 20.0273 16C20.0273 15.48 19.9246 14.965 19.7249 14.4845C19.5253 14.0041 19.2326 13.5675 18.8636 13.1998C18.4946 12.832 18.0566 12.5403 17.5745 12.3414C17.0924 12.1424 16.5757 12.04 16.0539 12.04ZM16.0539 18.656C15.5269 18.656 15.0116 18.5002 14.5734 18.2084C14.1351 17.9165 13.7935 17.5017 13.5918 17.0164C13.3901 16.5311 13.3374 15.9971 13.4402 15.4818C13.543 14.9666 13.7968 14.4934 14.1695 14.1219C14.5422 13.7505 15.0171 13.4975 15.534 13.395C16.051 13.2926 16.5868 13.3452 17.0738 13.5462C17.5607 13.7472 17.9769 14.0876 18.2698 14.5244C18.5626 14.9612 18.7189 15.4747 18.7189 16C18.7189 16.7044 18.4381 17.38 17.9383 17.8781C17.4386 18.3762 16.7607 18.656 16.0539 18.656ZM38.5339 1.46675e-05C34.3296 -0.00566465 30.2919 1.63815 27.2939 4.57601C24.296 1.63815 20.2583 -0.00566465 16.0539 1.46675e-05C7.18767 1.46675e-05 0 7.16353 0 16C0 24.8365 7.18767 32 16.0539 32C20.2583 32.0057 24.296 30.3619 27.2939 27.424C30.2919 30.3619 34.3296 32.0057 38.5339 32C47.4005 32 54.5879 24.8365 54.5879 16C54.5879 7.16353 47.4005 1.46675e-05 38.5339 1.46675e-05ZM38.5339 30.752C34.496 30.752 30.8325 29.1306 28.1592 26.5088C29.3205 25.1794 30.2535 23.668 30.9205 22.0355H29.5518C28.972 23.3187 28.2117 24.5129 27.2939 25.5824C26.3756 24.5131 25.6149 23.3188 25.0348 22.0355H23.6657C24.3328 23.668 25.2657 25.1794 26.427 26.5088C23.754 29.1306 20.0902 30.752 16.0523 30.752C7.89051 30.752 1.2506 24.1344 1.2506 16C1.2506 7.86561 7.89051 1.24801 16.0523 1.24801C20.0902 1.24801 23.754 2.86945 26.427 5.49121C25.2657 6.8206 24.3328 8.33204 23.6657 9.96449H25.0345C25.6147 8.68119 26.3755 7.48688 27.2939 6.41761C28.2122 7.48698 28.9728 8.68127 29.553 9.96449H30.9221C30.2551 8.33204 29.3221 6.8206 28.1608 5.49121C30.8342 2.86945 34.4977 1.24801 38.5355 1.24801C46.6974 1.24801 53.3373 7.86561 53.3373 16C53.3373 24.1344 46.6958 30.752 38.5339 30.752ZM48.1207 16.7398C48.9446 16.3763 49.5209 15.5878 49.5434 14.6797C49.5668 13.7197 49.0201 12.8922 48.1567 12.4842C47.6157 12.2282 47.04 12.1798 46.4511 12.1798H43.8654V19.8195H45.2101V17.0749H46.8425L48.4858 19.8202H50.0642L48.1207 16.7398ZM48.1878 14.5936C48.1878 14.9747 48.0292 15.3373 47.7242 15.5718C47.4269 15.8006 47.0534 15.8918 46.6839 15.9011C46.3374 15.911 45.3553 15.9011 45.2111 15.9011V13.3603H46.2707C46.7523 13.3603 47.2756 13.3414 47.694 13.6205C48.0231 13.8413 48.1878 14.2048 48.1878 14.5936ZM15.6343 10.4499C15.6343 10.5955 15.591 10.7378 15.5098 10.8588C15.4287 10.9799 15.3133 11.0742 15.1784 11.1299C15.0435 11.1856 14.895 11.2002 14.7517 11.1718C14.6085 11.1434 14.4769 11.0733 14.3736 10.9704C14.2703 10.8674 14.2 10.7363 14.1715 10.5935C14.143 10.4507 14.1576 10.3028 14.2135 10.1683C14.2694 10.0338 14.3641 9.91884 14.4855 9.83797C14.607 9.75709 14.7497 9.71393 14.8958 9.71393C15.0917 9.71393 15.2795 9.79147 15.418 9.9295C15.5565 10.0675 15.6343 10.2547 15.6343 10.4499ZM17.9502 10.4499C17.9502 10.5955 17.9069 10.7378 17.8258 10.8588C17.7446 10.9799 17.6293 11.0742 17.4944 11.1299C17.3594 11.1856 17.2109 11.2002 17.0677 11.1718C16.9244 11.1434 16.7928 11.0733 16.6896 10.9704C16.5863 10.8674 16.5159 10.7363 16.4875 10.5935C16.459 10.4507 16.4736 10.3028 16.5295 10.1683C16.5854 10.0338 16.68 9.91884 16.8015 9.83797C16.9229 9.75709 17.0657 9.71393 17.2117 9.71393C17.3088 9.71388 17.4048 9.73289 17.4944 9.76986C17.5841 9.80683 17.6655 9.86103 17.7341 9.92938C17.8027 9.99773 17.8572 10.0789 17.8943 10.1682C17.9314 10.2575 17.9502 10.3532 17.9502 10.4499ZM25.8488 16.7398C26.6726 16.3763 27.249 15.5878 27.2715 14.6797C27.2949 13.7197 26.7481 12.8922 25.8847 12.4842C25.3437 12.2282 24.768 12.1798 24.1792 12.1798H21.5948V19.8195H22.9404V17.0749H24.5728L26.2161 19.8202H27.7945L25.8488 16.7398ZM25.9159 14.5936C25.9159 14.9747 25.7573 15.3373 25.4522 15.5718C25.1549 15.8006 24.7815 15.8918 24.4119 15.9011C24.0655 15.911 23.0833 15.9011 22.9391 15.9011V13.3603H23.9987C24.4803 13.3603 25.0037 13.3414 25.422 13.6205C25.7528 13.8413 25.9172 14.2048 25.9172 14.5936H25.9159ZM34.8945 16.4867C34.7359 16.2335 34.5188 16.0219 34.2613 15.8694C34.4964 15.7261 34.6935 15.5285 34.8361 15.2934C35.0053 15.0102 35.0907 14.6822 35.0907 14.3194C35.0907 13.6522 34.8563 13.1219 34.3939 12.7434C33.938 12.3699 33.3135 12.1805 32.5372 12.1805H29.3809V19.8208H32.5779C33.3604 19.8208 33.9955 19.6288 34.4649 19.2483C34.9411 18.8643 35.1825 18.3018 35.1825 17.5805C35.1825 17.1552 35.0859 16.7872 34.8958 16.4867H34.8945ZM33.5303 18.3056C33.3106 18.4938 32.9899 18.5894 32.5766 18.5894H30.6858V16.5414H32.4954C32.9825 16.5414 33.3357 16.6333 33.5457 16.8147C33.7556 16.9962 33.8549 17.2387 33.8549 17.561C33.8558 17.8749 33.7499 18.1187 33.5315 18.3056H33.5303ZM33.4798 15.0128C33.291 15.1949 32.9838 15.2874 32.5667 15.2874H30.6858V13.3994H32.5359C32.9501 13.3994 33.2634 13.4819 33.467 13.6448C33.6706 13.8077 33.7627 14.024 33.7627 14.3168C33.764 14.6022 33.6715 14.8294 33.4811 15.0128H33.4798ZM38.313 13.4531V15.3533H41.457V16.6262H38.313V18.5366H42.0992V19.8198H37.0066V12.1802H42.1005V13.4531H38.313ZM8.04077 16L11.8738 19.8189H10.1429L6.72596 16.44V19.8192H5.38032V12.1795H6.72596V15.5773L10.1435 12.1795H11.8745L8.04077 16Z" fill="currentColor"/>
+            </svg>
+        </div>
+        
+        <span slot="app-name">${args.appName || 'Design System'}</span>
+
+        <nav slot="nav" style="height: 100%;">
+            <ds-header-nav>
+                <ds-header-nav-item selected>Dashboard</ds-header-nav-item>
+                <ds-header-nav-item>Projects</ds-header-nav-item>
+                <ds-header-nav-item>Team</ds-header-nav-item>
+            </ds-header-nav>
+        </nav>
+
+        <div slot="actions" style="display: flex; gap: 8px;">
+            <ds-icon-button icon="search" variant="action"></ds-icon-button>
+            <ds-icon-button icon="notifications" variant="action"></ds-icon-button>
+            <ds-icon-button icon="account-circle" variant="action"></ds-icon-button>
+        </div>
+    </ds-header>
+`;
+
+export const Default = Template.bind({});
+
+export const NoMenu = {
+    render: () => html`
+        <ds-header>
+            <div slot="logo" style="display: flex; align-items: center; height: 100%;">
+                <svg width="55" height="32" viewBox="0 0 55 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: var(--ds-color-text-header);">
+                    <path d="M16.0539 12.04C15.2681 12.04 14.4999 12.2723 13.8465 12.7074C13.193 13.1425 12.6838 13.761 12.383 14.4846C12.0823 15.2082 12.0036 16.0044 12.1569 16.7726C12.3102 17.5407 12.6887 18.2463 13.2444 18.8001C13.8 19.354 14.508 19.7311 15.2788 19.8839C16.0495 20.0367 16.8484 19.9583 17.5745 19.6586C18.3005 19.3588 18.9211 18.8513 19.3577 18.2001C19.7943 17.5488 20.0273 16.7832 20.0273 16C20.0273 15.48 19.9246 14.965 19.7249 14.4845C19.5253 14.0041 19.2326 13.5675 18.8636 13.1998C18.4946 12.832 18.0566 12.5403 17.5745 12.3414C17.0924 12.1424 16.5757 12.04 16.0539 12.04ZM16.0539 18.656C15.5269 18.656 15.0116 18.5002 14.5734 18.2084C14.1351 17.9165 13.7935 17.5017 13.5918 17.0164C13.3901 16.5311 13.3374 15.9971 13.4402 15.4818C13.543 14.9666 13.7968 14.4934 14.1695 14.1219C14.5422 13.7505 15.0171 13.4975 15.534 13.395C16.051 13.2926 16.5868 13.3452 17.0738 13.5462C17.5607 13.7472 17.9769 14.0876 18.2698 14.5244C18.5626 14.9612 18.7189 15.4747 18.7189 16C18.7189 16.7044 18.4381 17.38 17.9383 17.8781C17.4386 18.3762 16.7607 18.656 16.0539 18.656ZM38.5339 1.46675e-05C34.3296 -0.00566465 30.2919 1.63815 27.2939 4.57601C24.296 1.63815 20.2583 -0.00566465 16.0539 1.46675e-05C7.18767 1.46675e-05 0 7.16353 0 16C0 24.8365 7.18767 32 16.0539 32C20.2583 32.0057 24.296 30.3619 27.2939 27.424C30.2919 30.3619 34.3296 32.0057 38.5339 32C47.4005 32 54.5879 24.8365 54.5879 16C54.5879 7.16353 47.4005 1.46675e-05 38.5339 1.46675e-05ZM38.5339 30.752C34.496 30.752 30.8325 29.1306 28.1592 26.5088C29.3205 25.1794 30.2535 23.668 30.9205 22.0355H29.5518C28.972 23.3187 28.2117 24.5129 27.2939 25.5824C26.3756 24.5131 25.6149 23.3188 25.0348 22.0355H23.6657C24.3328 23.668 25.2657 25.1794 26.427 26.5088C23.754 29.1306 20.0902 30.752 16.0523 30.752C7.89051 30.752 1.2506 24.1344 1.2506 16C1.2506 7.86561 7.89051 1.24801 16.0523 1.24801C20.0902 1.24801 23.754 2.86945 26.427 5.49121C25.2657 6.8206 24.3328 8.33204 23.6657 9.96449H25.0345C25.6147 8.68119 26.3755 7.48688 27.2939 6.41761C28.2122 7.48698 28.9728 8.68127 29.553 9.96449H30.9221C30.2551 8.33204 29.3221 6.8206 28.1608 5.49121C30.8342 2.86945 34.4977 1.24801 38.5355 1.24801C46.6974 1.24801 53.3373 7.86561 53.3373 16C53.3373 24.1344 46.6958 30.752 38.5339 30.752ZM48.1207 16.7398C48.9446 16.3763 49.5209 15.5878 49.5434 14.6797C49.5668 13.7197 49.0201 12.8922 48.1567 12.4842C47.6157 12.2282 47.04 12.1798 46.4511 12.1798H43.8654V19.8195H45.2101V17.0749H46.8425L48.4858 19.8202H50.0642L48.1207 16.7398ZM48.1878 14.5936C48.1878 14.9747 48.0292 15.3373 47.7242 15.5718C47.4269 15.8006 47.0534 15.8918 46.6839 15.9011C46.3374 15.911 45.3553 15.9011 45.2111 15.9011V13.3603H46.2707C46.7523 13.3603 47.2756 13.3414 47.694 13.6205C48.0231 13.8413 48.1878 14.2048 48.1878 14.5936ZM15.6343 10.4499C15.6343 10.5955 15.591 10.7378 15.5098 10.8588C15.4287 10.9799 15.3133 11.0742 15.1784 11.1299C15.0435 11.1856 14.895 11.2002 14.7517 11.1718C14.6085 11.1434 14.4769 11.0733 14.3736 10.9704C14.2703 10.8674 14.2 10.7363 14.1715 10.5935C14.143 10.4507 14.1576 10.3028 14.2135 10.1683C14.2694 10.0338 14.3641 9.91884 14.4855 9.83797C14.607 9.75709 14.7497 9.71393 14.8958 9.71393C15.0917 9.71393 15.2795 9.79147 15.418 9.9295C15.5565 10.0675 15.6343 10.2547 15.6343 10.4499ZM17.9502 10.4499C17.9502 10.5955 17.9069 10.7378 17.8258 10.8588C17.7446 10.9799 17.6293 11.0742 17.4944 11.1299C17.3594 11.1856 17.2109 11.2002 17.0677 11.1718C16.9244 11.1434 16.7928 11.0733 16.6896 10.9704C16.5863 10.8674 16.5159 10.7363 16.4875 10.5935C16.459 10.4507 16.4736 10.3028 16.5295 10.1683C16.5854 10.0338 16.68 9.91884 16.8015 9.83797C16.9229 9.75709 17.0657 9.71393 17.2117 9.71393C17.3088 9.71388 17.4048 9.73289 17.4944 9.76986C17.5841 9.80683 17.6655 9.86103 17.7341 9.92938C17.8027 9.99773 17.8572 10.0789 17.8943 10.1682C17.9314 10.2575 17.9502 10.3532 17.9502 10.4499ZM25.8488 16.7398C26.6726 16.3763 27.249 15.5878 27.2715 14.6797C27.2949 13.7197 26.7481 12.8922 25.8847 12.4842C25.3437 12.2282 24.768 12.1798 24.1792 12.1798H21.5948V19.8195H22.9404V17.0749H24.5728L26.2161 19.8202H27.7945L25.8488 16.7398ZM25.9159 14.5936C25.9159 14.9747 25.7573 15.3373 25.4522 15.5718C25.1549 15.8006 24.7815 15.8918 24.4119 15.9011C24.0655 15.911 23.0833 15.9011 22.9391 15.9011V13.3603H23.9987C24.4803 13.3603 25.0037 13.3414 25.422 13.6205C25.7528 13.8413 25.9172 14.2048 25.9172 14.5936H25.9159ZM34.8945 16.4867C34.7359 16.2335 34.5188 16.0219 34.2613 15.8694C34.4964 15.7261 34.6935 15.5285 34.8361 15.2934C35.0053 15.0102 35.0907 14.6822 35.0907 14.3194C35.0907 13.6522 34.8563 13.1219 34.3939 12.7434C33.938 12.3699 33.3135 12.1805 32.5372 12.1805H29.3809V19.8208H32.5779C33.3604 19.8208 33.9955 19.6288 34.4649 19.2483C34.9411 18.8643 35.1825 18.3018 35.1825 17.5805C35.1825 17.1552 35.0859 16.7872 34.8958 16.4867H34.8945ZM33.5303 18.3056C33.3106 18.4938 32.9899 18.5894 32.5766 18.5894H30.6858V16.5414H32.4954C32.9825 16.5414 33.3357 16.6333 33.5457 16.8147C33.7556 16.9962 33.8549 17.2387 33.8549 17.561C33.8558 17.8749 33.7499 18.1187 33.5315 18.3056H33.5303ZM33.4798 15.0128C33.291 15.1949 32.9838 15.2874 32.5667 15.2874H30.6858V13.3994H32.5359C32.9501 13.3994 33.2634 13.4819 33.467 13.6448C33.6706 13.8077 33.7627 14.024 33.7627 14.3168C33.764 14.6022 33.6715 14.8294 33.4811 15.0128H33.4798ZM38.313 13.4531V15.3533H41.457V16.6262H38.313V18.5366H42.0992V19.8198H37.0066V12.1802H42.1005V13.4531H38.313ZM8.04077 16L11.8738 19.8189H10.1429L6.72596 16.44V19.8192H5.38032V12.1795H6.72596V15.5773L10.1435 12.1795H11.8745L8.04077 16Z" fill="currentColor"/>
+                </svg>
+            </div>
+            <span slot="app-name">App Name</span>
+            <div slot="actions" style="display: flex; gap: 8px;">
+                <ds-icon-button icon="logout" variant="action"></ds-icon-button>
+            </div>
+        </ds-header>
+    `
+};

package/src/ds-header/ds-header.test.js

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-header.js';
+
+describe('ds-header', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default structure', async () => {
+        container.innerHTML = '<ds-header></ds-header>';
+        const element = container.querySelector('ds-header');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = element.shadowRoot.querySelector('.header');
+        expect(header).toBeTruthy();
+        expect(header.getAttribute('role')).toBe('banner');
+
+        const topBar = element.shadowRoot.querySelector('.top-bar');
+        expect(topBar).toBeTruthy();
+    });
+
+    it('renders slots correctly', async () => {
+        container.innerHTML = `
+            <ds-header>
+                <button slot="menu-trigger">Menu</button>
+                <div slot="logo">Logo</div>
+                <span slot="app-name">App</span>
+
+                <div slot="actions">Actions</div>
+            </ds-header>
+        `;
+        const element = container.querySelector('ds-header');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const leftSection = element.shadowRoot.querySelector('.left-section');
+
+        const actionsSection = element.shadowRoot.querySelector('.actions-section');
+
+        expect(leftSection).toBeTruthy();
+
+        expect(actionsSection).toBeTruthy();
+
+        // Check slot distribution implicitly by section existence
+    });
+});

package/src/ds-header/index.js

@@ -0,0 +1 @@
+export * from './ds-header.js';

package/src/ds-header-nav/ds-header-nav.a11y.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-header-nav.js';
+import '../ds-header-nav-item/ds-header-nav-item.js';
+
+describe('ds-header-nav a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks with default state', async () => {
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item>Dashboard</ds-header-nav-item>
+                <ds-header-nav-item>Reports</ds-header-nav-item>
+                <ds-header-nav-item>Settings</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations.map(v => ({ id: v.id, description: v.description, help: v.help })), null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with selected item', async () => {
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item selected>Dashboard</ds-header-nav-item>
+                <ds-header-nav-item>Reports</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with links', async () => {
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item href="/dashboard">Dashboard</ds-header-nav-item>
+                <ds-header-nav-item href="/reports" selected>Reports</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+
+        expect(results.violations).toHaveLength(0);
+    });
+});

package/src/ds-header-nav/ds-header-nav.js

@@ -0,0 +1,114 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-header-nav-item/ds-header-nav-item.js';
+
+/**
+ * Container for header navigation items.
+ * Manages selection state of children.
+ * 
+ * @element ds-header-nav
+ * 
+ * @slot - Default slot for ds-header-nav-item elements
+ * 
+ * @fires ds-nav-change - Fired when selection changes
+ */
+export class DsHeaderNav extends LitElement {
+    static properties = {
+        value: { type: String, reflect: true }
+    };
+
+    static styles = css`
+        :host {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            gap: var(--ds-space-sm);
+        }
+    `;
+
+    constructor() {
+        super();
+        this.value = '';
+        this._selectedItem = null;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Since ds-header-nav-item now dispatches events (or we will ensure it does),
+        // we listen for selection. If ds-header-nav-item is a link <a>, it naturally clicks.
+        // We need to ensure we intercept clicks if we want to manage "selected" state 
+        // visually for SPA behavior, or rely on URL matching.
+        // Given the requirement "only 1 element selected", we imply controlled state.
+
+        this.addEventListener('click', this._handleClick);
+
+        // Initial setup
+        this.updateComplete.then(() => {
+            this._syncSelection();
+        });
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._handleClick);
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            this._syncSelection();
+        }
+    }
+
+    _handleClick(e) {
+        // Find the clicked nav item
+        const item = e.target.closest('ds-header-nav-item');
+        if (!item) return;
+
+        // Update selection locally
+        this._selectItem(item);
+
+        // Dispatch change event
+        // Note: 'value' prop on item is not yet defined in our previous step, 
+        // but we can use label or href as value fallback or just pass the item.
+        // Let's assume user might want to bind to a value later.
+        // For now we pass the item itself.
+        this.dispatchEvent(new CustomEvent('ds-nav-change', {
+            detail: { item, href: item.href },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    _selectItem(selectedItem) {
+        const items = this._getAllItems();
+        items.forEach(item => {
+            const isSelected = item === selectedItem;
+            item.selected = isSelected;
+            if (isSelected) {
+                this.value = item.getAttribute('href') || ''; // Sync generic value
+            }
+        });
+    }
+
+    _syncSelection() {
+        // If value is provided, select matching item (by href presumably)
+        if (!this.value) return;
+        const items = this._getAllItems();
+        items.forEach(item => {
+            if (item.getAttribute('href') === this.value) {
+                item.selected = true;
+            } else {
+                item.selected = false;
+            }
+        });
+    }
+
+    _getAllItems() {
+        return Array.from(this.querySelectorAll('ds-header-nav-item'));
+    }
+
+    render() {
+        return html`<slot></slot>`;
+    }
+}
+
+customElements.define('ds-header-nav', DsHeaderNav);

package/src/ds-header-nav/ds-header-nav.stories.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import './ds-header-nav.js';
+import '../ds-header-nav-item/ds-header-nav-item.js';
+
+export default {
+    title: 'Components/Header Nav',
+    component: 'ds-header-nav'
+};
+
+export const Group = () => html`
+    <ds-header-nav>
+        <ds-header-nav-item selected>Dashboard</ds-header-nav-item>
+        <ds-header-nav-item>Projects</ds-header-nav-item>
+        <ds-header-nav-item>Team</ds-header-nav-item>
+        <ds-header-nav-item icon="settings">Settings</ds-header-nav-item>
+    </ds-header-nav>
+`;

package/src/ds-header-nav/ds-header-nav.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-header-nav.js';
+import '../ds-header-nav-item/ds-header-nav-item.js';
+
+describe('ds-header-nav', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders slotted items', async () => {
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item>Item 1</ds-header-nav-item>
+                <ds-header-nav-item>Item 2</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        const element = container.querySelector('ds-header-nav');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const items = element.querySelectorAll('ds-header-nav-item');
+        expect(items.length).toBe(2);
+    });
+
+    it('manages single selection via click', async () => {
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item id="item1">Item 1</ds-header-nav-item>
+                <ds-header-nav-item id="item2">Item 2</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        const element = container.querySelector('ds-header-nav');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const item1 = container.querySelector('#item1');
+        const item2 = container.querySelector('#item2');
+
+        // Click item 1 (simulate via dispatching click as items might not have href/button logic fully wired for programmatic click in jsdom context easily without full render)
+        // Actually, our component listens for 'click' on itself and finds target.
+        item1.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(item1.hasAttribute('selected')).toBe(true);
+        expect(item2.hasAttribute('selected')).toBe(false);
+
+        // Click item 2
+        item2.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(item1.hasAttribute('selected')).toBe(false);
+        expect(item2.hasAttribute('selected')).toBe(true);
+    });
+
+    it('syncs selection via value prop', async () => {
+        container.innerHTML = `
+            <ds-header-nav value="/page2">
+                <ds-header-nav-item href="/page1">Item 1</ds-header-nav-item>
+                <ds-header-nav-item href="/page2">Item 2</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        const element = container.querySelector('ds-header-nav');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const items = element.querySelectorAll('ds-header-nav-item');
+        expect(items[0].hasAttribute('selected')).toBe(false);
+        expect(items[1].hasAttribute('selected')).toBe(true);
+    });
+
+    it('dispatches ds-nav-change on selection', async () => {
+        const spy = vi.fn();
+        container.innerHTML = `
+            <ds-header-nav>
+                <ds-header-nav-item href="/test">Item 1</ds-header-nav-item>
+            </ds-header-nav>
+        `;
+        const element = container.querySelector('ds-header-nav');
+        element.addEventListener('ds-nav-change', spy);
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const item = container.querySelector('ds-header-nav-item');
+        item.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy.mock.calls[0][0].detail.href).toBe('/test');
+    });
+});