@gemboss/website-ui 0.8.0 → 0.10.0

package/js/website.js

@@ -1,11 +1,12 @@
-/*! @gemboss/website-ui 0.8.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.10.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.8.0';
+var version = '0.10.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var still, lights;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -377,12 +378,57 @@ function folds(ctx) {
   });
 }
 
+var TRAIL = 0.18, SETTLE = 0.3, HEADING = /^H[1-6]$/;
+function spot(ctx) {
+  if (lights) each(ctx, '[data-gw-spot]', 'spot', function (el) {
+    var sel = attr(el, 'data-gw-spot', ''), t = el;
+    if (sel) { try { t = el.querySelector(sel); } catch (e) { t = null; } }
+    if (!t || HEADING.test(t.tagName) || HEADING.test(el.tagName)) return;
+    var had = t.classList.contains('gw-spot'), x = 0, y = 0, px = 0, py = 0, raf = 0, heard = false;
+    function put(nx, ny) {
+      x = nx; y = ny;
+      t.style.setProperty('--gw-spot-x', x.toFixed(1) + 'px');
+      t.style.setProperty('--gw-spot-y', y.toFixed(1) + 'px');
+    }
+    function note(e) { if (e.pointerType === 'touch') return false; px = e.clientX; py = e.clientY; return true; }
+    function aim() { var b = t.getBoundingClientRect(); return [px - b.left - (t.clientLeft || 0), py - b.top - (t.clientTop || 0)]; }
+    function step() {
+      var a = aim(), nx = x + (a[0] - x) * TRAIL, ny = y + (a[1] - y) * TRAIL, done = Math.abs(a[0] - nx) < SETTLE && Math.abs(a[1] - ny) < SETTLE;
+      if (done) put(a[0], a[1]); else put(nx, ny);
+      raf = done ? 0 : requestAnimationFrame(step);
+    }
+    function halt() { cancelAnimationFrame(raf); raf = 0; }
+    function enter(e) { if (note(e)) { halt(); put.apply(null, aim()); } }
+    function move(e) { if (note(e) && !raf) raf = requestAnimationFrame(step); }
+    function listen(want) {
+      if (want === heard) return;
+      heard = want;
+      [['pointerenter', enter], ['pointermove', move]].forEach(function (l) {
+        if (want) el.addEventListener(l[0], l[1]); else el.removeEventListener(l[0], l[1]);
+      });
+      if (!want) halt();
+    }
+    var r = {
+      fit: function () { listen(fine.matches && !still.matches); },
+      stop: function () {
+        listen(false);
+        if (!had) t.classList.remove('gw-spot');
+        t.style.removeProperty('--gw-spot-x');
+        t.style.removeProperty('--gw-spot-y');
+      }
+    };
+    t.classList.add('gw-spot');
+    r.fit();
+    return r;
+  });
+}
+
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
-  mid = mq('(min-width: 768px)');
+  mid = mq('(min-width: 621px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
@@ -390,6 +436,10 @@ function install() {
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
+  still = mq('(prefers-reduced-motion: reduce)');
+  var css = window.CSS;
+  lights = !!(css && css.registerProperty && css.supports && css.supports('color', 'color-mix(in srgb, red 50%, blue)'));
+  [fine, still].forEach(function (m) { watch(m, function () { records('spot', function (r) { r.fit(); }); }); });
   on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
   try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
   if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
@@ -414,7 +464,7 @@ function init(ctx) {
   window.gwWebsite = api;
   if (!doc) run([install]);
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds, spot], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/js/website.mjs

@@ -6,10 +6,11 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.8.0';
+var version = '0.10.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
 var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var still, lights;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -424,11 +425,11 @@ function tables(ctx) {
   });
 }
 
-// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Below 768px it keeps
-// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 768px it is a
+// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Up to 620px it keeps
+// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 621px it is a
 // plain column: the script sets `open`, takes the <summary> out of the Tab order (tabindex="-1") and ignores a click on
 // it, so the heading cannot fold the list away. Again on every change of width; destroy gives back the markup's state.
-// The CSS shows the list from 768px without the script too (::details-content), so this is for state and for browsers
+// The CSS shows the list from 621px without the script too (::details-content), so this is for state and for browsers
 // without that.
 function folds(ctx) {
   each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
@@ -445,6 +446,63 @@ function folds(ctx) {
   });
 }
 
+// Spotlight (0.9.0, issue #74): data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them. A
+// light in the accent follows the pointer over it (css/effects.css draws it). The element that carries the light, the
+// host or the first one its data-gw-spot="<selector>" names inside it (never a heading), gets .gw-spot and the
+// pointer's place on it, in px from its padding box, as --gw-spot-x and --gw-spot-y. The light trails the pointer: on
+// each frame it goes TRAIL of the way that is left (one requestAnimationFrame loop per element, stopped once it is
+// within SETTLE px), and it starts where the pointer comes in, never sliding in from the middle. A move only notes
+// where the pointer is; the element is measured once a frame, in the loop. The two listeners are there only on a fine
+// pointer and without reduced motion (where the CSS keeps the light still, in the middle), again on every change of
+// either. Nothing is wired without @property and color-mix() (lights), so nothing is drawn. TRAIL and SETTLE are
+// system.json's motion.spot.trail and .settle (the tests hold them equal). No event.
+var TRAIL = 0.18, SETTLE = 0.3, HEADING = /^H[1-6]$/;
+function spot(ctx) {
+  if (lights) each(ctx, '[data-gw-spot]', 'spot', function (el) {
+    var sel = attr(el, 'data-gw-spot', ''), t = el;
+    if (sel) { try { t = el.querySelector(sel); } catch (e) { t = null; } }
+    if (!t || HEADING.test(t.tagName) || HEADING.test(el.tagName)) return;
+    var had = t.classList.contains('gw-spot'), x = 0, y = 0, px = 0, py = 0, raf = 0, heard = false;
+    function put(nx, ny) {
+      x = nx; y = ny;
+      t.style.setProperty('--gw-spot-x', x.toFixed(1) + 'px');
+      t.style.setProperty('--gw-spot-y', y.toFixed(1) + 'px');
+    }
+    // where the pointer is (a mouse or a pen; never a finger)
+    function note(e) { if (e.pointerType === 'touch') return false; px = e.clientX; py = e.clientY; return true; }
+    // the pointer's place on the element that carries the light, measured now
+    function aim() { var b = t.getBoundingClientRect(); return [px - b.left - (t.clientLeft || 0), py - b.top - (t.clientTop || 0)]; }
+    function step() {
+      var a = aim(), nx = x + (a[0] - x) * TRAIL, ny = y + (a[1] - y) * TRAIL, done = Math.abs(a[0] - nx) < SETTLE && Math.abs(a[1] - ny) < SETTLE;
+      if (done) put(a[0], a[1]); else put(nx, ny);
+      raf = done ? 0 : requestAnimationFrame(step);
+    }
+    function halt() { cancelAnimationFrame(raf); raf = 0; }
+    function enter(e) { if (note(e)) { halt(); put.apply(null, aim()); } }
+    function move(e) { if (note(e) && !raf) raf = requestAnimationFrame(step); }
+    function listen(want) {
+      if (want === heard) return;
+      heard = want;
+      [['pointerenter', enter], ['pointermove', move]].forEach(function (l) {
+        if (want) el.addEventListener(l[0], l[1]); else el.removeEventListener(l[0], l[1]);
+      });
+      if (!want) halt();
+    }
+    var r = {
+      fit: function () { listen(fine.matches && !still.matches); },
+      stop: function () {
+        listen(false);
+        if (!had) t.classList.remove('gw-spot');
+        t.style.removeProperty('--gw-spot-x');
+        t.style.removeProperty('--gw-spot-y');
+      }
+    };
+    t.classList.add('gw-spot');
+    r.fit();
+    return r;
+  });
+}
+
 // Once per page: what belongs to the document, the window or a media query rather than to one element.
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
@@ -452,8 +510,8 @@ function install() {
   var stored = null;
   // 1080px, the kit's desktop width: the header shows its nav, the contents sit beside the article
   wide = mq('(min-width: 1080px)');
-  // 768px: the footer's columns stand open from here, and fold below it
-  mid = mq('(min-width: 768px)');
+  // 621px: the footer's columns stand open from here, and fold up to 620px, as on gemboss.ai (1:1, 26/10/2026)
+  mid = mq('(min-width: 621px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
@@ -462,6 +520,11 @@ function install() {
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
+  // the spotlight: a fine pointer, motion welcome, and a browser that can draw the light (@property, color-mix)
+  still = mq('(prefers-reduced-motion: reduce)');
+  var css = window.CSS;
+  lights = !!(css && css.registerProperty && css.supports && css.supports('color', 'color-mix(in srgb, red 50%, blue)'));
+  [fine, still].forEach(function (m) { watch(m, function () { records('spot', function (r) { r.fit(); }); }); });
   on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
   try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
   if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
@@ -492,7 +555,7 @@ function init(ctx) {
   if (!doc) run([install]);
   // an element removed from the page since the last init is let go
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds, spot], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",

package/skill/SKILL.md

@@ -32,6 +32,8 @@ the kit and its rules are how the page ends up looking designed. Compose from th
      uses its drill-down mobile menu (`data-gw-menu="drill"`, a head with Back and the title in each group); a site in
      more than one language keeps its language switcher (`.gw-lang`, `hidden`, empty) and gives every page its
      `<link rel="alternate" hreflang>`: the switcher lists those, and stays hidden on a page in one language.
+   - Spotlight (`data-gw-spot`): only on a link, a button or a card with exactly one action (a plan, a link card, the
+     mega menu's feature card, a night band's primary button). Never on a heading or text; the kit draws it.
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.

package/system.json

@@ -8,7 +8,7 @@
       "surface": "#ffffff",
       "ink": "#1b1c1e",
       "ink-2": "#3b3d42",
-      "muted": "#686b71",
+      "muted": "#6a6d73",
       "line": "#e5e7ea",
       "line-strong": "#d5d8dd",
       "line-control": "#85888e",
@@ -89,14 +89,14 @@
   "type": {
     "family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
     "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    "weights": [400, 500, 600, 650, 700],
+    "weights": [400, 500, 600, 650, 700, 800],
     "scale": [11, 12, 13, 14, 16, 18, 20, 22, 24, 30],
     "display_above": 30,
     "display": {
       "h1": "clamp(40px, 4.6vw, 68px)",
       "h2": "clamp(32px, 3.4vw, 52px)",
       "wordmark": "clamp(40px, 9vw, 128px)",
-      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading.",
+      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading. Weight 800 (0.10.0, as gemboss.ai draws it): the one use of 800 in the kit.",
       "weight": 600,
       "tracking": "-0.03em"
     },
@@ -154,6 +154,18 @@
     "ease": "cubic-bezier(.22,1,.36,1)",
     "reveal_ms": 700,
     "spin_ms": 700,
-    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis)."
+    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis). One exception, the spotlight (spot): its light is one painted layer of one element, so its radius may grow.",
+    "spot": {
+      "$comment": "The spotlight (0.9.0, Chris 25/10/2026, issue #74): data-gw-spot on a link, a button or a card with one action. A light in the accent follows a fine pointer: each frame it goes trail of the way that is left, and stops within settle px. Its radius grows to radius in ms with ease; its middle is strength percent of the accent over the element's own fill. A .gw-btn takes radius_action and strength_action (a small, filled thing), the night ground of the mega menu's feature card (the Stage) strength_stage. Under reduced motion it stands still, centred, and does not grow.",
+      "radius": 260,
+      "radius_action": 120,
+      "strength": 22,
+      "strength_action": 38,
+      "strength_stage": 40,
+      "ms": 550,
+      "ease": "cubic-bezier(.16,1,.3,1)",
+      "trail": 0.18,
+      "settle": 0.3
+    }
   }
 }

package/templates/footer.html

@@ -2,8 +2,8 @@
   Footer: one per site, the same on every page, built from this template (AGENTS.md: brands fill its rows, they never
   invent a footer part). It is the footer of gemboss.ai (0.7.0). In order:
     1. the brand block: logo, one sentence; OPTIONAL the Ask AI row; OPTIONAL the newsletter form (0.6.0)
-    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (below 768px), open
-       columns from 768px. Headings one or two words in sentence case, four to seven links each.
+    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (up to 620px), open
+       columns from 621px. Headings one or two words in sentence case, four to seven links each.
     3. OPTIONAL product-family rows: a label and two to eight products, name and one line each; repeat the <nav> for a
        second family
     4. the bottom row: copyright, legal links, OPTIONAL theme toggle, social links. Nothing else.
@@ -11,14 +11,15 @@
   Replace every [bracketed] placeholder and delete the optional parts you do not use. website.js wires the folds and
   the toggle; without it the footer still works (the browser folds the <details> by itself).
 
-  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true"></span> (a drawn ↗). A link with
+  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true">↗</span> (the glyph, set muted, as
+  gemboss.ai writes it; an empty span draws it instead). A link with
   target="_blank" also carries <span class="gw-visually-hidden"> (opens in a new tab)</span>; a link without it does not.
 -->
 <footer class="gw-footer">
   <div class="gw-wrap">
     <div class="gw-footer__grid">
       <div class="gw-footer__brand">
-        <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+        <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>
         <p>[One sentence on what the brand does for the reader.]</p>
         <!-- OPTIONAL Ask AI: each link opens an assistant with the same neutral question already typed, URL-encoded after
              ?q= (spaces as %20). Ask what the brand is and what it does for the reader, never a leading question. Words,
@@ -89,7 +90,7 @@
             <li><a href="[/blog]">[Blog]</a></li>
             <li><a href="[/docs]">[Docs]</a></li>
             <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog]<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog] <span class="gw-footer__ext" aria-hidden="true">↗</span></a></li>
           </ul>
         </details>
       </nav>
@@ -114,8 +115,8 @@
         <ul>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
         </ul>
       </details>
     </nav>
@@ -126,7 +127,7 @@
         <li><a href="[/terms]">Terms</a></li>
       </ul>
       <!-- OPTIONAL theme toggle: the header's toggle, here instead of (or as well as) in the header -->
-      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg class="gw-theme-toggle__moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 12.8A8 8 0 1111.2 3a6 6 0 009.8 9.8z"/></svg><svg class="gw-theme-toggle__sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg></button>
       <ul aria-label="Social">
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
@@ -134,7 +135,8 @@
     </div>
     <!-- OPTIONAL wordmark: decoration (aria-hidden="true", the name is already in the brand block). The mark is an
          inline SVG drawn in currentColor, so it takes the faint colour; an <img> cannot, so leave the mark out and keep
-         the name. Not shown on phones. -->
+         the name. Not shown up to 620px. The mark is 7vw wide; give the <svg> width and height attributes for its
+         shape (gemboss.ai's gem: width="86" height="100"). -->
     <div class="gw-footer__wordmark" aria-hidden="true">
       <svg viewBox="[0 0 width height]">[the brand's mark, every fill and stroke "currentColor"]</svg>
       <span>[Brand]</span>