Feature/toggle component

package.json

@@ -14,21 +14,21 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "^3.2.4",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-themes": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/theming": "^8.5.8",
-    "@storybook/web-components": "^8.5.8",
-    "@storybook/web-components-vite": "^8.5.8",
+    "@chromatic-com/storybook": "^3.2.7",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-themes": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@storybook/web-components": "^8.6.14",
+    "@storybook/web-components-vite": "^8.6.14",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "lit-analyzer": "^2.0.3",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.14",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "~5.7.3",
-    "vite": "^6.1.1"
+    "vite": "^6.4.0"
   }
 }

packages/lib/components/toggle/Overview.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Source, Subtitle, Title } from "@storybook/blocks";
+
+import * as stories from "./toggle.stories";
+
+<Meta of={stories} />
+
+<Title />
+<Subtitle>The toggle component is implemented using only CSS.</Subtitle>
+
+### Default
+<Canvas of={stories.Default} />

packages/lib/components/toggle/toggle.css

@@ -0,0 +1,47 @@
+label.cx-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cx-spacing-1);
+  cursor: pointer;
+
+  &:has(:focus-visible) {
+    outline: 2px auto var(--cx-color-border-accent-1);
+    outline-offset: var(--cx-spacing-1);
+  }
+}
+
+label.cx-toggle input[type="checkbox"] {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  width: var(--cx-spacing-11);
+  height: var(--cx-spacing-6);
+  padding-inline: 2px;
+  background-color: var(--cx-color-background-inactive);
+  border-radius: var(--cx-radius-pill);
+  cursor: pointer;
+  transition: 0.3s;
+
+  &::before {
+    content: "";
+    display: block;
+    width: var(--cx-spacing-5);
+    height: var(--cx-spacing-5);
+    background-color: var(--cx-color-white);
+    border-radius: var(--cx-radius-pill);
+    transition: 0.3s;
+  }
+
+  &:checked {
+    background-color: var(--cx-color-background-accent-5);
+  }
+
+  &:checked::before {
+    transform: translateX(100%);
+    transition: 0.3s;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}

packages/lib/components/toggle/toggle.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+export default {
+  title: 'Components/Toggle',
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  render: () => html`
+<label class="cx-toggle">
+  <input type="checkbox">
+  Toggle me
+</label>
+  `,
+};

packages/lib/global-css/purpose-color-tokens.css

@@ -24,6 +24,7 @@
     /* Background */
     --cx-color-background-primary: var(--cx-color-white);
     --cx-color-background-backdrop: var(--cx-color-grey-900-o-60);
+    --cx-color-background-inactive: var(--cx-color-grey-300);
     --cx-color-background-accent-1-soft: var(--cx-color-dark-blue-100);
     --cx-color-background-accent-1: var(--cx-color-dark-blue);
     --cx-color-background-accent-2-soft: var(--cx-color-green-100);
@@ -66,6 +67,7 @@
       /* Background */
       --cx-color-background-primary: var(--cx-color-grey-800);
       --cx-color-background-backdrop: var(--cx-color-grey-900-o-60);
+      --cx-color-background-inactive: var(--cx-color-grey-600);
       --cx-color-background-accent-1-soft: var(--cx-color-dark-blue-900);
       --cx-color-background-accent-1: var(--cx-color-dark-blue-100);
       --cx-color-background-accent-2-soft: var(--cx-color-green-900);

packages/lib/global-styles.css

@@ -24,3 +24,4 @@
 @import "components/link/link.css";
 @import "components/tabs/tab.css";
 @import "components/radio-button/radio-button.css";
+@import "components/toggle/toggle.css";