@invisibleloop/pulse 0.20.5 → 0.20.7

package/docs/public/retrowheels.css

@@ -327,6 +327,29 @@ h1, h2, h3, h4, h5, h6,
   margin-bottom: var(--ui-space-4);
 }
 
+/* Review cards — replaces the removed testimonial() component */
+.rw-review-stars {
+  display: flex;
+  gap: 2px;
+  color: var(--rw-orange-dark);
+  margin-bottom: var(--ui-space-3);
+}
+
+.rw-review-quote {
+  font-style: italic;
+  color: var(--ui-text);
+}
+
+.rw-review-name {
+  font-family: var(--ui-font-display);
+  font-weight: 900;
+}
+
+.rw-review-role {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-muted);
+}
+
 .rw-service-price {
   font-family: 'Courier New', monospace;
   font-size: var(--ui-text-sm);

package/docs/public/shop.css

@@ -41,7 +41,7 @@ body {
   padding: var(--ui-space-16) var(--ui-space-6) var(--ui-space-8);
 }
 
-.product-display .ui-display-heading {
+.product-display .product-display-title {
   font-size: clamp(3rem, 10vw, 8rem);
   line-height: 1;
   letter-spacing: -0.04em;
@@ -49,6 +49,40 @@ body {
   color: var(--ui-text);
 }
 
+/* Section eyebrow + rule — replaces the removed sectionLabel() component */
+.shop-section-label {
+  margin-bottom: var(--ui-space-6);
+}
+.shop-section-label-eyebrow {
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--ui-color-muted);
+  margin-bottom: var(--ui-space-2);
+}
+.shop-section-label-heading {
+  margin-bottom: var(--ui-space-3);
+}
+.shop-section-label-rule {
+  border: none;
+  border-top: 1px solid var(--ui-border);
+}
+
+/* End-of-page metadata — replaces the removed colophon() component */
+.shop-colophon {
+  padding: var(--ui-space-8) var(--ui-space-6);
+  text-align: center;
+  border-top: 1px solid var(--ui-border);
+}
+.shop-colophon-inner {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-color-muted);
+}
+.shop-colophon-inner a {
+  color: inherit;
+}
+
 .product-display .product-tagline {
   margin-top: var(--ui-space-4);
   font-size: var(--ui-text-xl);

package/docs/public/sparkys.css

@@ -41,17 +41,23 @@ body {
 }
 
 /* ── Top utility strip ─────────────────────────────────────────────────── */
-/* top-strip rendered via topStrip() component — background/color set inline */
-.ui-top-strip {
-  max-width: none;
-  padding-inline: var(--ui-space-6);
+/* raw two-column bar — replaces the removed topStrip() component */
+.top-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-4);
+  padding: var(--ui-space-2) var(--ui-space-6);
+  background: var(--brand-navy-deep);
+  color: var(--brand-white);
+  font-size: var(--ui-text-sm);
 }
-.ui-top-strip a {
+.top-strip a {
   color: inherit;
   text-decoration: none;
   font-weight: 600;
 }
-.ui-top-strip a:hover { text-decoration: underline; }
+.top-strip a:hover { text-decoration: underline; }
 
 /* ── Hero ──────────────────────────────────────────────────────────────── */
 .hero-split {
@@ -105,10 +111,23 @@ body {
   color: var(--ui-muted);
   font-weight: 600;
 }
-/* trustList() inside trust slot — override default small size */
-.hero-split__trust .ui-trust-list-item {
+/* trust-inline list — replaces the removed trustList() component */
+.trust-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-5);
+  list-style: none;
+}
+.trust-inline__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
   font-weight: 600;
 }
+.trust-inline__icon {
+  display: inline-flex;
+  color: var(--brand-amber);
+}
 
 .hero-split__panel {
   background: linear-gradient(160deg, var(--ui-accent) 0%, var(--brand-navy-deep) 100%);
@@ -198,22 +217,29 @@ body {
   color: var(--ui-muted);
 }
 
-/* ── Services grid — serviceCard() component ───────────────────────────── */
-.services {
+/* ── Services grid — card() component with a bordered service-card look ─── */
+.service-card {
+  border: 1px solid var(--ui-border);
+  box-shadow: none;
+}
+.service-card .ui-service-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-accent-dim);
+  color: var(--ui-accent);
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-5);
+  place-items: center;
+  margin-bottom: var(--ui-space-4);
 }
