@bongos/core 1.24.82 → 1.24.83

package/tests/hall_helm.mjs

@@ -14,7 +14,9 @@
 //     cannot see because the link is built at serve time;
 //   * no hall script writes a theme choice, and the shell offers no switch;
 //   * the Helm neutrals: the two dark twins carry the night, the ice and no black;
-//   * the kit's recipes exist once, as hall-tier tokens and shared rules.
+//   * the kit's recipes exist once, as hall-tier tokens and shared rules;
+//   * Helm look 2 (task 1005194): the hall has no pill, and the options menu and
+//     character select are Helm screens written from the tokens alone.
 //
 // Run:  node --test tests/hall_helm.mjs
 import { test } from 'node:test';
@@ -185,3 +187,103 @@ test('the kit\'s recipes are named once: the name voice, the cut, the segment, t
   assert.match(controls, /\n\.seg--done \{ background: var\(--ink-soft\);/, 'a finished step is information, so it is ice, not the accent');
   assert.match(controls, /\n\.seg--now \{ background: var\(--accent\);/, 'the accent is the step you can act on');
 });
+
+// ── Helm look 2 (task 1005194): the square corner, the options menu, character select ──
+
+// one rule's body, by its exact selector line, from a decommented sheet
+const ruleOf = (css, sel) => {
+  const at = css.indexOf('\n' + sel + ' {');
+  assert.notEqual(at, -1, `no rule ${sel}`);
+  const open = css.indexOf('{', at);
+  return css.slice(open + 1, css.indexOf('}', open));
+};
+const NO_COLOUR_LITERAL = /#[0-9a-fA-F]{3,8}\b|\brgba?\(|\bhsla?\(/;
+
+test('the hall has no pill: --radius-pill is a square corner in the hall tier, and only there', () => {
+  assert.equal(root['--radius-pill'], '0px', 'Helm draws no pill');
+  // the panel and the tile keep their corners until each page's own task (DESIGN.md "The hall")
+  assert.equal(root['--radius'], 'var(--ds-radius-panel)');
+  assert.equal(root['--radius-sm'], 'var(--ds-radius-tile)');
+  // the shared scale is untouched, so the landing and the status page keep their pill
+  assert.match(read('modules', 'ui-design', 'public', 'tokens.css'), /--ds-radius-pill:\s*999px;/);
+  const controls = decomment(read('modules', 'hall-ui', 'public', 'controls.css'));
+  // the field and the status tag spend the name, so they are square in the hall with no rule of their own
+  assert.match(controls, /\.input \{[^}]*border-radius: var\(--radius-pill\);/);
+  assert.match(controls, /\ntextarea \{[^}]*border-radius: var\(--press-radius, var\(--radius-sm\)\);/, 'a textarea is square too, the tile where the tier is not loaded');
+});
+
+test('what is pressed in the top bar, and a filter chip, take the small cut and the inset focus ring', () => {
+  const css = decomment(STYLE.replace(/\r\n/g, '\n'));
+  for (const sel of ['.upd-pill', '.chip', 'html[data-fullscreen="on"] .fullscreen-toggle']) {
+    const body = ruleOf(css, sel);
+    assert.match(body, /clip-path: var\(--cut-path-sm\);/, `${sel} is cut`);
+    assert.match(body, /--focus-ring: var\(--press-focus\);/, `${sel}: a cut clips an outline, so the ring is inside`);
+    assert.match(body, /border-radius: var\(--press-radius\);/, `${sel} has no round corner`);
+  }
+  // an outer shadow would be clipped away with the corner, and would outrank the focus ring
+  assert.doesNotMatch(ruleOf(css, 'html[data-fullscreen="on"] .upd-pill'), /box-shadow/);
+});
+
+test('the options menu is a Helm screen: a night panel, name-voice rows, the open one the accent bar', () => {
+  const sheet = decomment(read('modules', 'hall-ui', 'public', 'settings.css').replace(/\r\n/g, '\n'));
+  const menu = sheet.slice(0, sheet.indexOf('.cli-result'));
+  assert.ok(menu.includes('.opt-rail') && menu.includes('.opt-screen'), 'the menu and the open screen are the first part of the sheet');
+  assert.doesNotMatch(menu, NO_COLOUR_LITERAL, 'no colour is typed in');
+  assert.doesNotMatch(menu, /border-radius:\s*\d/, 'no corner is typed in');
+  const rail = ruleOf(menu, '.opt-rail');
+  assert.match(rail, /background: var\(--night-glass\);/);
+  assert.match(rail, /border-left-width: var\(--line-strong\); border-right-width: var\(--line-strong\);/, 'closed left and right by the strong hairline');
+  const link = ruleOf(menu, '.opt-link');
+  assert.match(link, /font-family: var\(--name-face\);/);
+  assert.match(link, /text-transform: var\(--name-case\);/);
+  assert.match(link, /min-height: var\(--ds-space-xl\);/, 'a row clears the 24px floor many times over');
+  assert.match(link, /border-bottom: var\(--line\) solid var\(--rule-soft\);/, 'rows on hairlines, not boxes');
+  assert.match(ruleOf(menu, '.opt-link--active, .opt-link--active:hover'), /color: var\(--accent-on\); background: var\(--accent\);/);
+  assert.match(ruleOf(menu, '.opt-link:focus-visible'), /box-shadow: var\(--press-focus\);/, 'the ring is inside the row, so it reads on the accent bar');
+  const screen = ruleOf(menu, '.opt-screen');
+  assert.match(screen, /font-family: var\(--name-face\);/);
+  assert.match(screen, /border-bottom: var\(--line-strong\) solid var\(--rule\);/);
+  const section = ruleOf(menu, '.settings-groups .scroll');
+  assert.match(section, /background: none;/, 'a section is a row on a hairline, not a card');
+  assert.match(section, /border-bottom: var\(--line\) solid var\(--rule-soft\);/);
+  // the search is the hall's one field: the sheet draws no edge, corner or focus of its own for it
+  assert.doesNotMatch(ruleOf(menu, '.opt-search input'), /border|outline/);
+  assert.doesNotMatch(menu, /\.opt-search input:focus/);
+  // the two names are words the menu already had: its own label, and the open entry's
+  const js = read('modules', 'hall-ui', 'public', 'options-menu.js');
+  assert.match(js, /<p class="opt-title" aria-hidden="true">Options<\/p>/);
+  assert.match(js, /h\.setAttribute\('aria-hidden', 'true'\);/);
+  assert.match(js, /h\.textContent = e\.label;/);
+  assert.match(js, /<nav|opt-search/, 'the search is still drawn');
+  assert.match(read('modules', 'hall-ui', 'public', 'settings.html'), /<nav class="opt-rail" id="settings-rail" aria-label="Options"><\/nav>/);
+});
+
+test('character select is a Helm screen: the night, cut doors, the suggested door lit, the ring inside the cut', () => {
+  const css = decomment(STYLE.replace(/\r\n/g, '\n'));
+  const picker = css.slice(css.indexOf('\n.craft-picker {'), css.indexOf('\n.craft-art {'));
+  assert.doesNotMatch(picker, NO_COLOUR_LITERAL, 'no colour is typed in');
+  assert.doesNotMatch(picker, /border-radius:\s*\d|font-size:\s*\d/, 'no corner or size is typed in');
+  assert.match(ruleOf(css, '.craft-picker--create'), /background: var\(--bg\);/, 'a screen on the night, not a box on a scrim');
+  assert.match(ruleOf(css, '.craft-picker__panel--create'), /background: none;/);
+  const title = ruleOf(css, '.craft-picker__title');
+  assert.match(title, /font-family: var\(--name-face\);/);
+  assert.match(title, /text-transform: var\(--name-case\);/);
+  const door = ruleOf(css, '.craft-door');
+  assert.match(door, /clip-path: var\(--cut-path\);/, 'a door is pressed, so it is cut');
+  assert.match(door, /background: var\(--night-glass\);/);
+  assert.match(ruleOf(css, '.craft-door:focus-visible'), /outline: 0;[^}]*box-shadow: var\(--press-focus\);/);
+  assert.match(ruleOf(css, '.craft-door--pre, .craft-door--pre:hover'), /box-shadow: inset 0 0 0 2px var\(--accent\);/);
+  assert.match(ruleOf(css, '.craft-door::after'), /box-shadow: inherit;/, 'the edge is drawn over the portrait as well as under it');
+  assert.match(ruleOf(css, '.craft-door__name'), /font-family: var\(--name-face\);/);
+  // the real sprites, and the words where they were
+  const js = read('modules', 'hall-ui', 'public', 'craft-mode.js');
+  for (const id of ['artisan', 'artist', 'patron']) assert.ok(fs.existsSync(path.join(HALL, 'characters', id + '.png')), `${id}.png`);
+  assert.match(js, /id="craft-picker-title">Choose your character<\/h2>/);
+  assert.match(js, /aria-describedby="craft-picker-lede"/);
+});
+
+test('the visor reads in the Helm night: no hover falls back to the pack\'s dark accent', () => {
+  const visor = decomment(read('modules', 'hall-ui', 'public', 'visor.css'));
+  assert.doesNotMatch(visor, /--accent-deep/, 'the deep accent is a light-ground colour; on the night it is under 4.5:1');
+  assert.match(visor, /\.visor__row:hover \{ color: var\(--accent-ink\); \}/);
+});

