@bongos/core 1.24.85 → 1.24.87

package/modules/ui-design/public/brand.html

@@ -51,7 +51,7 @@
     <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok)" aria-hidden="true"></span><code class="ref-name">--ok</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#187444</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4ade80</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok-weak)" aria-hidden="true"></span><code class="ref-name">--ok-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #187444 12%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #4ade80 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn)" aria-hidden="true"></span><code class="ref-name">--warn</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#895c00</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fbbf24</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn-weak)" aria-hidden="true"></span><code class="ref-name">--warn-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #895c00 14%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #fbbf24 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger)" aria-hidden="true"></span><code class="ref-name">--danger</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#b42318</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f87171</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger-weak)" aria-hidden="true"></span><code class="ref-name">--danger-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #b42318 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #f87171 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info)" aria-hidden="true"></span><code class="ref-name">--info</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sea) 86%, #000000)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sea) 80%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info-weak)" aria-hidden="true"></span><code class="ref-name">--info-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--info) 9%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--info) 14%, var(--bg-card))</code></span></li></ul>
     <h3 class="ref-sub">Derived colours</h3>
     <p class="ref-note">Mixed from the thirteen, never typed as a new colour. Black and white with alpha appear only as a scrim, a shadow or glass.</p>
-    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .1)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #050d16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--night-glass)" aria-hidden="true"></span><code class="ref-name">--night-glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span></li></ul>
+    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .1)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #050d16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--night-glass)" aria-hidden="true"></span><code class="ref-name">--night-glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--night-plate)" aria-hidden="true"></span><code class="ref-name">--night-plate</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--bg) 88%, transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--bg) 88%, transparent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-top)" aria-hidden="true"></span><code class="ref-name">--sky-night-top</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#02060c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#02060c</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-mid)" aria-hidden="true"></span><code class="ref-name">--sky-night-mid</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#07121f</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#07121f</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-cloud)" aria-hidden="true"></span><code class="ref-name">--sky-night-cloud</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#456780</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#456780</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-cloud-shade)" aria-hidden="true"></span><code class="ref-name">--sky-night-cloud-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#1a3348</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#1a3348</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-roof)" aria-hidden="true"></span><code class="ref-name">--sky-night-roof</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a475e</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a475e</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-lit)" aria-hidden="true"></span><code class="ref-name">--sky-night-lit</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#10263a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#10263a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-shade)" aria-hidden="true"></span><code class="ref-name">--sky-night-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#081522</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#081522</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-base)" aria-hidden="true"></span><code class="ref-name">--sky-night-base</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#3c5d75</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#3c5d75</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-lamp)" aria-hidden="true"></span><code class="ref-name">--sky-night-lamp</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffe9c9</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffe9c9</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-night-line)" aria-hidden="true"></span><code class="ref-name">--sky-night-line</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#8fb3c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#8fb3c8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-top)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-top</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050d16</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-mid)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-mid</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17334a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#17334a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-cloud)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-cloud</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbe3c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fbe3c8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-cloud-shade)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-cloud-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#b08e8c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#b08e8c</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-roof)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-roof</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a9c0cc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a9c0cc</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-lit)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-lit</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#3f5b70</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#3f5b70</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-shade)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#1f3a50</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#1f3a50</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-base)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-base</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f0c9ab</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f0c9ab</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-lamp)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-lamp</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffe2c4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffe2c4</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dawn-line)" aria-hidden="true"></span><code class="ref-name">--sky-dawn-line</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2f4b61</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2f4b61</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-top)" aria-hidden="true"></span><code class="ref-name">--sky-midday-top</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#1d5687</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#1d5687</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-mid)" aria-hidden="true"></span><code class="ref-name">--sky-midday-mid</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#4a90c2</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4a90c2</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-cloud)" aria-hidden="true"></span><code class="ref-name">--sky-midday-cloud</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fff6dc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fff6dc</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-cloud-shade)" aria-hidden="true"></span><code class="ref-name">--sky-midday-cloud-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e8d2a8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#e8d2a8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-roof)" aria-hidden="true"></span><code class="ref-name">--sky-midday-roof</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fff3d4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fff3d4</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-lit)" aria-hidden="true"></span><code class="ref-name">--sky-midday-lit</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcc79c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#dcc79c</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-shade)" aria-hidden="true"></span><code class="ref-name">--sky-midday-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#7f93a8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#7f93a8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-base)" aria-hidden="true"></span><code class="ref-name">--sky-midday-base</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffe6b3</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffe6b3</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-lamp)" aria-hidden="true"></span><code class="ref-name">--sky-midday-lamp</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fff6dc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fff6dc</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-midday-line)" aria-hidden="true"></span><code class="ref-name">--sky-midday-line</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2f679a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2f679a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-top)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-top</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#0a0f24</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#0a0f24</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-mid)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-mid</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a2552</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a2552</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-cloud)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-cloud</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffc79a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffc79a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-cloud-shade)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-cloud-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a8748a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a8748a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-roof)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-roof</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c7a3b0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c7a3b0</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-lit)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-lit</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#4a4470</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4a4470</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-shade)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-shade</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#231f44</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#231f44</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-base)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-base</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6b596</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f6b596</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-lamp)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-lamp</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffe2c4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffe2c4</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-dusk-line)" aria-hidden="true"></span><code class="ref-name">--sky-dusk-line</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#302b55</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#302b55</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-now-haze)" aria-hidden="true"></span><code class="ref-name">--sky-now-haze</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sky-now-mid) 55%, var(--sky-now-cloud))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sky-now-mid) 55%, var(--sky-now-cloud))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sky-now-glow)" aria-hidden="true"></span><code class="ref-name">--sky-now-glow</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sky-now-lamp) calc(var(--sky-now-windows) * 100%), transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sky-now-lamp) calc(var(--sky-now-windows) * 100%), transparent)</code></span></li></ul>
   </section>
   <section class="scroll ref-sec" id="ref-type" aria-labelledby="ref-type-h">
     <h2 class="scroll__h" id="ref-type-h">Type</h2>

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.85",
+  "version": "1.24.87",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.85",
+      "version": "1.24.87",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.85",
+  "version": "1.24.87",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11613,5 +11613,17 @@
       "id": "1005096",
       "text": "Autobongos now runs on a Mac for real: the setup command, start, stop and remove all proven on one, and the Mac-only test failures are gone."
     }
