@12ui/design 0.2.51 → 0.2.53

package/prototype-kit/tests/adversarial-runtime.mjs

@@ -7,6 +7,7 @@ import path from 'node:path';
 import { chromium } from '@playwright/test';
 import { checkRuntime } from '../lib/runtime-check.mjs';
 import { startStaticServer } from '../lib/static-server.mjs';
+import { buildPrototype } from './lib/run-process.mjs';
 
 const outIndex = process.argv.indexOf('--out');
 const outFile = outIndex >= 0 ? process.argv[outIndex + 1] : null;
@@ -131,13 +132,125 @@ const interactionReachability = {
   occludedExactFailure: interactionPage('occluded-saved-journeys.html')?.dropdown,
   ordinaryControl: interactionPage('ordinary-dropdown.html')?.dropdown,
   reviewBottomControl: interactionPage('review-bottom-action.html')?.modal,
+  pointerCascade: interactionPage('pointer-cascade.html')?.dropdown,
 };
 
+const pointerPage = await browser.newPage();
+await pointerPage.goto(`${server.baseUrl}/tests/fixtures/interaction-runtime/pointer-cascade.html`, { waitUntil: 'networkidle' });
+const pointerCascade = [];
+for (const id of ['inline-none', 'rule-none', 'rule-important']) {
+  const locator = pointerPage.locator(`#${id}`);
+  pointerCascade.push(await locator.evaluate((element) => ({
+    id: element.id,
+    computed: getComputedStyle(element).pointerEvents,
+    inline: element.style.getPropertyValue('pointer-events'),
+    priority: element.style.getPropertyPriority('pointer-events'),
+    runtimeBound: element.getAttribute('data-proto-runtime-bound'),
+  })));
+  await locator.click();
+  pointerCascade[pointerCascade.length - 1].opened = await pointerPage.locator('.proto-menu').count();
+  await pointerPage.keyboard.press('Escape');
+}
+async function inertControlProbe(page, selector) {
+  const state = await page.locator(selector).evaluate((element) => ({
+    computed: getComputedStyle(element).pointerEvents,
+    inline: element.style.getPropertyValue('pointer-events'),
+    priority: element.style.getPropertyPriority('pointer-events'),
+    runtimeBound: element.getAttribute('data-proto-runtime-bound'),
+    suppressed: element.getAttribute('data-proto-suppressed'),
+  }));
+  await page.locator(selector).evaluate((element) => element.click());
+  const opened = await page.locator('.proto-modal').count();
+  return { ...state, opened };
+}
+const disabledPointerControl = await inertControlProbe(pointerPage, '#disabled-control');
+const disabledOpened = disabledPointerControl.opened;
+// The converter's own presentational-control marker and an uppercase
+// aria-disabled boolean token must both stay inert exactly like a native
+// disabled control -- this is the boundary gap a prior review found live
+// (an end-to-end build repaired and bound one of these, and a real click
+// opened it).
+const presentationalControl = await inertControlProbe(pointerPage, '#presentational-control');
+const ariaDisabledUpperControl = await inertControlProbe(pointerPage, '#aria-disabled-upper');
+// WAI-ARIA 1.2: an ancestor's aria-disabled="true" is not cancelled by a
+// nearer descendant's own aria-disabled="false".
+const ariaAncestorGuardControl = await inertControlProbe(pointerPage, '#aria-ancestor-guard');
+await pointerPage.close();
+
+// Converter-build-runtime regression: a real submit button can be disabled
+// while build.mjs promotes binding to its (non-disabled) icon wrapper --
+// checking only the promoted wrapper for source-inert state misses the
+// disabled attribute sitting on the button it wraps. This runs the actual
+// inventory -> analyze -> build pipeline (not a hand-authored fixture) and
+// physically clicks the wrapper, exactly the path a real user takes.
+const nestedInertScratch = fs.mkdtempSync(path.join(os.tmpdir(), 'prototype-nested-inert-'));
+const nestedInertBuild = await buildPrototype({
+  kitDir,
+  run: { runDir: path.join(kitDir, 'tests', 'fixtures', 'nested-inert') },
+  runWorkDir: nestedInertScratch,
+});
+if (!nestedInertBuild.ok) throw new Error(`nested-inert fixture failed to build at stage ${nestedInertBuild.failedStage}`);
+const nestedInertManifest = JSON.parse(fs.readFileSync(path.join(nestedInertBuild.protoDir, 'proto-manifest.json'), 'utf8'));
+const nestedInertServer = await startStaticServer(nestedInertBuild.protoDir);
+const nestedInertPage = await browser.newPage();
+await nestedInertPage.goto(`${nestedInertServer.baseUrl}/p0.html`, { waitUntil: 'networkidle' });
+const nestedInertWrap = await submitProbe(nestedInertPage, 'viewport-1-a-search-submit-wrap');
+await nestedInertPage.locator('#viewport-1-a-search-submit-wrap').click();
+const nestedInertModalsOpened = await nestedInertPage.locator('.proto-modal').count();
+await nestedInertPage.close();
+await nestedInertServer.close();
+fs.rmSync(nestedInertScratch, { recursive: true, force: true });
+
+const fieldPage = await browser.newPage();
+await fieldPage.goto(`${server.baseUrl}/tests/fixtures/interaction-runtime/inert-field.html`, { waitUntil: 'networkidle' });
+async function fieldProbe(page, fieldId) {
+  const before = await page.locator(`#${fieldId}-text`).textContent();
+  await page.locator(`#${fieldId}-text`).click();
+  await page.keyboard.type('probe');
+  const after = await page.locator(`#${fieldId}-text`).textContent();
+  return { editable: after !== before, contentEditable: await page.locator(`#${fieldId}-text`).evaluate((el) => el.isContentEditable) };
+}
+async function submitProbe(page, submitId) {
+  return page.locator(`#${submitId}`).evaluate((element) => ({
+    computed: getComputedStyle(element).pointerEvents,
+    runtimeBound: element.getAttribute('data-proto-runtime-bound'),
+    suppressed: element.getAttribute('data-proto-suppressed'),
+  }));
+}
+const liveField = await fieldProbe(fieldPage, 'live-field');
+const liveSubmit = await submitProbe(fieldPage, 'live-submit');
+const inertField = await fieldProbe(fieldPage, 'inert-field');
+const inertFieldSubmit = await submitProbe(fieldPage, 'inert-field-submit');
+const mixedField = await fieldProbe(fieldPage, 'mixed-field');
+const mixedSubmit = await submitProbe(fieldPage, 'mixed-submit');
+await fieldPage.close();
+
+const multipleTriggerRuntime = await checkRuntime({
+  browser,
+  baseUrl: server.baseUrl,
+  relativeProtoPath: 'tests/fixtures/multiple-trigger-runtime',
+  protoDir: path.join(kitDir, 'tests', 'fixtures', 'multiple-trigger-runtime'),
+});
+const multipleTriggerProbe = multipleTriggerRuntime.pages.find((page) => page.file === 'probe-all.html')?.dropdown;
+const multipleModalProbe = multipleTriggerRuntime.pages.find((page) => page.file === 'probe-all.html')?.modal;
+
+// verify-runtime.mjs is invoked exactly as it runs against a real build:
+// protoDir is a directory whose own siblings are the page HTML plus its own
+// copy of the runtime, not a source fixture reached through prototype-kit's
+// own tree. A real build.mjs run copyFileSync's runtime/proto.{js,css}
+// alongside the converted pages (see build.mjs's own copyFileSync calls) and
+// the pages reference them same-directory ("proto.js", not "../../../..."),
+// so the scratch protoDir mirrors that shape rather than referencing the
+// source tree by a relative path the server's root cannot reach.
 const blockingScratch = fs.mkdtempSync(path.join(os.tmpdir(), 'prototype-blocking-runtime-'));
