@invisibleloop/pulse 0.20.4 → 0.20.6

package/docs/src/pages/templates/coutumes.js

@@ -1,12 +1,20 @@
 // Recreation of coutumes.com for Pulse capability testing
-// This spec deliberately uses Pulse UI components to document:
-//   - which components cover the design requirements, and
-//   - which new components were needed (marked ★ NEW)
+//
+// component-free — creative override: this editorial fashion recreation relies
+// on several highly custom sections (dual-image blend-mode hero, hover-reveal
+// product cards, 50/50 image pair, large serif brand statement, dismissible
+// announcement bar) that have no generic component equivalent — the former
+// editorialHero/productCard/imagePair/brandStatement/banner components were
+// cut from the library as narrow single-purpose wrappers an agent can
+// hand-roll; this file now hand-rolls them directly with scoped CSS in
+// coutumes.css, using var() tokens throughout. nav(), pullquote() (variant:
+// 'editorial'), grid(), uiImage(), and footer() (rich layout) remain kept
+// components and are unchanged.
 //
 // Substituted fonts: Bebas Neue (→ Plaak 3), Cormorant Garamond (→ Exposure Regular)
 // All photography: placeholder images (originals are proprietary Coutumes photos)
 
-import { nav, banner, editorialHero, pullquote, grid, productCard, imagePair, brandStatement, uiImage, footer, input, button } from '@invisibleloop/pulse/ui'
+import { nav, pullquote, grid, uiImage, footer } from '@invisibleloop/pulse/ui'
 import { asset } from '../../lib/layout.js'
 
 export const spec = {
@@ -30,18 +38,17 @@ export const spec = {
   view: (state) => `
   <main id="main-content">
 
-    <!-- Announcement bar — fixed to bottom, dismissible -->
-    ${state.bannerVisible ? banner({
-      content:      `<span>SILVER LANDS&nbsp;•&nbsp;NEW CAPSULE COLLECTION</span>`,
-      variant:      'promo',
-      position:     'bottom',
-      dismissible:  true,
-      dismissEvent: 'dismissBanner',
-    }) : ''}
-
-    <!-- Navigation — nav() with utility links in action slot
-         GAP: nav has no second link group; utility links (Search, Magazine, FAQ, Cart)
-         are crammed into the action slot as raw HTML rather than a proper utilityLinks param -->
+    <!-- Announcement bar — fixed to bottom, dismissible. Raw HTML: the
+         removed banner() component previously rendered this; the dismiss
+         button still wires to the existing dismissBanner mutation. -->
+    ${state.bannerVisible ? `
+      <div class="coutumes-announce" role="banner">
+        <span>SILVER LANDS&nbsp;•&nbsp;NEW CAPSULE COLLECTION</span>
+        <button class="coutumes-announce-close" data-event="click:dismissBanner" aria-label="Close announcement">×</button>
+      </div>
+    ` : ''}
+
+    <!-- Navigation — nav() supports a second utilityLinks group natively. -->
     ${nav({
       logo: 'COUTUMES',
       logoHref: '/',
@@ -62,23 +69,26 @@ export const spec = {
       color: 'var(--coutumes-black)',
     })}
 
-    <!-- Hero — ★ NEW: editorialHero() — dual split-image with overlapping blend-mode type.
-         The hero() component could not do this: it only supports a single image side.
-         editorialHero accepts leftImage + rightImage + lines array + blend mode. -->
-    ${editorialHero({
-      leftImage:  `<img src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?w=700&q=80" alt="Hand holding a cream hat, wearing a dark ring" width="700" loading="eager" fetchpriority="high">`,
-      rightImage: `<img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=700&q=80" alt="Man leaning against a Land Rover in the countryside" width="700" loading="eager">`,
-      lines:   ['INTRODUCING', 'SILVER LANDS', 'CAPSULE', 'COLLECTION'],
-      heading: 'Silver Lands Capsule Collection',
-      color:   'var(--coutumes-amber)',
-      blend:   'none',
-      ratio:   '3/4',
-      class:   'coutumes-hero',
-    })}
+    <!-- Hero — dual split-image with overlapping blend-mode type. Raw HTML:
+         the removed editorialHero() component previously rendered this
+         mix-blend-mode overlay technique; a real h1 heading element carries
+         the accessible heading while the overlay lines are decorative (aria-hidden). -->
+    <section class="coutumes-hero">
+      <h1 class="coutumes-sr-only">Silver Lands Capsule Collection</h1>
+      <div class="coutumes-hero-images">
+        <div class="coutumes-hero-img">
+          <img src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?w=700&q=80" alt="Hand holding a cream hat, wearing a dark ring" width="700" loading="eager" fetchpriority="high">
+        </div>
+        <div class="coutumes-hero-img">
+          <img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=700&q=80" alt="Man leaning against a Land Rover in the countryside" width="700" loading="eager">
+        </div>
+      </div>
+      <div class="coutumes-hero-text" aria-hidden="true">
+        ${['INTRODUCING', 'SILVER LANDS', 'CAPSULE', 'COLLECTION'].map(l => `<span>${l}</span>`).join('')}
+      </div>
+    </section>
 
