@invisibleloop/pulse 0.12.3 → 0.14.2

package/src/ui/hero.js

@@ -9,22 +9,26 @@
  * @param {string}  opts.title        - Main headline
  * @param {string}  opts.subtitle     - Supporting text beneath the headline
  * @param {string}  opts.actions      - Raw HTML slot — typically button() or appBadge() calls
- * @param {string}  opts.image        - Raw HTML slot for the image (activates split layout)
+ * @param {string}  opts.image        - Raw HTML slot for the image
  * @param {'right'|'left'} opts.imageAlign - Which side the image sits on (default: 'right')
  * @param {'center'|'left'} opts.align    - Text alignment when no image (default: 'center')
  * @param {'md'|'sm'} opts.size           - Vertical padding: 'md' (default, 5rem) or 'sm' (2.5rem)
+ * @param {'split'|'asymmetric'|'overlap'} opts.layout - Layout when image is provided.
+ *   'split' (default): 50/50 columns.
+ *   'asymmetric': 60/40 text-heavy columns.
+ *   'overlap': image fills the section background, text overlaid with dark gradient.
  * @param {boolean|'purple'|'blue'|'green'|'rose'|'orange'} opts.gradient
- *   Gradient background preset. true/'purple' = deep indigo, 'blue' = navy,
- *   'green' = forest, 'rose' = crimson, 'orange' = amber. (default: false)
- * @param {string}  opts.background    - Arbitrary CSS background value — overrides gradient preset.
- *   Accepts any valid CSS: solid colours ('#1a1a2e'), gradients ('linear-gradient(...)'), etc.
- * @param {string}  opts.eyebrowColor  - Overrides the eyebrow text colour — use when the default accent colour lacks contrast against a custom background
+ * @param {string}  opts.background    - Arbitrary CSS background value — overrides gradient preset
+ * @param {string}  opts.backgroundImage - CSS background-image value (url, gradient, etc) — enables full-bleed mode
+ * @param {boolean|number} opts.overlay - Dark overlay opacity for backgroundImage mode (0–1, or true for 0.4 default)
+ * @param {string}  opts.eyebrowColor  - Overrides eyebrow text colour
  * @param {string}  opts.class
  */
 
 import { escHtml as e } from '../html.js'
 
 const GRADIENT_PRESETS = new Set(['purple', 'blue', 'green', 'rose', 'orange'])
