@invisibleloop/pulse 0.20.11 → 0.20.20

package/docs/src/pages/components/card.js

@@ -1,225 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { button, card, badge, grid } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/card')
-
-export default {
-  route: '/components/card',
-  meta: {
-    theme:       'light',
-    title: 'Card — Pulse Docs',
-    description: 'Card component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/card',
-    prev,
-    next,
-    name: 'card',
-    description: '<code>content</code> and <code>footer</code> are raw HTML slots — they pass through as-is. Wrap user-supplied values in <code>escHtml()</code> before composing them into the string.',
-    content: `
-      ${demo(
-        card({
-          title:   'Recent activity',
-          content: '<p class="u-text-muted u-text-sm" style="margin:0">No activity in the last 7 days.</p>',
-          footer:  button({ label: 'View all', href: '#', variant: 'ghost', size: 'sm' }),
-        }),
-        `card({
-  title:   'Recent activity',
-  content: \`<p class="u-text-muted u-text-sm">No activity in the last 7 days.</p>\`,
-  footer:  button({ label: 'View all', href: '/activity', variant: 'ghost', size: 'sm' }),
-})`
-      )}
-
-      <h2 class="doc-h2" id="image">With image</h2>
-      <p>Use <code>flush</code> to remove body padding, then add an image at the top and restore padding on the text content below it.</p>
-
-      ${demo(
-        card({
-          flush:   true,
-          content: `
-            <div class="u-overflow-hidden" style="height:180px;border-radius:var(--ui-radius) var(--ui-radius) 0 0">
-              <img src="/img/heic1501a.jpg" alt="The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope" style="width:100%;height:100%;object-fit:cover;display:block">
-            </div>
-            <div class="u-p-5">
-              <p class="u-font-semibold u-mb-2" style="margin-top:0">Deep field</p>
-              <p class="u-text-muted u-text-sm" style="margin:0">The Pillars of Creation, imaged by the Hubble Space Telescope.</p>
-            </div>
-          `,
-          footer: button({ label: 'View gallery', href: '#', variant: 'primary', size: 'sm' }),
-        }),
-        `card({
-  flush: true,
-  content: \`
-    <div class="u-overflow-hidden" style="height:180px;border-radius:var(--ui-radius) var(--ui-radius) 0 0">
-      <img src="/img/nebula.jpg" alt="The Pillars of Creation in the Eagle Nebula" style="width:100%;height:100%;object-fit:cover">
-    </div>
-    <div class="u-p-5">
-      <p class="u-font-semibold u-mb-2">Deep field</p>
-      <p class="u-text-muted u-text-sm">The Pillars of Creation, imaged by the Hubble Space Telescope.</p>
-    </div>
-  \`,
-  footer: button({ label: 'View gallery', href: '/gallery', variant: 'primary', size: 'sm' }),
-})`
-      )}
-
-      <h2 class="doc-h2" id="badges">With badges</h2>
-      <p>Compose <code>badge()</code> inside <code>content</code> to show status labels or category tags.</p>
-
-      ${demo(
-        card({
-          title:   'API rate limits',
-          content: `
-            <div class="u-flex u-gap-2 u-mb-4">
-              ${badge({ label: 'Production', variant: 'success' })}
-              ${badge({ label: 'v2.1', variant: 'info' })}
-            </div>
-            <p class="u-text-muted u-text-sm" style="margin:0">Requests are capped at 1,000/min per API key. Contact support to increase your limit.</p>
-          `,
-          footer: `
-            <div class="u-flex u-gap-2">
-              ${button({ label: 'View docs', href: '#', variant: 'ghost', size: 'sm' })}
-              ${button({ label: 'Request increase', href: '#', variant: 'secondary', size: 'sm' })}
-            </div>
-          `,
-        }),
-        `card({
-  title:   'API rate limits',
-  content: \`
-    <div class="u-flex u-gap-2 u-mb-4">
-      \${badge({ label: 'Production', variant: 'success' })}
-      \${badge({ label: 'v2.1',       variant: 'info' })}
-    </div>
-    <p class="u-text-muted u-text-sm">Requests are capped at 1,000/min per API key.</p>
-  \`,
-  footer: \`
-    \${button({ label: 'View docs',        href: '/docs',    variant: 'ghost',     size: 'sm' })}
-    \${button({ label: 'Request increase', href: '/contact', variant: 'secondary', size: 'sm' })}
-  \`,
-})`
-      )}
-
-      <h2 class="doc-h2" id="metadata">With metadata row</h2>
-      <p>A flex row inside <code>content</code> works well for author, date, read-time and similar metadata.</p>
-
-      ${demo(
-        card({
-          title:   'Building with Pulse',
-          content: `
-            <p class="u-text-muted u-text-sm u-mb-4">Learn how to scaffold a new project and ship your first spec-driven page in under ten minutes.</p>
-            <div class="u-flex u-gap-3" style="align-items:center;flex-wrap:wrap">
-              <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);flex-shrink:0"></div>
-              <span class="u-text-sm u-text-muted">Jane Smith</span>
-              <span class="u-text-sm u-text-muted">·</span>
-              <span class="u-text-sm u-text-muted">Mar 15, 2024</span>
-              <span class="u-text-sm u-text-muted u-ml-auto">5 min read</span>
-            </div>
-          `,
-          footer: button({ label: 'Read article →', href: '#', variant: 'ghost', size: 'sm' }),
-        }),
-        `card({
-  title:   'Building with Pulse',
-  content: \`
-    <p class="u-text-muted u-text-sm u-mb-4">Learn how to scaffold a new project...</p>
-    <div class="u-flex u-gap-3" style="align-items:center;flex-wrap:wrap">
-      <img src="/img/avatar.jpg" class="u-rounded-full" style="width:28px;height:28px" alt="">
-      <span class="u-text-sm u-text-muted">Jane Smith</span>
-      <span class="u-text-sm u-text-muted">·</span>
-      <span class="u-text-sm u-text-muted">Mar 15, 2024</span>
-      <span class="u-text-sm u-text-muted u-ml-auto">5 min read</span>
-    </div>
-  \`,
-  footer: button({ label: 'Read article →', href: '/blog/pulse', variant: 'ghost', size: 'sm' }),
-})`
-      )}
-
-      <h2 class="doc-h2" id="stat">Stat / metric card</h2>
-      <p>Cards without a title work well as simple metric tiles. Use <code>grid()</code> to lay multiple cards out side by side.</p>
-
-      ${demo(
-        grid({
-          cols: 3,
-          gap: 'sm',
-          content: [
-            card({ content: `<p class="u-text-muted u-text-sm u-mb-1" style="margin-top:0">Total revenue</p><p class="u-text-3xl u-font-bold" style="margin:0">£48,295</p><p class="u-text-sm u-text-green u-mb-0" style="margin-top:.25rem">↑ 12% this month</p>` }),
-            card({ content: `<p class="u-text-muted u-text-sm u-mb-1" style="margin-top:0">Active users</p><p class="u-text-3xl u-font-bold" style="margin:0">3,842</p><p class="u-text-sm u-text-muted u-mb-0" style="margin-top:.25rem">Across all plans</p>` }),
-            card({ content: `<p class="u-text-muted u-text-sm u-mb-1" style="margin-top:0">Churn rate</p><p class="u-text-3xl u-font-bold" style="margin:0">1.4%</p><p class="u-text-sm u-text-red u-mb-0" style="margin-top:.25rem">↑ 0.2% vs last month</p>` }),
-          ].join(''),
-        }),
-        `grid({
-  cols: 3,
-  gap: 'sm',
-  content: [
-    card({
-      content: \`
-        <p class="u-text-muted u-text-sm u-mb-1">Total revenue</p>
-        <p class="u-text-3xl u-font-bold">£48,295</p>
-        <p class="u-text-sm u-text-green">↑ 12% this month</p>
-      \`,
-    }),
-    card({ ... }),
-    card({ ... }),
-  ].join(''),
-})`
-      )}
-
-      <h2 class="doc-h2" id="grid-inside">Grid inside a card</h2>
-      <p>Components compose freely — pass a <code>grid()</code> into a card's <code>content</code> slot for structured layouts inside a surface.</p>
-
-      ${demo(
-        card({
-          title: 'Plan comparison',
-          content: grid({
-            cols: 3,
-            gap: 'sm',
-            content: [
-              `<div class="u-text-center u-p-2">
-                <p class="u-font-semibold u-mb-1" style="margin-top:0">Starter</p>
-                <p class="u-text-2xl u-font-bold u-mb-1" style="margin:0">£0</p>
-                <p class="u-text-muted u-text-sm" style="margin:0">Up to 3 projects</p>
-              </div>`,
-              `<div class="u-text-center u-p-2" style="border-left:1px solid var(--ui-border);border-right:1px solid var(--ui-border)">
-                <p class="u-font-semibold u-mb-1" style="margin-top:0;color:var(--ui-accent)">Pro</p>
-                <p class="u-text-2xl u-font-bold u-mb-1" style="margin:0">£12</p>
-                <p class="u-text-muted u-text-sm" style="margin:0">Unlimited projects</p>
-              </div>`,
-              `<div class="u-text-center u-p-2">
-                <p class="u-font-semibold u-mb-1" style="margin-top:0">Enterprise</p>
-                <p class="u-text-2xl u-font-bold u-mb-1" style="margin:0">Custom</p>
-                <p class="u-text-muted u-text-sm" style="margin:0">SLA + support</p>
-              </div>`,
-            ].join(''),
-          }),
-          footer: button({ label: 'View full pricing', href: '#', variant: 'ghost', size: 'sm' }),
-        }),
-        `card({
-  title:   'Plan comparison',
-  content: grid({
-    cols: 3,
-    gap: 'sm',
-    content: [
-      \`<div class="u-text-center u-p-2">...</div>\`,
-      \`<div class="u-text-center u-p-2">...</div>\`,
-      \`<div class="u-text-center u-p-2">...</div>\`,
-    ].join(''),
-  }),
-  footer: button({ label: 'View full pricing', href: '/pricing', variant: 'ghost', size: 'sm' }),
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>title</code>',   'string',  '—',     'Escaped automatically'],
-          ['<code>level</code>',   'number',  '3',     'Heading tag for the title (1–6). Visual style is unchanged — use this to keep the document outline correct when the surrounding context already has an h2 or h3.'],
-          ['<code>content</code>', 'string',  '—',     'HTML string — not escaped'],
-          ['<code>footer</code>',  'string',  '—',     'HTML string — not escaped'],
-          ['<code>flush</code>',   'boolean', 'false', 'Removes body padding — useful for full-bleed images or tables'],
-          ['<code>class</code>',   'string',  '—',     ''],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/charts.js

@@ -1,283 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { stat, card, grid } from '../../../../src/ui/index.js'
-import { barChart, lineChart, donutChart, sparkline } from '../../../../src/ui/charts.js'
-
-const { prev, next } = prevNext('/components/charts')
-
-// Shared sample data
-const monthly = [
-  { label: 'Jan', value: 42 },
-  { label: 'Feb', value: 78 },
-  { label: 'Mar', value: 55 },
-  { label: 'Apr', value: 91 },
-  { label: 'May', value: 63 },
-  { label: 'Jun', value: 84 },
-]
-
-const traffic = [
-  { label: 'Mon', value: 1200 },
-  { label: 'Tue', value: 1850 },
-  { label: 'Wed', value: 1540 },
-  { label: 'Thu', value: 2100 },
-  { label: 'Fri', value: 1760 },
-  { label: 'Sat', value: 890  },
-  { label: 'Sun', value: 720  },
-]
-
-export default {
-  route: '/components/charts',
-  meta: {
-    theme:       'light',
-    title: 'Charts — Pulse Docs',
-    description: 'Server-rendered SVG charts for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/charts',
-    prev,
-    next,
-    name: 'charts',
-    description: 'Server-rendered SVG charts — no JavaScript, no external library. Pure functions that return SVG strings, composable with any layout component. All colours use design tokens and respond to light/dark theme.',
-    content: `
-
-      <h2 class="doc-h2" id="bar">Bar chart</h2>
-      <p>Vertical bars with optional grid, value labels, and a zero baseline. All colour variants available.</p>
-      ${demo(
-        barChart({ data: monthly, color: 'accent' }),
-        `barChart({
-  data: [
-    { label: 'Jan', value: 42 },
-    { label: 'Feb', value: 78 },
-    { label: 'Mar', value: 55 },
-    { label: 'Apr', value: 91 },
-    { label: 'May', value: 63 },
-    { label: 'Jun', value: 84 },
-  ],
-  color: 'accent',
-})`
-      )}
-
-      <h3 class="doc-h3">With value labels</h3>
-      ${demo(
-        barChart({ data: monthly, color: 'success', showValues: true }),
-        `barChart({ data, color: 'success', showValues: true })`
-      )}
-
-      <h3 class="doc-h3">Large dataset with tight gap</h3>
-      ${demo(
-        barChart({ data: traffic, color: 'blue', gap: 0.15 }),
-        `barChart({ data: traffic, color: 'blue', gap: 0.15 })`
-      )}
-
-      <h3 class="doc-h3">Negative values</h3>
-      ${demo(
-        barChart({
-          data: [
-            { label: 'Q1', value:  24 },
-            { label: 'Q2', value: -8  },
-            { label: 'Q3', value:  41 },
-            { label: 'Q4', value: -15 },
-          ],
-          color: 'warning',
-          showValues: true,
-        }),
-        `barChart({
-  data: [
-    { label: 'Q1', value:  24 },
-    { label: 'Q2', value: -8  },
-    { label: 'Q3', value:  41 },
-    { label: 'Q4', value: -15 },
-  ],
-  color: 'warning',
-  showValues: true,
-})`
-      )}
-
-      <h2 class="doc-h2" id="line">Line chart</h2>
-      <p>Connected data points with optional dots, area fill, and grid lines.</p>
-      ${demo(
-        lineChart({ data: monthly, color: 'accent' }),
-        `lineChart({
-  data: [
-    { label: 'Jan', value: 42 },
-    ...
-  ],
-  color: 'accent',
-})`
-      )}
-
-      <h3 class="doc-h3">With area fill</h3>
-      ${demo(
-        lineChart({ data: monthly, color: 'accent', area: true }),
-        `lineChart({ data, color: 'accent', area: true })`
-      )}
-
-      <h3 class="doc-h3">No dots, area fill, success colour</h3>
-      ${demo(
-        lineChart({ data: traffic, color: 'success', area: true, showDots: false }),
-        `lineChart({ data, color: 'success', area: true, showDots: false })`
-      )}
-
-      <h2 class="doc-h2" id="donut">Donut chart</h2>
-      <p>Ring chart with multiple segments. Each item can override its colour. Pass <code>label</code> and <code>sublabel</code> for a centred annotation. Add <code>fluid: true</code> to expand to the parent container width.</p>
-      ${demo(
-        `<div style="display:flex;justify-content:center">` +
-        donutChart({
-          label: '73%',
-          sublabel: 'satisfied',
-          data: [
-            { label: 'Satisfied',   value: 73, color: 'success' },
-            { label: 'Neutral',     value: 18, color: 'muted'   },
-            { label: 'Unsatisfied', value: 9,  color: 'error'   },
-          ],
-        }) + `</div>`,
-        `donutChart({
-  label:    '73%',
-  sublabel: 'satisfied',
-  data: [
-    { label: 'Satisfied',   value: 73, color: 'success' },
-    { label: 'Neutral',     value: 18, color: 'muted'   },
-    { label: 'Unsatisfied', value: 9,  color: 'error'   },
-  ],
-})`
-      )}
-
-      <h3 class="doc-h3">Thinner ring</h3>
-      ${demo(
-        `<div style="display:flex;justify-content:center">` +
-        donutChart({
-          size: 180,
-          thickness: 22,
-          label: '4',
-          sublabel: 'segments',
-          data: [
-            { label: 'A', value: 40, color: 'accent'  },
-            { label: 'B', value: 30, color: 'blue'    },
-            { label: 'C', value: 20, color: 'success' },
-            { label: 'D', value: 10, color: 'warning' },
-          ],
-        }) + `</div>`,
-        `donutChart({
-  size: 180, thickness: 22,
-  label: '4', sublabel: 'segments',
-  data: [
-    { label: 'A', value: 40, color: 'accent'  },
-    { label: 'B', value: 30, color: 'blue'    },
-    { label: 'C', value: 20, color: 'success' },
-    { label: 'D', value: 10, color: 'warning' },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="sparkline">Sparkline</h2>
-      <p>Minimal inline trend line — pass a plain array of numbers. Designed to sit alongside <code>stat()</code> tiles or inside table cells. Add <code>fluid: true</code> to expand to the parent container width.</p>
-      ${demo(
-        `<div style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap">` +
-          sparkline({ data: [12,18,14,22,19,28,24,31], color: 'accent',  area: true  }) +
-          sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',   area: true  }) +
-          sparkline({ data: [12,18,14,22,19,28,24,31], color: 'success', area: false }) +
-        `</div>`,
-        `sparkline({ data: [12,18,14,22,19,28,24,31], color: 'accent', area: true })
-sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
-      )}
-
-      <h2 class="doc-h2" id="composition">Composition</h2>
-      <p>Charts compose with <code>card()</code>, <code>stat()</code>, <code>grid()</code> — drop any chart into any content slot.</p>
-      ${demo(
-        grid({
-          cols: 2,
-          gap: 'md',
-          content:
-            card({
-              title: 'Monthly signups',
-              content: barChart({ data: monthly, color: 'accent', height: 180 }),
-            }) +
-            card({
-              title: 'Daily traffic',
-              content: lineChart({ data: traffic, color: 'blue', area: true, height: 180 }),
-            }),
-        }),
-        `grid({
-  cols: 2,
-  content:
-    card({ title: 'Monthly signups', content: barChart({ data, height: 180 }) }) +
-    card({ title: 'Daily traffic',   content: lineChart({ data, color: 'blue', area: true, height: 180 }) }),
-})`
-      )}
-
-      <h3 class="doc-h3">Sparkline in stat tiles</h3>
-      ${demo(
-        grid({
-          cols: 3,
-          gap: 'md',
-          content:
-            card({ content: stat({ label: 'Revenue', value: '$18.2k', change: '+12%', trend: 'up' }) + `<div style="margin-top:.75rem">${sparkline({ data: [8,11,9,14,12,16,15,18], color: 'success', area: true })}</div>` }) +
-            card({ content: stat({ label: 'Users', value: '4,821', change: '+8.4%', trend: 'up' }) + `<div style="margin-top:.75rem">${sparkline({ data: [22,28,24,31,27,34,30,38], color: 'accent', area: true })}</div>` }) +
-            card({ content: stat({ label: 'Churn', value: '2.1%', change: '−0.3%', trend: 'down' }) + `<div style="margin-top:.75rem">${sparkline({ data: [8,6,7,5,6,4,5,3], color: 'error', area: true })}</div>` }),
-        }),
-        `card({
-  content: stat({ label: 'Revenue', value: '$18.2k', change: '+12%', trend: 'up' }) +
-    \`<div style="margin-top:.75rem">\${sparkline({ data, color: 'success', area: true })}</div>\`,
-})`
-      )}
-
-      <h2 class="doc-h2" id="props">Props</h2>
-
-      <h3 class="doc-h3">barChart()</h3>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>data</code>',       'array',   '—',        '<code>{ label, value }[]</code>'],
-          ['<code>height</code>',     'number',  '220',      'SVG height in px'],
-          ['<code>color</code>',      'string',  "'accent'", 'accent · success · warning · error · blue · muted'],
-          ['<code>showValues</code>', 'boolean', 'false',    'Value labels above each bar'],
-          ['<code>showGrid</code>',   'boolean', 'true',     'Horizontal grid lines'],
-          ['<code>gap</code>',        'number',  '0.25',     'Gap between bars as fraction 0–0.9'],
-        ]
-      )}
-      <p class="doc-note u-mt-2">Always renders at full parent width (<code>width="100%"</code>).</p>
-
-      <h3 class="doc-h3" style="margin-top:2rem">lineChart()</h3>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>data</code>',      'array',   '—',        '<code>{ label, value }[]</code>'],
-          ['<code>height</code>',    'number',  '220',      'SVG height in px'],
-          ['<code>color</code>',     'string',  "'accent'", 'accent · success · warning · error · blue · muted'],
-          ['<code>area</code>',      'boolean', 'false',    'Fill area under the line'],
-          ['<code>showDots</code>',  'boolean', 'true',     'Dots at each data point'],
-          ['<code>showGrid</code>',  'boolean', 'true',     'Horizontal grid lines'],
-        ]
-      )}
-      <p class="doc-note u-mt-2">Always renders at full parent width (<code>width="100%"</code>).</p>
-
-      <h3 class="doc-h3" style="margin-top:2rem">donutChart()</h3>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>data</code>',      'array',   '—',     '<code>{ label, value, color? }[]</code> — color per segment'],
-          ['<code>size</code>',      'number',  '200',   'Diameter in px'],
-          ['<code>thickness</code>', 'number',  '40',    'Ring thickness in px'],
-          ['<code>label</code>',     'string',  '—',     'Large centre text'],
-          ['<code>sublabel</code>',  'string',  '—',     'Smaller text below centre label'],
-          ['<code>fluid</code>',     'boolean', 'false', 'Expand to parent width, preserving aspect ratio'],
-        ]
-      )}
-
-      <h3 class="doc-h3" style="margin-top:2rem">sparkline()</h3>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>data</code>',   'number[]', '—',        'Plain array of numbers'],
-          ['<code>width</code>',  'number',   '80',       'SVG width in px (ignored when fluid: true)'],
-          ['<code>height</code>', 'number',   '32',       'SVG height in px'],
-          ['<code>color</code>',  'string',   "'accent'", 'accent · success · warning · error · blue · muted'],
-          ['<code>area</code>',   'boolean',  'false',    'Fill area under the line'],
-          ['<code>fluid</code>',  'boolean',  'false',    'Expand to parent width, preserving aspect ratio'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/checkbox.js

@@ -1,129 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext }                   from '../../lib/nav.js'
-import { table, callout }             from '../../lib/layout.js'
-import { checkbox, fieldset }         from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/checkbox')
-
-export default {
-  route: '/components/checkbox',
-  meta: {
-    theme:       'light',
-    title:       'Checkbox — Pulse Docs',
-    description: 'Custom-styled checkbox component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/checkbox',
-    prev,
-    next,
-    name: 'checkbox',
-    description: 'Custom-styled checkbox with animated check mark, full keyboard and screen-reader support. Pairs with <a href="/components/fieldset">fieldset</a> for labelled groups.',
-    content: `
-
-      <h2 class="doc-h2" id="basic">Basic</h2>
-      <p>Pass <code>label</code> for the visible text. The <code>id</code> is auto-generated from <code>name</code> and <code>value</code>.</p>
-      ${demo(
-        checkbox({ name: 'agree', label: 'I agree to the terms' }),
-        `checkbox({ name: 'agree', label: 'I agree to the terms' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="checked">Checked</h2>
-      ${demo(
-        checkbox({ name: 'newsletter', label: 'Send me updates', checked: true }),
-        `checkbox({ name: 'newsletter', label: 'Send me updates', checked: state.newsletter })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="hint">Hint</h2>
-      <p>A <code>hint</code> string renders below the label as supporting copy.</p>
-      ${demo(
-        checkbox({ name: 'marketing', label: 'Marketing emails', hint: 'Product news and tips. Unsubscribe any time.', checked: true }),
-        `checkbox({
-  name:    'marketing',
-  label:   'Marketing emails',
-  hint:    'Product news and tips. Unsubscribe any time.',
-  checked: state.marketing,
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="error">Error state</h2>
-      <p>Pass <code>error</code> to show a validation message. The error is announced via <code>role="alert"</code>.</p>
-      ${demo(
-        checkbox({ name: 'terms', label: 'I accept the terms and conditions', error: 'You must accept the terms to continue.' }),
-        `checkbox({
-  name:  'terms',
-  label: 'I accept the terms and conditions',
-  error: server.errors.terms,
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="disabled">Disabled</h2>
-      ${demo(
-        checkbox({ name: 'feature', label: 'Enable beta features', disabled: true }) +
-        ' ' +
-        checkbox({ name: 'feature2', label: 'Beta feature (on)', disabled: true, checked: true }),
-        `checkbox({ name: 'feature', label: 'Enable beta features', disabled: true })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="group">Group in a fieldset</h2>
-      <p>Compose multiple checkboxes inside a <a href="/components/fieldset">fieldset</a> for a semantic group.</p>
-      ${demo(
-        fieldset({
-          legend: 'Notifications',
-          content:
-            checkbox({ name: 'notif', value: 'email',   label: 'Email',            checked: true  }) +
-            checkbox({ name: 'notif', value: 'sms',     label: 'SMS'                              }) +
-            checkbox({ name: 'notif', value: 'browser', label: 'Browser push',     checked: true  }) +
-            checkbox({ name: 'notif', value: 'weekly',  label: 'Weekly digest',    disabled: true }),
-        }),
-        `fieldset({
-  legend:  'Notifications',
-  content:
-    checkbox({ name: 'notif', value: 'email',   label: 'Email',         checked: true }) +
-    checkbox({ name: 'notif', value: 'sms',     label: 'SMS'                          }) +
-    checkbox({ name: 'notif', value: 'browser', label: 'Browser push',  checked: true }) +
-    checkbox({ name: 'notif', value: 'weekly',  label: 'Weekly digest', disabled: true }),
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="in-forms">In forms</h2>
-      ${callout('note', 'Checkboxes submit their <code>value</code> string (defaulting to <code>"on"</code>) under <code>name</code> in FormData only when checked. Unchecked checkboxes are absent from FormData. Read them in <code>action.onStart</code> via <code>formData.get(\'agree\')</code> — a <code>null</code> result means unchecked.')}
-
-      <h2 class="doc-h2" id="labelhtml">Custom label HTML</h2>
-      <p>When the label needs inline styling — for example a strikethrough on a completed todo — use <code>labelHtml</code> instead of <code>label</code>. The value is inserted as raw HTML so you are responsible for escaping any user content.</p>
-      ${demo(
-        checkbox({ name: 'task', labelHtml: '<span style="text-decoration:line-through;opacity:.5">Buy milk</span>', checked: true }),
-        `checkbox({
-  name:      'task',
-  checked:   todo.done,
-  labelHtml: \`<span class="\${todo.done ? 'u-text-muted' : ''}">\${esc(todo.text)}</span>\`,
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="props">Props</h2>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>name</code>',      'string',  '—',     'Field name'],
-          ['<code>value</code>',     'string',  '—',     'Submitted value when checked (defaults to browser default <code>"on"</code>)'],
-          ['<code>label</code>',     'string',  '—',     'Visible label text — escaped'],
-          ['<code>labelHtml</code>', 'string',  '—',     'Raw HTML label slot — not escaped, use for styled spans'],
-          ['<code>checked</code>',   'boolean', 'false', ''],
-          ['<code>disabled</code>',  'boolean', 'false', ''],
-          ['<code>id</code>',        'string',  '—',     'Override the auto-generated <code>id</code>'],
-          ['<code>event</code>',     'string',  '—',     '<code>data-event</code> binding, e.g. <code>"change:toggle"</code>'],
-          ['<code>hint</code>',      'string',  '—',     'Helper text below the label'],
-          ['<code>error</code>',     'string',  '—',     'Validation error — announced via <code>role="alert"</code>'],
-          ['<code>class</code>',     'string',  '—',     ''],
-        ]
-      )}
-    `,
-  }),
-}