-    <!-- Editorial quote — ★ ENHANCED: pullquote() with new variant: 'editorial'
-         Previously pullquote only had a left accent border (wrong for this centred
-         large-serif pattern). New variant='editorial' removes the border and centres. -->
+    <!-- Editorial quote — pullquote() variant='editorial' (centred, no border). -->
     <section id="collection">
       ${pullquote({
         quote:   'Open roads with no precise destination, passing landscapes, a few days spent outside with friends. Pieces designed to travel for a long time.',
@@ -88,9 +98,9 @@ export const spec = {
       })}
     </section>
 
-    <!-- Product grid — grid() + ★ NEW: productCard()
-         photoCard() is polaroid-styled (wrong for fashion e-commerce).
-         productCard() is full-bleed with hover-reveal name overlay. -->
+    <!-- Product grid — raw anchor cards (full-bleed image + below-caption
+         name/price), replacing the removed productCard() component.
+         Laid out with the kept grid() component. -->
     ${grid({
       cols:    3,
       gap:     'sm',
@@ -116,43 +126,45 @@ export const spec = {
           price: '£62.00',
           badge: 'NEW',
         },
-      ].map(p => productCard({
-        src:    p.img,
-        alt:    p.alt,
-        name:   p.name,
-        price:  p.price,
-        badge:  p.badge,
-        ratio:  '4/5',
-        layout: 'below',
-      })).join(''),
+      ].map(p => `
+        <a href="#" class="coutumes-product-card">
+          <img src="${p.img}" alt="${p.alt}" loading="lazy" decoding="async">
+          ${p.badge ? `<span class="coutumes-product-badge">${p.badge}</span>` : ''}
+          <div class="coutumes-product-caption">
+            <p class="coutumes-product-name">${p.name}</p>
+            <p class="coutumes-product-price">${p.price}</p>
+          </div>
+        </a>
+      `).join(''),
       class: 'coutumes-product-grid',
     })}
 
