@chromvoid/uikit 0.1.0

package/dist/theme/tokens.css

@@ -0,0 +1,265 @@
+/* === Dark tokens (default) === */
+:root,
+cv-theme-provider {
+  color-scheme: dark;
+  --cv-color-bg: #070b12;
+  --cv-color-surface: #101722;
+  --cv-color-surface-2: #181c23;
+  --cv-color-surface-3: #262a32;
+  --cv-color-surface-4: #31353d;
+  --cv-color-surface-elevated: var(--cv-color-surface-2);
+  --cv-color-surface-secondary: var(--cv-color-surface-2);
+  --cv-color-surface-tertiary: var(--cv-color-surface-3);
+  --cv-color-surface-hover: color-mix(in oklch, var(--cv-color-primary) 8%, var(--cv-color-surface));
+  --cv-color-text: #e8ecf6;
+  --cv-color-text-primary: var(--cv-color-text);
+  --cv-color-text-muted: #9aa6bf;
+  --cv-color-text-secondary: var(--cv-color-text-muted);
+  --cv-color-text-subtle: #7f8aa3;
+  --cv-color-text-strong: #f5f7fc;
+  --cv-color-text-strongest: #ffffff;
+  --cv-color-border: #2a3245;
+  --cv-color-border-muted: color-mix(in oklch, var(--cv-color-border) 55%, transparent);
+  --cv-color-border-strong: color-mix(in oklch, var(--cv-color-border) 82%, white 18%);
+  --cv-color-border-accent: color-mix(in oklch, var(--cv-color-primary) 35%, var(--cv-color-border));
+  --cv-color-brand: var(--cv-color-primary);
+  --cv-color-primary: #65d7ff;
+  --cv-color-primary-dark: #36bae8;
+  --cv-color-primary-darker: #1794c2;
+  --cv-color-primary-subtle: color-mix(in oklch, var(--cv-color-primary) 12%, var(--cv-color-surface));
+  --cv-color-primary-muted: color-mix(in oklch, var(--cv-color-primary) 22%, var(--cv-color-surface));
+  --cv-color-on-primary: #03151c;
+  --cv-color-accent: #b388ff;
+  --cv-color-accent-light: color-mix(in oklch, var(--cv-color-accent) 70%, white);
+  --cv-color-accent-dark: color-mix(in oklch, var(--cv-color-accent) 70%, black);
+  --cv-color-accent-hover: color-mix(in oklch, var(--cv-color-accent) 85%, white);
+  --cv-color-accent-contrast: #14001f;
+  --cv-color-cyan: var(--cv-color-primary);
+  --cv-color-cyan-light: color-mix(in oklch, var(--cv-color-cyan) 70%, white);
+  --cv-color-cyan-dark: color-mix(in oklch, var(--cv-color-cyan) 70%, black);
+  --cv-color-success: #6ef7c8;
+  --cv-color-success-dark: #32cca0;
+  --cv-color-success-text: #e8fff5;
+  --cv-color-warning: #ffd36e;
+  --cv-color-warning-dark: #d3a74a;
+  --cv-color-warning-text: #fff8e6;
+  --cv-color-danger: #ff7d86;
+  --cv-color-danger-dark: #e14f5b;
+  --cv-color-danger-text: #fff1f2;
+  --cv-color-info: var(--cv-color-primary);
+  --cv-color-info-text: var(--cv-color-text);
+  --cv-color-focus: var(--cv-color-primary);
+  --cv-color-focus-ring: var(--cv-color-primary);
+  --cv-color-hover: color-mix(in oklch, var(--cv-color-primary) 10%, var(--cv-color-surface));
+  --cv-color-active: color-mix(in oklch, var(--cv-color-primary) 18%, transparent);
+  --cv-color-selected: color-mix(in oklch, var(--cv-color-primary) 16%, var(--cv-color-surface));
+  --cv-color-overlay: rgba(4, 7, 13, 0.72);
+
+  --cv-alpha-white-4: color-mix(in oklch, white 4%, transparent);
+  --cv-alpha-white-6: color-mix(in oklch, white 6%, transparent);
+  --cv-alpha-white-8: color-mix(in oklch, white 8%, transparent);
+  --cv-alpha-white-10: color-mix(in oklch, white 10%, transparent);
+  --cv-alpha-white-15: color-mix(in oklch, white 15%, transparent);
+  --cv-alpha-white-20: color-mix(in oklch, white 20%, transparent);
+  --cv-alpha-white-30: color-mix(in oklch, white 30%, transparent);
+  --cv-alpha-white-50: color-mix(in oklch, white 50%, transparent);
+  --cv-alpha-white-70: color-mix(in oklch, white 70%, transparent);
+
+  --cv-alpha-black-5: color-mix(in oklch, black 5%, transparent);
+  --cv-alpha-black-10: color-mix(in oklch, black 10%, transparent);
+  --cv-alpha-black-25: color-mix(in oklch, black 25%, transparent);
+  --cv-alpha-black-35: color-mix(in oklch, black 35%, transparent);
+  --cv-alpha-black-50: color-mix(in oklch, black 50%, transparent);
+  --cv-alpha-black-65: color-mix(in oklch, black 65%, transparent);
+  --cv-alpha-black-95: color-mix(in oklch, black 95%, transparent);
+
+  --cv-space-1: 4px;
+  --cv-space-2: 8px;
+  --cv-space-3: 12px;
+  --cv-space-4: 16px;
+  --cv-space-5: 20px;
+  --cv-space-6: 24px;
+  --cv-space-7: 32px;
+  --cv-space-8: 40px;
+
+  --cv-radius-1: 6px;
+  --cv-radius-2: 10px;
+  --cv-radius-3: 14px;
+  --cv-radius-4: 18px;
+  --cv-radius-s: var(--cv-radius-1);
+  --cv-radius-sm: var(--cv-radius-1);
+  --cv-radius-m: var(--cv-radius-2);
+  --cv-radius-md: var(--cv-radius-2);
+  --cv-radius-lg: var(--cv-radius-3);
+  --cv-radius-xl: var(--cv-radius-4);
+  --cv-radius-pill: 999px;
+  --cv-radius-full: 9999px;
+
+  --cv-font-family-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --cv-font-family-body: var(--cv-font-family-primary);
+  --cv-font-family-display: 'Satoshi', var(--cv-font-family-primary);
+  --cv-font-family-sans: var(--cv-font-family-primary);
+  --cv-font-family-code: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;
+  --cv-font-size-xs: 0.75rem;
+  --cv-font-size-sm: 0.875rem;
+  --cv-font-size-base: 1rem;
+  --cv-font-size-md: var(--cv-font-size-base);
+  --cv-font-size-lg: 1.125rem;
+  --cv-font-size-xl: 1.25rem;
+  --cv-font-size-2xl: 1.5rem;
+  --cv-font-size-3xl: 1.875rem;
+  --cv-font-size-4xl: 2.25rem;
+  --cv-font-size-5xl: 3rem;
+  --cv-font-size-6xl: 3.75rem;
+  --cv-font-weight-thin: 100;
+  --cv-font-weight-light: 300;
+  --cv-font-weight-normal: 400;
+  --cv-font-weight-regular: var(--cv-font-weight-normal);
+  --cv-font-weight-medium: 500;
+  --cv-font-weight-semibold: 600;
+  --cv-font-weight-bold: 700;
+  --cv-font-weight-extrabold: 800;
+  --cv-font-weight-black: 900;
+
+  --cv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
+  --cv-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.32);
+  --cv-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38);
+  --cv-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.42);
+  --cv-shadow-glow: 0 0 40px color-mix(in oklch, var(--cv-color-cyan) 15%, transparent);
+  --cv-shadow-1: var(--cv-shadow-sm);
+  --cv-shadow-2: var(--cv-shadow-md);
+  --cv-shadow-3: var(--cv-shadow-lg);
+  --cv-shadow-4: var(--cv-shadow-xl);
+
+  --cv-duration-instant: 0ms;
+  --cv-duration-fast: 120ms;
+  --cv-duration-normal: 220ms;
+  --cv-duration-slow: 320ms;
+  --cv-duration-slower: 500ms;
+  --cv-duration-slowest: 800ms;
+
+  --cv-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --cv-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --cv-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --cv-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --cv-z-base: 0;
+  --cv-z-overlay: 1000;
+  --cv-z-modal: 1100;
+  --cv-z-toast: 1200;
+
+  --cv-size-control-height: 48px;
+}
+
+/* === Light tokens — explicit mode === */
+cv-theme-provider[mode='light'] {
+  color-scheme: light;
+  --cv-color-bg: #f8f9fb;
+  --cv-color-surface: #ffffff;
+  --cv-color-surface-2: #f0f2f5;
+  --cv-color-surface-3: #e6e9ee;
+  --cv-color-surface-4: #dce0e7;
+  --cv-color-surface-elevated: var(--cv-color-surface-2);
+  --cv-color-surface-secondary: var(--cv-color-surface-2);
+  --cv-color-surface-tertiary: var(--cv-color-surface-3);
+  --cv-color-surface-hover: color-mix(in oklch, var(--cv-color-primary) 6%, var(--cv-color-surface));
+  --cv-color-text: #1a1f2e;
+  --cv-color-text-primary: var(--cv-color-text);
+  --cv-color-text-muted: #5c6577;
+  --cv-color-text-secondary: var(--cv-color-text-muted);
+  --cv-color-text-subtle: #7a8394;
+  --cv-color-text-strong: #0e1219;
+  --cv-color-text-strongest: #000000;
+  --cv-color-border: #d0d5de;
+  --cv-color-border-muted: color-mix(in oklch, var(--cv-color-border) 55%, transparent);
+  --cv-color-border-strong: color-mix(in oklch, var(--cv-color-border) 82%, black 18%);
+  --cv-color-border-accent: color-mix(in oklch, var(--cv-color-primary) 35%, var(--cv-color-border));
+  --cv-color-primary: #0e8ab4;
+  --cv-color-primary-dark: #0b7199;
+  --cv-color-primary-darker: #085a7a;
+  --cv-color-primary-subtle: color-mix(in oklch, var(--cv-color-primary) 8%, var(--cv-color-surface));
+  --cv-color-primary-muted: color-mix(in oklch, var(--cv-color-primary) 15%, var(--cv-color-surface));
+  --cv-color-on-primary: #ffffff;
+  --cv-color-accent: #7c3aed;
+  --cv-color-accent-light: color-mix(in oklch, var(--cv-color-accent) 70%, white);
+  --cv-color-accent-dark: color-mix(in oklch, var(--cv-color-accent) 70%, black);
+  --cv-color-accent-hover: color-mix(in oklch, var(--cv-color-accent) 85%, black);
+  --cv-color-accent-contrast: #ffffff;
+  --cv-color-success: #16a367;
+  --cv-color-success-dark: #0f8553;
+  --cv-color-success-text: #052e1a;
+  --cv-color-warning: #b8860b;
+  --cv-color-warning-dark: #9a7209;
+  --cv-color-warning-text: #3d2c04;
+  --cv-color-danger: #dc2c3e;
+  --cv-color-danger-dark: #b82232;
+  --cv-color-danger-text: #450a10;
+  --cv-color-info-text: var(--cv-color-text);
+  --cv-color-hover: color-mix(in oklch, var(--cv-color-primary) 8%, var(--cv-color-surface));
+  --cv-color-active: color-mix(in oklch, var(--cv-color-primary) 14%, transparent);
+  --cv-color-selected: color-mix(in oklch, var(--cv-color-primary) 12%, var(--cv-color-surface));
+  --cv-color-overlay: rgba(15, 20, 30, 0.38);
+  --cv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --cv-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.12);
+  --cv-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
+  --cv-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
+  --cv-shadow-glow: 0 0 40px color-mix(in oklch, var(--cv-color-cyan) 10%, transparent);
+}
+
+/* === Light tokens — system preference === */
+@media (prefers-color-scheme: light) {
+  :root,
+  cv-theme-provider[mode='system'] {
+    color-scheme: light;
+    --cv-color-bg: #f8f9fb;
+    --cv-color-surface: #ffffff;
+    --cv-color-surface-2: #f0f2f5;
+    --cv-color-surface-3: #e6e9ee;
+    --cv-color-surface-4: #dce0e7;
+    --cv-color-surface-elevated: var(--cv-color-surface-2);
+    --cv-color-surface-secondary: var(--cv-color-surface-2);
+    --cv-color-surface-tertiary: var(--cv-color-surface-3);
+    --cv-color-surface-hover: color-mix(in oklch, var(--cv-color-primary) 6%, var(--cv-color-surface));
+    --cv-color-text: #1a1f2e;
+    --cv-color-text-primary: var(--cv-color-text);
+    --cv-color-text-muted: #5c6577;
+    --cv-color-text-secondary: var(--cv-color-text-muted);
+    --cv-color-text-subtle: #7a8394;
+    --cv-color-text-strong: #0e1219;
+    --cv-color-text-strongest: #000000;
+    --cv-color-border: #d0d5de;
+    --cv-color-border-muted: color-mix(in oklch, var(--cv-color-border) 55%, transparent);
+    --cv-color-border-strong: color-mix(in oklch, var(--cv-color-border) 82%, black 18%);
+    --cv-color-border-accent: color-mix(in oklch, var(--cv-color-primary) 35%, var(--cv-color-border));
+    --cv-color-primary: #0e8ab4;
+    --cv-color-primary-dark: #0b7199;
+    --cv-color-primary-darker: #085a7a;
+    --cv-color-primary-subtle: color-mix(in oklch, var(--cv-color-primary) 8%, var(--cv-color-surface));
+    --cv-color-primary-muted: color-mix(in oklch, var(--cv-color-primary) 15%, var(--cv-color-surface));
+    --cv-color-on-primary: #ffffff;
+    --cv-color-accent: #7c3aed;
+    --cv-color-accent-light: color-mix(in oklch, var(--cv-color-accent) 70%, white);
+    --cv-color-accent-dark: color-mix(in oklch, var(--cv-color-accent) 70%, black);
+    --cv-color-accent-hover: color-mix(in oklch, var(--cv-color-accent) 85%, black);
+    --cv-color-accent-contrast: #ffffff;
+    --cv-color-success: #16a367;
+    --cv-color-success-dark: #0f8553;
+    --cv-color-success-text: #052e1a;
+    --cv-color-warning: #b8860b;
+    --cv-color-warning-dark: #9a7209;
+    --cv-color-warning-text: #3d2c04;
+    --cv-color-danger: #dc2c3e;
+    --cv-color-danger-dark: #b82232;
+    --cv-color-danger-text: #450a10;
+    --cv-color-info-text: var(--cv-color-text);
+    --cv-color-hover: color-mix(in oklch, var(--cv-color-primary) 8%, var(--cv-color-surface));
+    --cv-color-active: color-mix(in oklch, var(--cv-color-primary) 14%, transparent);
+    --cv-color-selected: color-mix(in oklch, var(--cv-color-primary) 12%, var(--cv-color-surface));
+    --cv-color-overlay: rgba(15, 20, 30, 0.38);
+    --cv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+    --cv-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.12);
+    --cv-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
+    --cv-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
+    --cv-shadow-glow: 0 0 40px color-mix(in oklch, var(--cv-color-cyan) 10%, transparent);
+  }
+}

