From c585ec32668f072369ccb205d881a22036afc0e2 Mon Sep 17 00:00:00 2001
From: LOUIS POTEVIN <louis.potevin@legrand.com>
Date: Thu, 4 Jun 2026 11:36:32 +0200
Subject: [PATCH] feat: add Tabs component with Tab, TabItem, and TabContent
 for improved navigation

---
 src/components/Tabs/_tab.scss        | 33 +++++++++++++++++
 src/components/Tabs/tab.astro        | 54 ++++++++++++++++++++++++++++
 src/components/Tabs/tabContent.astro | 21 +++++++++++
 src/components/Tabs/tabItem.astro    | 41 +++++++++++++++++++++
 src/components/index.ts              |  5 ++-
 src/pages/index.astro                | 26 +++++++++++++-
 6 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tabs/_tab.scss
 create mode 100644 src/components/Tabs/tab.astro
 create mode 100644 src/components/Tabs/tabContent.astro
 create mode 100644 src/components/Tabs/tabItem.astro

diff --git a/src/components/Tabs/_tab.scss b/src/components/Tabs/_tab.scss
new file mode 100644
index 0000000..23a7576
--- /dev/null
+++ b/src/components/Tabs/_tab.scss
@@ -0,0 +1,33 @@
+@use '../../styles/tokens/typography' as *;
+
+.tab {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nds-spacing-xs);
+    justify-content: center;
+    width: fit-content;
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        cursor: pointer;
+        padding: var(--nds-spacing-2xs);
+        @include text-base;
+
+        &--active {
+            color: var(--nds-primary);
+
+            &::after {
+                content: '';
+                display: block;
+                width: 120%;
+                height: 1px;
+                background-color: var(--nds-primary);
+                border-radius: var(--nds-radius-sm);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Tabs/tab.astro b/src/components/Tabs/tab.astro
new file mode 100644
index 0000000..80186ae
--- /dev/null
+++ b/src/components/Tabs/tab.astro
@@ -0,0 +1,54 @@
+---
+export interface Props {
+  id: string;
+  defaultActive?: string;
+}
+
+const { id, defaultActive } = Astro.props;
+---
+
+<div class="tab" data-tab-group id={id} data-default-active={defaultActive}>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-group]').forEach((group) => {
+    const defaultActive = group.dataset.defaultActive;
+
+    function setActive(itemId: string) {
+      const groupId = group.id;
+
+      group.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+        item.classList.toggle('tab__item--active', item.dataset.tabItem === itemId);
+        item.setAttribute('aria-selected', String(item.dataset.tabItem === itemId));
+      });
+
+      document.querySelectorAll<HTMLElement>(`[data-tab-content][data-tab-id="${groupId}"]`).forEach((content) => {
+        content.hidden = content.dataset.tabItemId !== itemId;
+      });
+
+      group.dispatchEvent(new CustomEvent('tab:change', {
+        detail: { itemId },
+        bubbles: true,
+      }));
+    }
+
+    const firstItem = group.querySelector<HTMLElement>('[data-tab-item]');
+    const initialId = defaultActive ?? firstItem?.dataset.tabItem ?? '';
+    if (initialId) setActive(initialId);
+
+    group.addEventListener('tab-item:click', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    group.addEventListener('tab:set', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    (group as any).setActiveTab = (itemId: string) => setActive(itemId);
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
+</style>
\ No newline at end of file
diff --git a/src/components/Tabs/tabContent.astro b/src/components/Tabs/tabContent.astro
new file mode 100644
index 0000000..5e7dbcc
--- /dev/null
+++ b/src/components/Tabs/tabContent.astro
@@ -0,0 +1,21 @@
+---
+export interface Props {
+  id: string;
+  itemId: string;
+}
+
+const { id, itemId } = Astro.props;
+---
+
+<div
+  data-tab-content
+  data-tab-id={id}
+  data-tab-item-id={itemId}
+  hidden
+>
+  <slot />
+</div>
+
+<style lang="scss">
+@use './tab';
+</style>
\ No newline at end of file
diff --git a/src/components/Tabs/tabItem.astro b/src/components/Tabs/tabItem.astro
new file mode 100644
index 0000000..10e27fc
--- /dev/null
+++ b/src/components/Tabs/tabItem.astro
@@ -0,0 +1,41 @@
+---
+export interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+---
+
+<div
+  class="tab__item"
+  data-tab-item={id}
+  role="tab"
+  aria-selected="false"
+  tabindex="0"
+>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+    function notify() {
+      const group = item.closest('[data-tab-group]');
+      if (!group) return;
+      group.dispatchEvent(new CustomEvent('tab-item:click', {
+        detail: { itemId: item.dataset.tabItem },
+      }));
+    }
+
+    item.addEventListener('click', notify);
+    item.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        notify();
+      }
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
+</style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index c43117b..5801057 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,4 +2,7 @@
 
 export * from './Icons/index.ts';
 export { default as Notification } from './Notifications/notification.astro';
-export { default as Toggle }       from './Toggle/toggle.astro';
\ No newline at end of file
+export { default as Toggle }       from './Toggle/toggle.astro';
+export { default as Tab }          from './Tabs/tab.astro';
+export { default as TabItem }      from './Tabs/tabItem.astro';
+export { default as TabContent }   from './Tabs/tabContent.astro';
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8d07e5c..22370fe 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,10 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Notification from '../components/Notifications/notification.astro';
 import Toggle from '../components/Toggle/toggle.astro';
+import Tab from '../components/Tabs/tab.astro';
+import TabItem from '../components/Tabs/tabItem.astro';
+import TabContent from '../components/Tabs/tabContent.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -8,7 +12,6 @@ import {
   SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
   UploadIcon,
 } from '../components/Icons/index.ts';
-import Notification from '../components/Notifications/notification.astro';
 
 const initialChecked = true;
 ---
@@ -16,6 +19,27 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Tabs</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Tab id="my-tab" defaultActive="images">
+          <TabItem id="images">images</TabItem>
+          <TabItem id="videos">Videos</TabItem>
+          <TabItem id="docs">Documents</TabItem>
+        </Tab>
+        <TabContent id="my-tab" itemId="images">
+          <p>my images</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="videos">
+          <p>Video player here</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="docs">
+          <p>Document list here</p>
+        </TabContent>
+      </div>
+    </section>
     <section>
       <h2>Toggle</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">