From 5c3e1dca3a22a9745cd27abfc030a8666c6ff268 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 17 Oct 2026 01:02:08 +0200
Subject: [PATCH 1/2] test: Cover ClickHouse Control Boundaries on the Sidebar
 Surface

---
 .../clickhouse-sidebar-boundaries.spec.ts     | 29 +++++++++++++++++++
 .../src/theme/themes/clickhouse.spec.tsx      |  5 ++++
 2 files changed, 34 insertions(+)
 create mode 100644 e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts

diff --git a/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
new file mode 100644
index 00000000000..e926639e555
--- /dev/null
+++ b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
@@ -0,0 +1,29 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { stripVTControlCharacters } from 'node:util';
+import { inOneProject, repoRoot, run } from './lint.helpers';
+
+/**
+ * Controls sit on the sidebar as well as the page, the panels and the dialog, so
+ * the ClickHouse boundary check measures `surface-sidebar` too. The sidebar holds
+ * Click UI's background, so its sub-floor boundary pairs are the page's, pinned by
+ * the same owner decision. The check runs the whole spec in file order, since the
+ * pinning test reads what the palette tests measured.
+ */
+
+const clientRoot = resolve(repoRoot, 'packages/client');
+const JEST = resolve(repoRoot, 'node_modules/.bin/jest');
+const SPEC = 'src/theme/themes/clickhouse.spec.tsx';
+
+test.describe('ClickHouse control boundaries on the sidebar', () => {
+  test('the boundary and pinning checks hold with the sidebar canvas measured @scenario:clickhouse-sidebar-boundaries-measured', () => {
+    inOneProject();
+    test.setTimeout(180_000);
+
+    const result = run(JEST, [SPEC, '--maxWorkers=1', '--ci', '--verbose'], { cwd: clientRoot });
+    const output = stripVTControlCharacters(result.output);
+    expect(result.status, output).toBe(0);
+    expect(output.match(/✓ keeps control boundaries and rings at the 3:1 floor/g)).toHaveLength(2);
+    expect(output.match(/✓ pins every pair that sits below its floor/g)).toHaveLength(2);
+  });
+});
diff --git a/packages/client/src/theme/themes/clickhouse.spec.tsx b/packages/client/src/theme/themes/clickhouse.spec.tsx
index 96f2203b0f2..210e4883fef 100644
--- a/packages/client/src/theme/themes/clickhouse.spec.tsx
+++ b/packages/client/src/theme/themes/clickhouse.spec.tsx
@@ -281,6 +281,7 @@ const floorChecks = {
         'rgb-surface-secondary',
         'rgb-surface-tertiary',
         'rgb-surface-dialog',
+        'rgb-surface-sidebar',
       ],
     },
   ],
@@ -359,10 +360,12 @@ const clickUiBelowFloor: Record<ThemeMode, string[]> = {
     'rgb-border-xheavy on rgb-surface-secondary: 1.90:1 (needs 3:1)',
     'rgb-border-xheavy on rgb-surface-tertiary: 1.90:1 (needs 3:1)',
     'rgb-border-xheavy on rgb-surface-dialog: 2.03:1 (needs 3:1)',
+    'rgb-border-xheavy on rgb-surface-sidebar: 2.03:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-primary: 1.24:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-secondary: 1.16:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-tertiary: 1.16:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-dialog: 1.24:1 (needs 3:1)',
+    'rgb-border-control on rgb-surface-sidebar: 1.24:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-surface-chat: 2.03:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-surface-primary: 2.03:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-presentation: 2.03:1 (needs 3:1)',
@@ -402,10 +405,12 @@ const clickUiBelowFloor: Record<ThemeMode, string[]> = {
     'rgb-border-xheavy on rgb-surface-secondary: 1.44:1 (needs 3:1)',
     'rgb-border-xheavy on rgb-surface-tertiary: 1.44:1 (needs 3:1)',
     'rgb-border-xheavy on rgb-surface-dialog: 1.62:1 (needs 3:1)',
+    'rgb-border-xheavy on rgb-surface-sidebar: 1.62:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-primary: 1.50:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-secondary: 1.34:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-tertiary: 1.34:1 (needs 3:1)',
     'rgb-border-control on rgb-surface-dialog: 1.50:1 (needs 3:1)',
+    'rgb-border-control on rgb-surface-sidebar: 1.50:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-surface-chat: 1.62:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-surface-primary: 1.62:1 (needs 3:1)',
     'rgb-prose-bullet on rgb-presentation: 1.62:1 (needs 3:1)',

From a714e8ca3c51ca643a024f32457fa18803ced872 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 17 Oct 2026 11:13:40 +0200
Subject: [PATCH 2/2] test: Measure the Sidebar Boundary Pairs Directly

---
 .../scenarios/clickhouse-sidebar-boundaries.spec.ts    |  9 +++++++--
 packages/client/src/theme/themes/clickhouse.spec.tsx   | 10 ++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
index e926639e555..c955e5a0602 100644
--- a/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
+++ b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
@@ -7,8 +7,8 @@ import { inOneProject, repoRoot, run } from './lint.helpers';
  * Controls sit on the sidebar as well as the page, the panels and the dialog, so
  * the ClickHouse boundary check measures `surface-sidebar` too. The sidebar holds
  * Click UI's background, so its sub-floor boundary pairs are the page's, pinned by
- * the same owner decision. The check runs the whole spec in file order, since the
- * pinning test reads what the palette tests measured.
+ * the same owner decision. The check runs the whole spec, so the pinning test
+ * compares the pins against the full matrix with the sidebar in it.
  */
 
 const clientRoot = resolve(repoRoot, 'packages/client');
@@ -25,5 +25,10 @@ test.describe('ClickHouse control boundaries on the sidebar', () => {
     expect(result.status, output).toBe(0);
     expect(output.match(/✓ keeps control boundaries and rings at the 3:1 floor/g)).toHaveLength(2);
     expect(output.match(/✓ pins every pair that sits below its floor/g)).toHaveLength(2);
+    expect(
+      output.match(
+        /✓ measures control boundaries on the sidebar, below the floor only in its two/g,
+      ),
+    ).toHaveLength(2);
   });
 });
diff --git a/packages/client/src/theme/themes/clickhouse.spec.tsx b/packages/client/src/theme/themes/clickhouse.spec.tsx
index 210e4883fef..dbd756835d8 100644
--- a/packages/client/src/theme/themes/clickhouse.spec.tsx
+++ b/packages/client/src/theme/themes/clickhouse.spec.tsx
@@ -505,6 +505,16 @@ describe.each(modes)('clickhouse %s palette', (mode, theme) => {
     expect(belowPinned(mode, theme, floorChecks.controlBoundaries)).toEqual([]);
   });
 
+  it('measures control boundaries on the sidebar, below the floor only in its two pinned pairs', () => {
+    const sidebarPins = clickUiBelowFloor[mode].filter((pair) =>
+      pair.includes(' on rgb-surface-sidebar: '),
+    );
+    expect(sidebarPins).toHaveLength(2);
+    expect(below(theme, WCAG_NON_TEXT, boundaryTokens, ['rgb-surface-sidebar'])).toEqual(
+      sidebarPins,
+    );
+  });
+
   it('keeps the unchecked switch track at the 3:1 floor against the thumb and the checked fill', () => {
     expect(belowPinned(mode, theme, floorChecks.switchTrack)).toEqual([]);
   });