{
  "$schema": "https://inkwash.dev/registry.schema.json",
  "name": "inkwash",
  "version": "0.1.0",
  "description": "Hand-drawn, watercolor-textured CSS component library. Framework-agnostic. Add class=\"wc\" on a root to inherit tokens; class=\"wc-forest\" for the dark night-forest theme.",
  "install": {
    "css": [
      "css/watercolor.css"
    ],
    "js": [
      "js/watercolor.js"
    ],
    "note": "CSS-first: link watercolor.css and use the .wc-* classes. js/watercolor.js is optional and only enhances modal, toast, tabs, and interactive rating.",
    "themes": [
      "default",
      "forest"
    ],
    "tokensFile": "tokens/tokens.json"
  },
  "conventions": {
    "root": "Put class=\"wc\" on the app root so components inherit fonts/tokens.",
    "theming": "Add class=\"wc-forest\" to any subtree for the dark theme; or override --wc-* custom properties.",
    "handDrawn": "Add class=\"wc-sketch\" to give an element a wobbly ink border (drawn on a filtered ::before so text stays crisp). Add class=\"wc-paper-tex\" for paper grain.",
    "tokens": "All values come from --wc-* custom properties (color, --wc-1..8 spacing, --wc-r-* radius, --wc-text-* sizes, --wc-dur/ease/spring motion). Never hardcode hex; reference tokens.",
    "a11y": "Use native semantic elements (button, dialog, details, input, table). Icon-only controls need aria-label. Focus rings use :focus-visible and must not be removed."
  },
  "components": [
    {
      "name": "button",
      "category": "actions",
      "element": "button",
      "baseClass": "wc-btn",
      "description": "Primary action control with a hand-lettered label and optional wobbly ink outline.",
      "variants": {
        "variant": [
          "",
          "wc-btn--secondary",
          "wc-btn--outline",
          "wc-btn--ghost",
          "wc-btn--danger"
        ],
        "size": [
          "wc-btn--sm",
          "",
          "wc-btn--lg",
          "wc-btn--icon"
        ]
      },
      "modifiers": [
        "wc-sketch (ink outline on secondary/outline)"
      ],
      "states": [
        "hover",
        "active",
        "disabled (attr or .is-disabled)",
        "focus-visible"
      ],
      "a11y": [
        "Use <button>.",
        "Icon-only (wc-btn--icon) requires aria-label.",
        "disabled via the disabled attribute."
      ],
      "example": "<button class=\"wc-btn\">Primary</button>\n<button class=\"wc-btn wc-btn--outline\">Outline</button>"
    },
    {
      "name": "card",
      "category": "surfaces",
      "element": "div",
      "baseClass": "wc-card",
      "description": "Elevated surface. Add wc-sketch for a hand-drawn border, wc-paper-tex for grain.",
      "parts": [
        "wc-card__title",
        "wc-card__body",
        "wc-card__foot"
      ],
      "modifiers": [
        "wc-sketch",
        "wc-paper-tex"
      ],
      "example": "<div class=\"wc-card wc-sketch\"><div class=\"wc-card__title\">Title</div><div class=\"wc-card__body\">Body</div></div>"
    },
    {
      "name": "field",
      "category": "forms",
      "element": "div",
      "baseClass": "wc-field",
      "description": "Form-field wrapper grouping a label, control, and hint/error.",
      "parts": [
        "wc-label",
        "wc-label > .wc-req (required asterisk)",
        "wc-hint",
        "wc-error"
      ],
      "a11y": [
        "Associate wc-label via for=/id.",
        "Mark required with the .wc-req asterisk AND the control's required attribute."
      ],
      "example": "<div class=\"wc-field\"><label class=\"wc-label\" for=\"e\">Email <span class=\"wc-req\">*</span></label><input class=\"wc-input\" id=\"e\" type=\"email\" required><span class=\"wc-hint\">We'll only use it to reply.</span></div>"
    },
    {
      "name": "input",
      "category": "forms",
      "element": "input",
      "baseClass": "wc-input",
      "states": [
        "focus",
        "is-invalid"
      ],
      "description": "Text input. Add is-invalid on error.",
      "example": "<input class=\"wc-input\" type=\"text\" placeholder=\"…\">"
    },
    {
      "name": "textarea",
      "category": "forms",
      "element": "textarea",
      "baseClass": "wc-textarea",
      "example": "<textarea class=\"wc-textarea\"></textarea>"
    },
    {
      "name": "select",
      "category": "forms",
      "element": "select",
      "baseClass": "wc-select",
      "example": "<select class=\"wc-select\"><option>A</option></select>"
    },
    {
      "name": "checkbox",
      "category": "forms",
      "baseClass": "wc-check",
      "element": "label",
      "description": "Checkbox with a hidden native input and a custom box.",
      "a11y": [
        "Real <input type=checkbox> inside the label; keep it in the DOM (visually hidden), don't display:none the input."
      ],
      "example": "<label class=\"wc-check\"><input type=\"checkbox\"><span class=\"wc-check__box\"></span> Label</label>"
    },
    {
      "name": "radio",
      "category": "forms",
      "baseClass": "wc-check wc-check--radio",
      "element": "label",
      "example": "<label class=\"wc-check wc-check--radio\"><input type=\"radio\" name=\"g\"><span class=\"wc-check__box\"></span> Option</label>"
    },
    {
      "name": "switch",
      "category": "forms",
      "baseClass": "wc-switch",
      "element": "label",
      "a11y": [
        "Native checkbox input; add aria-label if no visible text."
      ],
      "example": "<label class=\"wc-switch\"><input type=\"checkbox\"><span class=\"wc-switch__track\"></span> On</label>"
    },
    {
      "name": "badge",
      "category": "data",
      "baseClass": "wc-badge",
      "element": "span",
      "example": "<span class=\"wc-badge\">New</span>"
    },
    {
      "name": "chip",
      "category": "data",
      "baseClass": "wc-chip",
      "modifiers": [
        "wc-sketch"
      ],
      "element": "span",
      "example": "<span class=\"wc-chip wc-sketch\">Billing</span>"
    },
    {
      "name": "tag",
      "category": "data",
      "baseClass": "wc-tag",
      "element": "span",
      "description": "Removable tag with an × button.",
      "parts": [
        "wc-tag__x"
      ],
      "a11y": [
        "The × button needs aria-label='remove'."
      ],
      "example": "<span class=\"wc-tag\">Design <button class=\"wc-tag__x\" aria-label=\"remove\">×</button></span>"
    },
    {
      "name": "alert",
      "category": "feedback",
      "baseClass": "wc-alert",
      "element": "div",
      "description": "Inline semantic callout, 5 levels.",
      "variants": {
        "level": [
          "wc-alert--critical",
          "wc-alert--warning",
          "wc-alert--caution",
          "wc-alert--info",
          "wc-alert--tip"
        ]
      },
      "parts": [
        "wc-alert__title",
        "wc-alert__body"
      ],
      "a11y": [
        "For dynamic alerts add role='alert' (critical) or role='status' (others).",
        "Don't rely on color alone — the title names the level."
      ],
      "example": "<div class=\"wc-alert wc-alert--tip\"><div><div class=\"wc-alert__title\">Tip</div><div class=\"wc-alert__body\">A nudge.</div></div></div>"
    },
    {
      "name": "tooltip",
      "category": "feedback",
      "baseClass": "wc-tip-wrap",
      "element": "span",
      "description": "Hover/focus tooltip with a speech-bubble tail. Default placement is top; add wc-tip--bottom / --left / --right on the wc-tip.",
      "parts": [
        "wc-tip"
      ],
      "modifiers": [
        "wc-tip--bottom",
        "wc-tip--left",
        "wc-tip--right"
      ],
      "a11y": [
        "Shows on hover AND focus-within; trigger should be focusable; give wc-tip role=tooltip."
      ],
      "example": "<span class=\"wc-tip-wrap\"><button class=\"wc-btn wc-btn--sm\">Hover</button><span class=\"wc-tip wc-tip--bottom\" role=\"tooltip\">Hint</span></span>"
    },
    {
      "name": "toast",
      "category": "feedback",
      "baseClass": "wc-toast",
      "js": true,
      "description": "Transient snackbar with a frosted-glass (backdrop-blur) surface and a subtle semantic-colored border. Spawn via JS; variant sets the border tint. Optional action button.",
      "api": "WC.toast(message, { variant?: 'critical'|'warning'|'caution'|'info'|'tip'|'primary', duration?: number, action?: { label: string, onClick: () => void } })",
      "modifiers": [
        "wc-toast--critical",
        "wc-toast--warning",
        "wc-toast--caution",
        "wc-toast--info",
        "wc-toast--tip"
      ],
      "a11y": [
        "The region is aria-live='polite'; toasts don't steal focus.",
        "Falls back to a solid surface where backdrop-filter is unsupported."
      ],
      "example": "WC.toast('Message sent!', { variant: 'tip' })"
    },
    {
      "name": "progress",
      "category": "feedback",
      "baseClass": "wc-progress",
      "element": "div",
      "parts": [
        "wc-progress__bar (set inline style width)"
      ],
      "a11y": [
        "Add role='progressbar' aria-valuenow/min/max on wc-progress."
      ],
      "example": "<div class=\"wc-progress\"><div class=\"wc-progress__bar\" style=\"width:68%\"></div></div>"
    },
    {
      "name": "spinner",
      "category": "feedback",
      "baseClass": "wc-spinner",
      "element": "div",
      "a11y": [
        "Add aria-label='Loading' role='status'."
      ],
      "example": "<div class=\"wc-spinner\" role=\"status\" aria-label=\"Loading\"></div>"
    },
    {
      "name": "skeleton",
      "category": "feedback",
      "baseClass": "wc-skel",
      "element": "div",
      "variants": {
        "shape": [
          "wc-skel--text",
          "wc-skel--title",
          "wc-skel--avatar"
        ]
      },
      "a11y": [
        "Decorative; hide from AT with aria-hidden."
      ],
      "example": "<div class=\"wc-skel wc-skel--title\"></div><div class=\"wc-skel wc-skel--text\"></div>"
    },
    {
      "name": "empty-state",
      "category": "feedback",
      "baseClass": "wc-empty",
      "element": "div",
      "parts": [
        "wc-empty__art",
        "wc-empty__title"
      ],
      "example": "<div class=\"wc-empty\"><div class=\"wc-empty__art\">🍄</div><div class=\"wc-empty__title\">Nothing here yet</div><div>Guidance…</div></div>"
    },
    {
      "name": "rating",
      "category": "feedback",
      "baseClass": "wc-rating",
      "element": "div",
      "js": "optional (data-wc-interactive)",
      "description": "Star rating; static or interactive.",
      "example": "<div class=\"wc-rating\"><span class=\"star on\">★</span><span class=\"star\">☆</span></div>"
    },
    {
      "name": "modal",
      "category": "overlays",
      "baseClass": "wc-modal",
      "element": "dialog",
      "js": true,
      "description": "Native <dialog> modal with backdrop blur.",
      "parts": [
        "wc-modal__inner",
        "wc-modal__title",
        "wc-modal__body",
        "wc-modal__foot"
      ],
      "api": "Trigger: data-wc-open=\"#id\". Close: data-wc-close. Also closes on backdrop click / Esc.",
      "a11y": [
        "Native <dialog> traps focus and handles Esc. Give it aria-labelledby pointing at the title."
      ],
      "example": "<button class=\"wc-btn\" data-wc-open=\"#m\">Open</button>\n<dialog class=\"wc-modal\" id=\"m\"><div class=\"wc-modal__inner\"><div class=\"wc-modal__title\">Title</div><div class=\"wc-modal__body\">…</div><div class=\"wc-modal__foot\"><button class=\"wc-btn\" data-wc-close>OK</button></div></div></dialog>"
    },
    {
      "name": "menu",
      "category": "overlays",
      "baseClass": "wc-menu",
      "element": "details",
      "description": "Dropdown menu (CSS-only via <details>).",
      "parts": [
        "summary (trigger)",
        "wc-menu__list",
        "wc-menu__item",
        "wc-menu__sep"
      ],
      "example": "<details class=\"wc-menu\"><summary class=\"wc-btn wc-btn--outline\">Menu ▾</summary><div class=\"wc-menu__list\"><button class=\"wc-menu__item\">Item</button></div></details>"
    },
    {
      "name": "accordion",
      "category": "overlays",
      "baseClass": "wc-accordion",
      "element": "div",
      "description": "Disclosure list (CSS-only via <details>).",
      "parts": [
        "wc-accordion__item (details)",
        "summary",
        "wc-accordion__body"
      ],
      "example": "<div class=\"wc-accordion\"><details class=\"wc-accordion__item\" open><summary>Q</summary><div class=\"wc-accordion__body\">A</div></details></div>"
    },
    {
      "name": "tabs",
      "category": "navigation",
      "baseClass": "wc-tabs",
      "element": "div",
      "js": "optional",
      "description": "Pill/segmented tabs. Tabs may include a leading <svg class='wc-icon'>. Scrolls horizontally on narrow screens; WC.init adds arrow-key nav + roving tabindex.",
      "modifiers": [
        "wc-tabs--fill (tabs share the row equally, full width)"
      ],
      "parts": [
        "wc-tab (aria-selected)"
      ],
      "a11y": [
        "role='tablist' on wc-tabs, role='tab' + aria-selected on each; Left/Right/Home/End move focus."
      ],
      "example": "<div class=\"wc-tabs\" role=\"tablist\"><button class=\"wc-tab is-active\" role=\"tab\" aria-selected=\"true\"><svg class=\"wc-icon\"><use href=\"icons/sprite.svg#wc-i-grid\"/></svg> A</button><button class=\"wc-tab\" role=\"tab\" aria-selected=\"false\">B</button></div>"
    },
    {
      "name": "tabs-underline",
      "category": "navigation",
      "baseClass": "wc-utabs",
      "element": "div",
      "js": "optional",
      "description": "Underline tabs (wobbly ink indicator). Supports leading icons; scrolls on narrow screens.",
      "modifiers": [
        "wc-utabs--vertical (left rail; indicator on the left edge)"
      ],
      "parts": [
        "wc-utab (aria-selected)"
      ],
      "example": "<div class=\"wc-utabs\"><button class=\"wc-utab is-active\" aria-selected=\"true\"><svg class=\"wc-icon\"><use href=\"icons/sprite.svg#wc-i-file-text\"/></svg> Overview</button><button class=\"wc-utab\" aria-selected=\"false\">Specs</button></div>"
    },
    {
      "name": "pagination",
      "category": "navigation",
      "baseClass": "wc-pagination",
      "element": "nav",
      "parts": [
        "wc-page (aria-current='page' for active)"
      ],
      "a11y": [
        "Wrap in <nav aria-label='Pagination'>."
      ],
      "example": "<nav class=\"wc-pagination\" aria-label=\"Pagination\"><button class=\"wc-page is-active\" aria-current=\"page\">1</button><button class=\"wc-page\">2</button></nav>"
    },
    {
      "name": "breadcrumbs",
      "category": "navigation",
      "baseClass": "wc-breadcrumb",
      "element": "nav",
      "a11y": [
        "<nav aria-label='Breadcrumb'>; current page uses aria-current='page'."
      ],
      "example": "<nav class=\"wc-breadcrumb\" aria-label=\"Breadcrumb\"><a href=\"#\">Home</a><span class=\"sep\">/</span><span aria-current=\"page\">Here</span></nav>"
    },
    {
      "name": "table",
      "category": "data",
      "baseClass": "wc-table",
      "element": "table",
      "a11y": [
        "Use real <thead>/<th scope='col'>."
      ],
      "example": "<table class=\"wc-table\"><thead><tr><th scope=\"col\">Role</th></tr></thead><tbody><tr><td>Designer</td></tr></tbody></table>"
    },
    {
      "name": "avatar",
      "category": "data",
      "baseClass": "wc-avatar",
      "element": "span",
      "modifiers": [
        "wc-avatar--sm",
        "wc-avatar--lg"
      ],
      "parts": [
        "wc-avatar-group (overlapping stack)"
      ],
      "a11y": [
        "Give <img> a meaningful alt."
      ],
      "example": "<span class=\"wc-avatar\"><img src=\"…\" alt=\"Name\"></span>"
    },
    {
      "name": "presence",
      "category": "data",
      "baseClass": "wc-presence",
      "element": "span",
      "description": "Presence/status dot over an avatar. Online pulses green (reduced-motion aware); away / busy / offline are static.",
      "modifiers": [
        "wc-presence--online",
        "wc-presence--away",
        "wc-presence--busy",
        "wc-presence--meeting",
        "wc-presence--offline"
      ],
      "parts": [
        "wc-avatar (the portrait)",
        "wc-presence__dot (the status dot)"
      ],
      "a11y": [
        "Convey status in text too (caption / aria-label) — color alone isn't sufficient."
      ],
      "example": "<span class=\"wc-presence wc-presence--online\"><span class=\"wc-avatar wc-avatar--lg\"><img src=\"…\" alt=\"Ada — online\"></span><span class=\"wc-presence__dot\"></span></span>"
    },
    {
      "name": "divider",
      "category": "layout",
      "baseClass": "wc-divider",
      "element": "hr",
      "example": "<hr class=\"wc-divider\">"
    },
    {
      "name": "chart",
      "category": "data",
      "baseClass": "wc-chart",
      "element": "div",
      "js": true,
      "description": "Themed SVG charts rendered by WC.init from data-attributes: bar, line, pie, donut, sparkline, radar. Colors come from the theme palette (primary, tip, info, warning, caution, critical) so charts retint per theme.",
      "attributes": {
        "data-chart": "bar | line | pie | donut | sparkline",
        "data-values": "comma-separated numbers",
        "data-labels": "comma-separated labels (bar/line/pie)"
      },
      "a11y": [
        "Give the container an aria-label describing the chart; consider a data table alongside for detail."
      ],
      "example": "<div class=\"wc-chart\" data-chart=\"bar\" data-values=\"4,8,15,16,23,42\" data-labels=\"Jan,Feb,Mar,Apr,May,Jun\" aria-label=\"Monthly signups\"></div>"
    },
    {
      "name": "data-grid",
      "category": "data",
      "baseClass": "wc-table wc-datagrid",
      "element": "table",
      "js": true,
      "description": "Table upgraded to a data grid by WC.init: click a th[data-sort] to sort (numeric-aware, toggles asc/desc), live text filter, pagination, and row selection. Progressive enhancement over a plain <table>.",
      "attributes": {
        "data-sort": "on each sortable <th>",
        "data-page-size": "rows per page (enables pager)",
        "data-select": "adds a checkbox column + select-all",
        "data-filter": "CSS selector of the search input that filters rows"
      },
      "parts": [
        "thead th[data-sort] (aria-sort reflects state)",
        "wc-datagrid__toolbar",
        "wc-datagrid__pager (auto-created)",
        "wc-datagrid__sel (checkbox column)",
        "tr.is-selected"
      ],
      "a11y": [
        "Sort state exposed via th[aria-sort]; pager buttons + checkboxes are labelled."
      ],
      "example": "<table class=\"wc-table wc-datagrid\" data-select data-page-size=\"4\" data-filter=\"#f\"><thead><tr><th data-sort>Name</th><th data-sort>Rate</th></tr></thead><tbody><tr><td>Ada</td><td>$120</td></tr></tbody></table>"
    },
    {
      "name": "search",
      "category": "forms",
      "baseClass": "wc-search",
      "element": "div",
      "description": "Search input with a leading icon.",
      "example": "<div class=\"wc-search\"><svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M21 21l-4.3-4.3\"/></svg><input class=\"wc-input\" type=\"search\" placeholder=\"Search…\"></div>"
    },
    {
      "name": "slider",
      "category": "forms",
      "baseClass": "wc-slider",
      "element": "input",
      "example": "<input class=\"wc-slider\" type=\"range\" min=\"0\" max=\"100\" value=\"62\">"
    },
    {
      "name": "button-group",
      "category": "actions",
      "baseClass": "wc-btn-group",
      "element": "div",
      "description": "Joined row of buttons.",
      "example": "<div class=\"wc-btn-group\"><button class=\"wc-btn wc-btn--secondary wc-sketch\">Day</button><button class=\"wc-btn wc-btn--secondary wc-sketch\">Week</button></div>"
    },
    {
      "name": "toggle-button",
      "category": "actions",
      "baseClass": "wc-toggle-group",
      "element": "div",
      "parts": [
        "wc-toggle-btn (aria-pressed)"
      ],
      "example": "<div class=\"wc-toggle-group\"><button class=\"wc-toggle-btn is-active\" aria-pressed=\"true\">Grid</button><button class=\"wc-toggle-btn\" aria-pressed=\"false\">List</button></div>"
    },
    {
      "name": "fab",
      "category": "actions",
      "baseClass": "wc-fab",
      "element": "button",
      "description": "Floating action button (organic blob).",
      "a11y": [
        "Needs aria-label."
      ],
      "example": "<button class=\"wc-fab\" aria-label=\"Add\">+</button>"
    },
    {
      "name": "app-bar",
      "category": "navigation",
      "baseClass": "wc-appbar",
      "element": "header",
      "parts": [
        "wc-appbar__brand"
      ],
      "example": "<header class=\"wc-appbar\"><span class=\"wc-appbar__brand\">Brand</span><nav>…</nav></header>"
    },
    {
      "name": "link",
      "category": "navigation",
      "baseClass": "wc-link",
      "element": "a",
      "example": "<a class=\"wc-link\" href=\"#\">Learn more</a>"
    },
    {
      "name": "surface",
      "category": "surfaces",
      "baseClass": "wc-surface",
      "element": "div",
      "description": "Plain elevated surface (MUI Paper).",
      "example": "<div class=\"wc-surface\">…</div>"
    },
    {
      "name": "list",
      "category": "data",
      "baseClass": "wc-list",
      "element": "ul",
      "parts": [
        "wc-list-item (aria-selected)",
        "wc-list-ic (leading icon)"
      ],
      "example": "<ul class=\"wc-list\"><li class=\"wc-list-item\" aria-selected=\"true\">Overview</li><li class=\"wc-list-item\">Settings</li></ul>"
    },
    {
      "name": "stepper",
      "category": "navigation",
      "baseClass": "wc-stepper",
      "element": "div",
      "parts": [
        "wc-step (.is-active/.is-done)",
        "wc-step__dot",
        "wc-step__bar"
      ],
      "example": "<div class=\"wc-stepper\"><span class=\"wc-step is-done\"><span class=\"wc-step__dot\">1</span> Discover</span><span class=\"wc-step__bar\"></span><span class=\"wc-step is-active\"><span class=\"wc-step__dot\">2</span> Design</span></div>"
    },
    {
      "name": "container",
      "category": "layout",
      "baseClass": "wc-container",
      "element": "div",
      "modifiers": [
        "wc-container--sm",
        "wc-container--lg"
      ],
      "example": "<div class=\"wc-container\">…</div>"
    },
    {
      "name": "stack",
      "category": "layout",
      "baseClass": "wc-stack",
      "element": "div",
      "modifiers": [
        "wc-stack--row",
        "wc-stack--1…6 (gap)"
      ],
      "example": "<div class=\"wc-stack wc-stack--row\">…</div>"
    },
    {
      "name": "grid",
      "category": "layout",
      "baseClass": "wc-grid",
      "element": "div",
      "modifiers": [
        "wc-grid--2",
        "wc-grid--3",
        "wc-grid--4"
      ],
      "description": "Auto-fit responsive grid.",
      "example": "<div class=\"wc-grid wc-grid--3\">…</div>"
    },
    {
      "name": "image-list",
      "category": "layout",
      "baseClass": "wc-imagelist",
      "element": "div",
      "example": "<div class=\"wc-imagelist\"><img src=\"…\" alt=\"…\"></div>"
    },
    {
      "name": "masonry",
      "category": "layout",
      "baseClass": "wc-masonry",
      "element": "div",
      "description": "CSS-columns masonry.",
      "example": "<div class=\"wc-masonry\"><div>…</div></div>"
    },
    {
      "name": "typography",
      "category": "data",
      "baseClass": "wc-body",
      "element": "any",
      "description": "Type utilities.",
      "modifiers": [
        "wc-display",
        "wc-h1",
        "wc-h2",
        "wc-h3",
        "wc-body",
        "wc-body--sm",
        "wc-caption",
        "wc-overline",
        "wc-hand"
      ],
      "example": "<p class=\"wc-overline\">Label</p><h2 class=\"wc-h2\">Title</h2>"
    },
    {
      "name": "backdrop",
      "category": "feedback",
      "baseClass": "wc-backdrop",
      "element": "div",
      "description": "Dim/blur scrim; toggle .is-open.",
      "a11y": [
        "≥40% scrim; click to dismiss the thing it backs."
      ],
      "example": "<div class=\"wc-backdrop is-open\"></div>"
    },
    {
      "name": "bottom-navigation",
      "category": "navigation",
      "baseClass": "wc-bottomnav",
      "element": "nav",
      "parts": [
        "wc-bottomnav__item (aria-current='page')",
        ".ic"
      ],
      "a11y": [
        "≤5 items; icon + label."
      ],
      "example": "<nav class=\"wc-bottomnav\"><button class=\"wc-bottomnav__item\" aria-current=\"page\"><span class=\"ic\">◆</span>Home</button></nav>"
    },
    {
      "name": "drawer",
      "category": "navigation",
      "baseClass": "wc-drawer",
      "element": "aside",
      "js": true,
      "modifiers": [
        "wc-drawer--right"
      ],
      "api": "Trigger: data-wc-drawer-open=\"#id\". Close: data-wc-drawer-close / backdrop / Esc.",
      "example": "<button data-wc-drawer-open=\"#d\">Menu</button><aside class=\"wc-drawer\" id=\"d\">…<button data-wc-drawer-close>✕</button></aside>"
    },
    {
      "name": "speed-dial",
      "category": "navigation",
      "baseClass": "wc-speeddial",
      "element": "div",
      "js": "optional (click toggles; hover/focus in CSS)",
      "parts": [
        "wc-speeddial__actions",
        "wc-speeddial__action",
        "wc-fab (trigger)"
      ],
      "example": "<div class=\"wc-speeddial\"><div class=\"wc-speeddial__actions\"><button class=\"wc-speeddial__action\" aria-label=\"Edit\">✎</button></div><button class=\"wc-fab\" aria-label=\"Actions\">+</button></div>"
    },
    {
      "name": "menubar",
      "category": "navigation",
      "baseClass": "wc-menubar",
      "element": "div",
      "description": "Row of dropdown menus (reuses wc-menu).",
      "example": "<div class=\"wc-menubar\"><details class=\"wc-menu\"><summary>File</summary><div class=\"wc-menu__list\"><button class=\"wc-menu__item\">New</button></div></details></div>"
    },
    {
      "name": "timeline",
      "category": "data",
      "baseClass": "wc-timeline",
      "element": "ul",
      "parts": [
        "wc-timeline__item",
        "wc-timeline__dot",
        "wc-timeline__time",
        "wc-timeline__title"
      ],
      "example": "<ul class=\"wc-timeline\"><li class=\"wc-timeline__item\"><span class=\"wc-timeline__dot\"></span><div class=\"wc-timeline__time\">2024</div><div class=\"wc-timeline__title\">Ship</div></li></ul>"
    },
    {
      "name": "number-field",
      "category": "forms",
      "baseClass": "wc-numfield",
      "element": "div",
      "js": true,
      "parts": [
        "wc-numfield__btn (data-step='up'|'down')",
        "input[type=number]"
      ],
      "example": "<div class=\"wc-numfield\"><button class=\"wc-numfield__btn\" data-step=\"down\" aria-label=\"Decrease\">−</button><input class=\"wc-input\" type=\"number\" value=\"3\"><button class=\"wc-numfield__btn\" data-step=\"up\" aria-label=\"Increase\">+</button></div>"
    },
    {
      "name": "popover",
      "category": "overlays",
      "baseClass": "wc-popover",
      "element": "div",
      "description": "Native [popover] styled; anchor with popovertarget.",
      "a11y": [
        "Uses the native popover API (Esc/light-dismiss free)."
      ],
      "example": "<button popovertarget=\"p\">Open</button><div class=\"wc-popover\" popover id=\"p\">…</div>"
    },
    {
      "name": "autocomplete",
      "category": "forms",
      "baseClass": "wc-autocomplete",
      "element": "div",
      "js": true,
      "parts": [
        "input",
        "wc-autocomplete__list",
        "wc-autocomplete__opt"
      ],
      "a11y": [
        "role=combobox/listbox, arrow-key nav, aria-expanded, Esc closes."
      ],
      "example": "<div class=\"wc-autocomplete\"><input class=\"wc-input\" type=\"text\"><ul class=\"wc-autocomplete__list\" hidden><li class=\"wc-autocomplete__opt\">Apple</li></ul></div>"
    },
    {
      "name": "transfer-list",
      "category": "forms",
      "baseClass": "wc-transfer",
      "element": "div",
      "js": true,
      "parts": [
        "wc-transfer__col > wc-list",
        "wc-transfer__mid > [data-wc-transfer='right'|'left']"
      ],
      "description": "Dual list; click items to select, buttons to move.",
      "example": "<div class=\"wc-transfer\"><div class=\"wc-transfer__col\"><ul class=\"wc-list\"><li class=\"wc-list-item\">A</li></ul></div><div class=\"wc-transfer__mid\"><button data-wc-transfer=\"right\">›</button><button data-wc-transfer=\"left\">‹</button></div><div class=\"wc-transfer__col\"><ul class=\"wc-list\"></ul></div></div>"
    },
    {
      "name": "calendar",
      "category": "forms",
      "baseClass": "wc-calendar",
      "element": "div",
      "js": true,
      "description": "Hand-painted month calendar / date picker rendered by WC.init. Marks today, supports selection, prev/next month nav. Add data-wc-calendar; optional data-value=\"YYYY-MM-DD\". Fires a 'wc:datechange' event.",
      "parts": [
        "wc-cal__head",
        "wc-cal__nav (data-cal-prev/next)",
        "wc-cal__day (.is-today/.is-selected/.is-muted)"
      ],
      "a11y": [
        "Day cells are buttons with aria-label dates; nav buttons are labelled; focus ring on all."
      ],
      "example": "<div class=\"wc-calendar\" data-wc-calendar data-value=\"2026-08-14\"></div>"
    },
    {
      "name": "date-field",
      "category": "forms",
      "baseClass": "wc-datefield",
      "element": "span",
      "js": true,
      "description": "Text input + calendar-icon button that opens a wc-calendar popover; selecting a day writes a formatted date back and fires 'change'.",
      "parts": [
        "input.wc-input (readonly)",
        "wc-datefield__btn",
        "wc-datefield__pop > wc-calendar (auto-created)"
      ],
      "example": "<span class=\"wc-datefield\"><input class=\"wc-input\" type=\"text\" placeholder=\"Pick a date\" readonly><button class=\"wc-datefield__btn\" type=\"button\" aria-label=\"Open calendar\"></button></span>"
    },
    {
      "name": "time-field",
      "category": "forms",
      "baseClass": "wc-timefield",
      "element": "span",
      "js": true,
      "description": "Text input + clock-icon button that opens a scrollable time-slot menu. Configure with data-start, data-end (HH:MM) and data-step (minutes). Writes the picked time back and fires 'change'.",
      "attributes": {
        "data-start": "first slot (default 08:00)",
        "data-end": "last slot (default 20:00)",
        "data-step": "minutes between slots (default 30)"
      },
      "parts": [
        "input.wc-input (readonly)",
        "wc-timefield__btn",
        "wc-timefield__pop > wc-time-menu (auto-created)"
      ],
      "example": "<span class=\"wc-timefield\" data-start=\"08:00\" data-end=\"18:00\" data-step=\"30\"><input class=\"wc-input\" type=\"text\" placeholder=\"Pick a time\" readonly><button class=\"wc-timefield__btn\" type=\"button\" aria-label=\"Open time list\"></button></span>"
    },
    {
      "name": "icon",
      "category": "foundations",
      "baseClass": "wc-icon",
      "element": "svg",
      "description": "288 felt-pen icons: Feather geometry (MIT) re-inked at build time into filled, variable-width marker strokes (perfect-freehand) with organic hand-tremor — no runtime filter. Reference a symbol from icons/sprite.svg by id wc-i-<name>. Fills currentColor; sizes to 1.5em (or set width/height/font-size).",
      "modifiers": [
        "wc-icon--sm",
        "wc-icon--lg"
      ],
      "assets": [
        "icons/sprite.svg (<symbol> per icon, filled paths)",
        "icons/icons.json (name -> innerSVG)",
        "icons/names.json (all names)"
      ],
      "build": "npm run build:icons (scripts/build-icons.mjs re-inks from feather-icons via perfect-freehand)",
      "a11y": [
        "Decorative: add aria-hidden=\"true\". Meaningful: give the parent control an aria-label."
      ],
      "example": "<svg class=\"wc-icon\" aria-hidden=\"true\"><use href=\"icons/sprite.svg#wc-i-heart\"/></svg>"
    },
    {
      "name": "growth-mode",
      "category": "effects",
      "baseClass": "wc-grow",
      "js": "optional (WC.grow())",
      "description": "Signature effect: themed watercolor foliage grows from behind an element on hover, then lazily retreats. Each theme has its OWN foliage set (paper = light watercolor flora-*, forest = dark night mushrooms dark-*). Wrap any element; the optional JS injects the correct set for the current theme, or author .wc-grow-item images by hand.",
      "attributes": {
        "data-grow": "number of foliage sprites (default 3)",
        "data-grow-seed": "offset into the sprite set for variety"
      },
      "parts": [
        "wc-grow-pop (injected container)",
        "wc-grow-item (each sprite; supports --rise, --d, width, left)"
      ],
      "config": "window.WC_GROW_BASE sets the sprite folder (default 'assets/img/flora/'). Re-run WC.grow() after a theme change to swap foliage.",
      "a11y": [
        "Decorative; the pop is aria-hidden. Rises on hover AND focus-within.",
        "Honors prefers-reduced-motion (fades, no travel)."
      ],
      "example": "<span class=\"wc-grow\" data-grow=\"3\"><button class=\"wc-btn wc-btn--lg\">See case studies</button></span>"
    },
    {
      "name": "kbd",
      "category": "content",
      "baseClass": "wc-kbd",
      "element": "span",
      "description": "Pressed-key chip: mono type, paper fill, ledge shadow.",
      "example": "Press <span class=\"wc-kbd\">⌘</span> <span class=\"wc-kbd\">K</span>"
    },
    {
      "name": "divider-label",
      "category": "content",
      "baseClass": "wc-divider--label",
      "element": "div",
      "description": "Divider with a hand-lettered center label.",
      "a11y": "role=\"separator\"",
      "example": "<div class=\"wc-divider--label\" role=\"separator\">or continue with</div>"
    },
    {
      "name": "quote",
      "category": "content",
      "baseClass": "wc-quote",
      "element": "blockquote",
      "parts": [
        "wc-quote__by"
      ],
      "description": "Callout/quote with felt-pen left rule and Caveat attribution.",
      "example": "<blockquote class=\"wc-quote\">Words.<span class=\"wc-quote__by\">— name</span></blockquote>"
    },
    {
      "name": "upload",
      "category": "forms",
      "baseClass": "wc-upload",
      "element": "label",
      "states": [
        "is-drag"
      ],
      "description": "File dropzone: dashed organic border, hover/drag tint; wraps a visually-hidden input[type=file].",
      "example": "<label class=\"wc-upload\"><input type=\"file\" multiple><svg class=\"wc-icon\"><use href=\"icons/sprite.svg#wc-i-upload-cloud\"/></svg><strong>Drop files to upload</strong><small>or click to browse</small></label>"
    },
    {
      "name": "otp",
      "category": "forms",
      "baseClass": "wc-otp",
      "element": "div",
      "description": "Verification-code input: single-character .wc-input cells with alternating organic radii.",
      "a11y": "role=\"group\" + aria-label; each cell aria-label=\"Digit N\", inputmode=\"numeric\", maxlength=1.",
      "example": "<div class=\"wc-otp\" role=\"group\" aria-label=\"Code\"><input class=\"wc-input\" maxlength=\"1\" inputmode=\"numeric\" aria-label=\"Digit 1\"></div>"
    },
    {
      "name": "tree",
      "category": "data",
      "baseClass": "wc-tree",
      "element": "div",
      "parts": [
        "wc-tree__leaf"
      ],
      "description": "Tree view from nested <details>: drawn chevron toggles, dashed indent guides. CSS-only.",
      "example": "<div class=\"wc-tree\"><details open><summary>Folder</summary><div class=\"wc-tree__leaf\">file.css</div></details></div>"
    },
    {
      "name": "badge-overlay",
      "category": "data",
      "baseClass": "wc-badge-anchor",
      "element": "span",
      "parts": [
        "wc-badge--count",
        "wc-badge--dot"
      ],
      "description": "Notification badge anchored to the corner of an avatar or icon (count pill or organic dot).",
      "example": "<span class=\"wc-badge-anchor\"><span class=\"wc-avatar\"></span><span class=\"wc-badge--count\">3</span></span>"
    }
  ]
}