+const blockingProtoDir = path.join(blockingScratch, 'blocking-runtime');
+fs.cpSync(path.join(kitDir, 'tests', 'fixtures', 'blocking-runtime'), blockingProtoDir, { recursive: true });
+fs.copyFileSync(path.join(kitDir, 'runtime', 'proto.js'), path.join(blockingProtoDir, 'proto.js'));
+fs.copyFileSync(path.join(kitDir, 'runtime', 'proto.css'), path.join(blockingProtoDir, 'proto.css'));
 const blockingAuditFile = path.join(blockingScratch, 'runtime-audit.json');
 const blockingVerification = spawnSync(process.execPath, [
   path.join(kitDir, 'verify-runtime.mjs'),
-  path.join(kitDir, 'tests', 'fixtures', 'blocking-runtime'),
+  blockingProtoDir,
   blockingAuditFile,
 ], { cwd: kitDir, encoding: 'utf8', timeout: 30_000 });
 const blockingAudit = JSON.parse(fs.readFileSync(blockingAuditFile, 'utf8'));
@@ -145,7 +258,7 @@ fs.rmSync(blockingScratch, { recursive: true, force: true });
 
 await browser.close();
 await server.close();
-const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, accessibleBack, pageBack, holdingComposition, shellNavigation, interactionReachability, blockingInteraction: { status: blockingVerification.status, failures: blockingAudit.interactionFailures } };
+const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, accessibleBack, pageBack, holdingComposition, shellNavigation, interactionReachability, pointerCascade, disabledPointerControl, disabledOpened, presentationalControl, ariaDisabledUpperControl, ariaAncestorGuardControl, liveField, liveSubmit, inertField, inertFieldSubmit, mixedField, mixedSubmit, multipleTriggerProbe, multipleModalProbe, blockingInteraction: { status: blockingVerification.status, failures: blockingAudit.interactionFailures }, nestedInertWrap, nestedInertModalsOpened, nestedInertManifest: { inertActionCandidates: nestedInertManifest.inertActionCandidates } };
 if (process.argv.includes('--assert')) {
   assert.deepEqual(doubleBinding, { overlayRoots: 1, modals: 1 }, 'runtime must bind exactly once when injected twice');
   assert.deepEqual(nestedBinding, { modals: 1, menus: 0 }, 'the innermost action must stop a parent binding from also firing');
@@ -193,10 +306,72 @@ if (process.argv.includes('--assert')) {
   assert.equal(shellNavigation.activeNavigationFailures.length, 2, 'must fire: a visible marker under the wrong linked nav item is gated at both widths');
   assert.ok(shellNavigation.activeNavigationFailures.every((failure) => failure.file === 'active-fire.html'), 'must stay silent: already-correct and unlinked source ink produce no active-navigation failure');
   assert.equal(interactionReachability.occludedExactFailure?.ok, true, 'must fire: the exact Saved Journeys dropdown is scrolled clear of the fixed review framing before pointer hit-testing');
-  assert.ok(interactionReachability.occludedExactFailure?.point?.y < 700, 'must fire: the exact initially occluded target is measured outside the review panel');
+  assert.ok(interactionReachability.occludedExactFailure?.probes[0]?.point?.y < 700, 'must fire: the exact initially occluded target is measured outside the review panel');
   assert.equal(interactionReachability.ordinaryControl?.ok, true, 'must stay silent: an ordinary already-visible dropdown remains pointer reachable');
   assert.equal(interactionReachability.reviewBottomControl?.ok, true, 'must fire: a bottom-edge action receives temporary scroll clearance from fixed review chrome before hit-testing');
-  assert.ok(interactionReachability.reviewBottomControl?.point?.y < 800, 'must fire: the bottom-edge action is measured above the review panel');
+  assert.ok(interactionReachability.reviewBottomControl?.probes[0]?.point?.y < 800, 'must fire: the bottom-edge action is measured above the review panel');
+  assert.deepEqual(pointerCascade, [
+    { id: 'inline-none', computed: 'auto', inline: 'auto', priority: 'important', runtimeBound: 'dropdown', opened: 1 },
+    { id: 'rule-none', computed: 'auto', inline: 'auto', priority: 'important', runtimeBound: 'dropdown', opened: 1 },
+    { id: 'rule-important', computed: 'auto', inline: 'auto', priority: 'important', runtimeBound: 'dropdown', opened: 1 },
+  ], 'must fire: inline important in the real DOM wins over ordinary inline, exact-ID, and exact-ID important pointer suppression');
+  assert.deepEqual(disabledPointerControl, {
+    computed: 'none',
+    inline: 'none',
+    priority: 'important',
+    runtimeBound: null,
+    suppressed: 'source-disabled',
+    opened: 0,
+  }, 'must stay silent: a disabled source control retains its intentional pointer suppression');
+  assert.equal(disabledOpened, 0, 'must stay silent: the disabled source control never opens a modal');
+  assert.deepEqual(presentationalControl, {
+    computed: 'none',
+    inline: 'none',
+    priority: 'important',
+    runtimeBound: null,
+    suppressed: 'source-presentational-control',
+    opened: 0,
+  }, 'must stay silent: the converter\'s own presentational-control marker keeps its pointer suppression and never opens, even though it is otherwise a well-formed bound-looking action');
+  assert.deepEqual(ariaDisabledUpperControl, {
+    computed: 'none',
+    inline: 'none',
+    priority: 'important',
+    runtimeBound: null,
+    suppressed: 'source-aria-disabled',
+    opened: 0,
+  }, 'must stay silent: aria-disabled="TRUE" is honored the same as lowercase, not escaped by casing');
+  assert.deepEqual(ariaAncestorGuardControl, {
+    computed: 'auto',
+    inline: '',
+    priority: '',
+    runtimeBound: null,
+    suppressed: 'source-aria-disabled',
+    opened: 0,
+  }, 'must stay silent: an aria-disabled="TRUE" ancestor is not cancelled by this element\'s own aria-disabled="false" — a real physical click on it opens nothing');
+  assert.deepEqual(nestedInertManifest.inertActionCandidates, [
+    { state: 'p0', id: 'viewport-1-a-search-submit-wrap', action: 'field-submit', reason: 'disabled' },
+  ], 'must fire: a converter-shaped build recognizes the disabled native submit nested inside the promoted, non-disabled icon wrapper');
+  assert.equal(nestedInertWrap.runtimeBound, null, 'must stay silent: the promoted wrapper never binds when the button it wraps is disabled');
+  assert.equal(nestedInertModalsOpened, 0, 'must stay silent: a real physical click on the wrapper opens nothing');
+  assert.equal(liveField.editable, true, 'must fire: an ordinary field becomes editable');
+  assert.equal(liveSubmit.runtimeBound, 'field-submit', 'must fire: an ordinary field\'s submit button binds');
+  assert.equal(inertField.editable, false, 'must stay silent: a field marked presentational-control by the converter never becomes editable');
+  assert.equal(inertField.contentEditable, false, 'must stay silent: an inert field is never given contentEditable');
+  assert.equal(inertFieldSubmit.runtimeBound, null, 'must stay silent: the submit button for an inert field never binds either, even though it carries no inert marker of its own');
+  assert.equal(mixedField.editable, true, 'must fire: a live field still works even when its own submit button is disabled');
+  assert.equal(mixedSubmit.runtimeBound, null, 'must stay silent: a disabled submit button never binds, independent of its field');
+  assert.equal(interactionReachability.pointerCascade?.probed, 3, 'must fire: every valid cascade trigger is pointer-probed');
+  assert.equal(multipleTriggerProbe?.probed, 2, 'must fire: both triggers on one page are audited');
+  assert.deepEqual(multipleTriggerProbe?.probes.map(({ id, ok }) => ({ id, ok })), [
+    { id: 'first-dropdown', ok: true },
+    { id: 'blocked-second-dropdown', ok: false },
+  ], 'must fire: a broken later trigger cannot hide behind a working first trigger');
+  assert.equal(multipleModalProbe?.probed, 2, 'must fire: both modal triggers on one page are audited');
+  assert.deepEqual(multipleModalProbe?.probes.map(({ id, ok }) => ({ id, ok })), [
+    { id: 'first-modal', ok: true },
+    { id: 'blocked-second-modal', ok: false },
+  ], 'must fire: modal probing covers every trigger, including a broken later one');
+  assert.deepEqual(multipleTriggerRuntime.interactionFailures, ['probe-all.html'], 'must fire: the page-level gate retains the every-trigger failure');
   assert.notEqual(blockingVerification.status, 0, 'must fire: a claimed dropdown with broken pointer wiring still refuses publication');
   assert.match(blockingVerification.stderr, /Prototype runtime gate failed: 1 page\(s\) with broken dropdown\/modal interaction/, 'must fire: the refusal names the genuinely blocking interaction gate');
   assert.deepEqual(blockingAudit.interactionFailures, ['broken-interaction.html'], 'must stay silent: the blocking fixture identifies only the broken page');

package/prototype-kit/tests/fixtures/blocking-runtime/broken-interaction.html

@@ -4,4 +4,5 @@ html,body{margin:0;width:1536px;height:1024px}.control{position:absolute;left:12
 <button id="broken-dropdown" class="control" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Menu</button>
 <div class="interceptor" aria-hidden="true"></div>
 <script id="proto-state" type="application/json">{"unit":"broken-interaction","tokens":{},"contentFile":null}</script>
+<script src="proto.js"></script>
 </body></html>

package/prototype-kit/tests/fixtures/interaction-runtime/PROVENANCE.md

@@ -6,3 +6,8 @@ framing collision. It must become reachable only after the runtime gate centers
 the target before hit-testing.
 
 `ordinary-dropdown.html` is the paired must-stay-reachable control.
+
+`pointer-cascade.html` is the CSS cascade boundary: ordinary inline `none`, an
+exact-ID ordinary rule, and an exact-ID important rule must all become bound in
+the real browser. Its disabled native button is the paired inert control and
+must retain its source `none!important` declaration.

package/prototype-kit/tests/fixtures/interaction-runtime/inert-field.html

@@ -0,0 +1,23 @@
+<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../../../runtime/proto.css"><style>
+html,body{margin:0}.page{padding:80px;display:flex;flex-direction:column;gap:28px}
+.field{height:44px;width:260px;border:1px solid #ccc}
+button{height:44px}
+</style></head><body>
+<main class="page">
+  <!-- control: an ordinary field + submit button, both must work -->
+  <div id="live-field" class="field text" data-proto-field="live-field-text"><span id="live-field-text">Search</span></div>
+  <button id="live-submit" data-proto-submit-for="live-field-text">Go</button>
+
+  <!-- the field itself is a converter-marked presentational control: must
+       never become editable, and its own submit button must never bind -->
+  <div id="inert-field" data-12ui-presentational-control class="field text" data-proto-field="inert-field-text"><span id="inert-field-text">Search</span></div>
+  <button id="inert-field-submit" data-proto-submit-for="inert-field-text">Go</button>
+
+  <!-- the field is live, but its submit button is disabled: the field must
+       still work via Enter, the button must never bind -->
+  <div id="mixed-field" class="field text" data-proto-field="mixed-field-text"><span id="mixed-field-text">Search</span></div>
+  <button id="mixed-submit" disabled data-proto-submit-for="mixed-field-text">Go</button>
+</main>
+<script id="proto-state" type="application/json">{"unit":"inert-field","tokens":{},"contentFile":null}</script>
+<script src="../../../runtime/proto.js"></script>
+</body></html>

package/prototype-kit/tests/fixtures/interaction-runtime/pointer-cascade.html

@@ -0,0 +1,19 @@
+<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../../../runtime/proto.css"><style>
+html,body{margin:0}.page{padding:80px;display:grid;grid-template-columns:repeat(2,220px);gap:28px}button{height:44px}
+#rule-none{pointer-events:none}
+#rule-important{pointer-events:none!important}
+</style></head><body>
+<main class="page">
+  <button id="inline-none" style="pointer-events:none" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Inline none</button>
+  <button id="rule-none" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Rule none</button>
+  <button id="rule-important" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Important rule none</button>
+  <button id="disabled-control" disabled style="pointer-events:none!important" data-proto-action="modal" data-proto-modal='{"title":"Must stay inert"}'>Disabled control</button>
+  <button id="presentational-control" data-12ui-presentational-control style="pointer-events:none!important" data-proto-action="modal" data-proto-modal='{"title":"Must stay inert"}'>Converter-marked static</button>
+  <button id="aria-disabled-upper" aria-disabled="TRUE" style="pointer-events:none!important" data-proto-action="modal" data-proto-modal='{"title":"Must stay inert"}'>Uppercase aria-disabled</button>
+  <div aria-disabled="TRUE">
+    <button id="aria-ancestor-guard" aria-disabled="false" data-proto-action="modal" data-proto-modal='{"title":"Must stay inert"}'>Ancestor TRUE, self false</button>
+  </div>
+</main>
+<script id="proto-state" type="application/json">{"unit":"pointer-cascade","tokens":{},"contentFile":null}</script>
+<script src="../../../runtime/proto.js"></script>
+</body></html>

package/prototype-kit/tests/fixtures/multiple-trigger-runtime/probe-all.html

@@ -0,0 +1,14 @@
+<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../../../runtime/proto.css"><style>
+html,body{margin:0;width:1536px;height:1024px}.page{position:relative;width:1536px;height:1024px}.control{position:absolute;left:120px;width:220px;height:44px}.modal{left:480px}.first{top:120px}.second{top:220px}.interceptor{position:absolute;top:220px;width:220px;height:44px;z-index:2;background:rgba(255,255,255,.01)}.dropdown-interceptor{left:120px}.modal-interceptor{left:480px}
+</style></head><body>
+<main class="page">
+  <button id="first-dropdown" class="control first" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>First menu</button>
+  <button id="blocked-second-dropdown" class="control second" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Second menu</button>
+  <button id="first-modal" class="control modal first" data-proto-action="modal" data-proto-modal='{"title":"First dialog"}'>First dialog</button>
+  <button id="blocked-second-modal" class="control modal second" data-proto-action="modal" data-proto-modal='{"title":"Second dialog"}'>Second dialog</button>
+  <div id="second-dropdown-interceptor" class="interceptor dropdown-interceptor" aria-hidden="true"></div>
+  <div id="second-modal-interceptor" class="interceptor modal-interceptor" aria-hidden="true"></div>
+</main>
+<script id="proto-state" type="application/json">{"unit":"probe-all","tokens":{},"contentFile":null}</script>
+<script src="../../../runtime/proto.js"></script>
+</body></html>

package/prototype-kit/tests/fixtures/nested-inert/branch.plan.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "scope": "page",
+  "concept": "Nested-inert regression fixture"
+}

package/prototype-kit/tests/fixtures/nested-inert/pages/p0.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow,#viewport-1-a{margin:0;width:1536px;height:1024px;font-family:Arial,sans-serif}
+.text{position:absolute}
+#viewport-1-a-row{position:absolute;left:80px;top:120px;width:420px;height:44px;display:flex;align-items:center}
+#viewport-1-a-search-field{position:relative;width:320px;height:44px;background:#fff;border:1px solid #ddd}
+#viewport-1-a-search-submit-wrap{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
+</style></head><body><main id="page-flow"><section id="viewport-1-a">
+<div id="viewport-1-a-row">
+  <div id="viewport-1-a-search-field"><span id="viewport-1-a-search-field-text" class="text">Search</span></div>
+  <!-- the native submit button is disabled, but it is wrapped: build.mjs promotes
+       binding to the wrapper because the icon sits beside, not inside, the button.
+       Regression: an earlier fix checked only the promoted wrapper for source-inert
+       state and missed the disabled attribute sitting on the button it wraps. -->
+  <div id="viewport-1-a-search-submit-wrap"><button id="viewport-1-a-search-submit" disabled></button></div>
+</div>
+</section></main></body></html>

package/prototype-kit/tests/offline-check.mjs

@@ -60,7 +60,12 @@ const outputDigest = (directory) => {
 };
 assert.equal(
   outputDigest(threeShell.protoDir),
-  '0a24a0c220106a1592598f1ad11685081337cb60d3044953e56e11e239dbc8bd',
+  // Updated a third time: the round-2 review found the aria-disabled
+  // ancestry walk (an ancestor's "true" is not cancelled by a nearer
+  // descendant's "false") and the submit-wrapper promotion check (must
+  // check the native control, not just the promoted wrapper). Only
+  // proto.js differs, verified by diffing before/after build output.
+  '8d3ea96e4c645100dea36d74804d3a9f4411a45a529de59d1b5fb9051d0c6169',
   'must stay silent: review support leaves the accepted shell/navigation complete output byte-identical',
 );
 const threeShellModel = JSON.parse(fs.readFileSync(threeShell.modelFile, 'utf8'));

package/prototype-kit/tests/rules-check.mjs

@@ -2,7 +2,7 @@
 import assert from 'node:assert/strict';
 import { parseHTML } from 'linkedom';
 import { resolveDropdownAction, suppressDeterministicAction, usableDropdownOptions } from '../lib/actions.mjs';
-import { restoreActionPointerReachability, selectUniqueActionOwners } from '../lib/action-target.mjs';
+import { selectUniqueActionOwners, sourceInertActionReason } from '../lib/action-target.mjs';
 import { checkAlignRule } from './align-rule-check.mjs';
 import { declaredActiveMarkers, linkedNavForUnit, markerOverlapsNav } from '../lib/nav-active-state.mjs';
 import { matchPlannedPage } from '../lib/navigation.mjs';
@@ -62,14 +62,33 @@ assert.equal(
   'must fire: a deterministic dropdown with no usable label options is recorded and kept static',
 );
 
-const unreachableDropdown = parseHTML('<span id="viewport-1-c-journeys-harbourfront-source-row-1-icon" style="width:29.696px;height:11.264px;pointer-events:none">...</span>').document.querySelector('span');
-assert.equal(restoreActionPointerReachability(unreachableDropdown), true, 'must fire: the exact failed Saved Journeys dropdown target becomes pointer reachable');
-assert.equal(unreachableDropdown.style.pointerEvents, 'auto');
-assert.equal(unreachableDropdown.getAttribute('data-proto-pointer-restored'), 'true');
-const reachableDropdown = parseHTML('<span id="ordinary-dropdown" style="pointer-events:auto">...</span>').document.querySelector('span');
-const reachableBefore = reachableDropdown.outerHTML;
-assert.equal(restoreActionPointerReachability(reachableDropdown), false, 'must stay silent: an already reachable dropdown target is unchanged');
-assert.equal(reachableDropdown.outerHTML, reachableBefore);
+const sourceInertDocument = parseHTML([
+  '<div inert><button id="inert-child"></button></div>',
+  '<button id="disabled" disabled></button>',
+  '<button id="live"></button>',
+  '<div data-12ui-presentational-control><button id="presentational-child"></button></div>',
+  '<button id="aria-disabled-lower" aria-disabled="true"></button>',
+  '<button id="aria-disabled-upper" aria-disabled="TRUE"></button>',
+  '<button id="aria-disabled-false" aria-disabled="false"></button>',
+  '<div aria-disabled="TRUE"><button id="aria-ancestor-true-child-false" aria-disabled="false"></button></div>',
+  '<div id="wrap-with-disabled-child" class="wrap"><button id="disabled-child" disabled></button></div>',
+].join('')).document;
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('inert-child')), 'inert', 'must fire: an inert ancestor rejects a model-selected action');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('disabled')), 'disabled', 'must fire: a disabled native control remains intentionally inert');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('live')), null, 'must stay silent: an ordinary resolved control remains eligible for runtime binding');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('presentational-child')), 'presentational-control', 'must fire: the converter\'s own presentational-control marker rejects a model-selected action');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('aria-disabled-lower')), 'aria-disabled', 'must fire: aria-disabled="true" rejects a model-selected action');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('aria-disabled-upper')), 'aria-disabled', 'must fire: aria-disabled="TRUE" is the same boolean token as lowercase and must not escape the boundary on case alone');
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('aria-disabled-false')), null, 'must stay silent: aria-disabled="false" is not a disabled state');
+// WAI-ARIA 1.2: aria-disabled="true" on an ancestor disables all focusable
+// descendants. A nearer descendant's own aria-disabled="false" must not
+// cancel it -- checking only the closest aria-disabled attribute finds the
+// "false" and misses the "true" further up.
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('aria-ancestor-true-child-false')), 'aria-disabled', 'must fire: an aria-disabled="TRUE" ancestor is not cancelled by a nearer descendant\'s aria-disabled="false"');
+// A promoted wrapper's own check must not be the only check: sourceInertActionReason
+// called on the wrapped native control (not the wrapper) must still see the wrapper's
+// own inert state via its ancestry walk.
+assert.equal(sourceInertActionReason(sourceInertDocument.getElementById('disabled-child')), 'disabled', 'must fire: a disabled control nested inside a non-disabled wrapper is still found by checking the control itself, which is what a submit-wrapper promotion must do rather than checking only the promoted wrapper');
 
 const repeatedDropdown = { action: 'dropdown', options: ['All opportunities', 'High intent', 'Low intent'] };
 const distinctDropdown = { action: 'dropdown', options: ['All countries', 'Australia', 'Canada'] };