package/dist/theme/types.d.ts

@@ -0,0 +1,7 @@
+export type CVThemeTokenName = `--cv-${string}`;
+export type CVThemeTokens = Record<CVThemeTokenName, string>;
+export interface CVThemeDefinition {
+    name: string;
+    tokens: CVThemeTokens;
+}
+export type CVThemeTarget = HTMLElement | ShadowRoot | Document;

package/dist/theme/types.js

@@ -0,0 +1 @@
+export {};

package/dist/toast/create-toast-controller.d.ts

@@ -0,0 +1,12 @@
+import { type CreateToastOptions, type ToastModel, type ToastItem } from '@chromvoid/headless-ui/toast';
+export interface CVToastController {
+    readonly model: ToastModel;
+    push(item: Omit<ToastItem, 'id'> & {
+        id?: string;
+    }): string;
+    dismiss(id: string): void;
+    clear(): void;
+    pause(): void;
+    resume(): void;
+}
+export declare function createToastController(options?: CreateToastOptions): CVToastController;

package/dist/toast/create-toast-controller.js

@@ -0,0 +1,12 @@
+import { createToast, } from '@chromvoid/headless-ui/toast';
+export function createToastController(options = {}) {
+    const model = createToast(options);
+    return {
+        model,
+        push: (item) => model.actions.push(item),
+        dismiss: (id) => model.actions.dismiss(id),
+        clear: () => model.actions.clear(),
+        pause: () => model.actions.pause(),
+        resume: () => model.actions.resume(),
+    };
+}

