KS CSS scope leak — UX audit rules

Rule handbook metadata

Rule: DET.KS.CSS_SCOPE_LEAK · lane deterministic
Page status: current
page_version: 81a4a151ee134726b77dc8c5659543ad0255b38fa598b047dc3aaf267542a947
generated_at: 2026-05-28T20:30:00.000Z
registry_fingerprint: aef1de6082cf0f50d463783c843dee0ffb9132fbd5ed4ea6e5bb3f031f359c72

How this rule is fixed

Pilot deterministic fixer: plan_only · harness mode live_scenario · verify live_scenario.

See fixer module for plan_only in lib/ux-deterministic-fixers/.

Detection module: docs/design/ux-audit/deterministic-design-rules.md#det-ks-css-scope-leak. Scroll down for Before / After examples and Evidence and remediation steps.

Purpose

Embedded KS themes must not restyle native host <input>, <select>, or <textarea> elements outside KS roots (studio shells, Vite apps). Live crawl is authoritative; static-only audits skip DOM probes and record skipped_scope when no Playwright page is available.

Passing signals

Host controls outside [data-ks-hash] keep native or app-specific computed styles.

Failing signals

host-control-themed-bg — dark Forge background on a host input outside KS chrome.
host-control-faded — opacity collapse on host controls.

Before example

Before (failing example)

After example

After (passing example)

Deterministic checks

DET.KS.CSS_SCOPE_LEAK — det-ks-css-scope-leak.check.js (live page.evaluate only).

Remediation

Import KS CSS under a mount root, use @layer, or ship a scoped build for consumer embeds.