+const LAYOUTS          = new Set(['split', 'asymmetric', 'overlap'])
 
 export function hero({
   eyebrow     = '',
@@ -35,15 +39,20 @@ export function hero({
   imageAlign  = 'right',
   align       = 'center',
   size        = 'md',
+  layout      = 'split',
   gradient     = false,
   background   = '',
+  backgroundImage = '',
+  overlay      = false,
   eyebrowColor = '',
   color        = '',
   class: cls   = '',
 } = {}) {
-  const split = Boolean(image)
+  const hasImage    = Boolean(image)
+  const hasBackgroundImage = Boolean(backgroundImage)
+  const safeLayout  = (hasImage && LAYOUTS.has(layout)) ? layout : 'split'
 
-  // Resolve gradient class — true/'purple' share the base class; others get their own modifier
+  // Resolve gradient class
   const gradientClass = gradient
     ? (gradient === true || gradient === 'purple')
       ? 'ui-hero--gradient'
@@ -52,20 +61,38 @@ export function hero({
 
   const classes = [
     'ui-hero',
-    split ? 'ui-hero--split' : align === 'left' && 'ui-hero--left',
-    split && imageAlign === 'left' && 'ui-hero--media-left',
+    !hasImage && !hasBackgroundImage && align === 'left' && 'ui-hero--left',
+    hasImage && `ui-hero--${safeLayout}`,
+    hasImage && safeLayout !== 'overlap' && imageAlign === 'left' && 'ui-hero--media-left',
+    hasBackgroundImage && 'ui-hero--bg-image',
     size === 'sm' && 'ui-hero--sm',
     gradientClass,
     cls,
   ].filter(Boolean).join(' ')
 
-  // Inline style — strip quotes to prevent attribute injection
-  const styles = [
-    background && `background:${background.replace(/"/g, "'")}`,
-    color      && `color:${color.replace(/"/g, "'")};--ui-muted:${color.replace(/"/g, "'")}`,
-  ].filter(Boolean).join(';')
+  // Build inline styles
+  const styleArr = []
+  if (background) styleArr.push(`background:${background.replace(/"/g, "'")}`)
+  if (backgroundImage) {
+    styleArr.push(`background-image:${backgroundImage.replace(/"/g, "'")}`)
+    styleArr.push(`background-size:cover`)
+    styleArr.push(`background-position:center`)
+    styleArr.push(`position:relative`)
+  }
+  if (color) {
+    styleArr.push(`color:${color.replace(/"/g, "'")}`)
+    styleArr.push(`--ui-muted:${color.replace(/"/g, "'")}`)
+  }
+  
+  const styles = styleArr.join(';')
   const bgStyle = styles ? ` style="${styles}"` : ''
 
+  // Overlay for background-image mode
+  const overlayOpacity = overlay === true ? 0.4 : (typeof overlay === 'number' ? overlay : 0)
+  const overlayHtml = hasBackgroundImage && overlay
+    ? `<div class="ui-hero-overlay" style="position:absolute;inset:0;background:rgba(0,0,0,${overlayOpacity});pointer-events:none;"></div>`
+    : ''
+
   const eyebrowStyle = eyebrowColor ? ` style="color:${eyebrowColor.replace(/"/g, "'")}"` : ''
   const content = `
     ${eyebrow  ? `<p class="ui-hero-eyebrow"${eyebrowStyle}>${e(eyebrow)}</p>` : ''}
@@ -73,18 +100,41 @@ export function hero({
     ${subtitle ? `<p class="ui-hero-subtitle">${e(subtitle)}</p>` : ''}
     ${actions  ? `<div class="ui-hero-actions">${actions}</div>` : ''}`
 
-  if (split) {
+  // Full-bleed background-image mode
+  if (hasBackgroundImage) {
+    return `<section class="${e(classes)}"${bgStyle}>
+  ${overlayHtml}
+  <div class="ui-hero-inner" style="position:relative;z-index:1;">${content}
+  </div>
+</section>`
+  }
+
+  // No image — centered or left-aligned
+  if (!hasImage) {
+    return `<section class="${e(classes)}"${bgStyle}>
+  <div class="ui-hero-inner">${content}
+  </div>
+</section>`
+  }
+
+  // Overlap: image fills the section, text overlaid
+  if (safeLayout === 'overlap') {
     return `<section class="${e(classes)}"${bgStyle}>
+  <div class="ui-hero-overlap-media" aria-hidden="true">${image}</div>
   <div class="ui-hero-inner">
     <div class="ui-hero-content">${content}
     </div>
-    <div class="ui-hero-media">${image}</div>
   </div>
 </section>`
   }
 
+  // Split or asymmetric
   return `<section class="${e(classes)}"${bgStyle}>
-  <div class="ui-hero-inner">${content}
+  <div class="ui-hero-inner">
+    <div class="ui-hero-content">${content}
+    </div>
+    <div class="ui-hero-media">${image}</div>
   </div>
 </section>`
 }
+

package/src/ui/image-pair.js

@@ -0,0 +1,72 @@
+/**
+ * Pulse UI — Image Pair
+ *
+ * Two images side by side — no text. A pure editorial layout used in fashion,
+ * portfolio, and magazine contexts to present photography at full scale.
+ * Both images share the same aspect ratio and fill equal columns.
+ *
+ * For image + text layouts, use the media() component instead.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.leftSrc       - Left image URL
+ * @param {string}  opts.leftAlt       - Left image alt text
+ * @param {string}  opts.rightSrc      - Right image URL
+ * @param {string}  opts.rightAlt      - Right image alt text
+ * @param {string}  opts.ratio         - CSS aspect-ratio for both images (default: '3/4')
+ * @param {'none'|'sm'|'md'} opts.gap  - Gap between images (default: 'none')
+ * @param {string}  opts.label         - Optional aria-label for the section
+ * @param {string}  opts.leftLabel     - Link label below left image (e.g. 'Craftmanship')
+ * @param {string}  opts.leftHref      - href for left link
+ * @param {string}  opts.rightLabel    - Link label below right image (e.g. 'Store')
+ * @param {string}  opts.rightHref     - href for right link
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const GAPS = new Set(['none', 'sm', 'md'])
+
+export function imagePair({
+  leftSrc    = '',
+  leftAlt    = '',
+  rightSrc   = '',
+  rightAlt   = '',
+  ratio      = '3/4',
+  gap        = 'none',
+  label      = '',
+  leftLabel  = '',
+  leftHref   = '#',
+  rightLabel = '',
+  rightHref  = '#',
+  class: cls = '',
+} = {}) {
+  if (!GAPS.has(gap)) gap = 'none'
+
+  const classes = [
+    'ui-image-pair',
+    gap !== 'none' && `ui-image-pair--gap-${gap}`,
+    (leftLabel || rightLabel) && 'ui-image-pair--captioned',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const labelAttr = label ? ` aria-label="${e(label)}"` : ''
+  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
+
+  const leftCaption  = leftLabel  ? `<a href="${e(leftHref)}"  class="ui-image-pair-link">${e(leftLabel)} →</a>`  : ''
+  const rightCaption = rightLabel ? `<a href="${e(rightHref)}" class="ui-image-pair-link">${e(rightLabel)} →</a>` : ''
+
+  return `<div class="${e(classes)}"${labelAttr}>
+  <div class="ui-image-pair-col">
+    <div class="ui-image-pair-crop"${cropStyle}>
+      <img src="${e(leftSrc)}" alt="${e(leftAlt)}" loading="lazy" decoding="async">
+    </div>
+    ${leftCaption}
+  </div>
+  <div class="ui-image-pair-col">
+    <div class="ui-image-pair-crop"${cropStyle}>
+      <img src="${e(rightSrc)}" alt="${e(rightAlt)}" loading="lazy" decoding="async">
+    </div>
+    ${rightCaption}
+  </div>
+</div>`
+}

package/src/ui/index.js

@@ -67,9 +67,29 @@ export { fileUpload }  from './fileupload.js'
 export { breadcrumbs } from './breadcrumbs.js'
 export { stepper }     from './stepper.js'
 export { uiImage }     from './uiimage.js'
+export { gallery }       from './gallery.js'
+export { photoCard }     from './photo-card.js'
+export { productCard }   from './product-card.js'
+export { editorialHero } from './editorial-hero.js'
+export { imagePair }     from './image-pair.js'
+export { brandStatement } from './brand-statement.js'
+export { marquee }     from './marquee.js'
+export { serviceCard } from './service-card.js'
+export { contactRow }  from './contact-row.js'
+export { trustList }   from './trust-list.js'
+export { topStrip }    from './top-strip.js'
+export { statGrid }    from './stat-grid.js'
+export { decorate }    from './decorate.js'
 export { pullquote }   from './pullquote.js'
 export { prose }       from './prose.js'
 export { heading }     from './heading.js'
+
+// Editorial components
+export { entryList }      from './entry-list.js'
+export { displayHeading } from './display-heading.js'
+export { sectionLabel }   from './section-label.js'
+export { dropCap }        from './drop-cap.js'
+export { colophon }       from './colophon.js'
 export { list }        from './list.js'
 export {
   iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowDown,

package/src/ui/input.js

@@ -43,6 +43,7 @@ export function input({
   const wrapClasses = ['ui-field', error ? 'ui-field--error' : '', cls].filter(Boolean).join(' ')
 
   const attrsStr = Object.entries(attrs)
+    .filter(([, v]) => v !== undefined)
     .map(([k, v]) => ` ${e(k)}="${e(String(v))}"`)
     .join('')
 

package/src/ui/marquee.js

@@ -0,0 +1,48 @@
+/**
+ * Pulse UI — Marquee
+ *
+ * CSS-only infinite scrolling strip. Ideal for logo clouds, trust badges,
+ * press mentions, or tag lists. No JavaScript — pure CSS animation.
+ *
+ * @param {object}  opts
+ * @param {string[]} opts.items    - Array of raw HTML strings (logos, badges, text)
+ * @param {number}  opts.speed     - Duration in seconds for one full loop (default: 30)
+ * @param {'sm'|'md'|'lg'} opts.gap - Gap between items (default: 'lg')
+ * @param {'left'|'right'} opts.direction - Scroll direction (default: 'left')
+ * @param {boolean} opts.pause     - Pause animation on hover (default: true)
+ * @param {boolean} opts.fade      - Fade edges with gradient mask (default: true)
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const GAPS = new Set(['sm', 'md', 'lg'])
+
+export function marquee({
+  items     = [],
+  speed     = 30,
+  gap       = 'lg',
+  direction = 'left',
+  pause     = true,
+  fade      = true,
+  class: cls = '',
+} = {}) {
+  if (!GAPS.has(gap)) gap = 'lg'
+  const safeSpeed = Math.max(5, parseFloat(speed) || 30)
+  const dir       = direction === 'right' ? 'reverse' : 'normal'
+
+  const classes = [
+    'ui-marquee',
+    gap !== 'lg' && `ui-marquee--gap-${gap}`,
+    pause       && 'ui-marquee--pause',
+    fade        && 'ui-marquee--fade',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  // Items are duplicated so the loop is seamless
+  const itemsHtml = items.map(item => `<li class="ui-marquee-item">${item}</li>`).join('')
+
+  return `<div class="${e(classes)}" style="--marquee-speed:${safeSpeed}s;--marquee-dir:${dir}" aria-hidden="true">
+  <ul class="ui-marquee-track">${itemsHtml}${itemsHtml}</ul>
+</div>`
+}

package/src/ui/nav.js

@@ -20,7 +20,8 @@
  * @param {object}  opts
  * @param {string}  opts.logo       - Raw HTML slot — SVG, img, or text
  * @param {string}  opts.logoHref   - Logo link destination (default: '/')
- * @param {Array<{label:string, href?:string, mega?:Array}>} opts.links
+ * @param {Array<{label:string, href?:string, current?:boolean, mega?:Array}>} opts.links
+ * @param {Array<{label:string, href?:string}>} opts.utilityLinks - Secondary links pushed to the far right
  * @param {string}  opts.action     - Raw HTML slot — typically a button()
  * @param {boolean} opts.sticky     - Position sticky with backdrop blur
  * @param {'right'|'left'} opts.burgerAlign - Mobile burger position (default: 'right')
@@ -63,7 +64,8 @@ function renderLink(link, navId, idx) {
     ${megaPanel(link.mega, panelId)}
   </div>`
   }
-  return `<a href="${e(link.href || '')}" class="ui-nav-link">${e(link.label || '')}</a>`
+  const current = link.current ? ' aria-current="page"' : ''
+  return `<a href="${e(link.href || '')}" class="ui-nav-link"${current}>${e(link.label || '')}</a>`
 }
 
 function renderMobileLink(link) {
@@ -71,13 +73,15 @@ function renderMobileLink(link) {
     const items = link.mega.flatMap(col => col.items || [])
     return `<p class="ui-nav-mobile-section">${e(link.label || '')}</p>` + items.map(item => megaItem(item)).join('')
   }
-  return `<a href="${e(link.href || '')}" class="ui-nav-link">${e(link.label || '')}</a>`
+  const current = link.current ? ' aria-current="page"' : ''
+  return `<a href="${e(link.href || '')}" class="ui-nav-link"${current}>${e(link.label || '')}</a>`
 }
 
 export function nav({
   logo          = '',
   logoHref      = '/',
   links         = [],
+  utilityLinks  = [],
   action        = '',
   sticky        = false,
   burgerAlign   = 'right',
@@ -89,29 +93,35 @@ export function nav({
   const classes = ['ui-nav', sticky && 'ui-nav--sticky', burgerAlign === 'left' && 'ui-nav--burger-left', cls].filter(Boolean).join(' ')
   const styles  = [
     background && `background:${background.replace(/"/g, "'")}`,
-    color      && `color:${color.replace(/"/g, "'")};--ui-muted:${color.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")};--ui-text:${color.replace(/"/g, "'")};--ui-muted:${color.replace(/"/g, "'")}`,
   ].filter(Boolean).join(';')
   const bgStyle = styles ? ` style="${styles}"` : ''
 
   const linksHtml       = links.map((l, i) => renderLink(l, id, i)).join('')
-  const mobileLinksHtml = links.map(renderMobileLink).join('')
+  const utilityHtml     = utilityLinks.map(l => `<a href="${e(l.href || '')}" class="ui-nav-link"${l.current ? ' aria-current="page"' : ''}>${e(l.label || '')}</a>`).join('')
+  const mobileLinksHtml = [...links, ...utilityLinks].map(renderMobileLink).join('')
 
-  const burgerHtml = links.length ? `
+  const burgerHtml = (links.length || utilityLinks.length) ? `
   <button class="ui-nav-burger" type="button" aria-label="Toggle menu" aria-expanded="false" aria-controls="${id}-mobile">
     ${iconMenu({ size: 20, class: 'ui-nav-burger-open' })}
     ${iconX({ size: 20, class: 'ui-nav-burger-close' })}
   </button>` : ''
 
-  const mobileMenuHtml = links.length ? `
+  const mobileMenuHtml = (links.length || utilityLinks.length) ? `
   <div class="ui-nav-mobile" id="${id}-mobile" aria-label="Mobile navigation">
     <nav>${mobileLinksHtml}</nav>
   </div>` : ''
 
+  const navContent = [
+    links.length        && `<nav class="ui-nav-links" aria-label="Site navigation">${linksHtml}</nav>`,
+    utilityLinks.length && `<nav class="ui-nav-links ui-nav-utility" aria-label="Utility navigation">${utilityHtml}</nav>`,
+    action              && `<div class="ui-nav-action">${action}</div>`,
+  ].filter(Boolean).join('')
+
   return `<header class="${e(classes)}"${bgStyle}>
   <div class="ui-nav-inner">
     <a href="${e(logoHref)}" class="ui-nav-logo">${logo}</a>
-    ${links.length ? `<nav class="ui-nav-links" aria-label="Site navigation">${linksHtml}</nav>` : ''}
-    ${action ? `<div class="ui-nav-action">${action}</div>` : ''}${burgerHtml}
+    ${navContent}${burgerHtml}
   </div>${mobileMenuHtml}
 </header>`
 }

package/src/ui/photo-card.js

@@ -0,0 +1,44 @@
+/**
+ * Pulse UI — PhotoCard
+ *
+ * Polaroid-style photo card with optional caption and CSS tilt.
+ * Ideal for "meet the team", testimonial portraits, or lifestyle photography.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.src      - Image source URL
+ * @param {string}  opts.alt      - Alt text
+ * @param {string}  opts.caption  - Caption text below the photo
+ * @param {number}  opts.tilt     - CSS rotate degrees, e.g. 2 or -1.5. 0 = no tilt (default)
+ * @param {boolean} opts.rounded  - Adds corner radius to the image (default: false = square crop)
+ * @param {string}  opts.ratio    - CSS aspect-ratio for the image crop (default: '4/3')
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function photoCard({
+  src     = '',
+  alt     = '',
+  caption = '',
+  tilt    = 0,
+  rounded = false,
+  ratio   = '4/3',
+  class: cls = '',
+} = {}) {
+  const safeTilt = parseFloat(tilt) || 0
+  const classes  = [
+    'ui-photo-card',
+    rounded && 'ui-photo-card--rounded',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const tiltStyle = safeTilt ? ` style="--photo-tilt:${safeTilt}deg"` : ''
+  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
+
+  return `<figure class="${e(classes)}"${tiltStyle}>
+  <div class="ui-photo-card-crop"${cropStyle}>
+    <img src="${e(src)}" alt="${e(alt)}" class="ui-photo-card-img" loading="lazy" decoding="async">
+  </div>
+  ${caption ? `<figcaption class="ui-photo-card-caption">${e(caption)}</figcaption>` : ''}
+</figure>`
+}

package/src/ui/product-card.js

@@ -0,0 +1,65 @@
+/**
+ * Pulse UI — Product Card
+ *
+ * Full-bleed editorial product card — the image IS the card. The product
+ * name (and optional price) overlays at the bottom on hover. Designed for
+ * fashion/e-commerce grids where photography is the primary communication.
+ *
+ * Unlike photoCard (polaroid frame + caption always visible), this card is
+ * frameless: the image fills 100% of the card, and metadata is revealed on
+ * hover via a gradient overlay.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.src          - Image source URL
+ * @param {string}  opts.alt          - Alt text
+ * @param {string}  opts.name         - Product name
+ * @param {string}  opts.price        - Optional price string
+ * @param {string}  opts.href         - Link destination (default: '#')
+ * @param {string}  opts.badge        - Short badge text ("NEW", "SALE", "−20%")
+ * @param {'left'|'right'} opts.badgeAlign - Badge corner (default: 'left')
+ * @param {string}  opts.ratio        - CSS aspect-ratio (default: '4/5')
+ * @param {'overlay'|'below'} opts.layout - 'overlay' (hover reveal) or 'below' (caption under image)
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function productCard({
+  src        = '',
+  alt        = '',
+  name       = '',
+  price      = '',
+  href       = '#',
+  badge      = '',
+  badgeAlign = 'left',
+  ratio      = '4/5',
+  layout     = 'overlay',
+  class: cls = '',
+} = {}) {
+  const classes = [
+    'ui-product-card',
+    badgeAlign === 'right' && 'ui-product-card--badge-right',
+    layout === 'below' && 'ui-product-card--below',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
+
+  const namePrice = name ? (layout === 'below'
+    ? `<div class="ui-product-card-caption">
+    <p class="ui-product-card-name">${e(name)}</p>
+    ${price ? `<p class="ui-product-card-price">${e(price)}</p>` : ''}
+  </div>`
+    : `<div class="ui-product-card-overlay" aria-hidden="true">
+    <p class="ui-product-card-name">${e(name)}</p>
+    ${price ? `<p class="ui-product-card-price">${e(price)}</p>` : ''}
+  </div>`) : ''
+
+  return `<a href="${e(href)}" class="${e(classes)}">
+  <div class="ui-product-card-crop"${cropStyle}>
+    <img src="${e(src)}" alt="${e(alt)}" class="ui-product-card-img" loading="lazy" decoding="async">
+  </div>
+  ${badge ? `<span class="ui-product-card-badge">${e(badge)}</span>` : ''}
+  ${namePrice}
+</a>`
+}

package/src/ui/pullquote.js

@@ -1,12 +1,18 @@
 /**
  * Pulse UI — Pullquote
  *
- * Styled blockquote with accent left border and optional attribution.
+ * Styled blockquote with optional attribution.
+ *
+ * Two variants:
+ *  - Default: left accent border — for inline editorial quotes in prose or sidebars
+ *  - 'editorial': centred large italic serif, no border — for brand voice statements
+ *    in fashion, luxury, or magazine contexts
  *
  * @param {object} opts
  * @param {string} opts.quote  - The quote text
  * @param {string} opts.cite   - Attribution (name, role, etc.)
  * @param {'md'|'lg'} opts.size - Size variant (default: 'md')
+ * @param {'default'|'editorial'} opts.variant - Visual style (default: 'default')
  * @param {string} opts.class
  */
 
@@ -16,10 +22,15 @@ export function pullquote({
   quote      = '',
   cite       = '',
   size       = 'md',
+  variant    = 'default',
   class: cls = '',
 } = {}) {
-  const sizeClass   = size === 'lg' ? 'ui-pullquote--lg' : ''
-  const figClasses  = ['ui-pullquote', sizeClass, cls].filter(Boolean).join(' ')
+  const figClasses  = [
+    'ui-pullquote',
+    size === 'lg'           && 'ui-pullquote--lg',
+    variant === 'editorial' && 'ui-pullquote--editorial',
+    cls,
+  ].filter(Boolean).join(' ')
 
   const citeHtml = cite
     ? `<figcaption class="ui-pullquote-cite">${e(cite)}</figcaption>`

package/src/ui/search.js

@@ -48,6 +48,7 @@ export function search({
     : ''
 
   const attrsStr = Object.entries(attrs)
+    .filter(([, v]) => v !== undefined)
     .map(([k, v]) => ` ${e(k)}="${e(String(v))}"`)
     .join('')
 

package/src/ui/section-label.js

@@ -0,0 +1,38 @@
+/**
+ * Pulse UI — Section Label
+ *
+ * Eyebrow + heading + horizontal rule. The editorial equivalent of feature().
+ * For: chapter openings, section dividers, content blocks.
+ *
+ * @param {object} opts
+ * @param {string} opts.eyebrow - Small label above heading
+ * @param {string} opts.heading - Main heading text
+ * @param {number} opts.level - Heading level 1–6 (default 2)
+ * @param {boolean} opts.rule - Show horizontal rule after heading (default true)
+ * @param {'left'|'center'} opts.align - Text alignment (default 'left')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function sectionLabel({
+  eyebrow    = '',
+  heading    = '',
+  level      = 2,
+  rule       = true,
+  align      = 'left',
+  class: cls = '',
+} = {}) {
+  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
+  const classes = [
+    'ui-section-label',
+    align === 'center' && 'ui-section-label--center',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  return `<div class="${e(classes)}">
+  ${eyebrow ? `<p class="ui-section-label-eyebrow">${e(eyebrow)}</p>` : ''}
+  ${heading ? `<${tag} class="ui-section-label-heading">${e(heading)}</${tag}>` : ''}
+  ${rule ? '<hr class="ui-section-label-rule" aria-hidden="true">' : ''}
+</div>`
+}

package/src/ui/section.js

@@ -21,7 +21,7 @@
 
 import { escHtml as e } from '../html.js'
 
-const VARIANTS = new Set(['default', 'alt', 'dark'])
+const VARIANTS = new Set(['default', 'alt', 'dark', 'diagonal', 'paper', 'spotlight'])
 const PADDINGS = new Set(['sm', 'md', 'lg'])
 const GAPS     = new Set(['none', 'sm', 'md', 'lg'])
 

package/src/ui/service-card.js

@@ -0,0 +1,47 @@
+/**
+ * Pulse UI — ServiceCard
+ *
+ * A bordered, left-aligned tile with icon, title, and description.
+ * The most common pattern for trades/services grids — an unboxed, centred
+ * feature() is the wrong tool for these; serviceCard() is built for it.
+ *
+ * Use inside a grid() or css grid for multi-column layouts.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.icon        - Raw HTML slot — SVG icon displayed in an accent-tinted box
+ * @param {string}  opts.title
+ * @param {number}  opts.level       - Heading level 1–6 (default 3)
+ * @param {string}  opts.description
+ * @param {string}  opts.href        - When set, wraps the card in an <a> making it fully clickable
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function serviceCard({
+  icon        = '',
+  title       = '',
+  level       = 3,
+  description = '',
+  href        = '',
+  class: cls  = '',
+} = {}) {
+  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
+  const linked = Boolean(href)
+  const classes = [
+    'ui-service-card',
+    linked && 'ui-service-card--linked',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const inner = `
+  ${icon        ? `<div class="ui-service-card-icon" aria-hidden="true">${icon}</div>` : ''}
+  ${title       ? `<${tag} class="ui-service-card-title">${e(title)}</${tag}>` : ''}
+  ${description ? `<p class="ui-service-card-desc">${e(description)}</p>` : ''}
+`
+
+  if (linked) {
+    return `<a href="${e(href)}" class="${e(classes)}">${inner}</a>`
+  }
+  return `<div class="${e(classes)}">${inner}</div>`
+}