package/dist/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { createToastController } from './create-toast-controller.js';
+export type { CVToastController } from './create-toast-controller.js';

package/dist/toast/index.js

@@ -0,0 +1 @@
+export { createToastController } from './create-toast-controller.js';

package/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "@chromvoid/uikit",
+  "version": "0.1.0",
+  "description": "Thin Lit UI kit on top of @chromvoid/headless-ui",
+  "homepage": "https://github.com/chromvoid/uikit#readme",
+  "bugs": {
+    "url": "https://github.com/chromvoid/uikit/issues"
+  },
+  "license": "AGPL-3.0-only",
+  "author": "ChromVoid Team",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chromvoid/uikit.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "specs"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js",
+      "default": "./dist/register.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "default": "./dist/components/*.js"
+    },
+    "./html": {
+      "types": "./dist/reatom-lit/html.d.ts",
+      "import": "./dist/reatom-lit/html.js",
+      "default": "./dist/reatom-lit/html.js"
+    },
+    "./reatom-lit": {
+      "types": "./dist/reatom-lit/index.d.ts",
+      "import": "./dist/reatom-lit/index.js",
+      "default": "./dist/reatom-lit/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "import": "./dist/theme/*.js",
+      "default": "./dist/theme/*.js"
+    },
+    "./theme/tokens.css": "./dist/theme/tokens.css",
+    "./styles/uno-utilities": {
+      "types": "./dist/styles/uno-utilities.d.ts",
+      "import": "./dist/styles/uno-utilities.js",
+      "default": "./dist/styles/uno-utilities.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog/index.js",
+      "default": "./dist/dialog/index.js"
+    },
+    "./dialog/*": {
+      "types": "./dist/dialog/*.d.ts",
+      "import": "./dist/dialog/*.js",
+      "default": "./dist/dialog/*.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast/index.js",
+      "default": "./dist/toast/index.js"
+    },
+    "./toast/*": {
+      "types": "./dist/toast/*.d.ts",
+      "import": "./dist/toast/*.js",
+      "default": "./dist/toast/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ./scripts/postbuild.mjs",
+    "check:bundle": "npm run build && node ./scripts/check-bundle-contract.mjs",
+    "check:entry-imports": "node ./scripts/check-entry-imports.mjs",
+    "check:exports": "npm run build && node ./scripts/check-package-exports.mjs",
+    "check:pack": "npm pack --dry-run",
+    "docs:prepare": "node ./scripts/prepare-docs.mjs",
+    "docs:build": "npm run docs:prepare && npm run build && vitepress build docs",
+    "docs:dev": "npm run docs:prepare && npm run build && vitepress dev docs",
+    "docs:preview": "npm run docs:prepare && vitepress preview docs",
+    "demo": "npm run docs:dev -- --open",
+    "format": "oxfmt --write README.md package.json tsconfig.json tsconfig.build.json tsconfig.test.json vitest.config.ts uno.config.ts .oxlintrc.json .oxfmtrc.json src scripts specs docs/index.md docs/guide docs/components docs/.vitepress/config.ts docs/.vitepress/component-catalog.mjs docs/.vitepress/theme/index.ts",
+    "lint": "npm run docs:prepare && npm run lint:types && npm run lint:oxlint && npm run lint:format && npm run lint:boundaries",
+    "lint:boundaries": "node ./scripts/check-standalone-boundaries.mjs",
+    "lint:format": "oxfmt --check README.md package.json tsconfig.json tsconfig.build.json tsconfig.test.json vitest.config.ts uno.config.ts .oxlintrc.json .oxfmtrc.json src scripts specs docs/index.md docs/guide docs/components docs/.vitepress/config.ts docs/.vitepress/component-catalog.mjs docs/.vitepress/theme/index.ts",
+    "lint:oxlint": "oxlint --config ./.oxlintrc.json src scripts vitest.config.ts uno.config.ts docs/.vitepress/config.ts docs/.vitepress/theme/index.ts",
+    "lint:types": "tsc --noEmit -p tsconfig.test.json",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run lint && npm run test && npm run check:pack",
+    "test": "npm run test:unit && npm run check:exports && npm run check:bundle && npm run check:entry-imports",
+    "test:unit": "vitest run --config ./vitest.config.ts"
+  },
+  "dependencies": {
+    "@chromvoid/headless-ui": "0.1.1",
+    "@reatom/core": "^1000.15.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.11.0",
+    "@unocss/transformer-directives": "^66.6.7",
+    "esbuild": "^0.27.4",
+    "jsdom": "^26.1.0",
+    "lit": "^3.3.1",
+    "oxfmt": "^0.41.0",
+    "oxlint": "^1.51.0",
+    "typescript": "^5.9.3",
+    "unocss": "^66.6.7",
+    "vite": "^7.1.0",
+    "vitepress": "^1.6.3",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/specs/_template.md

@@ -0,0 +1,110 @@
+# cv-{name}
+
+One-sentence description of the component's purpose.
+
+**Headless:** [`create{Name}`](https://github.com/chromvoid/headless-ui/blob/main/specs/components/{name}.md)
+
+## Anatomy
+
+```
+<cv-{name}> (host)
+└── <div part="base">
+    └── <slot>
+```
+
+## Attributes
+
+| Attribute | Type    | Default | Description |
+| --------- | ------- | ------- | ----------- |
+| `example` | Boolean | `false` | Description |
+
+## Variants
+
+> _Include only if the component has visual variants (e.g. solid, outline, ghost)._
+
+| Variant | Description          |
+| ------- | -------------------- |
+| `solid` | Default filled style |
+
+## Sizes
+
+> _Include only if the component has size options._
+
+| Size | Description  |
+| ---- | ------------ |
+| `md` | Default size |
+
+## Slots
+
+| Slot        | Description  |
+| ----------- | ------------ |
+| `(default)` | Main content |
+
+## CSS Parts
+
+| Part   | Element      | Description                          |
+| ------ | ------------ | ------------------------------------ |
+| `base` | Root wrapper | Outermost interactive/layout element |
+
+## CSS Custom Properties
+
+| Property        | Default | Description |
+| --------------- | ------- | ----------- |
+| `--cv-{name}-*` | `…`     | Description |
+
+## Visual States
+
+| Host selector    | Description |
+| ---------------- | ----------- |
+| `:host([state])` | Description |
+
+## Events
+
+| Event    | Detail | Description              |
+| -------- | ------ | ------------------------ |
+| `input`  | `{…}`  | Fires on interaction     |
+| `change` | `{…}`  | Fires when value commits |
+
+## Usage
+
+```html
+<cv-{name}>Content</cv-{name}>
+```
+
+## Child Elements
+
+> _Include only for composite components (parent + child). Each child element gets its own Anatomy, Attributes, Slots, CSS Parts, and Visual States subsections._
+
+### cv-{child-name}
+
+#### Anatomy
+
+```
+<cv-{child-name}> (host)
+└── <div part="base">
+    └── <slot>
+```
+
+#### Attributes
+
+| Attribute | Type   | Default | Description |
+| --------- | ------ | ------- | ----------- |
+| `value`   | String | `""`    | Identifier  |
+
+#### Slots
+
+| Slot        | Description |
+| ----------- | ----------- |
+| `(default)` | Content     |
+
+#### CSS Parts
+
+| Part   | Element      | Description       |
+| ------ | ------------ | ----------------- |
+| `base` | Root wrapper | Outermost element |
+
+#### Visual States
+
+| Host selector    | Description |
+| ---------------- | ----------- |
+| `:host([state])` | Description |