+  ],
+  "1.24.86": [
+    {
+      "id": "1005208",
+      "text": "In game mode, Options now opens as a smaller see-through window over where you are, with smaller text, and the artist palette no longer shows twice."
+    }
+  ],
+  "1.24.87": [
+    {
+      "id": "1005196",
+      "text": "The city now stands in the clouds: the same buildings with no ground, wrapped in cloud and lit from below. It changes with the time of day, from a deep night with lit windows through a warm dawn to a bright midday and dusk."
+    }
   ]
 }

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.85'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.87'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/hall_city.mjs

@@ -3,9 +3,11 @@
 // WHAT IT GUARDS. The page is the home view of the reference design
 // (docs/design/mocks/governor-city/Street.dc.html) built over the governor
 // docket (task 1004523) and the open goals' task rollups. What can go wrong:
-//   * the drawing drifts from the prototype (a civic recipe, the ground, a pin
-//     position) — pinned by running the PROTOTYPE'S OWN Component class beside
-//     city-draw.js and comparing the paths they emit, in both modes;
+//   * the drawing's GEOMETRY drifts from the prototype (a civic recipe, the lanes,
+//     the plaza, a pin position) — pinned by running the PROTOTYPE'S OWN Component
+//     class beside city-draw.js and comparing the paths they emit. The COLOURS are
+//     no longer the prototype's: since task 1005196 the city stands in cloud and is
+//     painted from the hour's sky tokens, which the palette test below pins;
 //   * a pin drawn in the wrong state or over the wrong building, or invented
 //     where the docket has no matter;
 //   * a district for a goal that is not open, two goals on one plot, a plot on
