@mtdt/observeops-ds-spec 0.1.0

package/components/registry/README.md

@@ -0,0 +1,44 @@
+# Component Registry (machine-readable spec)
+
+One JSON file per component — the **structured, AI-readable** source of truth that
+mirrors each component's Storybook docs. Schema: see
+[`../README.md`](../README.md#single-source-of-truth-a-component-registry).
+
+Each entry: `name`, `display`, `tier`, `source`, `status`, `summary`, `props` (type /
+default / enum), `events`, `states`, `do`, `dont`, `whenToUse`, `insteadOf`,
+`tokensUsed`, `storybook` (sidebar path), `figma` (build status).
+
+This feeds: (1) the AI design-system package (`llms.txt` will point here), (2) the
+Figma build checklist (`figma.status`), (3) cross-checking the Storybook docs.
+
+> **Resolving `tokensUsed` → real values:** every `--var` in a `tokensUsed` array resolves to its
+> light + dark value via [`../../tokens/variables.json`](../../tokens/variables.json) (the as-is
+> crosswalk; LESS `@vars` → [`../../tokens/structural.json`](../../tokens/structural.json)). An AI should
+> load `variables.json` to render product-faithful colours. The `--primary` drift is resolved there
+> (`--primary` = navy `#111c2c`, **not** cyan `#099dd9`).
+
+## Coverage
+
+| Component | Tier | Status | Storybook |
+| --- | --- | --- | --- |
+| Button | atom | ✅ full spec | Atoms/Button |
+| Checkbox | atom | ✅ full spec | Atoms/Checkbox |
+| Switch | atom | ✅ full spec | Atoms/Switch |
+| Radio | atom | ✅ full spec | Atoms/Radio |
+| Link | atom | ✅ full spec | Atoms/Link |
+| Input | atom | ✅ full spec | Atoms/Input |
+| Select | atom | ✅ full spec (⚠️ low-use) | Atoms/Select |
+| Tag | atom | ✅ full spec | Atoms/Tag |
+| Form Field | molecule | ✅ full spec | Molecules/FormItem |
+| LooseTags | molecule | ✅ full spec | Molecules/LooseTags |
+| TagsList | molecule | ✅ full spec (⚠️ dead code) | Molecules/TagsList |
+| DropdownPicker | organism | ✅ full spec | Organisms/DropdownPicker |
+| Modal | organism | ✅ full spec | Organisms/Modal |
+| Drawer | organism | ✅ full spec | Organisms/Drawer |
+| Tooltip | molecule | ✅ full spec | Molecules/Tooltip |
+| Popover | molecule | ✅ full spec | Molecules/Popover |
+| Table / Grid | organism | ✅ full spec | Organisms/Table |
+| Grid Toolbar | organism | ✅ full spec | Organisms/Grid Toolbar |
+
+Remaining atoms/molecules/organisms tracked in [`../inventory.md`](../inventory.md).
+</content>

package/components/registry/_schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "observeops-ds/registry-entry",
+  "title": "ObserveOps DS — component registry entry",
+  "description": "The contract every components/registry/<id>.json must satisfy. Required fields are the AI-readable core; recommended fields (variants/sizes/states/props) are the machine API surface a codegen tool needs to configure a component. Component-specific extension keys (archetypes, members, overlayVariants, mechanisms, …) are allowed.",
+  "type": "object",
+  "required": ["name", "display", "tier", "family", "status", "summary", "decisionFlow", "do", "dont", "related", "knownIssues", "tokensUsed", "storybook", "variants", "sizes", "states"],
+  "additionalProperties": true,
+  "properties": {
+    "name": { "type": "string", "pattern": "^[a-z0-9-]+$", "description": "Canonical kebab id == registry filename stem. Used as the component id everywhere (index.json, cross-refs)." },
+    "component": { "type": "string", "description": "The product component class (e.g. MButton, FlotoDrawer). Optional." },
+    "display": { "type": "string", "description": "Human-readable name." },
+    "tier": { "type": "string", "enum": ["atom", "molecule", "organism"] },
+    "family": { "type": "string", "enum": ["Button", "Form Controls", "Selection Controls", "Tag", "Link", "Navigation", "Tabs", "Menu", "Filters", "Date & Time Pickers", "Scheduler", "Popover & Tooltip", "Overlay", "Table", "Toolbars"] },
+    "status": { "type": "string", "description": "stable | core | beta | deprecated | unused." },
+    "summary": { "type": "string" },
+    "selectHint": { "type": "string", "description": "One-line 'use when' (else derived from decisionFlow[0])." },
+
+    "variants": {
+      "type": "array",
+      "description": "AI-critical. Every distinct visual/behavioural variant (kind/type/class-based). Empty array allowed only with a knownIssue/summary note that the component is single-variant.",
+      "items": { "type": "object", "required": ["name"], "properties": { "name": { "type": "string" }, "what": { "type": "string" }, "usage": { "type": "string" } } }
+    },
+    "sizes": {
+      "type": "array",
+      "description": "AI-critical. Every size token/value (e.g. small/default/large, or px/rem). Empty array means single-size (state that).",
+      "items": { "type": "object", "required": ["name"], "properties": { "name": { "type": "string" }, "value": { "type": "string" }, "note": { "type": "string" } } }
+    },
+    "states": {
+      "type": "array",
+      "description": "AI-critical. Every interactive/data state (default, hover, focus, active, disabled, loading, error, selected, readonly/is-view, indeterminate, checked, …).",
+      "items": { "type": "object", "required": ["name"], "properties": { "name": { "type": "string" }, "what": { "type": "string" } } }
+    },
+
+    "props": { "description": "Prop API (array or object). Recommended for buildability." },
+    "events": { "description": "Event/emit API. Recommended." },
+    "slots": { "description": "Slot API. Recommended." },
+    "decisionFlow": { "type": "array", "items": { "type": "string" }, "description": "Ordered 'choose this when…' branches." },
+    "do": { "type": "array", "items": { "type": "string" } },
+    "dont": { "type": "array", "items": { "type": "string" } },
+    "related": { "type": "array", "items": { "type": "string" }, "description": "Related component ids (kebab)." },
+    "knownIssues": { "description": "Object (F-keyed) or array of finding strings." },
+    "tokensUsed": { "type": "array", "items": { "type": "string" }, "description": "Product CSS --var names. Resolve to light/dark via tokens/variables.json (LESS @vars via tokens/structural.json)." },
+    "storybook": { "type": "string", "description": "Storybook sidebar path." },
+    "figma": { "type": "object" }
+  }
+}