-    <!-- 50/50 split editorial images — ★ NEW: imagePair()
-         media() is image + text. There was no component for two editorial photos
-         side by side with no text. imagePair() fills this gap. -->
-    ${imagePair({
-      leftSrc:    'https://picsum.photos/seed/craft/700/900',
-      leftAlt:    'Craftsman working with tools in a jewelry workshop',
-      rightSrc:   'https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=700&q=80',
-      rightAlt:   'Elegant boutique storefront with warm lighting',
-      ratio:      '3/4',
-      label:      'Craftmanship and boutique',
-      leftLabel:  'Craftmanship',
-      leftHref:   '#craftmanship',
-      rightLabel: 'Store',
-      rightHref:  '#store',
-    })}
-
-    <!-- Large editorial statement — ★ NEW: brandStatement()
-         pullquote() is for shorter attributed quotes (with left border).
-         brandStatement() is for full-width brand-voice paragraphs: large,
-         centred, italic serif. -->
-    ${brandStatement({
-      text: 'pieces that are both eclectic and everyday. Subtly precious, expressive, and refined, our jewelry complements an outfit or disrupts it, introducing new rituals into the modern man&rsquo;s wardrobe.',
-      font: 'serif',
-      size: 'md',
-    })}
+    <!-- 50/50 split editorial images — raw HTML two-column grid, replacing
+         the removed imagePair() component. media() is image + text and
+         is not a fit for this text-free two-photo layout. -->
+    <div class="coutumes-split-images" aria-label="Craftmanship and boutique">
+      <div class="coutumes-split-col">
+        <div class="coutumes-split-img">
+          <img src="https://picsum.photos/seed/craft/700/900" alt="Craftsman working with tools in a jewelry workshop" loading="lazy" decoding="async">
+        </div>
+        <a href="#craftmanship" class="coutumes-split-link">Craftmanship →</a>
+      </div>
+      <div class="coutumes-split-col">
+        <div class="coutumes-split-img">
+          <img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=700&q=80" alt="Elegant boutique storefront with warm lighting" loading="lazy" decoding="async">
+        </div>
+        <a href="#store" class="coutumes-split-link">Store →</a>
+      </div>
+    </div>
+
+    <!-- Large editorial statement — raw HTML, replacing the removed
+         brandStatement() component. pullquote() is for shorter attributed
+         quotes; this is an unattributed full-width brand-voice paragraph. -->
+    <div class="coutumes-statement">
+      <div class="coutumes-statement-inner">
+        <p>pieces that are both eclectic and everyday. Subtly precious, expressive, and refined, our jewelry complements an outfit or disrupts it, introducing new rituals into the modern man&rsquo;s wardrobe.</p>
+      </div>
+    </div>
 
     <!-- Portrait — uiImage() works well here with maxWidth constraint -->
     ${uiImage({
@@ -163,9 +175,8 @@ export const spec = {
       class:    'coutumes-portrait',
     })}
 
-    <!-- Footer — ★ ENHANCED: footer() with new columns + subscribe + wordmark + background params.
-         The simple footer() only had logo + flat links + legal.
-         New rich variant adds multi-column link grid, subscribe form, and giant wordmark. -->
+    <!-- Footer — footer() already supports the rich layout (columns,
+         subscribe, wordmark, background/color) used here; no changes needed. -->
     ${footer({
       background: 'var(--coutumes-amber)',
       color:      'var(--coutumes-black)',

package/docs/src/pages/templates/mobile-app.js

@@ -3,7 +3,9 @@
  *
  * A complete landing page for a mobile app — nav, hero, features,
  * stats, testimonials, pricing, FAQ, CTA, footer.
- * Built entirely from Pulse UI components, zero custom HTML.
+ * Built entirely from Pulse UI components (testimonials and pricing tiers
+ * use card() — the former testimonial()/pricing() components were removed
+ * from the library as narrow single-purpose wrappers).
  */
 
 import { asset } from '../../lib/layout.js'
@@ -16,8 +18,8 @@ import {
   grid,
   feature,
   stat,
-  testimonial,
-  pricing,
+  card,
+  badge,
   accordion,
   cta,
   footer,
@@ -30,6 +32,7 @@ import {
   iconZap,
   iconRefresh,
   iconBarChart,
+  iconStar,
 } from '../../../../src/ui/index.js'
 
 // ── Navigation ────────────────────────────────────────────────────────────────
@@ -164,6 +167,15 @@ const featuresSection = section({
 
 // ── Testimonials ──────────────────────────────────────────────────────────────
 
+// Testimonial card — replaces the removed testimonial() component with card()
+const testimonialCard = ({ quote, name, role, rating }) => card({
+  content: `
+    <div class="u-flex u-gap-1" aria-hidden="true" style="color:var(--ui-accent)">${iconStar({ size: 14 }).repeat(rating)}</div>
+    <p class="u-mt-3" style="font-style:italic">&ldquo;${quote}&rdquo;</p>
+  `,
+  footer: `<p class="u-font-bold">${name}</p><p class="u-text-sm u-text-muted">${role}</p>`,
+})
+
 const testimonialsSection = section({
   id:       'testimonials',
   variant:  'alt',
@@ -175,9 +187,9 @@ const testimonialsSection = section({
       cols: 3,
       gap:  'md',
       content: [
-        testimonial({ quote: 'I\'ve tried every journaling app out there. Lumio is the first one that actually helped me understand why I was feeling burnt out. The AI insights are genuinely useful, not gimmicky.', name: 'Sarah K.',     role: 'Product Designer',     rating: 5 }),
-        testimonial({ quote: 'The streak feature sounds simple but it completely changed my relationship with writing. 112 days in and I haven\'t missed one. My therapist noticed a difference before I did.',            name: 'Marcus T.',    role: 'Software Engineer',    rating: 5 }),
-        testimonial({ quote: 'I was sceptical about the AI part but it\'s surprisingly good at spotting patterns. It told me I write less when I skip my morning run — completely true and now I use it as motivation.', name: 'Priya R.',     role: 'Clinical Psychologist', rating: 5 }),
+        testimonialCard({ quote: 'I\'ve tried every journaling app out there. Lumio is the first one that actually helped me understand why I was feeling burnt out. The AI insights are genuinely useful, not gimmicky.', name: 'Sarah K.',     role: 'Product Designer',     rating: 5 }),
+        testimonialCard({ quote: 'The streak feature sounds simple but it completely changed my relationship with writing. 112 days in and I haven\'t missed one. My therapist noticed a difference before I did.',            name: 'Marcus T.',    role: 'Software Engineer',    rating: 5 }),
+        testimonialCard({ quote: 'I was sceptical about the AI part but it\'s surprisingly good at spotting patterns. It told me I write less when I skip my morning run — completely true and now I use it as motivation.', name: 'Priya R.',     role: 'Clinical Psychologist', rating: 5 }),
       ].map(t => `<div>${t}</div>`).join(''),
     }),
   }),
@@ -185,6 +197,21 @@ const testimonialsSection = section({
 
 // ── Pricing ───────────────────────────────────────────────────────────────────
 
+// Pricing tile — replaces the removed pricing() component with card()
+const pricingCard = ({ name, price, period, description, features, badge: badgeLabel, highlighted, action }) => card({
+  variant: highlighted ? 'elevated' : 'bordered',
+  content: `
+    ${badgeLabel ? badge({ label: badgeLabel }) : ''}
+    <h3 class="u-text-xl u-font-bold u-mt-2">${name}</h3>
+    <p class="u-text-3xl u-font-bold u-mt-2">${price}<span class="u-text-sm u-text-muted">${period}</span></p>
+    <p class="u-text-sm u-text-muted u-mt-2">${description}</p>
+    <ul class="u-mt-4 u-flex u-flex-col u-gap-2">
+      ${features.map(f => `<li>${f}</li>`).join('')}
+    </ul>
+  `,
+  footer: action,
+})
+
 const pricingSection = section({
   id:       'pricing',
   eyebrow:  'Simple pricing',
@@ -197,7 +224,7 @@ const pricingSection = section({
       cols: 3,
       gap:  'md',
       content: [
-        pricing({
+        pricingCard({
           name:        'Free',
           price:       '£0',
           period:      'forever',
@@ -211,7 +238,7 @@ const pricingSection = section({
           ],
           action: button({ label: 'Get started free', href: '#download', variant: 'outline', full: true }),
         }),
-        pricing({
+        pricingCard({
           name:        'Pro',
           price:       '£4.99',
           period:      '/month',
@@ -228,7 +255,7 @@ const pricingSection = section({
           ],
           action: button({ label: 'Start free trial', href: '#download', full: true }),
         }),
-        pricing({
+        pricingCard({
           name:        'Family',
           price:       '£9.99',
           period:      '/month',

package/docs/src/pages/templates/retrowheels.js

@@ -3,7 +3,7 @@
  *
  * Demonstrates:
  *   - Retro/vintage light-theme branding (1970s enamel-sign aesthetic)
- *   - stat(), testimonial(), cta(), card(), badge() layout components
+ *   - stat(), cta(), card(), badge() layout components
  *   - Icon imports: iconMapPin, iconPhone, iconClock, iconSend, iconStar
  *   - Async action with onStart / run / onSuccess / onError lifecycle
  *   - State-driven form (idle → sending → sent) with disabled submit
@@ -11,14 +11,14 @@
  *   - System web fonts (Rockwell + Courier New) — zero extra HTTP requests
  *   - Full-bleed hero with background image + gradient overlay
  *   - Stat strip with inverted navy background
- *   - Drop cap typography for editorial prose section
+ *   - Reviews rendered with card() (quote + name/role + star rating)
  *   - Opening hours list with Courier monospace styling
  *
  * Run: node examples/dev.server.js  →  http://localhost:3001/retrowheels
  */
 
 import {
-  nav, footer, button, input, stat, testimonial, cta, card, badge,
+  nav, footer, button, input, stat, cta, card, badge,
 } from '../../../../src/ui/index.js'
 import { iconMapPin, iconPhone, iconClock, iconSend, iconStar } from '../../../../src/ui/icons.js'
 import { asset } from '../../lib/layout.js'
@@ -120,6 +120,19 @@ const renderHourRow = (h) => `
   </li>
 `
 
+// Review card — replaces the removed testimonial() component with card()
+const renderReview = (r) => card({
+  content: `
+    <div class="rw-review-stars" aria-hidden="true">${iconStar({ size: 14 }).repeat(r.rating || 0)}</div>
+    <p class="rw-review-quote">&ldquo;${r.quote}&rdquo;</p>
+  `,
+  footer: `
+    <p class="rw-review-name">${r.name}</p>
+    <p class="rw-review-role">${r.role}</p>
+  `,
+  class: 'rw-review',
+})
+
 // ---------------------------------------------------------------------------
 // Spec
 // ---------------------------------------------------------------------------
@@ -226,7 +239,7 @@ export default {
           <h2 class="rw-section-title">What folks have been saying.</h2>
           <p class="rw-section-deck">Reviews collected from customers, riders, and the occasional postcard pinned to the workshop wall.</p>
           <div class="rw-service-grid">
-            ${REVIEWS.map(r => testimonial(r)).join('')}
+            ${REVIEWS.map(renderReview).join('')}
           </div>
         </div>
       </section>

package/docs/src/pages/templates/shop.js

@@ -11,16 +11,17 @@
  *   - nav() with a custom cart icon trigger and dialog-open
  *   - modal() basket with a live cart table
  *   - Quantity stepper with min/max constraints
- *   - displayHeading(), badge(), sectionLabel(), stat(), grid()
+ *   - heading(), badge(), stat(), grid()
+ *   - Section eyebrow + rule rendered as raw HTML (replaces removed sectionLabel())
+ *   - Minimal end-of-page metadata footer rendered as raw HTML (replaces removed colophon())
  *   - _toast on mutation success
  *   - Light theme with custom accent override
  */
 
 import {
-  nav, displayHeading, badge, sectionLabel, stat, grid,
+  nav, heading, badge, stat, grid,
   button, modal, empty,
   iconPlus, iconMinus, iconShoppingCart, iconCheck, iconPackage,
-  colophon,
 } from '../../../../src/ui/index.js'
 import { asset } from '../../lib/layout.js'
 
@@ -48,6 +49,15 @@ const cartRows = (items) => items.map(({ name, qty, unitPrice }) => [
   formatPrice(qty * unitPrice),
 ])
 
+// Section eyebrow + heading + rule — replaces the removed sectionLabel() component
+const sectionLabel = ({ eyebrow, heading: headingText }) => `
+  <div class="shop-section-label">
+    <p class="shop-section-label-eyebrow">${eyebrow}</p>
+    ${heading({ text: headingText, level: 2, class: 'shop-section-label-heading' })}
+    <hr class="shop-section-label-rule" aria-hidden="true">
+  </div>
+`
+
 export default {
   route: '/templates/shop',
   meta: {
@@ -121,7 +131,7 @@ export default {
     <main id="main-content">
 
       <div class="page-body product-display">
-        ${displayHeading({ text: 'DevBook Pro 15', level: 1, tracking: 'tight' })}
+        ${heading({ text: 'DevBook Pro 15', level: 1, class: 'product-display-title' })}
         <p class="product-tagline">Premium developer laptop for people who build things.</p>
         <div class="product-meta-row">
           ${badge({ label: 'In Stock', variant: 'success' })}
@@ -216,7 +226,7 @@ export default {
       </div>
 
       <div class="page-body product-specs">
-        ${sectionLabel({ eyebrow: 'Under the hood', heading: 'Full specifications', rule: true })}
+        ${sectionLabel({ eyebrow: 'Under the hood', heading: 'Full specifications' })}
         <div class="spec-grid">
           ${SPECS.map(({ label, value }) => `
             <div class="spec-item">
@@ -228,7 +238,7 @@ export default {
       </div>
 
       <div class="page-body product-stats">
-        ${sectionLabel({ eyebrow: 'At a glance', heading: 'Key numbers', rule: true })}
+        ${sectionLabel({ eyebrow: 'At a glance', heading: 'Key numbers' })}
         <div class="product-stats-grid">
           ${grid({ cols: 3, content:
             stat({ label: 'Battery life', value: '18 hrs', trend: 'up' }) +
@@ -240,10 +250,11 @@ export default {
 
     </main>
 
-    ${colophon({
-      content: `<p>© 2026 Tech Stuff Inc. · <a href="#">Terms</a> · <a href="#">Privacy</a></p>`,
-      align: 'center',
-    })}
+    <footer class="shop-colophon">
+      <div class="shop-colophon-inner">
+        <p>© 2026 Tech Stuff Inc. · <a href="#">Terms</a> · <a href="#">Privacy</a></p>
+      </div>
+    </footer>
   `
   },
 

package/docs/src/pages/templates/sparkys.js

@@ -6,11 +6,15 @@
  * trust signals, testimonial, and contact strip.
  *
  * Vibe: corporate  Theme: light  Palette: navy / amber
+ *
+ * component-free — creative override: the top utility strip, trust list, and
+ * contact strip are small raw-HTML sections (icon+label pairs / a two-column
+ * bar) that replaced the now-removed topStrip/trustList/contactRow components.
+ * Services use the kept card() component instead of the removed serviceCard().
  */
 
 import {
-  nav, button, footer,
-  topStrip, serviceCard, trustList, contactRow,
+  nav, button, footer, card, grid,
   iconZap, iconShield, iconCheck, iconPhone, iconMail, iconHome, iconClock, iconSettings, iconAlertTriangle, iconStar,
 } from '../../../../src/ui/index.js'
 import { asset } from '../../lib/layout.js'
@@ -67,10 +71,13 @@ const why = [
   },
 ]
 
-const service = (s) => serviceCard({
-  icon:        s.icon,
-  title:       s.title,
-  description: s.body,
+const service = (s) => card({
+  content: `
+    <div class="ui-service-card-icon" aria-hidden="true">${s.icon}</div>
+    <h3 class="ui-service-card-title">${s.title}</h3>
+    <p class="ui-service-card-desc">${s.body}</p>
+  `,
+  class: 'service-card',
 })
 
 const whyItem = (w) => `
@@ -106,12 +113,10 @@ export default {
   },
 
   view: () => `
-    ${topStrip({
-      left:       'Mon–Sat 7am–7pm · 24/7 emergency line',
-      right:      `<a href="${PHONE_HREF}">Call ${PHONE}</a>`,
-      background: 'var(--brand-navy-deep)',
-      color:      'var(--brand-white)',
-    })}
+    <div class="top-strip">
+      <div class="top-strip__left">Mon–Sat 7am–7pm · 24/7 emergency line</div>
+      <div class="top-strip__right"><a href="${PHONE_HREF}">Call ${PHONE}</a></div>
+    </div>
 
     ${nav({
       logo:     '<strong class="brand-mark">Sparkys</strong>',
@@ -153,7 +158,14 @@ export default {
             })}
           </div>
           <div class="hero-split__trust">
-            ${trustList({ items: ['Part P registered', 'NICEIC approved', '£10m insured'] })}
+            <ul class="trust-inline">
+              ${['Part P registered', 'NICEIC approved', '£10m insured'].map(t => `
+                <li class="trust-inline__item">
+                  <span class="trust-inline__icon" aria-hidden="true">${iconCheck({ size: 14 })}</span>
+                  <span>${t}</span>
+                </li>
+              `).join('')}
+            </ul>
           </div>
         </div>
         <aside class="hero-split__panel" aria-label="Sparkys at a glance">
@@ -186,9 +198,7 @@ export default {
             <h2 class="section__title">Domestic, commercial and everything in between.</h2>
             <p class="section__subtitle">One local team, certified for every job — so you don't end up juggling three different trades.</p>
           </header>
-          <div class="services">
-            ${services.map(service).join('')}
-          </div>
+          ${grid({ cols: 3, gap: 'md', content: services.map(service).join(''), class: 'services' })}
         </div>
       </section>
 
@@ -222,13 +232,18 @@ export default {
             <p class="contact-strip__lead">Free, no-obligation quotes for homes and businesses across Ashfield, Mansfield and the wider NG postcodes.</p>
           </div>
           <div class="contact-strip__details">
-            ${contactRow({
-              items: [
+            <ul class="contact-inline">
+              ${[
                 { icon: iconPhone({ size: 18 }), label: PHONE,    href: PHONE_HREF },
                 { icon: iconMail({ size: 18 }),  label: EMAIL,    href: `mailto:${EMAIL}` },
                 { icon: iconClock({ size: 18 }), label: 'Mon–Sat 7am–7pm · 24/7 emergencies' },
-              ],
-            })}
+              ].map(({ icon, label, href }) => `
+                <li class="contact-inline__item">
+                  <span class="contact-inline__icon" aria-hidden="true">${icon}</span>
+                  ${href ? `<a href="${href}">${label}</a>` : `<span>${label}</span>`}
+                </li>
+              `).join('')}
+            </ul>
           </div>
         </div>
       </section>

package/examples/.claude/pulse-checklist.md

@@ -31,9 +31,8 @@ Before finishing any spec, verify every point below. Fix anything that fails.
   - Hero sections → `hero({ title, subtitle, actions, image, ... })`
   - Product/service cards → `card({ title, body, image, footer, ... })`
   - Image + text two-column layouts → `media({ image, content, reverse })`
-  - Horizontal strips/banners → `banner({ content, variant })`
   - Feature tiles → `feature({ icon, title, description })`
-  - Testimonials → `testimonial({ quote, name, role, src })`
+  - Testimonials → `card({ content, footer })` with quote + avatar/name in the content slot
   - CTAs → `cta({ title, subtitle, actions })`
   - Navigation → `nav({ logo, links, actions })`
   - Footers → `footer({ logo, links, columns, legal, ... })`

package/examples/examples.test.js

@@ -353,23 +353,23 @@ test('FAQ has entries', () => {
 
 test('pricing: monthly view renders 3 plans', () => {
   const r = renderSync(pricing, { state: { billing: 'monthly' } })
-  assert.equal(r.count('.ui-pricing'), 3)
+  assert.equal(r.count('.pr-plan'), 3)
 })
 
 test('pricing: annual view renders 3 plans', () => {
   const r = renderSync(pricing, { state: { billing: 'annual' } })
-  assert.equal(r.count('.ui-pricing'), 3)
+  assert.equal(r.count('.pr-plan'), 3)
 })
 
 test('pricing: monthly Pro price is £12', () => {
   const r = renderSync(pricing, { state: { billing: 'monthly' } })
-  const prices = r.findAll('.ui-pricing-amount')
+  const prices = r.findAll('.pr-plan-amount')
   assert(prices.some(p => p.text === '£12'), 'monthly Pro should be £12')
 })
 
 test('pricing: annual Pro price is £9', () => {
   const r = renderSync(pricing, { state: { billing: 'annual' } })
-  const prices = r.findAll('.ui-pricing-amount')
+  const prices = r.findAll('.pr-plan-amount')
   assert(prices.some(p => p.text === '£9'), 'annual Pro should be £9')
 })
 

package/examples/pricing.js

@@ -2,7 +2,9 @@
  * Pulse — Pricing page example
  *
  * Demonstrates:
- *   - Landing page components (nav, pricing, accordion, cta, footer)
+ *   - Landing page components (nav, accordion, cta, footer)
+ *   - Pricing tiers rendered with card() — the former pricing() component
+ *     was removed from the library as a narrow single-purpose wrapper
  *   - Billing-period toggle (monthly / annual) via mutation
  *   - Layout components (section, container, stack, cluster, grid)
  *   - No server data — fully static, still gets streaming SSR
@@ -11,11 +13,27 @@
  */
 
 import {
-  nav as uiNav, pricing, accordion, cta, footer as uiFooter,
+  nav as uiNav, card, badge, accordion, cta, footer as uiFooter,
   section as uiSection, container, stack, cluster,
   button, heading,
 } from '../src/ui/index.js'
 
+// Pricing tile — replaces the removed pricing() component with card()
+const pricingCard = ({ name, price, period, description, features, badge: badgeLabel, highlighted, action, level = 2 }) => card({
+  variant: highlighted ? 'elevated' : 'bordered',
+  class:   'pr-plan',
+  content: `
+    ${badgeLabel ? badge({ label: badgeLabel }) : ''}
+    <h${level} class="u-text-xl u-font-bold u-mt-2">${name}</h${level}>
+    <p class="u-text-3xl u-font-bold u-mt-2"><span class="pr-plan-amount">${price}</span><span class="u-text-sm u-text-muted">${period}</span></p>
+    <p class="u-text-sm u-text-muted u-mt-2">${description}</p>
+    <ul class="u-mt-4 u-flex u-flex-col u-gap-2">
+      ${features.map(f => `<li>${f}</li>`).join('')}
+    </ul>
+  `,
+  footer: action,
+})
+
 const PLANS = {
   monthly: [
     {
@@ -181,7 +199,7 @@ export default {
       ${state.billing === 'annual' ? `<p class="pr-annual-note">Annual plans are billed yearly. Prices shown are monthly equivalents.</p>` : ''}
 
       <div class="pr-plans">
-        ${plans.map(p => pricing({ ...p, level: 2 })).join('')}
+        ${plans.map(p => pricingCard({ ...p, level: 2 })).join('')}
       </div>
 
     ` }) }) })}