@invisibleloop/pulse 0.1.33 → 0.1.35

package/docs/public/pulse-ui.css

@@ -1635,7 +1635,6 @@ hr.ui-divider {
   font-family: var(--ui-mono);
   color:       var(--ui-muted);
   margin-left: auto;
-  opacity:     .7;
 }
 
 .ui-code-window-pre {

package/docs/src/lib/layout.js

@@ -120,7 +120,7 @@ export function codeBlock(highlighted, filename = '') {
 }
 
 export function table(headers, rows) {
-  const ths = headers.map(h => `<th>${h}</th>`).join('')
+  const ths = headers.map(h => `<th scope="col">${h}</th>`).join('')
   const trs = rows.map(row =>
     `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
   ).join('')

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

@@ -38,7 +38,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>items</code>', 'array', '[]', '<code>{ question: string, answer: string }[]</code>'],
         ]

package/docs/src/pages/components/app-badge.js

@@ -30,7 +30,7 @@ appBadge({ store: 'google', href: playStoreUrl })`
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>store</code>', 'string', "'apple'", "'apple' or 'google'"],
           ['<code>href</code>',  'string', "'#'",     'Link to the app store listing'],

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

@@ -34,7 +34,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string (HTML)', '—',      'Raw HTML slot'],
           ['<code>variant</code>', 'string',        "'info'", "'info' · 'promo' · 'warning'"],

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

@@ -82,7 +82,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>items</code>',     'array',  '[]',  'Array of <code>{ label, href }</code>. The last item should have no <code>href</code> — it becomes the current page.'],
           ['<code>separator</code>', 'string', "'/'", 'Character rendered between items'],

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

@@ -64,7 +64,7 @@ button({ label: 'Submit',  type: 'submit', variant: 'primary' })`
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>label</code>',    'string',  '—',         'Visible text'],
           ['<code>variant</code>',  'string',  'primary',   'primary · secondary · ghost · danger'],

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

@@ -210,7 +210,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['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.'],

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

@@ -41,7 +41,7 @@ export default {
 })`
       )}
 
-      <h3 class="doc-h3" id="arrows-dots"><a href="#arrows-dots" class="heading-anchor">Arrows and dots</a></h3>
+      <h2 class="doc-h2" id="arrows-dots"><a href="#arrows-dots" class="heading-anchor">Arrows and dots</a></h2>
       ${demo(
         carousel({
           arrows: true,
@@ -59,7 +59,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>slides</code>', 'string[] (HTML)',  '[]',             'Array of raw HTML strings — one per slide'],
           ['<code>arrows</code>', 'boolean',           '<code>true</code>',  'Show prev/next arrow buttons'],

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

@@ -212,9 +212,9 @@ sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
           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], width: '100%', 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], width: '100%', 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], width: '100%', color: 'error', area: true })}</div>` }),
+            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' }) +
@@ -226,7 +226,7 @@ sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
 
       <h3 class="doc-h3">barChart()</h3>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>data</code>',       'array',   '—',       '<code>{ label, value }[]</code>'],
           ['<code>height</code>',     'number',  '220',     'SVG height in px'],
@@ -239,7 +239,7 @@ sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
 
       <h3 class="doc-h3" style="margin-top:2rem">lineChart()</h3>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>data</code>',      'array',   '—',        '<code>{ label, value }[]</code>'],
           ['<code>height</code>',    'number',  '220',      'SVG height in px'],
@@ -252,7 +252,7 @@ sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
 
       <h3 class="doc-h3" style="margin-top:2rem">donutChart()</h3>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>data</code>',      'array',  '—',    '<code>{ label, value, color? }[]</code> — color per segment'],
           ['<code>size</code>',      'number', '200',  'Diameter in px'],
@@ -264,7 +264,7 @@ sparkline({ data: [31,24,28,19,22,14,18,12], color: 'error',  area: true })`
 
       <h3 class="doc-h3" style="margin-top:2rem">sparkline()</h3>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>data</code>',   'number[]', '—',        'Plain array of numbers'],
           ['<code>width</code>',  'number',   '80',       'SVG width in px'],

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