@@ -25,7 +27,6 @@ import path from 'node:path';
 import vm from 'node:vm';
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
-import { cityTokens } from './helpers.mjs';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const PUB = path.join(ROOT, 'modules/hall-ui/public');
@@ -57,23 +58,69 @@ const rollup = (id, c) => ({ goal_id: String(id), done: 0, active: 0, ready: 0,
 
 // ── the drawing is the prototype's ───────────────────────────────────────────
 
-test('the nine civic recipes draw exactly the prototype paths, in both modes', () => {
-  for (const mode of ['dark', 'light']) {
-    const p = new Proto({ mode });
-    const T = p.theme(mode);
-    const pk = p.isoKit(60, 30, 720, 176, 30 / 28, T.iso, false);
-    const ck = City.isoKit(60, 30, 720, 176, 30 / 28, City.isoTheme(mode), false);
-    for (const [kind, x, y] of City.CIVIC_SLOTS) {
-      const a = []; const b = [];
-      p.isoInstitution(a, pk, kind, x, y, { fixes: false });
-      City.isoInstitution(b, ck, kind, x, y, { fixes: false });
-      assert.deepEqual(b, cityTokens(a), `${mode} ${kind}`);
-    }
+// The shape of a path list, without its paint: what the prototype fixes since task 1005196.
+const shape = (list) => list.map((p) => ({ d: p.d, dash: p.dash, w: p.w }));
+
+test('the nine civic recipes draw exactly the prototype paths (the geometry; the paint is the sky\'s)', () => {
+  const p = new Proto({ mode: 'dark' });
+  const pk = p.isoKit(60, 30, 720, 176, 30 / 28, p.theme('dark').iso, false);
+  const ck = City.isoKit(60, 30, 720, 176, 30 / 28, City.isoTheme(), false);
+  for (const [kind, x, y] of City.CIVIC_SLOTS) {
+    const a = []; const b = [];
+    p.isoInstitution(a, pk, kind, x, y, { fixes: false });
+    City.isoInstitution(b, ck, kind, x, y, { fixes: false });
+    assert.deepEqual(shape(b), shape(a), kind);
+  }
+});
+
+// Task 1005196: the city in the clouds. Every face and line is one of the hour's sky
+// tokens (or the hall's own), never a typed-in colour, and the mode changes nothing.
+test('the iso sub-palette is the hour\'s sky tokens: no literal, one palette whatever the mode', () => {
+  const I = City.isoTheme();
+  assert.deepEqual(City.isoTheme('light'), I, 'the hall is dark only: a mode argument is ignored');
+  const values = [];
+  (function walk(v) { if (typeof v === 'string') values.push(v); else if (v && typeof v === 'object') Object.values(v).forEach(walk); })(I);
+  assert.ok(values.length > 40);
+  for (const v of values) {
+    if (/^\d+ \d+$/.test(v)) continue; // a dash pattern
+    assert.doesNotMatch(v, /#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(/i, `${v}: no colour literal`);
+    assert.match(v, /var\(--sky-now-[a-z-]+\)/, `${v}: spends a sky token`);
+  }
+  for (const key of ['ground', 'groundLine', 'road']) assert.equal(I[key], undefined, `no ${key}: the city has no ground`);
+  // a face on the ground fades into the cloud: the side's gradient, then its plain colour as the fallback
+  assert.equal(I.civic.lg, 'url(#sky-face-l) var(--sky-now-lit)');
+  assert.equal(I.civic.rg, 'url(#sky-face-r) var(--sky-now-shade)');
+  const k = City.isoKit(60, 30, 720, 176, 30 / 28, I, false);
+  const onGround = []; const raised = [];
+  City.isoBox(onGround, k, 0, 0, 1, 1, 0, 40, I.civic);
+  City.isoBox(raised, k, 0, 0, 1, 1, 12, 40, I.civic);
+  assert.deepEqual(onGround.map((p) => p.f), [I.civic.lg, I.civic.rg, I.civic.t], 'a box on the ground stands in the cloud');
+  assert.deepEqual(raised.map((p) => p.f), [I.civic.l, I.civic.r, I.civic.t], 'a box above it keeps its plain faces');
+  // the gradients the page defines: a pair for the clear city, a pair per haze share in use
+  const defs = City.skyDefs([0.62, 0.62, 0.3]);
+  assert.deepEqual(defs.map((d) => d.id), ['sky-face-l', 'sky-face-r', 'sky-face-l-h62', 'sky-face-r-h62', 'sky-face-l-h30', 'sky-face-r-h30']);
+  for (const d of defs) {
+    assert.deepEqual(d.stops.map((s) => s[0]), [0, 0.5, 1]);
+    assert.match(d.stops[2][1], /--sky-now-base/, `${d.id} ends in the cloud's colour`);
   }
 });
 
-test('the iso sub-palette is the prototype theme().iso, both modes', () => {
-  for (const mode of ['dark', 'light']) assert.deepEqual(City.isoTheme(mode), cityTokens(new Proto({ mode }).theme(mode).iso), mode);
+test('the city stands in cloud: banks behind and in front, a puff at each building\'s foot, stars for the night', () => {
+  const m = City.cityModel({ docket: docket([matter()]), goals: [goal(1)], rollups: [rollup(1, { done: 6, active: 1 })] });
+  assert.deepEqual(m.clouds.back.map((c) => c.cls), ['city-cloud city-cloud--far', 'city-cloud city-cloud--back']);
+  assert.deepEqual(m.clouds.front.map((c) => c.cls), ['city-cloud city-cloud--near', 'city-cloud city-cloud--shade', 'city-cloud city-cloud--dark']);
+  assert.ok(m.clouds.rows.length >= 5, 'the nine civic buildings stand in five depth rows');
+  const depths = m.clouds.rows.map((r) => r.depth);
+  assert.deepEqual(depths, depths.slice().sort((a, b) => a - b), 'rows come back to front');
+  for (const c of [...m.clouds.back, ...m.clouds.rows, ...m.clouds.front, m.stars]) {
+    assert.equal(c.f, 'none'); assert.equal(c.s, 'none');
+    assert.match(c.cls, /^city-(cloud|stars)/, 'the sheet gives it its sky token: no fill is typed in');
+    assert.match(c.d, /^M[-\d.]+ [-\d.]+a/);
+  }
+  assert.ok([...m.clouds.back, ...m.clouds.rows, ...m.clouds.front].every((c) => City.SOFT.includes(c.soft)), 'every bank names one of the two filters');
+  assert.deepEqual(m.defs.map((d) => d.id).slice(0, 2), ['sky-face-l', 'sky-face-r']);
+  // the model is the same at every hour: the hour repaints through the tokens, never a redraw
+  assert.equal(JSON.stringify(m).match(/#[0-9a-f]{6}\b/i), null, 'no colour literal anywhere in the model');
 });
 
 test('every work kind the prototype draws is drawn the same way', () => {
@@ -84,11 +131,11 @@ test('every work kind the prototype draws is drawn the same way', () => {
     const a = []; const b = [];
     p.isoWork(a, pk, 6, 2, kind, 58);
     City.isoWork(b, ck, 6, 2, kind, 58);
-    assert.deepEqual(b, cityTokens(a), kind);
+    assert.deepEqual(shape(b), shape(a), kind);
   }
 });
 
-test('the ground, ring road, lanes and plaza are the prototype home view, path for path', () => {
+test('the ring road\'s lanes and the plaza are the prototype home view, path for path; the ground and the road fill are gone', () => {
   const p = new Proto({ mode: 'light' });
   p.state = p.initial();
   p.state.reviewHeld = true;
@@ -96,7 +143,10 @@ test('the ground, ring road, lanes and plaza are the prototype home view, path f
   const home = p.homeView(T, p.matters(), false);
   const model = City.cityModel({ docket: docket([matter()]), goals: [], rollups: [], mode: 'light' });
   // The prototype's flat list is ground, 4 roads, lanes, plaza, then its 4 plots and their grid.
-  assert.deepEqual(model.flat.slice(0, 7), cityTokens(home.flat.slice(0, 7)));
+  // The city in the clouds keeps the lanes and the plaza and draws no ground and no road fill.
+  assert.deepEqual(shape(model.flat.slice(0, 2)), shape(home.flat.slice(5, 7)));
+  const gone = new Set(home.flat.slice(0, 5).map((p) => p.d));
+  assert.ok(!model.flat.some((p) => gone.has(p.d)), 'no ground plane, no road fill');
 });
 
 test('with four goals the districts sit on the prototype\'s four plots, in its order', () => {
@@ -290,7 +340,7 @@ test('the city sits in the hall chrome, behind the shell\'s full-screen switch',
   // task 1004685 (the living city): gov-living.js, the model under the drawing, and
   // gov-feeds.js, its one reader per page (shared with the shell's tally), load before it
   // task 1004702: the card answers its first ask in place, so the deck's card and sender (and the desk rows under them) load before the page
-  assert.deepEqual(scripts, ['dom-utils', 'shell-game', 'shell-trail', 'craft-mode', 'shell', 'hall-dialog', 'visor', 'palette', 'gov-living', 'gov-feeds', 'city-draw', 'hall-kit', 'street-draw', 'street-card', 'street-inside', 'street-desk', 'street-deck', 'city-decide', 'city-switchboard', 'city'], 'the shell first, then the shared dialog (task 1005085) and the visor (task 1005148)');
+  assert.deepEqual(scripts, ['dom-utils', 'shell-game', 'shell-trail', 'craft-mode', 'shell', 'hall-dialog', 'visor', 'palette', 'gov-living', 'gov-feeds', 'sky-time', 'city-draw', 'hall-kit', 'street-draw', 'street-card', 'street-inside', 'street-desk', 'street-deck', 'city-decide', 'city-switchboard', 'city'], 'the shell first, then the shared dialog (task 1005085) and the visor (task 1005148)');
   // task 1004925: every script but dom-utils.js is deferred, so none holds up the
   // parser; defer runs them in document order, which is why the order above still
   // holds. dom-utils.js stays synchronous: the one-escaper guard

package/tests/hall_city_living.mjs

@@ -250,8 +250,13 @@ test('quiet buildings sit darker; busy ones keep the prototype\'s recipe exactly
     else assert.deepEqual(recipe, ref.map((p) => p.f), `${s[0]} is busy: the recipe is untouched`);
   }
   assert.deepEqual(m.civic.filter((c) => c.quiet).map((c) => c.key).sort(), ['automation', 'people', 'rules'], 'no agent and no ask: Automation (its switch is a standing state, not an ask), Rules and People');
-  assert.equal(City.mixToward('#808080', '#000000', 0.5), '#404040');
-  assert.equal(City.mixToward('rgba(255,255,255,0.4)', '#000000', 0.5), 'rgba(255,255,255,0.2)', 'a line thins out');
+  // the haze is a mix of tokens (task 1005196): a solid face goes toward the haze, a line thins out, a fading face takes its hazed gradient
+  const I = City.isoTheme(), H = City.hazeTheme(I, 0.5);
+  assert.equal(H.civic.t, 'color-mix(in srgb, var(--sky-now-roof) 50%, var(--sky-now-haze))');
+  assert.equal(H.civic.s, 'color-mix(in srgb, ' + I.civic.s + ' 50%, transparent)', 'a line thins out');
+  assert.match(H.civic.lg, /^url\(#sky-face-l-h50\) /);
+  assert.equal(City.hazeTheme(I, 0), I, 'no haze is the palette itself');
+  assert.equal(City.mixToward, undefined, 'the literal colour maths left with the literals');
 });
 
 // ── ground: haze and the spend conduit ─────────────────────────────────────

package/tests/hall_options_menu.mjs

@@ -138,7 +138,7 @@ test('the Settings page IS the menu: one search over the groups, loaded before s
 
 // ---- shell-game.js: the embedded page and game mode's Escape --------------------
 
-function bootGame({ search = '', framed = true, game = false, path: p = '/my-agents' } = {}) {
+function bootGame({ search = '', framed = true, game = false, path: p = '/my-agents', dom = false } = {}) {
   const docListeners = {};
   const winListeners = {};
   const timers = [];
@@ -156,13 +156,40 @@ function bootGame({ search = '', framed = true, game = false, path: p = '/my-age
   win.parent = framed ? parent : win;
   const document = {
     documentElement: root,
-    body: { setAttribute(k, v) { bodyAttrs[k] = v; } },
+    body: { setAttribute(k, v) { bodyAttrs[k] = v; }, getAttribute: (k) => (k in bodyAttrs ? bodyAttrs[k] : null) },
     addEventListener(t, fn) { (docListeners[t] ||= []).push(fn); },
   };
+  // dom: enough of a page for the game's options window to be drawn (createElement,
+  // a sibling the window makes inert, a frame that keeps its src), with OTBDialog.bind
+  // standing in for hall-dialog.js (its trap, Escape and focus return are tested there).
+  const windows = [];
+  const bound = [];
+  const sibling = { attrs: {}, setAttribute(k, v) { this.attrs[k] = v; }, hasAttribute(k) { return k in this.attrs; }, removeAttribute(k) { delete this.attrs[k]; } };
+  if (dom) {
+    document.body.children = [sibling];
+    document.body.appendChild = (el) => { windows.push(el); document.body.children.push(el); return el; };
+    document.createElement = () => {
+      const frameAttrs = {};
+      const frame = { getAttribute: (k) => (k in frameAttrs ? frameAttrs[k] : null), setAttribute: (k, v) => { frameAttrs[k] = v; }, focus() {} };
+      const box = { box: true };
+      return { hidden: false, innerHTML: '', querySelector: (sel) => (sel === '.opt-window__box' ? box : frame), frame, box };
+    };
+    win.OTBDialog = {
+      bind(root, opts) {
+        let open = false;
+        bound.push({ root, opts });
+        return {
+          open() { if (open) return; open = true; root.hidden = false; root.classes = [opts.lockClass]; opts.onOpen(); },
+          close() { if (!open) return; open = false; root.hidden = true; root.classes = []; opts.onClose(); },
+          isOpen: () => open,
+        };
+      },
+    };
+  }
   const ctx = vm.createContext({ window: win, document, URLSearchParams, URL });
   vm.runInContext(read('shell-game.js'), ctx);
   return {
-    root, bodyAttrs, parent, assigned, game: win.OTBShellGame,
+    root, bodyAttrs, parent, assigned, windows, bound, sibling, win, game: win.OTBShellGame,
     press(key, target = { tagName: 'DIV' }) {
       const ev = { key, target, defaultPrevented: false, preventDefault() { this.defaultPrevented = true; } };
       for (const fn of winListeners.keydown || []) fn(ev);
@@ -173,7 +200,7 @@ function bootGame({ search = '', framed = true, game = false, path: p = '/my-age
       const attrs = { href };
       if (target) attrs.target = target;
       const a = { getAttribute: (k) => (k in attrs ? attrs[k] : null), setAttribute: (k, v) => { attrs[k] = v; } };
-      for (const fn of docListeners.click || []) fn({ target: { closest: () => a } });
+      for (const fn of docListeners.click || []) fn({ target: { closest: () => a }, preventDefault() { this.defaultPrevented = true; } });
       return attrs.target || null;
     },
   };
@@ -214,6 +241,38 @@ test('GAME MODE: on the menu itself the last Escape closes it; outside game mode
   assert.deepEqual(off.assigned, [], 'outside game mode the press stays the shell\'s');
 });
 
+test('GAME MODE: away from the menu, Escape opens the options as a window over the place, and Escape again shuts it', () => {
+  const city = bootGame({ game: true, framed: false, path: '/city', dom: true });
+  city.press('Escape');
+  assert.deepEqual(city.assigned, [], 'the place stays: no page change');
+  assert.equal(city.windows.length, 1, 'one window drawn over it');
+  assert.equal(city.windows[0].frame.getAttribute('src'), '/settings?embed=1', 'the menu, framed and chromeless');
+  assert.equal(city.bound.length, 1, 'the window is the shared dialog: OTBDialog.bind owns Escape, the scrim, the focus trap and return');
+  assert.equal(city.bound[0].opts.panel, city.windows[0].box, 'the glass box is the dialog panel');
+  assert.equal(city.bound[0].opts.lockClass, 'opt-window-open', 'the page behind stops scrolling');
+  assert.equal(city.bound[0].opts.initialFocus(), city.windows[0].frame, 'focus goes into the menu');
+  assert.equal(city.sibling.hasAttribute('inert'), true, 'the page behind is inert, so Tab out of the frame cannot reach it');
+  assert.equal(city.win.OTBOptionsOverlay.isOpen(), true);
+  city.press('Escape');
+  assert.equal(city.win.OTBOptionsOverlay.isOpen(), false, 'the second Escape shuts it');
+  assert.equal(city.sibling.hasAttribute('inert'), false, 'and the page behind is live again');
+  city.press('Escape');
+  assert.equal(city.windows.length, 1, 'reopening reuses the one window');
+  assert.equal(city.bound.length, 1, 'bound once');
+  // a link to the menu (the visor's Options row) opens the window at that screen
+  city.win.OTBOptionsOverlay.close();
+  city.click('/settings?from=%2Fcity#access');
+  assert.equal(city.windows[0].frame.getAttribute('src'), '/settings?embed=1#access', 'the screen it named, without ?from=');
+  assert.equal(city.win.OTBOptionsOverlay.isOpen(), true);
+  // outside game mode the link is a link
+  const off = bootGame({ game: false, framed: false, path: '/city', dom: true });
+  off.click('/settings');
+  assert.equal(off.windows.length, 0);
+  // and the menu, closing inside the window, shuts the window rather than leaving the page
+  const om = read('options-menu.js');
+  assert.ok(om.includes('window.parent.OTBOptionsOverlay') && om.includes('holder.close(); return;'), 'close() shuts the window first');
+});
+
 test('options-menu.js gives the menu its Escape: close in game mode, nothing outside it', () => {
   const src = read('options-menu.js');
   assert.match(src, /function escape\(\) \{\s*var game = window\.OTBShellGame;\s*if \(game && game\.on && game\.on\(\)\) close\(\);/);