@conduction/docusaurus-preset 3.32.0 → 3.33.0

package/MISSING_COMPONENTS.md

@@ -61,9 +61,9 @@ Most consume one or more primitives.
 - **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
 - **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip).
 - **BuildMock** — `BuildMock/BuildMock.jsx`. Looping "make it yours" animation: the orange OpenBuild edit FAB is pressed, a component palette opens, and a widget is dragged into the page layout where it snaps in (~8s loop). `prefers-reduced-motion` / `running={false}` renders the static end state (component placed).
-- **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it, and the column counts nudge (~7s loop). `prefers-reduced-motion` / `running={false}` renders the static board.
+- **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it flush into the column's card slot, and at the drop the column counts nudge (3→2, 2→3) and the per-lane € KPI tiles above the board shift the moved deal's value (~7s loop, clean reset). `prefers-reduced-motion` / `running={false}` renders the static board with the initial counts and totals.
 - **ExternalAppShelf** — `ExternalAppShelf/ExternalAppShelf.jsx`. Third-party-app shelf (Outlook-style, Mattermost, Keycloak, etc.) used on `/connext`. Specimen: `preview/components/external-app-shelf.html`.
-- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
+- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); loop duration derives from the widget count (6s per card, min 30s; `speed` overrides), with pause/play + prev/next controls (cobalt ghost, hidden under reduced motion). Widgets without an explicit `panel` get a deterministic auto-generated mini panel (KPI tile / bar chart / list rows / donut, hashed from the title). `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
 - **Showcase** — `Showcase/Showcase.jsx`. Multi-item collapsible showcase with screenshot + body. Used on `/commonground` for the "5-lagen model". Specimen: `preview/components/showcase.html`.
 - **RotatingCards** — `RotatingCards/RotatingCards.jsx`. Rotating card carousel. Specimen: `preview/components/rotating-cards.html`.
 - **FAQ / FAQItem** — `FAQ/FAQ.jsx`. Disclosure-pattern FAQ block. Used on `/support`. Specimen: `preview/components/faq.html`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/KanbanMock/KanbanMock.jsx

@@ -4,8 +4,11 @@
  * Token-built abstract of the pipelinq kanban board with a looping
  * drag animation: a cursor picks up the top lead card in the first
  * column (the card lifts), drags it to the second column, drops it,
- * and the column counts nudge (3→2, 2→3). Loops every ~7 seconds.
- * Pipelinq's hero/panel illustration.
+ * and at the drop moment the column counts nudge (3→2, 2→3) and the
+ * per-lane € KPI tiles above the board shift the moved deal's value
+ * (€ 48k→€ 30k, € 27k→€ 45k; the third lane stays € 64k). Loops
+ * every ~7 seconds and resets cleanly at loop start. Pipelinq's
+ * hero/panel illustration.
  *
  * Named KanbanMock rather than PipelineMock because the preset
  * already ships a `Pipeline` component (the hex-numbered process
@@ -48,8 +51,8 @@ function CardGreek({wide, dot}) {
 
 function Count({from, to}) {
   /* Two stacked digits crossfading on the shared timeline: `from`
-     shows until the drop (~55%), `to` after it, back again for the
-     next loop. Static renderings show `from`. */
+     shows until the drop settles (54%), `to` after it, back again for
+     the next loop. Static renderings show `from`. */
   return (
     <span className={styles.count}>
       <span className={styles.countBefore}>{from}</span>
@@ -58,6 +61,28 @@ function Count({from, to}) {
   );
 }
 
+function Kpi({from, to}) {
+  /* Small € tile above a lane. Reuses the count crossfade classes so
+     the value swaps at the same drop moment as the column counts and
+     shows `from` in static renderings. A `to` of undefined renders a
+     lane whose total never changes. */
+  return (
+    <div className={styles.kpi}>
+      <span className={styles.kpiBar} />
+      <span className={styles.kpiValue}>
+        {to != null ? (
+          <>
+            <span className={styles.countBefore}>{from}</span>
+            <span className={styles.countAfter}>{to}</span>
+          </>
+        ) : (
+          <span className={styles.kpiStill}>{from}</span>
+        )}
+      </span>
+    </div>
+  );
+}
+
 export default function KanbanMock({size = 'md', caption, running = true, className}) {
   return (
     <div className={styles.km}>
@@ -65,9 +90,14 @@ export default function KanbanMock({size = 'md', caption, running = true, classN
         <div
           className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}
           role="img"
-          aria-label="Abstract kanban board: a lead card is dragged from the first column to the second and the column counts update."
+          aria-label="Abstract kanban board: a lead card is dragged from the first column to the second; the column counts and the lane value totals update at the drop."
         >
           <div className={styles.board}>
+            <div className={styles.kpis}>
+              <Kpi from="€ 48k" to="€ 30k" />
+              <Kpi from="€ 27k" to="€ 45k" />
+              <Kpi from="€ 64k" />
+            </div>
             <div className={styles.col}>
               <div className={styles.colHead}>
                 <span className={styles.colBar} />

package/src/components/KanbanMock/KanbanMock.module.css

@@ -5,17 +5,32 @@
  *
  * One shared timeline (--km-dur, default 7s):
  *
- *   0–12%   cursor travels to the top card in column 1
+ *   0–10%   cursor travels to the top card in column 1
  *   14%     the card lifts (scale + deeper shadow)
  *   16–50%  card + cursor drag to column 2's top slot
- *   52–55%  drop; the column counts crossfade (3→2, 2→3)
- *   55–86%  hold
- *   86–100% card fades back to its origin, counts revert, loop
+ *   50–54%  the card settles into the slot
+ *   54–56%  the column counts (3→2, 2→3) and the lane € KPIs
+ *           (€ 48k→€ 30k, € 27k→€ 45k) crossfade — right at the drop
+ *   56–86%  hold
+ *   86–100% card fades back to its origin, counts + KPIs revert, loop
+ *
+ * Geometry: the mover is absolutely positioned over the board, so its
+ * keyframe coordinates must equal the top card slot of columns 1 and
+ * 2. Those slots mix %-sized board chrome with px-sized column chrome,
+ * so the coordinates are calc() custom properties (--km-x1, --km-x2,
+ * --km-y, --km-card-w) derived below rather than by-eye percentages —
+ * that keeps the landing exact at every frame width. Derivation:
+ *   board padding 6%/5% of frame width W; column gap 4% of the 90%
+ *   content box = 3.6%W; columns (90% − 7.2%)/3 = 27.6%W;
+ *   col chrome = 1px border + 10px padding = 11px;
+ *   vertical: 6%W top pad = 9.6% of the 16/10 frame height, + KPI row
+ *   34px + 12px row gap + col chrome 11px + head 16px + head margin
+ *   2px + col gap 8px = 83px.
  *
  * prefers-reduced-motion (and .static from running={false}) renders
  * the static board: no cursor, no animation, the card resting in its
- * origin column, original counts. Tokens only; the mover's status
- * dot (mint) is the only non-neutral accent; no orange.
+ * origin column, original counts and KPI values. Tokens only; the
+ * mover's status dot (mint) is the only non-neutral accent; no orange.
  */
 
 .km { display: contents; }
@@ -31,6 +46,11 @@
 
 .km .frame {
   --km-dur: 7s;
+  /* Card-slot geometry (see the derivation in the header comment). */
+  --km-x1: calc(5% + 11px);
+  --km-x2: calc(36.2% + 11px);
+  --km-y: calc(9.6% + 83px);
+  --km-card-w: calc(27.6% - 22px);
   width: 100%;
   max-width: 720px;
   aspect-ratio: 16 / 10;
@@ -62,8 +82,71 @@
   padding: 6% 5%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+  /* Fixed 12px row gap (part of the mover's --km-y derivation);
+     percentage column gap so lanes track the frame width. */
+  gap: 12px 4%;
+}
+
+/* ---- KPI row above the lanes ---- */
+
+.km .kpis {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* Same content box as the board, so 4% aligns tiles with lanes. */
   gap: 4%;
+  min-width: 0;
+}
+
+.km .kpi {
+  box-sizing: border-box;
+  height: 34px; /* fixed: part of the mover's --km-y derivation */
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-1);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+.km .kpiBar {
+  display: block;
+  width: 26%;
+  height: 4px;
+  border-radius: 1px;
+  background: var(--c-cobalt-300);
+  flex-shrink: 0;
+}
+.km .kpiValue {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 38px;
+  height: 14px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+/* The crossfading value spans reuse .countBefore/.countAfter (same
+   timeline, same static overrides) but sit right-aligned in the tile
+   instead of filling a pill. */
+.km .kpiValue .countBefore,
+.km .kpiValue .countAfter {
+  inset: auto;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
 }
+/* A lane total that never changes (third lane). */
+.km .kpiStill { display: inline-flex; align-items: center; }
 
 .km .col {
   background: var(--c-cobalt-50);
@@ -124,6 +207,9 @@
 
 .km .card,
 .km .mover {
+  /* Explicit border-box: --km-card-w describes the full card box, and
+     not every consumer of this file ships a global box-sizing reset. */
+  box-sizing: border-box;
   background: white;
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
@@ -134,9 +220,10 @@
   gap: 5px;
 }
 
-/* The gap where the travelling card lives at rest. Sized like a card
-   so the column layout doesn't jump. */
-.km .slotGap { height: 44px; flex-shrink: 0; }
+/* The gap where the travelling card lives at rest. Exactly the
+   mover's height (2px border + 16px padding + 23px content) so the
+   card sits flush in the slot when it lands. */
+.km .slotGap { height: 41px; flex-shrink: 0; }
 
 .km .cardTop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
 .km .cardBar  { display: block; height: 4px; border-radius: 1px; background: var(--c-cobalt-700); }
@@ -153,24 +240,26 @@
 
 .km .mover {
   position: absolute;
-  /* Origin: column 1's top slot (board padding 6%/5%, col padding,
-     head row). Kept in sync with .slotGap by eye — it's a mock. */
-  left: 7.4%;
-  top: 21%;
-  width: 24.5%;
+  /* Origin: column 1's top slot. Exact calc() geometry — see the
+     header comment — so the card sits flush in the slot at rest and
+     when it lands, at every frame width. The lift is a transform so
+     left/top always mean "the slot". */
+  left: var(--km-x1);
+  top: var(--km-y);
+  width: var(--km-card-w);
   animation: kmMove var(--km-dur) linear infinite;
   z-index: 2;
 }
 
 @keyframes kmMove {
-  0%, 10% { left: 7.4%;  top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  14%     { left: 7.4%;  top: 19.5%; transform: scale(1.05); box-shadow: var(--shadow-3); opacity: 1; }
-  50%     { left: 39.2%; top: 19.5%; transform: scale(1.05); box-shadow: var(--shadow-3); opacity: 1; }
-  54%     { left: 39.2%; top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  86%     { left: 39.2%; top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  92%     { left: 39.2%; top: 21%; opacity: 0; }
-  96%     { left: 7.4%;  top: 21%; opacity: 0; }
-  100%    { left: 7.4%;  top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
+  0%, 10% { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  14%     { left: var(--km-x1); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  50%     { left: var(--km-x2); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  54%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  86%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  92%     { left: var(--km-x2); top: var(--km-y); opacity: 0; }
+  96%     { left: var(--km-x1); top: var(--km-y); opacity: 0; }
+  100%    { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
 }
 
 /* ---- Cursor ---- */
@@ -191,23 +280,26 @@
 
 @keyframes kmCursor {
   0%      { left: 60%; top: 60%; }
-  10%     { left: 17%; top: 26%; }  /* over the card */
-  14%     { left: 17%; top: 24.5%; }
-  50%     { left: 48.8%; top: 24.5%; } /* drag with the card */
-  54%     { left: 48.8%; top: 26%; }
+  10%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 18px); }  /* over the card */
+  14%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 15px); }
+  50%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 15px); }  /* drag with the card */
+  54%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 18px); }
   64%     { left: 60%; top: 60%; }  /* release, drift away */
   100%    { left: 60%; top: 60%; }
 }
 
 /* ---- Count crossfade ---- */
 
+/* Counts and KPI values swap the moment the card settles: the drop
+   ends at 54%, the crossfade runs 54–56%. They revert while the card
+   fades back to its origin (86–96%). */
 @keyframes kmCountBefore {
-  0%, 53%   { opacity: 1; }
+  0%, 54%   { opacity: 1; }
   56%, 88%  { opacity: 0; }
   93%, 100% { opacity: 1; }
 }
 @keyframes kmCountAfter {
-  0%, 53%   { opacity: 0; }
+  0%, 54%   { opacity: 0; }
   56%, 88%  { opacity: 1; }
   93%, 100% { opacity: 0; }
 }

package/src/components/KanbanMock/__tests__/KanbanMock.render.test.js

@@ -0,0 +1,114 @@
+/**
+ * KanbanMock.render.test.js — renders the real <KanbanMock> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: the KPI row above the lanes with its
+ * before/after € values, the column counts, and the static mode.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AiDisclosure.render.test.js / scripts/build-kit.mjs. CSS modules
+ * are stubbed with an identity proxy (styles.foo → 'foo'), so class
+ * assertions read as the source class names.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'KanbanMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-kanban-mock-test');
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let KanbanMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  KanbanMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(KanbanMock, props));
+}
+
+test('SSR smoke: renders the board with three lanes and the travelling card', () => {
+  const html = render({});
+  assert.equal((html.match(/class="col"/g) || []).length, 3);
+  assert.match(html, /class="mover"/);
+});
+
+test('KPI row: one € tile per lane, before/after values on the two lanes the deal moves between', () => {
+  const html = render({});
+  assert.match(html, /class="kpis"/);
+  assert.equal((html.match(/class="kpi"/g) || []).length, 3);
+  // Source lane loses the €18k deal, target lane gains it.
+  assert.match(html, /class="countBefore">€ 48k</);
+  assert.match(html, /class="countAfter">€ 30k</);
+  assert.match(html, /class="countBefore">€ 27k</);
+  assert.match(html, /class="countAfter">€ 45k</);
+  // Third lane never changes: a still value, no crossfade spans.
+  assert.match(html, /class="kpiStill">€ 64k</);
+});
+
+test('KPI arithmetic: the moved deal value leaving lane 1 equals the value entering lane 2', () => {
+  const html = render({});
+  const nums = [...html.matchAll(/class="count(Before|After)">€ (\d+)k</g)].map((m) => Number(m[2]));
+  assert.equal(nums.length, 4, 'expected two crossfading € tiles (2 values each)');
+  // Order in markup: lane1 before, lane1 after, lane2 before, lane2 after.
+  const [l1From, l1To, l2From, l2To] = nums;
+  assert.equal(l1From - l1To, l2To - l2From, 'the deal value must shift lanes, not appear or vanish');
+  assert.ok(l1From - l1To > 0, 'source lane must decrement');
+});
+
+test('column counts: source lane 3→2, target lane 2→3, third lane static 4', () => {
+  const html = render({});
+  assert.match(html, /class="count"><span class="countBefore">3<\/span><span class="countAfter">2<\/span>/);
+  assert.match(html, /class="count"><span class="countBefore">2<\/span><span class="countAfter">3<\/span>/);
+  assert.match(html, /class="countStatic">4</);
+});
+
+test('aria-label names the counts and lane totals updating at the drop', () => {
+  const html = render({});
+  assert.match(html, /aria-label="[^"]*column counts and the lane value totals update at the drop[^"]*"/);
+});
+
+test('running={false} renders the static frame class', () => {
+  const html = render({running: false});
+  assert.match(html, /class="frame size-md static"/);
+});

package/src/components/WidgetShelf/WidgetShelf.jsx

@@ -37,14 +37,187 @@
  * viewport. Each card has the panel (preview) at the top, title +
  * description below.
  *
+ * Widgets without an explicit `panel` get an auto-generated mini
+ * panel: the title is hashed into one of four token-built archetypes
+ * (KPI tile, mini bar chart, list rows, donut gauge) with a
+ * deterministically chosen accent family, so long carousels look
+ * alive without hand-built mocks. An explicit `panel` always wins.
+ * Same abstraction level as <AppMock>: greeked bars, no real words.
+ *
+ * Controls: the carousel renders a pause/play toggle and prev/next
+ * buttons (cobalt ghost styling). Prev/next nudge the track by one
+ * card with a smooth ease; auto-scroll resumes afterwards unless
+ * paused. Server-side and before hydration the track runs on the
+ * pure-CSS marquee; after mount a rAF loop drives the same transform
+ * so the buttons can steer it. Under reduced motion the controls are
+ * hidden along with the marquee.
+ *
  * Props (beyond eyebrow/title/lede/widgets/columns/className):
  *   - carousel: boolean (default true) — false renders the static grid
- *   - speed:    number — seconds per full carousel loop (default 45)
+ *   - speed:    number — seconds per full carousel loop. Default is
+ *               derived from the widget count (6s per card, min 30s)
+ *               so the per-card reading pace stays constant no matter
+ *               how many widgets a page declares.
  */
 
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import styles from './WidgetShelf.module.css';
 
+/* Seconds each card takes to traverse its own width — the per-card
+   reading pace. A 15-widget shelf loops in 90s, a 30-widget one in
+   180s; both feel identical to the reader. */
+const SECONDS_PER_CARD = 6;
+const MIN_LOOP_SECONDS = 30;
+const NUDGE_MS = 450;
+
+/* Accent families available to auto-generated panels — exactly the
+   hex-family policy roster from tokens.css: lavender, mint, forest,
+   terracotta, plus workspaceblue. Coral (KNVB orange) and gold are
+   reserved (one orange per component — the shelf's eyebrow already
+   spends it; gold is the Certified mark only). */
+const AUTO_FAMILIES = ['mint', 'lavender', 'forest', 'terracotta', 'workspaceblue'];
+
+/* djb2-xor string hash with a murmur3-style finalizer — stable across
+   renders and platforms, so the same title always draws the same
+   panel. The finalizer avalanches the bits: without it, titles that
+   differ only in their last character ("Lead 1" / "Lead 2") land in
+   the same accent family because the family picker discards low bits. */
+function hashString(str) {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++) {
+    h = (Math.imul(h, 33) ^ str.charCodeAt(i)) >>> 0;
+  }
+  h ^= h >>> 16;
+  h = Math.imul(h, 0x85ebca6b) >>> 0;
+  h ^= h >>> 13;
+  h = Math.imul(h, 0xc2b2ae35) >>> 0;
+  h ^= h >>> 16;
+  return h >>> 0;
+}
+
+/**
+ * Auto-generated mini panel for widgets without an explicit `panel`.
+ * Deterministic: archetype and accent family both derive from the
+ * hash of the seed (the widget title). Token-built, greeked, no
+ * words — the card below already shows the real title.
+ */
+function AutoPanel({seed}) {
+  const h = hashString(seed);
+  const family = AUTO_FAMILIES[(h >>> 4) % AUTO_FAMILIES.length];
+  const vars = {
+    '--wsa': `var(--c-${family}-500)`,
+    '--wsa-soft': `var(--c-${family}-300)`,
+  };
+  const kind = h % 4;
+
+  if (kind === 0) {
+    /* KPI number tile. */
+    const value = 12 + (h % 88);
+    const trendW = 32 + ((h >>> 8) % 40);
+    return (
+      <div className={[styles.auto, styles.autoKpi].join(' ')} style={vars} aria-hidden="true">
+        <span className={styles.autoHex} />
+        <span className={styles.autoKpiValue}>{value}</span>
+        <span className={styles.autoKpiBar} style={{width: `${trendW}%`}} />
+      </div>
+    );
+  }
+
+  if (kind === 1) {
+    /* Mini bar chart. */
+    const hi = (h >>> 8) % 6;
+    return (
+      <div className={[styles.auto, styles.autoBars].join(' ')} style={vars} aria-hidden="true">
+        {Array.from({length: 6}, (_, i) => {
+          const height = Math.round(30 + (((h >>> (i * 4)) & 15) / 15) * 65);
+          return (
+            <span
+              key={i}
+              className={[styles.autoBar, i === hi && styles.autoBarHi].filter(Boolean).join(' ')}
+              style={{height: `${height}%`}}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (kind === 2) {
+    /* List rows. */
+    const hot = (h >>> 8) % 3;
+    return (
+      <div className={[styles.auto, styles.autoList].join(' ')} style={vars} aria-hidden="true">
+        {Array.from({length: 3}, (_, i) => {
+          const w = Math.round(34 + (((h >>> (i * 5)) & 31) / 31) * 30);
+          return (
+            <span key={i} className={styles.autoRow}>
+              <span className={[styles.autoDot, i === hot && styles.autoDotHi].filter(Boolean).join(' ')} />
+              <span className={styles.autoRowBars}>
+                <span className={styles.autoRowBar} style={{width: `${w}%`}} />
+                <span className={styles.autoRowLine} />
+              </span>
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+
+  /* Donut gauge. Circumference of r=15.9155 is 100, so the dasharray
+     reads directly as a percentage. */
+  const pct = 34 + ((h >>> 6) % 52);
+  return (
+    <div className={[styles.auto, styles.autoDonut].join(' ')} style={vars} aria-hidden="true">
+      <svg viewBox="0 0 42 42" className={styles.autoRing} aria-hidden="true" focusable="false">
+        <circle cx="21" cy="21" r="15.9155" className={styles.autoRingTrack} />
+        <circle
+          cx="21"
+          cy="21"
+          r="15.9155"
+          className={styles.autoRingFill}
+          strokeDasharray={`${pct} ${100 - pct}`}
+          strokeDashoffset="25"
+        />
+      </svg>
+      <span className={styles.autoDonutBars}>
+        <span className={styles.autoRowBar} style={{width: '64%'}} />
+        <span className={styles.autoRowLine} />
+      </span>
+    </div>
+  );
+}
+
+function ControlIcon({kind}) {
+  if (kind === 'prev') {
+    return (
+      <svg viewBox="0 0 24 24" className={styles.chev} aria-hidden="true" focusable="false">
+        <path d="M15 4l-8 8 8 8" />
+      </svg>
+    );
+  }
+  if (kind === 'next') {
+    return (
+      <svg viewBox="0 0 24 24" className={styles.chev} aria-hidden="true" focusable="false">
+        <path d="M9 4l8 8-8 8" />
+      </svg>
+    );
+  }
+  if (kind === 'pause') {
+    return (
+      <svg viewBox="0 0 24 24" className={styles.glyph} aria-hidden="true" focusable="false">
+        <rect x="6" y="4" width="4" height="16" rx="1" />
+        <rect x="14" y="4" width="4" height="16" rx="1" />
+      </svg>
+    );
+  }
+  /* play */
+  return (
+    <svg viewBox="0 0 24 24" className={styles.glyph} aria-hidden="true" focusable="false">
+      <path d="M8 4.5l12 7.5-12 7.5z" />
+    </svg>
+  );
+}
+
 export default function WidgetShelf({
   eyebrow,
   title,
@@ -52,17 +225,114 @@ export default function WidgetShelf({
   widgets = [],
   columns,
   carousel = true,
-  speed = 45,
+  speed,
   className,
 }) {
   const cols = columns || (widgets.length >= 4 ? 3 : Math.min(widgets.length, 3));
-  const cards = widgets.map((w, i) => (
+  const loopSeconds = speed != null ? speed : Math.max(MIN_LOOP_SECONDS, widgets.length * SECONDS_PER_CARD);
+
+  const [paused, setPaused] = useState(false);
+  const pausedRef = useRef(false);
+  const viewportRef = useRef(null);
+  const trackRef = useRef(null);
+  const groupRef = useRef(null);
+  /* Marquee state lives in a ref: the rAF loop writes the transform
+     directly, so no React re-render per frame. */
+  const marquee = useRef({offset: 0, groupW: 0, step: 0, hover: false, nudge: null});
+
+  useEffect(() => {
+    pausedRef.current = paused;
+  }, [paused]);
+
+  useEffect(() => {
+    if (!carousel || widgets.length === 0) return undefined;
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
+    /* Reduced motion: the CSS already collapses the carousel to the
+       static grid and hides the controls; nothing to drive. */
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return undefined;
+
+    const viewport = viewportRef.current;
+    const track = trackRef.current;
+    const group = groupRef.current;
+    if (!viewport || !track || !group) return undefined;
+
+    const m = marquee.current;
+    const measure = () => {
+      /* offsetWidth includes the trailing padding-right gap, so it is
+         exactly the seamless-loop period. */
+      m.groupW = group.offsetWidth;
+      const cards = group.children;
+      m.step = cards.length > 1 ? cards[1].offsetLeft - cards[0].offsetLeft : group.offsetWidth;
+    };
+    measure();
+
+    /* Take over from the pure-CSS marquee (which covers SSR/no-JS). */
+    track.classList.add(styles.jsDriven);
+
+    const onEnter = () => { m.hover = true; };
+    const onLeave = () => { m.hover = false; };
+    viewport.addEventListener('mouseenter', onEnter);
+    viewport.addEventListener('mouseleave', onLeave);
+    viewport.addEventListener('focusin', onEnter);
+    viewport.addEventListener('focusout', onLeave);
+
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
+    if (ro) ro.observe(group);
+
+    let raf = 0;
+    let last = performance.now();
+    const frame = (now) => {
+      const dt = Math.min((now - last) / 1000, 0.1);
+      last = now;
+      if (m.nudge) {
+        const t = Math.min((now - m.nudge.start) / m.nudge.dur, 1);
+        /* ease-in-out cubic */
+        const e = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+        m.offset = m.nudge.from + (m.nudge.to - m.nudge.from) * e;
+        if (t >= 1) m.nudge = null;
+      } else if (!pausedRef.current && !m.hover) {
+        m.offset += (m.groupW / loopSeconds) * dt;
+      }
+      if (m.groupW > 0) {
+        /* Content repeats every groupW px, so wrapping is invisible. */
+        m.offset = ((m.offset % m.groupW) + m.groupW) % m.groupW;
+      }
+      track.style.transform = `translate3d(${-m.offset}px, 0, 0)`;
+      raf = window.requestAnimationFrame(frame);
+    };
+    raf = window.requestAnimationFrame(frame);
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+      if (ro) ro.disconnect();
+      viewport.removeEventListener('mouseenter', onEnter);
+      viewport.removeEventListener('mouseleave', onLeave);
+      viewport.removeEventListener('focusin', onEnter);
+      viewport.removeEventListener('focusout', onLeave);
+      track.classList.remove(styles.jsDriven);
+      track.style.transform = '';
+      m.nudge = null;
+    };
+  }, [carousel, widgets.length, loopSeconds]);
+
+  const nudge = (dir) => {
+    const m = marquee.current;
+    if (!m.step) return;
+    /* Rapid clicks accumulate: continue from the pending target. */
+    const base = m.nudge ? m.nudge.to : m.offset;
+    m.nudge = {from: m.offset, to: base + dir * m.step, start: performance.now(), dur: NUDGE_MS};
+  };
+
+  const renderCard = (w, i) => (
     <article key={i} className={styles.card}>
-      <div className={styles.panel}>{w.panel}</div>
+      <div className={styles.panel}>
+        {w.panel || <AutoPanel seed={w.title ? String(w.title) : `widget-${i}`} />}
+      </div>
       {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
       {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
     </article>
-  ));
+  );
+
   return (
     <section className={[styles.shelf, carousel && styles.carousel, className].filter(Boolean).join(' ')}>
       {(eyebrow || title || lede) && (
@@ -73,32 +343,55 @@ export default function WidgetShelf({
         </header>
       )}
       {carousel ? (
-        <div className={styles.viewport}>
-          <div
-            className={styles.track}
-            style={{'--ws-speed': `${speed}s`}}
-          >
-            <div className={[styles.group, styles[`cols-${cols}`]].join(' ')}>
-              {cards}
-            </div>
-            {/* Seamless-loop duplicate. Hidden from assistive tech so
-                each widget is announced once; under reduced motion the
-                CSS removes it entirely and the first group becomes the
-                static grid. */}
-            <div className={[styles.group, styles.dup].join(' ')} aria-hidden="true">
-              {widgets.map((w, i) => (
-                <article key={i} className={styles.card}>
-                  <div className={styles.panel}>{w.panel}</div>
-                  {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
-                  {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
-                </article>
-              ))}
+        <>
+          <div className={styles.viewport} ref={viewportRef}>
+            <div
+              className={styles.track}
+              ref={trackRef}
+              style={{'--ws-speed': `${loopSeconds}s`}}
+            >
+              <div className={[styles.group, styles[`cols-${cols}`]].join(' ')} ref={groupRef}>
+                {widgets.map(renderCard)}
+              </div>
+              {/* Seamless-loop duplicate. Hidden from assistive tech so
+                  each widget is announced once; under reduced motion the
+                  CSS removes it entirely and the first group becomes the
+                  static grid. */}
+              <div className={[styles.group, styles.dup].join(' ')} aria-hidden="true">
+                {widgets.map(renderCard)}
+              </div>
             </div>
           </div>
-        </div>
+          <div className={styles.controls}>
+            <button
+              type="button"
+              className={styles.ctrl}
+              aria-label="Previous widgets"
+              onClick={() => nudge(-1)}
+            >
+              <ControlIcon kind="prev" />
+            </button>
+            <button
+              type="button"
+              className={styles.ctrl}
+              aria-label={paused ? 'Play' : 'Pause'}
+              onClick={() => setPaused((p) => !p)}
+            >
+              <ControlIcon kind={paused ? 'play' : 'pause'} />
+            </button>
+            <button
+              type="button"
+              className={styles.ctrl}
+              aria-label="Next widgets"
+              onClick={() => nudge(1)}
+            >
+              <ControlIcon kind="next" />
+            </button>
+          </div>
+        </>
       ) : (
         <div className={[styles.grid, styles[`cols-${cols}`]].join(' ')}>
-          {cards}
+          {widgets.map(renderCard)}
         </div>
       )}
     </section>

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -7,6 +7,17 @@
  * duplicated for a seamless loop, paused on hover/focus) and the
  * static responsive grid (carousel={false}, and what
  * prefers-reduced-motion collapses the carousel to).
+ *
+ * The CSS keyframe marquee is the SSR/no-JS fallback; once the
+ * component mounts, the JSX adds .jsDriven to the track and a rAF
+ * loop drives the same transform so the prev/next/pause controls can
+ * steer it. Controls are cobalt ghost buttons (never orange fill)
+ * and are hidden under reduced motion together with the marquee.
+ *
+ * Auto panels (.auto*): token-built mini mocks for widgets without an
+ * explicit panel. Four archetypes (KPI tile, bar chart, list rows,
+ * donut gauge); the accent comes from --wsa / --wsa-soft, set inline
+ * by the JSX from a hash of the widget title.
  */
 
 .shelf {
@@ -89,6 +100,56 @@
   to   { transform: translateX(-50%); }
 }
 
+/* Once the rAF loop owns the transform, the keyframe animation must
+   let go — otherwise it would overwrite the inline transform. */
+.track.jsDriven { animation: none; }
+
+/* ---- Controls (pause/play + prev/next) ----
+ *
+ * Cobalt ghost buttons per the kit: transparent ground, cobalt ink,
+ * cobalt-200 hairline; hover tints, focus ring is a visible cobalt
+ * outline. Never orange. Hidden under reduced motion because the
+ * static grid has nothing to steer. */
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+
+.ctrl {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--c-blue-cobalt);
+  cursor: pointer;
+}
+.ctrl:hover {
+  background: var(--c-cobalt-50);
+  border-color: var(--c-blue-cobalt);
+}
+.ctrl:focus-visible {
+  outline: 2px solid var(--c-blue-cobalt);
+  outline-offset: 2px;
+}
+.ctrl svg { width: 16px; height: 16px; display: block; }
+.chev {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.glyph { fill: currentColor; }
+
 /* Reduced motion: drop the duplicate copy and render the first group
    as the static wrapping grid — identical to carousel={false}. The
    .cols-2 / .cols-3 class on the group supplies the column template. */
@@ -98,7 +159,8 @@
     -webkit-mask-image: none;
     mask-image: none;
   }
-  .track { animation: none; display: block; width: 100%; }
+  .controls { display: none; }
+  .track { animation: none; display: block; width: 100%; transform: none !important; }
   .group {
     display: grid;
     gap: var(--space-5);
@@ -150,3 +212,133 @@
   margin: 0;
   padding: var(--space-2) var(--space-5) var(--space-5);
 }
+
+/* ---- Auto-generated mini panels ----
+ *
+ * White widget tile on the tinted panel ground, same chrome family as
+ * the hand-built .w mocks. All greeked (bars, dots, one number); the
+ * accent tokens --wsa / --wsa-soft arrive inline from the JSX. */
+
+.auto {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 280px;
+  min-height: 124px;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-1);
+  padding: 16px 18px;
+}
+
+/* KPI number tile */
+.autoKpi {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+.autoHex {
+  display: block;
+  width: 13px;
+  height: 15px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--wsa);
+}
+.autoKpiValue {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+}
+.autoKpiBar {
+  display: block;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--wsa-soft);
+}
+
+/* Mini bar chart */
+.autoBars {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  height: 124px;
+}
+.autoBar {
+  flex: 1;
+  border-radius: 2px 2px 0 0;
+  background: var(--c-cobalt-200);
+}
+.autoBarHi { background: var(--wsa); }
+
+/* List rows */
+.autoList {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+}
+.autoRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.autoDot {
+  flex-shrink: 0;
+  width: 12px;
+  height: 14px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-200);
+}
+.autoDotHi { background: var(--wsa); }
+.autoRowBars {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.autoRowBar {
+  display: block;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--c-cobalt-700);
+}
+.autoRowLine {
+  display: block;
+  width: 86%;
+  height: 4px;
+  border-radius: 1px;
+  background: var(--c-cobalt-100);
+}
+
+/* Donut gauge */
+.autoDonut {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.autoRing {
+  flex-shrink: 0;
+  width: 84px;
+  height: 84px;
+}
+.autoRingTrack {
+  fill: none;
+  stroke: var(--c-cobalt-100);
+  stroke-width: 6;
+}
+.autoRingFill {
+  fill: none;
+  stroke: var(--wsa);
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+.autoDonutBars {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/src/components/WidgetShelf/__tests__/WidgetShelf.render.test.js

@@ -0,0 +1,149 @@
+/**
+ * WidgetShelf.render.test.js — renders the real <WidgetShelf> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: derived carousel speed, auto-generated
+ * panels for widgets without an explicit `panel`, and the carousel
+ * controls with their accessible names.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AiDisclosure.render.test.js / scripts/build-kit.mjs. CSS modules
+ * are stubbed with an identity proxy (styles.foo → 'foo'), so class
+ * assertions read as the source class names.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'WidgetShelf.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-widget-shelf-test');
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let WidgetShelf;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  WidgetShelf = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(WidgetShelf, props));
+}
+
+function makeWidgets(n) {
+  return Array.from({length: n}, (_, i) => ({
+    title: `Widget number ${i}`,
+    desc: `Description ${i}`,
+  }));
+}
+
+test('SSR smoke: carousel renders every widget twice (live group + aria-hidden dup)', () => {
+  const html = render({title: 'Shelf', widgets: makeWidgets(5)});
+  assert.equal((html.match(/Widget number 3/g) || []).length, 2);
+  assert.match(html, /aria-hidden="true"/);
+});
+
+test('default loop duration derives from widget count at 6s per card', () => {
+  const html = render({widgets: makeWidgets(15)});
+  assert.match(html, /--ws-speed:90s/);
+});
+
+test('default loop duration never drops below the 30s floor', () => {
+  const html = render({widgets: makeWidgets(3)});
+  assert.match(html, /--ws-speed:30s/);
+});
+
+test('an explicit speed prop overrides the derived duration', () => {
+  const html = render({widgets: makeWidgets(15), speed: 45});
+  assert.match(html, /--ws-speed:45s/);
+});
+
+test('a widget without a panel gets an auto-generated mini panel', () => {
+  const html = render({widgets: [{title: 'Werkvoorraad', desc: 'x'}]});
+  assert.match(html, /class="auto auto(Kpi|Bars|List|Donut)"/);
+});
+
+test('an explicit panel always wins over the auto panel', () => {
+  const html = render({
+    widgets: [{title: 'Custom', desc: 'x', panel: React.createElement('div', {className: 'w w-custom'})}],
+  });
+  assert.match(html, /w-custom/);
+  assert.doesNotMatch(html, /class="auto /);
+});
+
+test('auto panels are deterministic: same input, same markup', () => {
+  const props = {widgets: makeWidgets(8)};
+  assert.equal(render(props), render(props));
+});
+
+test('auto panels vary: 8 distinct titles hit at least two archetypes and two accent families', () => {
+  const html = render({widgets: makeWidgets(8)});
+  const kinds = new Set(
+    (html.match(/class="auto auto(Kpi|Bars|List|Donut)"/g) || []).map((m) => m),
+  );
+  assert.ok(kinds.size >= 2, `expected >=2 archetypes, saw ${[...kinds].join(', ')}`);
+  const families = new Set(
+    (html.match(/--wsa:var\(--c-([a-z]+)-500\)/g) || []).map((m) => m),
+  );
+  assert.ok(families.size >= 2, `expected >=2 accent families, saw ${[...families].join(', ')}`);
+});
+
+test('auto panels never use reserved accent families (coral/orange, gold)', () => {
+  // 64 distinct titles sweep the family picker; the hex-family policy
+  // reserves coral (KNVB orange) and gold, so neither may ever appear.
+  const html = render({widgets: makeWidgets(64)});
+  assert.doesNotMatch(html, /--c-coral|--c-gold|--c-orange/);
+});
+
+test('carousel renders pause/play and prev/next controls with accessible names', () => {
+  const html = render({widgets: makeWidgets(4)});
+  assert.match(html, /aria-label="Previous widgets"/);
+  assert.match(html, /aria-label="Next widgets"/);
+  assert.match(html, /aria-label="Pause"/);
+  assert.match(html, /<button type="button"/);
+});
+
+test('the static grid (carousel={false}) has no controls and no duplicate group', () => {
+  const html = render({widgets: makeWidgets(4), carousel: false});
+  assert.doesNotMatch(html, /aria-label="Previous widgets"/);
+  assert.doesNotMatch(html, /aria-label="Pause"/);
+  assert.equal((html.match(/Widget number 3/g) || []).length, 1);
+});