@@ -109,7 +109,7 @@ export default {
 
       <h2 class="doc-h2" id="props">Props</h2>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['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>)'],

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

@@ -33,7 +33,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string (HTML)', '—',       'Raw HTML slot'],
           ['<code>gap</code>',     'string',        "'md'",    "'xs' · 'sm' · 'md' · 'lg'"],

package/docs/src/pages/components/code-window.js

@@ -45,7 +45,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>',  'string (HTML)', '—', 'Raw HTML slot — pre-highlighted code HTML or plain text'],
           ['<code>filename</code>', 'string',        '—', "Filename shown in the chrome bar (e.g. 'home.js')"],

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

@@ -29,7 +29,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string (HTML)', '—',    'Raw HTML slot'],
           ['<code>size</code>',    'string',        "'lg'", "'sm' (640px) · 'md' (768px) · 'lg' (1100px) · 'xl' (1280px)"],

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

@@ -38,7 +38,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>eyebrow</code>',  'string',        '—',          'Small label above the heading'],
           ['<code>title</code>',    'string',        '—',          'Main heading'],

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

@@ -27,7 +27,7 @@ divider({ label: 'or continue with' })`
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>label</code>', 'string', '—', 'Optional centred text — renders as <code>&lt;div&gt;</code> with role="separator" when provided, <code>&lt;hr&gt;</code> otherwise'],
         ]

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

@@ -46,7 +46,7 @@ feature({ icon: iconPhone({ size: 20 }), title: 'Works offline',      descriptio
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>icon</code>',        'string (HTML)', '—', 'Raw HTML slot — SVG or emoji; displayed in an accent-tinted box'],
           ['<code>title</code>',       'string',        '—', ''],

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

@@ -52,7 +52,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>legend</code>',  'string', '—',   'Group label — rendered as <code>&lt;legend&gt;</code>, announced by screen readers on focus'],
           ['<code>content</code>', 'string', '—',   'Raw HTML slot — input(), select(), textarea(), grid(), etc.'],

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

@@ -107,7 +107,7 @@ fileUpload({ name: 'photo', label: 'Photo', accept: 'image/*', event: 'change:se
       ${callout('note', 'The file object itself cannot be stored in Pulse state — state must be serialisable. Store the filename or a preview URL (via <code>URL.createObjectURL</code>) instead, and upload the file in an action via FormData.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',     'string',  '—',     'Field name — file available in FormData under this key'],
           ['<code>label</code>',    'string',  '—',     'Visible label text'],

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

@@ -45,7 +45,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>logo</code>',     'string (HTML)', '—',   'Raw HTML slot — SVG, img, or text'],
           ['<code>logoHref</code>', 'string',        "'/'", 'Logo link destination'],

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

@@ -153,7 +153,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string (HTML)', '—',     'Raw HTML slot — direct children are grid items'],
           ['<code>cols</code>',    'number',        '3',     '1 · 2 · 3 · 4'],

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

@@ -92,7 +92,7 @@ heading({ level: 2, text: 'The quick brown fox jumps over the lazy dog tonight',
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>level</code>',   'number (1–6)', '2',               'Controls both the HTML tag and the default visual size'],
           ['<code>text</code>',    'string',       '—',               'Heading text — escaped automatically'],

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

@@ -50,7 +50,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>eyebrow</code>',  'string',        '—',         'Small label above the title'],
           ['<code>title</code>',    'string',        '—',         ''],

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

@@ -272,7 +272,7 @@ feature({ icon: iconCode({   size: 22, bg: 'square', bgColor: 'muted'   }), titl
       ${iconGrid_()}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>size</code>',    'number', '16',      'Width and height in px'],
           ['<code>class</code>',   'string', '—',       'Extra CSS classes (on wrapper when <code>bg</code> is set, otherwise on the SVG)'],

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

@@ -54,7 +54,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>src</code>',      'string',  '—',     'Image source URL'],
           ['<code>alt</code>',      'string',  '—',     'Alt text — required for accessibility'],

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

@@ -31,7 +31,7 @@ input({ name: 'search', label: 'Search', placeholder: 'Filter by name…', hint:
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',        'string',  '—',    'Also used as id base: <code>field-{name}</code>'],
           ['<code>label</code>',       'string',  '—',    ''],

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

@@ -99,7 +99,7 @@ list({ gap: 'md', items: [...] })`,
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>items</code>',   'string[]',                         '—',             'Array of HTML strings for each list item — escape user data before passing'],
           ['<code>ordered</code>', 'boolean',                          '<code>false</code>', '<code>false</code> renders <code>&lt;ul&gt;</code>, <code>true</code> renders <code>&lt;ol&gt;</code>'],

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

@@ -37,7 +37,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>image</code>',   'string (HTML)', '—',         'Raw HTML slot — img, figure, SVG, or styled div'],
           ['<code>content</code>', 'string (HTML)', '—',         'Raw HTML slot'],

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

@@ -46,7 +46,7 @@ modal({
 modalTrigger({ target: 'confirm-delete', label: 'Delete item', variant: 'danger' })`
       )}
 
-      <h3 class="doc-h3" id="sizes"><a href="#sizes" class="heading-anchor">Sizes</a></h3>
+      <h2 class="doc-h2" id="sizes"><a href="#sizes" class="heading-anchor">Sizes</a></h2>
       ${demo(
         cluster({ gap: 'sm', justify: 'center', content:
           modalTrigger({ target: 'demo-sm', label: 'Small',  variant: 'secondary', size: 'sm' }) +
@@ -58,7 +58,7 @@ modalTrigger({ target: 'confirm-delete', label: 'Delete item', variant: 'danger'
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>id</code>',      'string',                        '—',              'Unique ID — required for triggers to target this dialog'],
           ['<code>title</code>',   'string',                        '—',              ''],
@@ -70,10 +70,10 @@ modalTrigger({ target: 'confirm-delete', label: 'Delete item', variant: 'danger'
         ]
       )}
 
-      <h3 class="doc-h3" id="trigger-props"><a href="#trigger-props" class="heading-anchor">modalTrigger props</a></h3>
+      <h2 class="doc-h2" id="trigger-props"><a href="#trigger-props" class="heading-anchor">modalTrigger props</a></h2>
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>target</code>',  'string',                                          '—',                 "The modal's <code>id</code>"],
           ['<code>label</code>',   'string',                                          '<code>Open</code>', ''],
@@ -83,13 +83,13 @@ modalTrigger({ target: 'confirm-delete', label: 'Delete item', variant: 'danger'
         ]
       )}
 
-      <h3 class="doc-h3" id="custom-trigger"><a href="#custom-trigger" class="heading-anchor">Custom triggers</a></h3>
+      <h2 class="doc-h2" id="custom-trigger"><a href="#custom-trigger" class="heading-anchor">Custom triggers</a></h2>
       <p class="doc-body">Any element with <code>data-dialog-open="&lt;id&gt;"</code> opens the dialog when clicked. Use <code>data-dialog-close</code> on any element inside or outside the dialog to close it programmatically:</p>
       <pre class="code-block"><code>&lt;button data-dialog-open="my-modal"&gt;Open&lt;/button&gt;
 &lt;button data-dialog-close&gt;Cancel&lt;/button&gt;</code></pre>
       ${callout('tip', 'The dialog also closes on ESC, backdrop click, and <code>&lt;form method="dialog"&gt;</code> submit — all native browser behaviour, no JavaScript needed.')}
 
-      <h3 class="doc-h3" id="forms-inside"><a href="#forms-inside" class="heading-anchor">Forms inside a modal</a></h3>
+      <h2 class="doc-h2" id="forms-inside"><a href="#forms-inside" class="heading-anchor">Forms inside a modal</a></h2>
       <p class="doc-body"><code>modal()</code> wraps all content in <code>&lt;form method="dialog"&gt;</code> for native close behaviour. You <strong>cannot nest a <code>&lt;form data-action="..."&gt;</code> inside it</strong> — browsers silently discard nested forms, so the action will never fire.</p>
       <p class="doc-body">When a modal button needs to trigger a Pulse action, place the form <em>outside</em> the modal and use the HTML <code>form</code> attribute to associate the button with it:</p>
       <pre class="code-block"><code>// The action form lives outside the modal — hidden, no visible fields needed

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

@@ -71,7 +71,7 @@ export default {
       </div>
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>logo</code>',     'string (HTML)', '—',     'Raw HTML slot — SVG, img, or text'],
           ['<code>logoHref</code>', 'string',        "'/'",   ''],

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

@@ -50,7 +50,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',        'string',        '—',     ''],
           ['<code>level</code>',       'number',        '3',     'Heading tag for the plan name (1–6). Visual style is unchanged.'],

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

@@ -85,7 +85,7 @@ progress({ value: 60, size: 'lg' })`,
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>value</code>',      'number',  '—',          'Current value. Omit for indeterminate.'],
           ['<code>max</code>',        'number',  '100',        ''],

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

@@ -99,7 +99,7 @@ const x = 1 + 2</code></pre>
       ${callout('warning', '<strong>Do not escape the content prop.</strong> <code>prose()</code> renders raw HTML — it is designed for trusted server-side content only. Never pass unescaped user input directly. Sanitise CMS output before rendering if your CMS allows arbitrary HTML.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string', '—',                        'Raw HTML string — rendered as-is, not escaped. Use for server-side content only.'],
           ['<code>size</code>',    '<code>sm | base | lg</code>', '<code>base</code>', 'Base font size scale. <code>sm</code>=0.875rem, <code>base</code>=1rem, <code>lg</code>=1.125rem'],

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

@@ -58,7 +58,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>quote</code>', 'string',            '—',           'The quote text — escaped automatically'],
           ['<code>cite</code>',  'string',            '—',           'Attribution text — rendered in a <code>&lt;figcaption&gt;</code>'],

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

@@ -163,7 +163,7 @@ export default {
 
       <h2 class="doc-h2" id="props-group">radioGroup() props</h2>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',    'string',  '—',       'Shared <code>name</code> attribute for all inputs in the group'],
           ['<code>legend</code>',  'string',  '—',       'Group label — renders as a <code>&lt;legend&gt;</code>'],
@@ -178,7 +178,7 @@ export default {
 
       <h2 class="doc-h2" id="props-radio">radio() props</h2>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',     'string',  '—',      'Field name'],
           ['<code>value</code>',    'string',  '—',      'Submitted value when this option is selected'],

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

@@ -90,7 +90,7 @@ rating({ value: 4, size: 'lg' })`
       ${callout('note', 'The interactive rating submits the selected star count as a number string under <code>name</code> in FormData. Read it with <code>Number(formData.get(\'score\'))</code>. If nothing is selected, the field is absent from FormData.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>value</code>',    'number',  '0',       'Current rating. Supports 0.5 steps in display mode.'],
           ['<code>max</code>',      'number',  '5',       'Total number of stars'],

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

@@ -40,7 +40,7 @@ search({
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',        'string',  '—',     'Field name and id base'],
           ['<code>label</code>',       'string',  '—',     'Label text — always provide for accessibility'],

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

@@ -41,7 +41,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>',  'string (HTML)', '—',         'Raw HTML slot'],
           ['<code>variant</code>',  'string',        "'default'", "'default' · 'alt' · 'dark'"],

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

@@ -106,7 +106,7 @@ segmented({ name: 'view', value: 'b', size: 'lg', options: [...] })`
       ${callout('note', 'The segmented control submits the selected <code>value</code> string under <code>name</code> in FormData. Read it via <code>formData.get(\'period\')</code> in <code>action.onStart</code> or <code>action.run</code>.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',     'string',  '—',    'Field name — submitted in FormData'],
           ['<code>options</code>',  'array',   '[]',   'Array of <code>{ value, label }</code>'],

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

@@ -93,7 +93,7 @@ slider({
       ${callout('warning', 'Do not use <code>data-event="input:mutationName"</code> on a slider. Pulse replaces <code>innerHTML</code> on every mutation, which interrupts the drag mid-gesture. Use <code>change</code> instead — it fires once when the user releases the handle.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',     'string',  '—',     'Field name — submitted in FormData'],
           ['<code>label</code>',    'string',  '—',     'Visible label text'],

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

@@ -60,7 +60,7 @@ spinner({ color: 'white'  })`
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>size</code>',  '<code>sm | md | lg</code>',           '<code>md</code>',     '1rem / 1.5rem / 2.5rem'],
           ['<code>color</code>', '<code>accent | muted | white</code>', '<code>accent</code>', ''],

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

@@ -36,7 +36,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>', 'string (HTML)', '—',         'Raw HTML slot'],
           ['<code>gap</code>',     'string',        "'md'",      "'xs' · 'sm' · 'md' · 'lg' · 'xl'"],

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

@@ -41,7 +41,7 @@ stat({ label: 'Avg. session', value: '4m 12s' })`
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>label</code>',  'string',  '—',       ''],
           ['<code>value</code>',  'string',  '—',       'Formatted value string — e.g. "2.4k", "98%"'],

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

@@ -54,7 +54,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>steps</code>',   'string[]', '[]',  'Array of step label strings'],
           ['<code>current</code>', 'number',   '0',   '0-based index of the active step. Pass <code>steps.length</code> to mark all steps complete.'],

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

@@ -35,7 +35,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>quote</code>',  'string', '—', ''],
           ['<code>name</code>',   'string', '—', 'Author name — also used for avatar initials'],

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

@@ -204,7 +204,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>direction</code>', 'string', "'vertical'", "'vertical' · 'horizontal'"],
           ['<code>items</code>',     'array',  '[]',         'Array of <code>timelineItem</code> option objects'],
@@ -214,7 +214,7 @@ export default {
 
       <h3 class="doc-h3" style="margin-top:2rem">timelineItem() props</h3>
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>',  'string (HTML)', '—',        'Raw HTML body — accepts any component output'],
           ['<code>label</code>',    'string',        '—',        'Timestamp or step label (escaped)'],

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

@@ -68,7 +68,7 @@ toggle({ name: 'b', label: 'On and disabled',  disabled: true, checked: true })`
       ${callout('note', 'The switch submits as <code>\'on\'</code> under its <code>name</code> when checked. When unchecked, the field is absent from FormData entirely — the same behaviour as a native checkbox. Read it with <code>formData.get(\'name\') === \'on\'</code>.')}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>name</code>',     'string',  '—',     'Field name — submitted in FormData'],
           ['<code>label</code>',    'string',  '—',     'Visible label text'],

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

@@ -35,7 +35,7 @@ export default {
       )}
 
       ${table(
-        ['Prop', 'Type', 'Default', ''],
+        ['Prop', 'Type', 'Default', 'Description'],
         [
           ['<code>content</code>',  'string',                          '—',       'Tooltip text (plain text only)'],
           ['<code>trigger</code>',  'string (HTML)',                   '—',       'Raw HTML slot — the element the tooltip wraps'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.1.33
+0.1.35

package/public/pulse-ui.css

@@ -1635,7 +1635,6 @@ hr.ui-divider {
   font-family: var(--ui-mono);
   color:       var(--ui-muted);
   margin-left: auto;
-  opacity:     .7;
 }
 
 .ui-code-window-pre {

package/src/ui/fileupload.js

@@ -63,7 +63,7 @@ export function fileUpload({
 
   return `<div class="${e(wrapClasses)}">
   ${labelHtml}
-  <div class="${e(zoneClasses)}" role="button" tabindex="${disabled ? '-1' : '0'}" aria-label="Upload file"
+  <div class="${e(zoneClasses)}" role="button" tabindex="${disabled ? '-1' : '0'}" aria-label="Drag and drop or browse"${disabled ? ' aria-disabled="true"' : ''}
   >
     <div class="ui-upload-body">
       ${icon}

package/src/ui/progress.js

@@ -48,11 +48,13 @@ export function progress({
     ${showValue && !indeterminate ? `<span class="ui-progress-value">${pct}%</span>` : ''}
   </div>` : ''
 
+  const ariaLabel = label ? e(label) : indeterminate ? 'Loading' : `${pct}%`
+
   return `<div
   class="${e(classes)}"
   role="progressbar"
+  aria-label="${ariaLabel}"
   ${!indeterminate ? `aria-valuenow="${clamped}" aria-valuemin="0" aria-valuemax="${max}"` : ''}
-  ${label ? `aria-label="${e(label)}"` : ''}
   style="--progress-height:${h}"
 >${header}
   <div class="ui-progress-track">