-/* serviceCard() title size override */
-.services .ui-service-card-title {
+.service-card .ui-service-card-title {
   font-size: var(--ui-text-xl);
   font-weight: 700;
+  margin-bottom: var(--ui-space-2);
 }
-.services .ui-service-card-desc {
+.service-card .ui-service-card-desc {
   font-size: var(--ui-text-base);
-}
-.services .ui-service-card--linked:hover {
-  transform: translateY(-2px);
+  color: var(--ui-muted);
 }
 
 /* ── Why grid ──────────────────────────────────────────────────────────── */
@@ -295,17 +321,24 @@ body {
   flex-direction: column;
   gap: var(--ui-space-3);
 }
-.contact-strip__details .ui-contact-row {
+/* contact-inline list — replaces the removed contactRow() component */
+.contact-inline {
+  display: flex;
   flex-direction: column;
+  gap: var(--ui-space-3);
+  list-style: none;
 }
-.contact-strip__details .ui-contact-row-item {
+.contact-inline__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
   color: var(--brand-white);
   font-weight: 600;
   font-size: var(--ui-text-lg);
 }
-.contact-strip__details .ui-contact-row-item a { color: var(--brand-white); }
-.contact-strip__details .ui-contact-row-item a:hover { color: var(--brand-amber-strong); }
-.contact-strip__details .ui-contact-row-icon {
+.contact-inline__item a { color: var(--brand-white); text-decoration: none; }
+.contact-inline__item a:hover { color: var(--brand-amber-strong); }
+.contact-inline__icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;

package/docs/public/theme.css

@@ -1,8 +1,52 @@
-/* Brut theme tokens */
-:root {
-  --brut-yellow: #f0e642;
-  --brut-ink: #0a0a0a;
-  --brut-surface: #ffffff;
-  --brut-dark: #111114;
-  --brut-darker: #111214;
+/* Brut theme tokens — home page only, scoped to [data-theme="light"] on <body> */
+[data-theme="light"] {
+  /* Confident saturated gold — solid block fill (dark ink text sits on top) */
+  --brut-gold: #e8b613;
+  --brut-gold-deep: #c99700;
+  --brut-ink: #171512;
+  --brut-surface: #faf8f2;
+  --brut-surface-2: #f1ede1;
+  --brut-muted: #5c574c;
+  --brut-dark: #171512;
+  --brut-darker: #100f0c;
+  --brut-surface-dot: #e6e0d2;
+}
+
+/* Site-wide light theme tokens — feeds docs.css's :root token names (--bg,
+   --surface, --text, --accent, etc.) and pulse-ui.css's input tokens, so
+   every docs page (nav, sidebar, guides, component reference, templates
+   gallery) picks up the same warm/gold/paper palette as the home page. */
+[data-theme="light"] {
+  --bg:            var(--brut-surface);
+  --surface:       #ffffff;
+  --surface-2:     var(--brut-surface-2);
+  --border:        #ddd6c4;
+  --border-subtle: #ece7d9;
+  --text:          var(--brut-ink);
+  --muted:         var(--brut-muted);
+  --muted-2:       #8a8272;
+  --accent:        var(--brut-gold-deep);
+  --accent-text:   var(--brut-ink);
+  --accent-hover:  #a97f00;
+  --accent-dim:    rgba(201, 151, 0, 0.12);
+  --green:         #166534;
+  --red:           #b91c1c;
+
+  /* Syntax tokens — dark-on-light, tuned for contrast on --surface-2 */
+  --tok-kw:    #7c3aed;
+  --tok-str:   #15803d;
+  --tok-cmt:   #78716c;
+  --tok-num:   #c2410c;
+  --tok-fn:    #1d4ed8;
+  --tok-prop:  #a16207;
+  --tok-op:    #0891b2;
+  --tok-punct: #57534e;
+
+  /* Sticky header background — replaces the hardcoded rgba(13,13,16,.9) */
+  --header-bg: rgba(250, 248, 242, 0.9);
+
+  /* Callout / tag accents that were hardcoded dark-theme hex in docs.css */
+  --callout-note-icon: #1d4ed8;
+  --tag-required-bg:   rgba(185, 28, 28, 0.12);
+  --tag-required-text: #b91c1c;
 }

package/docs/server.js

@@ -76,7 +76,6 @@ await createServer(
     new URL('./src/pages/components/button.js',      import.meta.url),
     new URL('./src/pages/components/card.js',        import.meta.url),
     new URL('./src/pages/components/checkbox.js',    import.meta.url),
-    new URL('./src/pages/components/carousel.js',    import.meta.url),
     new URL('./src/pages/components/charts.js',      import.meta.url),
     new URL('./src/pages/components/empty.js',       import.meta.url),
     new URL('./src/pages/components/fieldset.js',    import.meta.url),
@@ -84,12 +83,8 @@ await createServer(
     new URL('./src/pages/components/heading.js',     import.meta.url),
     new URL('./src/pages/components/icons.js',       import.meta.url),
     new URL('./src/pages/components/image.js',       import.meta.url),
-    new URL('./src/pages/components/gallery.js',     import.meta.url),
     new URL('./src/pages/components/input.js',       import.meta.url),
-    new URL('./src/pages/components/list.js',        import.meta.url),
-    new URL('./src/pages/components/marquee.js',     import.meta.url),
     new URL('./src/pages/components/modal.js',       import.meta.url),
-    new URL('./src/pages/components/photo-card.js',  import.meta.url),
     new URL('./src/pages/components/progress.js',    import.meta.url),
     new URL('./src/pages/components/prose.js',       import.meta.url),
     new URL('./src/pages/components/pullquote.js',   import.meta.url),
@@ -104,7 +99,6 @@ await createServer(
     new URL('./src/pages/components/stepper.js',     import.meta.url),
     new URL('./src/pages/components/table.js',       import.meta.url),
     new URL('./src/pages/components/textarea.js',    import.meta.url),
-    new URL('./src/pages/components/timeline.js',    import.meta.url),
     new URL('./src/pages/components/toggle.js',      import.meta.url),
     new URL('./src/pages/components/tooltip.js',     import.meta.url),
     // Landing Components
@@ -115,8 +109,6 @@ await createServer(
     new URL('./src/pages/components/hero.js',        import.meta.url),
     new URL('./src/pages/components/nav.js',         import.meta.url),
     new URL('./src/pages/components/phone-frame.js', import.meta.url),
-    new URL('./src/pages/components/pricing.js',     import.meta.url),
-    new URL('./src/pages/components/testimonial.js', import.meta.url),
     // Templates
     new URL('./src/pages/templates.js',                     import.meta.url),
     new URL('./src/pages/templates/mobile-app.js',          import.meta.url),
@@ -131,11 +123,8 @@ await createServer(
     new URL('./src/pages/templates/journey.js',             import.meta.url),
     new URL('./src/pages/templates/shop.js',                import.meta.url),
     // Layout Components
-    new URL('./src/pages/components/banner.js',      import.meta.url),
     new URL('./src/pages/components/cluster.js',     import.meta.url),
-    new URL('./src/pages/components/code-window.js', import.meta.url),
     new URL('./src/pages/components/container.js',   import.meta.url),
-    new URL('./src/pages/components/decorate.js',    import.meta.url),
     new URL('./src/pages/components/divider.js',     import.meta.url),
     new URL('./src/pages/components/footer.js',      import.meta.url),
     new URL('./src/pages/components/grid.js',        import.meta.url),

package/docs/src/lib/component-page.js

@@ -11,6 +11,7 @@ import { highlight } from './highlight.js'
 export function demo(previewHtml, codeStr, { col = false, scroll = false, bleed = false } = {}) {
   const previewClass = [
     'demo-preview',
+    'is-light',
     col    ? 'demo-preview--col'    : '',
     scroll ? 'demo-preview--scroll' : '',
     bleed  ? 'demo-preview--bleed'  : '',
@@ -20,7 +21,7 @@ export function demo(previewHtml, codeStr, { col = false, scroll = false, bleed
     <svg class="demo-theme-toggle__light" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
   </button>`
   return `<div class="component-demo">
-  <div class="${previewClass}">${toggle}<div class="demo-preview-inner">${previewHtml}</div></div>
+  <div class="${previewClass}">${toggle}<div class="demo-preview-inner ui-theme-light">${previewHtml}</div></div>
   <div class="demo-code">${codeBlock(highlight(codeStr, 'js'))}</div>
 </div>`
 }

package/docs/src/lib/nav.js

@@ -84,7 +84,6 @@ export const NAV = [
       { label: 'Button',      href: '/components/button'      },
       { label: 'Card',        href: '/components/card'        },
       { label: 'Checkbox',    href: '/components/checkbox'    },
-      { label: 'Carousel',    href: '/components/carousel'    },
       { label: 'Charts',      href: '/components/charts'      },
       { label: 'Empty',       href: '/components/empty'       },
       { label: 'Fieldset',    href: '/components/fieldset'    },
@@ -92,12 +91,8 @@ export const NAV = [
       { label: 'Heading',     href: '/components/heading'     },
       { label: 'Icons',       href: '/components/icons'       },
       { label: 'Image',       href: '/components/image'       },
-      { label: 'Gallery',     href: '/components/gallery'     },
       { label: 'Input',       href: '/components/input'       },
-      { label: 'List',        href: '/components/list'        },
-      { label: 'Marquee',     href: '/components/marquee'     },
       { label: 'Modal',       href: '/components/modal'       },
-      { label: 'Photo Card',  href: '/components/photo-card'  },
       { label: 'Progress',    href: '/components/progress'    },
       { label: 'Prose',       href: '/components/prose'       },
       { label: 'Pullquote',   href: '/components/pullquote'   },
@@ -112,7 +107,6 @@ export const NAV = [
       { label: 'Stepper',     href: '/components/stepper'     },
       { label: 'Table',       href: '/components/table'       },
       { label: 'Textarea',    href: '/components/textarea'    },
-      { label: 'Timeline',    href: '/components/timeline'    },
       { label: 'Toggle',      href: '/components/toggle'      },
       { label: 'Tooltip',     href: '/components/tooltip'     },
     ],
@@ -127,18 +121,13 @@ export const NAV = [
       { label: 'Hero',        href: '/components/hero'        },
       { label: 'Nav',         href: '/components/nav'         },
       { label: 'Phone Frame', href: '/components/phone-frame' },
-      { label: 'Pricing',     href: '/components/pricing'     },
-      { label: 'Testimonial', href: '/components/testimonial' },
     ],
   },
   {
     section: 'Layout Components',
     items: [
-      { label: 'Banner',      href: '/components/banner'      },
       { label: 'Cluster',     href: '/components/cluster'     },
-      { label: 'Code Window', href: '/components/code-window' },
       { label: 'Container',   href: '/components/container'   },
-      { label: 'Decorate',    href: '/components/decorate'    },
       { label: 'Divider',     href: '/components/divider'     },
       { label: 'Footer',      href: '/components/footer'      },
       { label: 'Grid',        href: '/components/grid'        },

package/docs/src/pages/accessibility.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/accessibility')
 export default {
   route: '/accessibility',
   meta: {
+    theme:       'light',
     title: 'Accessibility — Pulse Docs',
     description: 'Keyboard navigation, focus management, semantic HTML, and ARIA patterns in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/accessibility',

package/docs/src/pages/actions.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/actions')
 export default {
   route: '/actions',
   meta: {
+    theme:       'light',
     title: 'Actions — Pulse Docs',
     description: 'Async operations in Pulse — lifecycle, FormData, error handling.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/auth.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/auth')
 export default {
   route: '/auth',
   meta: {
+    theme:       'light',
     title: 'Auth (Auth0) — Pulse Docs',
     description: 'Integrating Auth0 OAuth authentication with Pulse using guard functions, ctx.setCookie, and raw response specs.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/auth',

package/docs/src/pages/caching.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/caching')
 export default {
   route: '/caching',
   meta: {
+    theme:       'light',
     title: 'Caching — Pulse Docs',
     description: 'HTTP cache headers, in-process server data caching, and asset caching in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/caching',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/accordion')
 export default {
   route: '/components/accordion',
   meta: {
+    theme:       'light',
     title: 'Accordion — Pulse Docs',
     description: 'Accordion component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/accordion',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/alert')
 export default {
   route: '/components/alert',
   meta: {
+    theme:       'light',
     title: 'Alert — Pulse Docs',
     description: 'Alert component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/alert',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/app-badge')
 export default {
   route: '/components/app-badge',
   meta: {
+    theme:       'light',
     title: 'App Badge — Pulse Docs',
     description: 'App Badge component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/app-badge',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/avatar')
 export default {
   route: '/components/avatar',
   meta: {
+    theme:       'light',
     title: 'Avatar — Pulse Docs',
     description: 'Avatar component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/avatar',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/badge')
 export default {
   route: '/components/badge',
   meta: {
+    theme:       'light',
     title: 'Badge — Pulse Docs',
     description: 'Badge component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/badge',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/breadcrumbs')
 export default {
   route: '/components/breadcrumbs',
   meta: {
+    theme:       'light',
     title: 'Breadcrumbs — Pulse Docs',
     description: 'Accessible breadcrumb navigation component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/breadcrumbs',

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

@@ -9,9 +9,10 @@ const { prev, next } = prevNext('/components/button')
 export default {
   route: '/components/button',
   meta: {
+    theme:       'light',
     title: 'Button — Pulse Docs',
     description: 'Button component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/button',

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

@@ -8,9 +8,10 @@ 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', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/card',

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

@@ -1,7 +1,8 @@
 import { renderComponentPage, demo } from '../../lib/component-page.js'
 import { prevNext } from '../../lib/nav.js'
 import { table } from '../../lib/layout.js'
-import { barChart, lineChart, donutChart, sparkline, stat, card, grid } from '../../../../src/ui/index.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')
 
@@ -28,9 +29,10 @@ const traffic = [
 export default {
   route: '/components/charts',
   meta: {
+    theme:       'light',
     title: 'Charts — Pulse Docs',
     description: 'Server-rendered SVG charts for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/charts',

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

@@ -8,9 +8,10 @@ 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', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/checkbox',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/cluster')
 export default {
   route: '/components/cluster',
   meta: {
+    theme:       'light',
     title: 'Cluster — Pulse Docs',
     description: 'Cluster component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/cluster',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/container')
 export default {
   route: '/components/container',
   meta: {
+    theme:       'light',
     title: 'Container — Pulse Docs',
     description: 'Container component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/container',

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/cta')
 export default {
   route: '/components/cta',
   meta: {
+    theme:       'light',
     title: 'CTA — Pulse Docs',
     description: 'Call-to-action block with eyebrow, heading, body text, and an actions slot.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderComponentPage({

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

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/divider')
 export default {
   route: '/components/divider',
   meta: {
+    theme:       'light',
     title: 'Divider — Pulse Docs',
     description: 'Divider component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/divider',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/empty')
 export default {
   route: '/components/empty',
   meta: {
+    theme:       'light',
     title: 'Empty — Pulse Docs',
     description: 'Empty state component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/empty',