deterministic + unique ids in 6 components (node-derived scope)

Migrates Menu, ColumnLayout, Countdown, Gallery, Tabs, InputField, and
TextareaField from Math.random()/content-hash scope ids to the threaded
Craft node id (via scopeId()), keeping every emitted element id,
aria-controls/aria-labelledby/for, and inline <script> function
name/getElementById() call consistently scoped per component.

Resolves the two Important id-collision review findings:
- Tabs: tabId was djb2(anchorId||labels) -- two default Tabs instances
  produced identical aria-controls/aria-labelledby ids, so one instance's
  arrow-key script clobbered the other's tab/panel wiring.
- InputField/TextareaField: fieldId was `field-${name}` -- two fields
  sharing a (often default) name produced duplicate <label for>/<input
  id> pairs, breaking the for/id association for one of them.

Also eliminates the remaining Math.random() scope ids in Menu (hover CSS
class scope) and ColumnLayout (nth-child width CSS class scope), so no
export component is non-deterministic anymore.

All fall back to a stable content hash (never Math.random) for legacy
2-arg toHtml() call sites without a node id.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/components/sections/Countdown.toHtml.test.ts

@@ -26,3 +26,39 @@ describe('Countdown.toHtml validates targetDate before inline-script injection (
     expect(html).toMatch(/new Date\(\)\.getTime\(\)|new Date\(Date\.now\(\)\)\.getTime\(\)/);
   });
 });
+
+describe('Countdown.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
+  const props = { targetDate: '2026-01-01' };
+
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-cd1');
+    const { html: html2 } = toHtml(props, '', 'node-cd1');
+    expect(html1).toBe(html2);
+  });
+
+  test('different node ids -> different, non-colliding element ids (identical props, no collision)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-cd1');
+    const { html: html2 } = toHtml(props, '', 'node-cd2');
+    const id1 = html1.match(/id="([^"]+)_d"/)![1];
+    const id2 = html2.match(/id="([^"]+)_d"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml(props, '');
+    const { html: html2 } = toHtml(props, '');
+    expect(html1).toBe(html2);
+  });
+});
+
+describe('Countdown.toHtml script nit: ticking interval stops at zero', () => {
+  test('inline script clears its own interval once the countdown reaches zero', () => {
+    const { html } = toHtml({ targetDate: '2026-01-01' }, '');
+    expect(html).toMatch(/clearInterval\(/);
+  });
+
+  test('an already-expired target never schedules a running interval', () => {
+    const { html } = toHtml({ targetDate: '2020-01-01' }, '');
+    expect(html).toMatch(/if\s*\(\s*target\s*-\s*Date\.now\(\)\s*>\s*0\s*\)\s*\{/);
+  });
+});