feat: add Toggle component

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);
+        }
+    }
+}

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>

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';