@invisibleloop/pulse 0.12.3 → 0.14.2

package/src/ui/stat-grid.js

@@ -0,0 +1,40 @@
+/**
+ * Pulse UI — StatGrid
+ *
+ * A grid of stat tiles with optional coloured panel background.
+ * Use when you need multiple stat() tiles arranged together — e.g. a 2×2
+ * "at a glance" panel inside a hero or section.
+ *
+ * Each item is passed directly to stat(). The grid handles layout.
+ *
+ * @param {object}   opts
+ * @param {Array}    opts.stats      - Array of stat() option objects (label, value, change, trend, size, suffix)
+ * @param {number}   opts.columns    - Number of grid columns (default: 2)
+ * @param {string}   opts.background - CSS background value (e.g. 'var(--ui-surface-raised)')
+ * @param {string}   opts.color      - Foreground/text colour override
+ * @param {string}   opts.class
+ */
+
+import { stat }       from './stat.js'
+import { escHtml as e } from '../html.js'
+
+export function statGrid({
+  stats      = [],
+  columns    = 2,
+  background = '',
+  color      = '',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-stat-grid', cls].filter(Boolean).join(' ')
+
+  const styles = [
+    `--stat-cols:${Number(columns) || 2}`,
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const styleAttr = styles ? ` style="${styles}"` : ''
+
+  const tilesHtml = stats.map(s => stat(s)).join('')
+
+  return `<div class="${e(classes)}"${styleAttr}>${tilesHtml}</div>`
+}

package/src/ui/stat.js

@@ -8,6 +8,11 @@
  * @param {string} opts.value   - Formatted value string (e.g. "2.4k", "98%")
  * @param {string} opts.change  - Change label (e.g. "+12%", "−3")
  * @param {'up'|'down'|'neutral'} opts.trend
+ * @param {string} opts.suffix  - Raw HTML slot appended after the value — use for icons, ratings, units
+ * @param {'sm'|'md'|'lg'} opts.size
+ *   - 'sm'  — compact, for dense grids
+ *   - 'md'  — default
+ *   - 'lg'  — hero-scale, for top-of-page KPIs
  * @param {boolean} opts.center - Centre-align all text
  * @param {string} opts.class
  */
@@ -16,6 +21,7 @@ import { escHtml as e } from '../html.js'
 import { iconTrendingUp, iconTrendingDown, iconMinus } from './icons.js'
 
 const TRENDS = new Set(['up', 'down', 'neutral'])
+const SIZES  = new Set(['sm', 'md', 'lg'])
 
 const TREND_ICONS = {
   up:      iconTrendingUp({ size: 13 }),
@@ -30,12 +36,20 @@ export function stat({
   value      = '',
   change     = '',
   trend      = 'neutral',
+  suffix     = '',
+  size       = 'md',
   center     = false,
   class: cls = '',
 } = {}) {
   if (!TRENDS.has(trend)) trend = 'neutral'
+  if (!SIZES.has(size))   size  = 'md'
 
-  const classes = ['ui-stat', center && 'ui-stat--center', cls].filter(Boolean).join(' ')
+  const classes = [
+    'ui-stat',
+    size !== 'md'  ? `ui-stat--${size}` : '',
+    center         ? 'ui-stat--center'  : '',
+    cls,
+  ].filter(Boolean).join(' ')
 
   const changeHtml = change
     ? `<p class="ui-stat-change ui-stat-change--${e(trend)}">
@@ -46,7 +60,7 @@ export function stat({
 
   return `<div class="${e(classes)}">
   <p class="ui-stat-label">${e(label)}</p>
-  <p class="ui-stat-value">${e(value)}</p>
+  <p class="ui-stat-value">${e(value)}${suffix ? `<span class="ui-stat-suffix" aria-hidden="true">${suffix}</span>` : ''}</p>
   ${changeHtml}
 </div>`
 }

package/src/ui/testimonial.js

@@ -4,11 +4,12 @@
  * A customer quote with optional star rating, avatar, and attribution.
  *
  * @param {object} opts
- * @param {string} opts.quote   - The testimonial text
- * @param {string} opts.name    - Author full name
- * @param {string} opts.role    - Author role/company (e.g. "CEO at Acme")
- * @param {string} opts.src     - Avatar image URL; falls back to initials when omitted
- * @param {number} opts.rating  - Star rating 1–5; omit to hide stars
+ * @param {string} opts.quote    - The testimonial text
+ * @param {string} opts.name     - Author full name
+ * @param {string} opts.role     - Author role/company (e.g. "CEO at Acme")
+ * @param {string} opts.src      - Avatar image URL; falls back to initials when omitted
+ * @param {string} opts.initials - Override auto-derived initials (useful for names containing & or unusual characters)
+ * @param {number} opts.rating   - Star rating 1–5; omit to hide stars
  * @param {string} opts.class
  */
 
@@ -19,6 +20,7 @@ export function testimonial({
   name       = '',
   role       = '',
   src        = '',
+  initials:  initialsOverride = '',
   rating     = 0,
   class: cls = '',
 } = {}) {
@@ -28,7 +30,16 @@ export function testimonial({
     ? `<p class="ui-testimonial-rating" aria-label="${Math.round(rating)} out of 5 stars">${'★'.repeat(Math.min(5, Math.max(1, Math.round(rating))))}</p>`
     : ''
 
-  const initials = name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
+  // Filter to letter chars only so names like "Tomás & Ren Okabe" produce "TR" not "T&"
+  const derivedInitials = name
+    .split(/\s+/)
+    .map(w => w.replace(/[^a-zA-ZÀ-ÿ]/g, ''))
+    .filter(Boolean)
+    .map(w => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+  const initials = initialsOverride || derivedInitials
 
   const avatarHtml = src
     ? `<img src="${e(src)}" alt="${e(name)}" class="ui-testimonial-avatar" loading="lazy" width="40" height="40">`

package/src/ui/textarea.js

@@ -42,6 +42,7 @@ export function textarea({
   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/top-strip.js

@@ -0,0 +1,47 @@
+/**
+ * Pulse UI — TopStrip
+ *
+ * A slim utility bar that sits above the nav — phone numbers, trading hours,
+ * social links, or any short announcements. Distinct from banner() which is
+ * for promotional/dismissible messages.
+ *
+ * Two layout modes:
+ *   - left + right slots: `topStrip({ left: '...', right: '...' })`
+ *   - single content: `topStrip({ content: '...' })`
+ *
+ * @param {object}  opts
+ * @param {string}  opts.content    - Single centred content (overrides left/right)
+ * @param {string}  opts.left       - Left-aligned slot
+ * @param {string}  opts.right      - Right-aligned slot
+ * @param {string}  opts.background - CSS background value
+ * @param {string}  opts.color      - Foreground/text colour
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function topStrip({
+  content    = '',
+  left       = '',
+  right      = '',
+  background = '',
+  color      = '',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-top-strip', cls].filter(Boolean).join(' ')
+
+  const styles = [
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const styleAttr = styles ? ` style="${styles}"` : ''
+
+  if (content) {
+    return `<div class="${e(classes)}"${styleAttr}><div class="ui-top-strip-content">${content}</div></div>`
+  }
+
+  return `<div class="${e(classes)}"${styleAttr}>
+  ${left  ? `<div class="ui-top-strip-left">${left}</div>` : ''}
+  ${right ? `<div class="ui-top-strip-right">${right}</div>` : ''}
+</div>`
+}

package/src/ui/trust-list.js

@@ -0,0 +1,46 @@
+/**
+ * Pulse UI — TrustList
+ *
+ * A compact row of trust/compliance badges — "Part P registered · NICEIC · £10m insured".
+ * Each item gets a leading icon (default: check mark). Common on trades, services,
+ * and professional-services sites.
+ *
+ * @param {object}   opts
+ * @param {string[]} opts.items       - List of labels
+ * @param {string}   opts.icon        - Raw HTML slot — icon shown before each item (default: ✓ check SVG)
+ * @param {string}   opts.color       - Icon colour CSS value (default: inherits --ui-accent)
+ * @param {'sm'|'md'} opts.size
+ * @param {string}   opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconCheck } from './icons.js'
+
+const SIZES = new Set(['sm', 'md'])
+
+export function trustList({
+  items      = [],
+  icon       = iconCheck({ size: 14 }),
+  color      = '',
+  size       = 'sm',
+  class: cls = '',
+} = {}) {
+  if (!SIZES.has(size)) size = 'sm'
+
+  const classes = [
+    'ui-trust-list',
+    size !== 'sm' && `ui-trust-list--${size}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const iconStyle = color ? ` style="color:${color.replace(/"/g, "'")}"` : ''
+
+  const itemsHtml = items.map(label =>
+    `<li class="ui-trust-list-item">
+  <span class="ui-trust-list-icon" aria-hidden="true"${iconStyle}>${icon}</span>
+  <span>${e(label)}</span>
+</li>`
+  ).join('')
+
+  return `<ul class="${e(classes)}">${itemsHtml}</ul>`
+}

package/src/ui/ui.test.js

@@ -113,6 +113,17 @@ test('button: renders icon HTML inside element', () => {
   assert.match(html, /<svg\/>/)
 })
 
+test('button: attrs with undefined values are omitted', () => {
+  const html = button({ label: 'Minus', attrs: { disabled: undefined, 'data-count': '3' } })
+  assert.doesNotMatch(html, /disabled="undefined"/)
+  assert.match(html, /data-count="3"/)
+})
+
+test('button: attrs with defined values are rendered', () => {
+  const html = button({ label: 'Add', attrs: { 'data-action': 'add' } })
+  assert.match(html, /data-action="add"/)
+})
+
 // ─── badge ──────────────────────────────────────────────────────────────────
 
 test('badge: renders with default variant', () => {
@@ -656,6 +667,30 @@ test('nav: escapes link labels and hrefs', () => {
   assert.doesNotMatch(html, /<b>X<\/b>/)
 })
 
+test('nav: aria-current="page" on current link', () => {
+  const html = nav({ logo: 'x', links: [
+    { label: 'Home', href: '/', current: true },
+    { label: 'About', href: '/about' },
+  ] })
+  assert.match(html, /aria-current="page"/)
+  // Appears in both desktop and mobile nav — once per nav, so 2 total
+  const matches = html.match(/aria-current="page"/g)
+  assert.ok(matches && matches.length >= 1, 'At least one link should have aria-current')
+  assert.doesNotMatch(html, /href="\/about"[^>]*aria-current/)
+})
+
+test('nav: no aria-current when current not set', () => {
+  const html = nav({ logo: 'x', links: [{ label: 'Home', href: '/' }] })
+  assert.doesNotMatch(html, /aria-current/)
+})
+
+test('nav: aria-current on utility link', () => {
+  const html = nav({ logo: 'x', links: [], utilityLinks: [
+    { label: 'Sign in', href: '/login', current: true },
+  ] })
+  assert.match(html, /aria-current="page"/)
+})
+
 // ─── appBadge ────────────────────────────────────────────────────────────────
 
 test('appBadge: renders apple badge by default', () => {