@sovereignfs/ui 0.21.3 → 0.23.0

package/dist/index.js

@@ -770,9 +770,9 @@ function Select({ className, size = "md", children, ...rest }) {
   return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: [styles6.wrapper, size === "sm" ? styles6.sm : void 0].filter(Boolean).join(" "),
+      className: [styles6.wrapper, size === "sm" ? styles6.sm : void 0, className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx34("select", { className: [styles6.select, className].filter(Boolean).join(" "), ...rest, children }),
+        /* @__PURE__ */ jsx34("select", { className: styles6.select, ...rest, children }),
         /* @__PURE__ */ jsx34(
           "svg",
           {
@@ -903,6 +903,14 @@ function Input({ type = "text", className, ...rest }) {
   return /* @__PURE__ */ jsx38("input", { type, className: classes, ...rest });
 }
 
+// src/components/Textarea/Textarea.tsx
+import styles11 from "./Textarea.module.css";
+import { jsx as jsx39 } from "react/jsx-runtime";
+function Textarea({ className, rows = 4, ...rest }) {
+  const classes = [styles11.textarea, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx39("textarea", { rows, className: classes, ...rest });
+}
+
 // src/components/Dialog/Dialog.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
@@ -919,8 +927,8 @@ function unlockBodyScroll() {
 }
 
 // src/components/Dialog/Dialog.tsx
-import styles11 from "./Dialog.module.css";
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import styles12 from "./Dialog.module.css";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({
   open,
@@ -979,10 +987,10 @@ function Dialog({
   return (
     // role="presentation" removes the scrim from the AT (it is purely visual).
     // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "div",
       {
-        className: styles11.scrim,
+        className: styles12.scrim,
         role: "presentation",
         onClick: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -998,23 +1006,23 @@ function Dialog({
             "aria-modal": "true",
             "aria-label": ariaLabel ?? title,
             tabIndex: -1,
-            className: [styles11.panel, styles11[size]].join(" "),
+            className: [styles12.panel, styles12[size]].join(" "),
             children: [
-              /* @__PURE__ */ jsxs26("div", { className: styles11.mobileBar, children: [
-                title && /* @__PURE__ */ jsx39("span", { className: styles11.mobileBarTitle, children: title }),
-                /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsxs26("div", { className: styles12.mobileBar, children: [
+                title && /* @__PURE__ */ jsx40("span", { className: styles12.mobileBarTitle, children: title }),
+                /* @__PURE__ */ jsx40(
                   "button",
                   {
                     type: "button",
-                    className: styles11.mobileBarClose,
+                    className: styles12.mobileBarClose,
                     "aria-label": "Close",
                     onClick: onClose,
                     children: "\xD7"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx39("button", { type: "button", className: styles11.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
-              /* @__PURE__ */ jsx39("div", { className: styles11.content, children })
+              /* @__PURE__ */ jsx40("button", { type: "button", className: styles12.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
+              /* @__PURE__ */ jsx40("div", { className: styles12.content, children })
             ]
           }
         )
@@ -1025,8 +1033,8 @@ function Dialog({
 
 // src/components/Drawer/Drawer.tsx
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import styles12 from "./Drawer.module.css";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import styles13 from "./Drawer.module.css";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
   const panelRef = useRef3(null);
@@ -1078,10 +1086,10 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
   return (
     // role="presentation" removes the scrim from the AT (it is purely visual).
     // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(
       "div",
       {
-        className: styles12.scrim,
+        className: styles13.scrim,
         role: "presentation",
         onClick: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -1089,7 +1097,7 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
         onKeyDown: (e) => {
           if (e.key === "Escape") onClose();
         },
-        children: /* @__PURE__ */ jsx40(
+        children: /* @__PURE__ */ jsx41(
           "div",
           {
             ref: panelRef,
@@ -1097,7 +1105,7 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
             "aria-modal": "true",
             "aria-label": ariaLabel,
             tabIndex: -1,
-            className: styles12.panel,
+            className: styles13.panel,
             children
           }
         )
@@ -1117,8 +1125,8 @@ import {
   useRef as useRef4,
   useState
 } from "react";
-import styles13 from "./Toast.module.css";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import styles14 from "./Toast.module.css";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);
@@ -1158,14 +1166,14 @@ function ToastProvider({ children }) {
   const value = useMemo(() => ({ show, dismiss }), [show, dismiss]);
   return /* @__PURE__ */ jsxs27(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       "ol",
       {
-        className: styles13.region,
+        className: styles14.region,
         "aria-label": "Notifications",
         "aria-live": "polite",
         "aria-atomic": "false",
-        children: toasts.map((toast) => /* @__PURE__ */ jsx41(Toast, { ...toast, onDismiss: dismiss }, toast.id))
+        children: toasts.map((toast) => /* @__PURE__ */ jsx42(Toast, { ...toast, onDismiss: dismiss }, toast.id))
       }
     )
   ] });
@@ -1186,24 +1194,24 @@ function Toast({
   exiting,
   onDismiss
 }) {
-  const categoryClass = styles13[category] ?? styles13.info;
+  const categoryClass = styles14[category] ?? styles14.info;
   const iconName = CATEGORY_ICON[category] ?? "info";
   return /* @__PURE__ */ jsxs27(
     "li",
     {
       role: "status",
-      className: `${styles13.toast} ${String(categoryClass)} ${exiting ? styles13.exiting : ""}`,
+      className: `${styles14.toast} ${String(categoryClass)} ${exiting ? styles14.exiting : ""}`,
       children: [
-        /* @__PURE__ */ jsx41("span", { className: styles13.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx41(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsxs27("div", { className: styles13.body, children: [
-          /* @__PURE__ */ jsx41("div", { className: styles13.title, children: title }),
-          message && /* @__PURE__ */ jsx41("div", { className: styles13.message, children: message })
+        /* @__PURE__ */ jsx42("span", { className: styles14.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs27("div", { className: styles14.body, children: [
+          /* @__PURE__ */ jsx42("div", { className: styles14.title, children: title }),
+          message && /* @__PURE__ */ jsx42("div", { className: styles14.message, children: message })
         ] }),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
-            className: styles13.close,
+            className: styles14.close,
             "aria-label": "Dismiss notification",
             onClick: () => onDismiss(id),
             children: "\u2715"
@@ -1215,12 +1223,12 @@ function Toast({
 }
 
 // src/components/Card/Card.tsx
-import styles14 from "./Card.module.css";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import styles15 from "./Card.module.css";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var paddingClass = {
-  sm: styles14.paddingSm,
-  md: styles14.paddingMd,
-  lg: styles14.paddingLg
+  sm: styles15.paddingSm,
+  md: styles15.paddingMd,
+  lg: styles15.paddingLg
 };
 function Card({
   as: Tag = "div",
@@ -1230,118 +1238,126 @@ function Card({
   children,
   ...rest
 }) {
-  const cls = [styles14.card, paddingClass[padding], interactive && styles14.interactive, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx42(Tag, { className: cls, ...rest, children });
+  const cls = [styles15.card, paddingClass[padding], interactive && styles15.interactive, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx43(Tag, { className: cls, ...rest, children });
 }
 
 // src/components/FormField/FormField.tsx
 import { useId as useId2 } from "react";
-import styles15 from "./FormField.module.css";
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import styles16 from "./FormField.module.css";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function FormField({
   label,
   hint,
   error,
-  htmlFor,
+  id,
   required = false,
-  children,
-  className
+  className,
+  children
 }) {
-  const hintId = useId2();
-  const errorId = useId2();
-  const describedBy = [hint && hintId, error && errorId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs28("div", { className: [styles15.field, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs28("label", { className: styles15.label, htmlFor, children: [
+  const generatedId = useId2();
+  const fieldId = id ?? generatedId;
+  const hintId = `${fieldId}-hint`;
+  const errorId = `${fieldId}-error`;
+  const describedBy = [hint && !error && hintId, error && errorId].filter(Boolean).join(" ") || void 0;
+  const field = {
+    id: fieldId,
+    "aria-describedby": describedBy,
+    "aria-invalid": error ? true : void 0,
+    required: required || void 0
+  };
+  return /* @__PURE__ */ jsxs28("div", { className: [styles16.field, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs28("label", { className: styles16.label, htmlFor: fieldId, children: [
       label,
-      required && /* @__PURE__ */ jsx43("span", { className: styles15.required, "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx44("span", { className: styles16.required, "aria-hidden": "true", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx43("div", { "aria-describedby": describedBy, children }),
-    hint && !error && /* @__PURE__ */ jsx43("p", { id: hintId, className: styles15.hint, children: hint }),
-    error && /* @__PURE__ */ jsx43("p", { id: errorId, className: styles15.error, role: "alert", children: error })
+    children(field),
+    hint && !error && /* @__PURE__ */ jsx44("p", { id: hintId, className: styles16.hint, children: hint }),
+    error && /* @__PURE__ */ jsx44("p", { id: errorId, className: styles16.error, role: "alert", children: error })
   ] });
 }
 
 // src/components/PageHeader/PageHeader.tsx
-import styles16 from "./PageHeader.module.css";
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import styles17 from "./PageHeader.module.css";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function PageHeader({ title, description, action, className }) {
-  return /* @__PURE__ */ jsxs29("header", { className: [styles16.header, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs29("div", { className: styles16.text, children: [
-      /* @__PURE__ */ jsx44("h1", { className: styles16.title, children: title }),
-      description && /* @__PURE__ */ jsx44("p", { className: styles16.description, children: description })
+  return /* @__PURE__ */ jsxs29("header", { className: [styles17.header, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs29("div", { className: styles17.text, children: [
+      /* @__PURE__ */ jsx45("h1", { className: styles17.title, children: title }),
+      description && /* @__PURE__ */ jsx45("p", { className: styles17.description, children: description })
     ] }),
-    action && /* @__PURE__ */ jsx44("div", { className: styles16.action, children: action })
+    action && /* @__PURE__ */ jsx45("div", { className: styles17.action, children: action })
   ] });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import styles17 from "./EmptyState.module.css";
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import styles18 from "./EmptyState.module.css";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function EmptyState({ icon, heading, description, action, className }) {
-  return /* @__PURE__ */ jsxs30("div", { className: [styles17.root, className].filter(Boolean).join(" "), children: [
-    icon && /* @__PURE__ */ jsx45("span", { className: styles17.icon, children: /* @__PURE__ */ jsx45(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
-    /* @__PURE__ */ jsx45("h2", { className: styles17.heading, children: heading }),
-    description && /* @__PURE__ */ jsx45("p", { className: styles17.description, children: description }),
+  return /* @__PURE__ */ jsxs30("div", { className: [styles18.root, className].filter(Boolean).join(" "), children: [
+    icon && /* @__PURE__ */ jsx46("span", { className: styles18.icon, children: /* @__PURE__ */ jsx46(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx46("h2", { className: styles18.heading, children: heading }),
+    description && /* @__PURE__ */ jsx46("p", { className: styles18.description, children: description }),
     action
   ] });
 }
 
 // src/components/Spinner/Spinner.tsx
-import styles18 from "./Spinner.module.css";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import styles19 from "./Spinner.module.css";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var sizeClass = {
-  sm: styles18.sm,
-  md: styles18.md,
-  lg: styles18.lg
+  sm: styles19.sm,
+  md: styles19.md,
+  lg: styles19.lg
 };
 function Spinner({ size = "md", label = "Loading\u2026", className }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "span",
     {
       role: "status",
       "aria-label": label,
-      className: [styles18.spinner, sizeClass[size], className].filter(Boolean).join(" ")
+      className: [styles19.spinner, sizeClass[size], className].filter(Boolean).join(" ")
     }
   );
 }
 
 // src/components/Avatar/Avatar.tsx
 import { useState as useState2 } from "react";
-import styles19 from "./Avatar.module.css";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import styles20 from "./Avatar.module.css";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function initials(name) {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
   return ((parts[0]?.[0] ?? "") + (parts[parts.length - 1]?.[0] ?? "")).toUpperCase();
 }
 var sizeClass2 = {
-  sm: styles19.sm,
-  md: styles19.md,
-  lg: styles19.lg
+  sm: styles20.sm,
+  md: styles20.md,
+  lg: styles20.lg
 };
 function Avatar({ name, src, size = "md", className }) {
   const [imgFailed, setImgFailed] = useState2(false);
-  const cls = [styles19.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
+  const cls = [styles20.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
   if (src && !imgFailed) {
-    return /* @__PURE__ */ jsx47("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx47("img", { src, alt: name, className: styles19.img, onError: () => setImgFailed(true) }) });
+    return /* @__PURE__ */ jsx48("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx48("img", { src, alt: name, className: styles20.img, onError: () => setImgFailed(true) }) });
   }
-  return /* @__PURE__ */ jsx47("span", { className: cls, "aria-label": name, children: initials(name) });
+  return /* @__PURE__ */ jsx48("span", { className: cls, "aria-label": name, children: initials(name) });
 }
 
 // src/components/NavTabs/NavTabs.tsx
-import styles20 from "./NavTabs.module.css";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import styles21 from "./NavTabs.module.css";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function NavTabs({ items, className, "aria-label": ariaLabel }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "nav",
     {
-      className: [styles20.nav, className].filter(Boolean).join(" "),
+      className: [styles21.nav, className].filter(Boolean).join(" "),
       "aria-label": ariaLabel ?? "Page navigation",
-      children: items.map((item) => /* @__PURE__ */ jsx48(
+      children: items.map((item) => /* @__PURE__ */ jsx49(
         "a",
         {
           href: item.href,
-          className: [styles20.link, item.active && styles20.active].filter(Boolean).join(" "),
+          className: [styles21.link, item.active && styles21.active].filter(Boolean).join(" "),
           "aria-current": item.active ? "page" : void 0,
           children: item.label
         },
@@ -1353,27 +1369,132 @@ function NavTabs({ items, className, "aria-label": ariaLabel }) {
 
 // src/components/Tooltip/Tooltip.tsx
 import { useId as useId3 } from "react";
-import styles21 from "./Tooltip.module.css";
-import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import styles22 from "./Tooltip.module.css";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 var sideClass = {
-  top: styles21.top,
-  bottom: styles21.bottom,
-  left: styles21.left,
-  right: styles21.right
+  top: styles22.top,
+  bottom: styles22.bottom,
+  left: styles22.left,
+  right: styles22.right
 };
 function Tooltip({ content, children, side = "top" }) {
   const tipId = useId3();
-  return /* @__PURE__ */ jsxs31("span", { className: styles21.wrapper, children: [
-    /* @__PURE__ */ jsx49("span", { "aria-describedby": tipId, children }),
-    /* @__PURE__ */ jsx49("span", { id: tipId, role: "tooltip", className: [styles21.tip, sideClass[side]].join(" "), children: content })
+  return /* @__PURE__ */ jsxs31("span", { className: styles22.wrapper, children: [
+    /* @__PURE__ */ jsx50("span", { "aria-describedby": tipId, children }),
+    /* @__PURE__ */ jsx50("span", { id: tipId, role: "tooltip", className: [styles22.tip, sideClass[side]].join(" "), children: content })
   ] });
 }
+
+// src/components/Checkbox/Checkbox.tsx
+import styles23 from "./Checkbox.module.css";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  strikeThrough = false,
+  disabled,
+  className,
+  id,
+  ...rest
+}) {
+  const inputId = id ?? `checkbox-${label.toLowerCase().replace(/\s+/g, "-")}`;
+  return /* @__PURE__ */ jsxs32("span", { className: [styles23.root, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs32("span", { className: [styles23.box, checked ? styles23.checked : ""].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx51(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type: "checkbox",
+          checked,
+          disabled,
+          className: styles23.input,
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      checked && /* @__PURE__ */ jsx51("svg", { className: styles23.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx51(
+        "path",
+        {
+          d: "M1 4l3 3 5-6",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx51(
+      "label",
+      {
+        htmlFor: inputId,
+        className: [
+          styles23.label,
+          strikeThrough && checked ? styles23.struck : "",
+          disabled ? styles23.disabled : ""
+        ].filter(Boolean).join(" "),
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/components/DragHandleRow/DragHandleRow.tsx
+import styles24 from "./DragHandleRow.module.css";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+function DragHandleRow({
+  children,
+  handleProps,
+  isDragging,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs33(
+    "div",
+    {
+      ...rest,
+      className: [styles24.row, isDragging ? styles24.dragging : "", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx52(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Drag to reorder",
+            className: styles24.handle,
+            tabIndex: -1,
+            ...handleProps,
+            children: /* @__PURE__ */ jsx52(DragIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx52("div", { className: styles24.content, children })
+      ]
+    }
+  );
+}
+function DragIcon() {
+  return /* @__PURE__ */ jsx52(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      className: styles24.icon,
+      children: [3, 7, 11].map(
+        (cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx52("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
+      )
+    }
+  );
+}
 export {
   Avatar,
   Badge,
   Button,
   Card,
+  Checkbox,
   Dialog,
+  DragHandleRow,
   Drawer,
   EmptyState,
   FormField,
@@ -1387,6 +1508,7 @@ export {
   Spinner,
   SystemBanner,
   Tabs,
+  Textarea,
   ToastProvider,
   Toggle,
   Tooltip,

package/dist/tokens/semantic.css

@@ -25,6 +25,10 @@
 
   --sv-color-accent: var(--sv-grey-900);
   --sv-color-accent-hover: var(--sv-grey-700);
+  /* Derived from --sv-color-accent via color-mix, so it re-themes automatically —
+     no separate dark-mode override needed. Tinted background for badges/chips
+     paired with --sv-color-accent text. */
+  --sv-color-accent-subtle: color-mix(in srgb, var(--sv-color-accent) 12%, transparent);
 
   --sv-color-focus-ring: var(--sv-grey-900);
 
@@ -56,6 +60,7 @@
   --sv-shadow-popover:
     0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); /* e2 — floating panels */
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
 
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
@@ -108,4 +113,5 @@
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.5);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.21.3",
+  "version": "0.23.0",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,97 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  cursor: pointer;
+}
+
+/* The visual box */
+.box {
+  position: relative;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--sv-radius-sm);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  background-color: var(--sv-color-accent);
+  border-color: var(--sv-color-accent);
+  color: var(--sv-white);
+}
+
+/* Hide the native input visually but keep it accessible */
+.input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.input:focus-visible + .tick,
+.input:focus-visible {
+  outline: none;
+}
+
+.box:has(.input:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.tick {
+  width: 10px;
+  height: 8px;
+  pointer-events: none;
+}
+
+/* Label */
+.label {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s ease;
+  /* Strike-through animates via clip-path on a pseudo-element */
+  position: relative;
+}
+
+.label::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1.5px;
+  background: var(--sv-color-text-muted);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 0.2s ease;
+}
+
+.struck {
+  color: var(--sv-color-text-muted);
+}
+
+.struck::after {
+  transform: scaleX(1);
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}