package/prototype-kit/verify-runtime.mjs

@@ -6,8 +6,9 @@ import { chromium } from '@playwright/test';
 import { checkRuntime } from './lib/runtime-check.mjs';
 import { startStaticServer } from './lib/static-server.mjs';
 
-const [protoDirArg, auditFileArg] = process.argv.slice(2);
+const [protoDirArg, auditFileArg, mode] = process.argv.slice(2);
 if (!protoDirArg || !auditFileArg) throw new Error('usage: verify-runtime.mjs <prototype-dir> <audit.json>');
+if (mode && mode !== '--audit-only') throw new Error(`unknown runtime verification mode: ${mode}`);
 const protoDir = path.resolve(protoDirArg);
 const auditFile = path.resolve(auditFileArg);
 const server = await startStaticServer(path.dirname(protoDir));
@@ -24,7 +25,6 @@ try {
   await browser.close();
   await server.close();
 }
-fs.writeFileSync(auditFile, JSON.stringify(audit, null, 2) + '\n');
 const unsafe = [];
 if (audit.pageErrors > 0) unsafe.push(`${audit.pageErrors} page/load error(s)`);
 if (audit.consoleErrors > 0) unsafe.push(`${audit.consoleErrors} console error(s)`);
@@ -35,6 +35,11 @@ if (audit.compositionFailures.length > 0) unsafe.push(`${audit.compositionFailur
 if (audit.shellConsistencyFailures.length > 0) unsafe.push(`${audit.shellConsistencyFailures.length} canonical shell consistency failure(s)`);
 if (audit.activeNavigationFailures.length > 0) unsafe.push(`${audit.activeNavigationFailures.length} active navigation failure(s)`);
 if (audit.deepLinkBack.present && !audit.deepLinkBack.ok) unsafe.push('deep-link history did not return to its source');
-if (unsafe.length > 0) throw new Error(`Prototype runtime gate failed: ${unsafe.join('; ')}`);
-const viewportWidths = [...new Set(audit.pages.flatMap((page) => page.viewports.map((viewport) => viewport.width)))].sort((left, right) => left - right);
-console.error(`runtime gate passed: ${audit.pages.length} pages at ${viewportWidths.join('/')}, ${audit.brokenTargets.length} broken targets, ${audit.interactionFailures.length} interaction failures, ${audit.shellConsistencyFailures.length} shell failures, ${audit.activeNavigationFailures.length} active navigation failures`);
+fs.writeFileSync(auditFile, JSON.stringify({ ...audit, failures: unsafe }, null, 2) + '\n');
+if (unsafe.length > 0 && mode !== '--audit-only') throw new Error(`Prototype runtime gate failed: ${unsafe.join('; ')}`);
+if (unsafe.length > 0) {
+  console.error(`runtime audit found blockers: ${unsafe.join('; ')}`);
+} else {
+  const viewportWidths = [...new Set(audit.pages.flatMap((page) => page.viewports.map((viewport) => viewport.width)))].sort((left, right) => left - right);
+  console.error(`runtime gate passed: ${audit.pages.length} pages at ${viewportWidths.join('/')}, ${audit.brokenTargets.length} broken targets, ${audit.interactionFailures.length} interaction failures, ${audit.shellConsistencyFailures.length} shell failures, ${audit.activeNavigationFailures.length} active navigation failures`);
+}

package/prototype-kit/polish/tests/fixtures/section-breathing/attachment-fire.html

@@ -1,5 +0,0 @@
-<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px;overflow:visible}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
-  <section id="viewport-1-a" style="top:0;height:700px;background:#fbf6ee"><p id="viewport-1-a-text" class="text" style="left:300px;top:660px;font-size:16px">The market ends here.</p><div id="viewport-1-a-fruit" class="decoration" style="position:absolute;left:0;bottom:0;width:180px;height:150px;background:#df8b22;border-radius:100% 100% 0 0"></div></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-text" class="text" style="left:300px;top:20px;font-size:16px">The next section starts here.</p></section>
-</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/attachment-silent.html

@@ -1,5 +0,0 @@
-<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px;overflow:visible}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
-  <section id="viewport-1-a" style="top:0;height:700px;background:#fbf6ee"><p id="viewport-1-a-text" class="text" style="left:300px;top:620px;font-size:16px">The market ends here.</p><div id="viewport-1-a-product-image" class="image" style="position:absolute;left:0;bottom:0;width:180px;height:40px;background:#925b24"></div></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-text" class="text" style="left:300px;top:20px;font-size:16px">The next section starts here.</p></section>
-</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/shadow-fire.html

@@ -1,5 +0,0 @@
-<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px;overflow:visible}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
-  <section id="viewport-1-a" style="top:0;height:700px;background:#fefefe"><div id="viewport-1-a-card" style="position:absolute;left:500px;top:500px;width:536px;height:200px;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.05)"><p id="viewport-1-a-text" class="text" style="left:40px;top:80px">A card casts a soft shadow.</p></div></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fefefe"><p id="viewport-2-a-text" class="text" style="left:80px;top:20px">The next section.</p></section>
-</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/shadow-silent.html

@@ -1,5 +0,0 @@
-<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px;overflow:visible}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
-  <section id="viewport-1-a" style="top:0;height:700px;background:#fefefe"><div id="viewport-1-a-card" style="position:absolute;left:500px;top:500px;width:536px;height:200px;background:#fff;box-shadow:0 8px 0 #c83b3b"><p id="viewport-1-a-text" class="text" style="left:40px;top:80px">A hard coloured band is not a shadow gradient.</p></div></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fefefe"><p id="viewport-2-a-text" class="text" style="left:80px;top:20px">The next section.</p></section>
-</div></div></div>