package/tests/hall_topbar_320.mjs

@@ -99,7 +99,9 @@ for (const scheme of ['light', 'dark']) {
   });
 }
 
-test('the top bar search and the mode switch are one shape: a pill with the same hairline', { skip }, async () => {
+// Helm (task 1005194): the hall has no pill, so the one shape the two share is the hall's
+// square corner (--radius-pill is 0px in the hall tier) inside the same hairline.
+test('the top bar search and the mode switch are one shape: the square corner of the hall with the same hairline', { skip }, async () => {
   const ctx = await context(1440, 'dark');
   const page = await ctx.newPage();
   await page.goto(ORIGIN + '/work');
@@ -115,11 +117,12 @@ test('the top bar search and the mode switch are one shape: a pill with the same
       switchRadius: css(sw).borderTopLeftRadius,
       jumpEdge: css(jump).borderTopColor,
       switchShadow: css(sw).boxShadow,
-      pill: root.getPropertyValue('--ds-radius-pill').trim(),
+      pill: root.getPropertyValue('--radius-pill').trim(),
     };
   }).finally(() => ctx.close());
-  assert.equal(s.jumpRadius, s.pill, 'the search is a full pill');
-  assert.equal(s.switchRadius, s.pill, 'the mode switch is a full pill');
+  assert.equal(s.pill, '0px', 'the hall tier squares the pill');
+  assert.equal(s.jumpRadius, s.pill, 'the search takes the corner of the hall');
+  assert.equal(s.switchRadius, s.pill, 'the mode switch takes the same corner');
   assert.ok(s.switchShadow.startsWith(s.jumpEdge), `the two share one hairline colour (${s.jumpEdge} vs ${s.switchShadow})`);
 });