package/components/registry/button.json

@@ -0,0 +1,368 @@
+{
+  "name": "button",
+  "component": "MButton",
+  "display": "Button",
+  "tier": "atom",
+  "family": "Button",
+  "source": "mkit",
+  "status": "core",
+  "summary": "Primary action control. Triggers an operation or navigation.",
+  "variants": [
+    {
+      "name": "primary",
+      "what": "Navy filled, main action",
+      "usage": "91×"
+    },
+    {
+      "name": "primary-alt",
+      "what": "Slate filled, secondary emphasis",
+      "usage": "36×"
+    },
+    {
+      "name": "default",
+      "what": "White with border",
+      "usage": "301×"
+    },
+    {
+      "name": "neutral-lighter",
+      "what": "Light gray filled",
+      "usage": "17×"
+    },
+    {
+      "name": "neutral-lightest",
+      "what": "Pale blue filled",
+      "usage": "320×"
+    },
+    {
+      "name": "transparent",
+      "what": "No fill, text-style",
+      "usage": "255×"
+    },
+    {
+      "name": "error",
+      "what": "Red filled, destructive",
+      "usage": "31×"
+    },
+    {
+      "name": "success",
+      "what": "Green filled, approve",
+      "usage": "5×"
+    },
+    {
+      "name": "danger",
+      "what": "Light ghost (rare)",
+      "usage": "3×"
+    },
+    {
+      "name": "icon-circle",
+      "what": "shape=circle icon button",
+      "usage": "218×"
+    },
+    {
+      "name": "squared-button",
+      "what": "35x35 icon button",
+      "usage": "365×"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "small",
+      "value": "~24px",
+      "note": ""
+    },
+    {
+      "name": "default",
+      "value": "~34px",
+      "note": ""
+    },
+    {
+      "name": "large",
+      "value": "~34px",
+      "note": "same as default (F5)"
+    }
+  ],
+  "states": [
+    {
+      "name": "default",
+      "what": "resting"
+    },
+    {
+      "name": "hover",
+      "what": "bg darkens"
+    },
+    {
+      "name": "active",
+      "what": "pressed"
+    },
+    {
+      "name": "focus",
+      "what": "no visible ring (SF-001)"
+    },
+    {
+      "name": "disabled",
+      "what": "reduced, no pointer"
+    },
+    {
+      "name": "loading",
+      "what": "spinner, clicks blocked"
+    }
+  ],
+  "props": {
+    "variant": {
+      "type": "string",
+      "default": "primary",
+      "enum": [
+        "primary",
+        "primary-alt",
+        "default",
+        "danger",
+        "success",
+        "error",
+        "neutral-lighter",
+        "neutral-lightest",
+        "transparent",
+        "dashed",
+        "ghost"
+      ],
+      "note": "These render distinctly. See knownIssues for variants that fall back to navy."
+    },
+    "size": {
+      "type": "string",
+      "default": "default",
+      "enum": [
+        "small",
+        "default",
+        "large"
+      ]
+    },
+    "rounded": {
+      "type": "boolean",
+      "default": true
+    },
+    "outline": {
+      "type": "boolean",
+      "default": false
+    },
+    "block": {
+      "type": "boolean",
+      "default": false
+    },
+    "loading": {
+      "type": "boolean|object",
+      "default": false
+    },
+    "shadow": {
+      "type": "boolean",
+      "default": true,
+      "note": "INVERTED (F6): shadow=true applies .button-shadow which sets box-shadow:none"
+    },
+    "shape": {
+      "type": "string",
+      "enum": [
+        "circle"
+      ],
+      "note": "icon-button (218x); renders 4px radius not circular due to default rounded (F7)"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "iconButtons": {
+    "shape=circle": {
+      "usage": 218,
+      "note": "Ant circular icon button; needs aria-label"
+    },
+    "class=squared-button": {
+      "usage": 365,
+      "size": "35x35",
+      "note": "buttons.less square icon button — most common icon form; needs aria-label"
+    },
+    "contextual": [
+      "model-header-button (3x)",
+      "button-topology-overlay (5x)"
+    ]
+  },
+  "events": [
+    "click"
+  ],
+  "do": [
+    "Use variant=primary for the single main action on a view.",
+    "Use danger/error for destructive actions, paired with a confirm.",
+    "Use neutral-* variants for secondary/tertiary actions.",
+    "Show :loading during async work to prevent double-submits."
+  ],
+  "dont": [
+    "More than one primary button in the same action group.",
+    "Hardcoding colors — variants already map to design tokens.",
+    "Using a button for what is really a link (use FlotoLink)."
+  ],
+  "whenToUse": "Any user-triggered action (submit, create, delete, apply).",
+  "decisionFlow": [
+    "Navigates (route/URL/anchor)? -> link (FlotoLink), not a button.",
+    "Destructive (delete/remove/abort)? -> variant=error + confirm.",
+    "Single most-important action on the view/dialog? -> variant=primary (primary-alt for confirm inside a modal).",
+    "Cancel/Reset/secondary next to the primary? -> variant=default.",
+    "Quiet utility in toolbar/list/grid/filter? -> variant=neutral-lightest.",
+    "Inline text-like action (Add/Create New/Clear All)? -> variant=transparent.",
+    "Icon-only / space-tight? -> icon button (class=squared-button, or shape=circle).",
+    "Modifiers: block=full width; outline=ghost/bordered; size=small for dense. Avoid neutral/info (navy, F1)."
+  ],
+  "usageRules": {
+    "primary": {
+      "useWhen": "the ONE most-important action on a view/form/wizard",
+      "dontUse": "if a primary already exists, or action is destructive/navigation",
+      "example": "Apply (filter), Save (form), Verify Password (login)"
+    },
+    "primary-alt": {
+      "useWhen": "the confirm/save inside a modal where full navy is too heavy",
+      "dontUse": "for the page-level main action (use primary)",
+      "example": "Save/Confirm/Restore in dialogs"
+    },
+    "default": {
+      "useWhen": "the secondary next to a primary: Cancel/Reset/Clear/Back",
+      "dontUse": "for the main action or destructive action",
+      "example": "Cancel beside Save; Reset on a filter"
+    },
+    "neutral-lightest": {
+      "useWhen": "quiet utility controls in toolbar/list/grid/filter",
+      "dontUse": "for the main or inline-text action",
+      "example": "Filter bar, Hide all, granularity toggles"
+    },
+    "neutral-lighter": {
+      "useWhen": "subtle add/secondary slightly stronger than transparent (rare)",
+      "dontUse": "when unsure (prefer transparent or default)",
+      "example": "Add New Controls, Export"
+    },
+    "transparent": {
+      "useWhen": "inline text-like actions: Create New/+Add/Clear All/in-content",
+      "dontUse": "for navigation (use FlotoLink) or when more prominence is needed",
+      "example": "Create New, Add Credential, Clear All"
+    },
+    "error": {
+      "useWhen": "destructive: delete/remove/abort/discard, with a confirm",
+      "dontUse": "for normal saves",
+      "example": "Delete Selected, Abort"
+    },
+    "success": {
+      "useWhen": "explicit approve/accept in a review flow (rare)",
+      "dontUse": "for a generic save (use primary)",
+      "example": "Approve (sync-approval drawer)"
+    },
+    "outline": {
+      "useWhen": "secondary needing a clear edge, e.g. on busy/colored/image backgrounds",
+      "dontUse": "when default/transparent reads clearly on a plain surface",
+      "example": "bordered action on a colored panel"
+    },
+    "squared-button": {
+      "useWhen": "recognizable repeated space-tight icon action (row edit/delete, toolbar, modal close); 35x35",
+      "must": "aria-label",
+      "dontUse": "when the icon meaning isn't obvious",
+      "example": "row delete, toolbar tools"
+    },
+    "shape=circle": {
+      "useWhen": "standalone/floating icon action (overlays)",
+      "must": "aria-label; add :rounded=false for a true circle (F7)",
+      "example": "topology/chart overlay controls"
+    },
+    "block": {
+      "useWhen": "button should fill its container: drawers, mobile, single-action forms, login",
+      "dontUse": "in a row with other buttons"
+    },
+    "link(FlotoLink)": {
+      "useWhen": "the control navigates (route/URL/anchor)",
+      "dontUse": "for actions that change data/state (use a button)"
+    }
+  },
+  "insteadOf": [
+    "raw a-button",
+    "an anchor styled as a button"
+  ],
+  "tokensUsed": [
+    "--primary-button-bg",
+    "--primary-button-text",
+    "@btn-height",
+    "@btn-radius"
+  ],
+  "usage": {
+    "total": 1373,
+    "files": 424,
+    "byVariant": {
+      "default": 301,
+      "neutral-lightest": 320,
+      "transparent": 255,
+      "primary": 91,
+      "neutral": 77,
+      "primary-alt": 36,
+      "error": 31,
+      "neutral-lighter": 17,
+      "info": 7,
+      "success": 5,
+      "danger": 3
+    },
+    "bySize": {
+      "small": 76,
+      "large": 9,
+      "default": "majority (implicit)"
+    },
+    "modifiersApprox": {
+      "outline": 225,
+      "rounded=false": 273,
+      "loading": 518,
+      "block": 0
+    },
+    "note": "Most-used component in the product. byVariant is exact; bySize/modifiers are approximate (shared props)."
+  },
+  "knownIssues": [
+    "F1 (high): variant=info/neutral/neutral-light/warning render as the navy primary because buttons.less only allow-lists transparent/error/success/primary-alt/neutral-lighter/neutral-lightest to escape navy (high-specificity :not). `neutral` used 77x yet renders navy.",
+    "F2 (low): danger renders a light/ghost style, not solid red; use error for destructive actions.",
+    "F3 (high, a11y): focused buttons have outline:none and no focus shadow — no visible focus indicator (WCAG 2.4.7). Add a :focus-visible ring (outline 2px var(--primary)).",
+    "F4 (medium, a11y): small (~24px) is below the 44-48px touch target; large (~34px) equals default. Reserve small for dense desktop.",
+    "F5 (low): large renders the same height as default (used 9x).",
+    "F6 (low): shadow prop is inverted — shadow=true (default) applies .button-shadow which removes box-shadow. Rename to noShadow/flat or invert.",
+    "F7 (medium): shape=circle isn't circular — default rounded class (4px) overrides Ant .ant-btn-circle (50%); measured 4px radius. Real product behaviour: of 198 shape=circle buttons only 24 pass :rounded=false (true circle), ~174 render as rounded squares (~88% mislabeled). Pass :rounded=false for a true circle, or make circle shape override radius."
+  ],
+  "maturity": "stable",
+  "anatomy": [
+    "container",
+    "leading icon (optional)",
+    "label",
+    "trailing icon (optional)",
+    "loading spinner"
+  ],
+  "accessibility": {
+    "role": "native button",
+    "keyboard": "Enter/Space activate",
+    "iconOnly": "needs aria-label",
+    "focus": "F3 — no visible ring (fix needed)",
+    "targetSize": "default/large ~34px, small ~24px (F4)"
+  },
+  "related": [
+    "MConfirmBtn",
+    "MDropdown",
+    "FlotoGridActions",
+    "FlotoLink (link button, 67x)",
+    "MRadioGroup as-button (segmented control, 255x)"
+  ],
+  "changelog": [
+    "2026-06-05: added; variants corrected to distinct set + primary-alt; navy-fallback flagged (F1); light/dark verified.",
+    "2026-06-06: enhanced doc standard — anatomy/behaviors/content/accessibility (F3/F4/F5), related, changelog.",
+    "2026-06-07: thorough button audit — added icon buttons (shape=circle 218x + squared-button 365x) story + section; findings F6 (inverted shadow) + F7 (circle not circular); noted FlotoLink + segmented-control relatives."
+  ],
+  "storybook": "Atoms/Button",
+  "figma": {
+    "status": "todo",
+    "component": "Button"
+  },
+  "a11y": {
+    "summary": "Native <button>; Enter/Space activate. Icon-only (shape=circle / .squared-button) needs an aria-label. small ≈24px (sub-44 target).",
+    "issues": [
+      "No visible focus ring (SF-001 / WCAG 2.4.7) — :focus-visible planned."
+    ],
+    "doc": "Atoms/Button/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  },
+  "slots": {
+    "default": "button label / content (text and/or an icon)"
+  }
+}

package/components/registry/checkbox.json

@@ -0,0 +1,177 @@
+{
+  "name": "checkbox",
+  "component": "MCheckbox",
+  "display": "Checkbox",
+  "tier": "atom",
+  "family": "Selection Controls",
+  "source": "floto",
+  "sourceFile": "src/components/_base-checkbox.vue",
+  "status": "core",
+  "summary": "Single boolean toggle, usually with a label. Functional, fully-controlled.",
+  "variants": [],
+  "sizes": [
+    {
+      "name": "default",
+      "value": "19x19px",
+      "note": "single size"
+    }
+  ],
+  "states": [
+    {
+      "name": "unchecked",
+      "what": "empty box"
+    },
+    {
+      "name": "checked",
+      "what": "navy check + border"
+    },
+    {
+      "name": "indeterminate",
+      "what": "dash (mixed group)"
+    },
+    {
+      "name": "disabled",
+      "what": "muted"
+    },
+    {
+      "name": "disabled-checked",
+      "what": "disabled + checked"
+    }
+  ],
+  "model": {
+    "prop": "checked",
+    "event": "change"
+  },
+  "props": {
+    "checked": {
+      "type": "boolean",
+      "default": false,
+      "note": "v-model"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "type": "boolean|string",
+      "note": "passthrough id for grouping"
+    }
+  },
+  "notPresent": [
+    "variant",
+    "defaultChecked",
+    "autoFocus"
+  ],
+  "events": [
+    "change"
+  ],
+  "slots": [
+    "default (label)"
+  ],
+  "styling": {
+    "box": "19x19px, radius 3px",
+    "checkedFill": "--checkbox-bg (#fff light / #2b394f dark)",
+    "checkmark": "--primary (navy)",
+    "border": "--checkbox-checked-border-color"
+  },
+  "do": [
+    "Provide a label via the default slot (omit for a bare box).",
+    "Bind with v-model (controlled; parent owns state).",
+    "Use indeterminate for a parent over a mixed group."
+  ],
+  "dont": [
+    "Using variant/defaultChecked (the product override has neither).",
+    "Using a checkbox for mutually-exclusive choices (MRadio) or instant settings (MSwitch)."
+  ],
+  "whenToUse": "Opt-in choices, multi-select lists, terms acceptance.",
+  "decisionFlow": [
+    "Mutually-exclusive (pick one)? -> MRadio.",
+    "Applies immediately (no Save)? -> MSwitch.",
+    "Opt-in/consent/multi-select committed on Save? -> Checkbox.",
+    "Parent over a partially-selected group? -> Checkbox + indeterminate."
+  ],
+  "usageRules": {
+    "checkbox": {
+      "useWhen": "opt-in / multi-select / consent committed when the form is saved",
+      "dontUse": "for exclusive choices (radio) or instant settings (switch)",
+      "example": "Send me updates; select rows/permissions"
+    },
+    "indeterminate": {
+      "useWhen": "a parent checkbox represents a partially-selected group (shows a dash)",
+      "example": "select-all over permission groups, tree/NOC pickers"
+    },
+    "disabled": {
+      "useWhen": "option visible but not selectable in current state/permission"
+    },
+    "group": {
+      "useWhen": "several related checkboxes laid out together (note: kit MCheckboxGroup is unused 0x; compose individual checkboxes)"
+    }
+  },
+  "insteadOf": [
+    "kit MCheckbox (excluded in main.js)",
+    "raw a-checkbox"
+  ],
+  "tokensUsed": [
+    "--checkbox-bg",
+    "--checkbox-checked-border-color",
+    "--primary",
+    "--neutral-lighter"
+  ],
+  "usage": {
+    "total": 76,
+    "files": 59,
+    "MCheckboxGroup": 0,
+    "indeterminate": "~5 sites (select-all permission groups, hierarchy/tree pickers, NOC picker)"
+  },
+  "knownIssues": [
+    "F1 (medium): product MCheckbox is the Floto override _base-checkbox.vue; the kit's (variant/defaultChecked) is excluded in main.js and dead. Document the override's API.",
+    "F2 (low): checked state relies on the navy checkmark + border, not a colored fill (--checkbox-bg white in light) — subtler than typical.",
+    "F3 (high, a11y): the override never binds :checked on the <input>, so input.checked stays false even when visually checked — screen readers announce the wrong state (WCAG 4.1.2). Fix: bind :checked=props.checked on the input.",
+    "F4 (medium, a11y): indeterminate is CSS-only; the input lacks the indeterminate DOM property / aria-checked=mixed, so AT can't announce mixed. Fix: set inputEl.indeterminate.",
+    "F5 (low): 19px box is a small touch target when used without a label.",
+    "F6 (low): unused .checkbox-info variant (info-blue checked) exists in the kit override (0x); not part of the Floto override API. Parallel to radio-info. Context re-check 2026-06-07 found no other hidden/context variants (table/label rules are layout only)."
+  ],
+  "maturity": "stable",
+  "anatomy": [
+    "wrapper label",
+    "box (.ant-checkbox-inner, 19px)",
+    "checkmark (::after, navy)",
+    "hidden input",
+    "label text"
+  ],
+  "accessibility": {
+    "labelAssociation": "input nested in label (implicit)",
+    "keyboard": "Space toggles (native)",
+    "screenReaderState": "F3 — input.checked not bound (wrong state)",
+    "indeterminate": "F4 — not exposed to AT",
+    "targetSize": "19px box (F5)"
+  },
+  "related": [
+    "MRadio",
+    "MSwitch",
+    "MCheckboxGroup (unused)"
+  ],
+  "changelog": [
+    "2026-06-05: added to real Floto-override API; preview fixed to exclude kit MCheckbox + register override (F1); light/dark verified.",
+    "2026-06-06: documented indeterminate usage; enhanced standard — anatomy/behaviors/content/accessibility surfacing F3 (SR state) + F4 (indeterminate), related, changelog."
+  ],
+  "storybook": "Atoms/Checkbox",
+  "figma": {
+    "status": "todo",
+    "component": "Checkbox"
+  },
+  "kitAccent": "the check mark is painted with Ant's @primary-color = cyan #099dd9 (both themes) — NOT --primary (navy). Not in variables.json; see tokens/kit-accents.json.",
+  "a11y": {
+    "summary": "Native input implicitly associated (nested in <label>); Space toggles, Tab focuses. 19px box (sub-24; label extends hit area).",
+    "issues": [
+      "SR state wrong — override doesn't bind :checked to the input.",
+      "Indeterminate is CSS-only (not exposed)."
+    ],
+    "doc": "Atoms/Checkbox/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}