From 1aa34d264035e91ee71e412cef68a8426dd14ef8 Mon Sep 17 00:00:00 2001
From: LOUIS POTEVIN <louis.potevin@legrand.com>
Date: Wed, 27 May 2026 14:45:19 +0200
Subject: [PATCH] feat: add Toggle component

---
 src/components/Toggle/_toggle.scss | 33 ++++++++++++++++
 src/components/Toggle/toggle.astro | 60 ++++++++++++++++++++++++++++++
 src/components/index.ts            |  1 +
 src/pages/index.astro              | 24 ++++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 src/components/Toggle/_toggle.scss
 create mode 100644 src/components/Toggle/toggle.astro

diff --git a/src/components/Toggle/_toggle.scss b/src/components/Toggle/_toggle.scss
new file mode 100644
index 0000000..b370de1
--- /dev/null
+++ b/src/components/Toggle/_toggle.scss
@@ -0,0 +1,33 @@
+.toggle {
+    background-color: var(--nds-disabled);
+    border-radius: var(--nds-radius-full);
+    padding: var(--nds-spacing-2xs);
+    width: 50px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    cursor: pointer;
+    transition: background-color 160ms ease;
+    position: relative;
+    &-switch {
+        color: var(--nds-text);
+        width: 15px;
+        height: 15px;
+        background-color: var(--nds-text);
+        border-radius: var(--nds-radius-full);
+        position: absolute;
+        left: var(--nds-spacing-2xs);
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 160ms ease, background-color 160ms ease, transform 160ms ease;
+    }
+    &-active {
+        display: flex;
+        justify-content: right;
+        background-color: var(--nds-primary);
+        .toggle-switch {
+            left: calc(100% - var(--nds-spacing-2xs) - 15px);
+        }
+    }
+}
diff --git a/src/components/Toggle/toggle.astro b/src/components/Toggle/toggle.astro
new file mode 100644
index 0000000..391d8f3
--- /dev/null
+++ b/src/components/Toggle/toggle.astro
@@ -0,0 +1,60 @@
+---
+export interface Props {
+    checked?: boolean;
+    name?: string;
+    id: string;
+}
+
+const { checked = false, name = 'toggle', id} = Astro.props;
+---
+
+<toggle-switch data-checked={checked} data-name={name} id={id}>
+    <div class="toggle">
+        <div class="toggle-switch"></div>
+    </div>
+</toggle-switch>
+
+<script>
+    class ToggleSwitch extends HTMLElement {
+        private _checked: boolean = false;
+
+        connectedCallback() {
+            this._checked = this.dataset.checked === 'true';
+            this.updateUI();
+
+            this.querySelector('.toggle')?.addEventListener('click', () => {
+                this.toggle();
+            });
+        }
+
+        toggle() {
+            this._checked = !this._checked;
+            this.updateUI();
+
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { checked: this._checked, name: this.dataset.name },
+                bubbles: true, 
+                composed: true,
+            }));
+        }
+        set checked(value: boolean) {
+            this._checked = value;
+            this.updateUI();
+        }
+
+        get checked() {
+            return this._checked;
+        }
+
+        private updateUI() {
+            this.dataset.checked = String(this._checked);
+            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
+        }
+    }
+
+    customElements.define('toggle-switch', ToggleSwitch);
+</script>
+
+<style lang="scss">
+@use './_toggle.scss';
+</style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 768d912..c43117b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@
 
 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
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c357c23..bb59c93 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Toggle from '../components/Toggle/toggle.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -8,11 +9,21 @@ import {
   UploadIcon,
 } from '../components/Icons/index.ts';
 import Notification from '../components/Notifications/notification.astro';
+
+const initialChecked = false;
 ---
 
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Toggle</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
+        <!-- ✅ Valeur initiale rendue statiquement, le script prend le relais ensuite -->
+        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
+      </div>
+    </section>
     <section>
       <h2>Notifications — Error / Warning / Success / Info</h2>
       <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
@@ -182,6 +193,19 @@ import Notification from '../components/Notifications/notification.astro';
   </main>
 </Layout>
 
+<script>
+    const toggle = document.getElementById('my-toggle') as any;
+    const stateLabel = document.getElementById('toggle-state');
+
+    toggle?.addEventListener('change', (e: CustomEvent) => {
+        const { checked, name } = e.detail;
+
+        if (stateLabel) {
+            stateLabel.textContent = `State: ${checked ? 'Checked' : 'Unchecked'}`;
+        }
+    });
+</script>
+
 <style lang="scss" scoped>
 
   body {