FieldShield v1.1.3 — CSS Inheritance Lockdown

What's changed

Fixed

• CSS inheritance lockdown — six inheritable CSS properties now explicitly reset on .fieldshield-mask-layer and .fieldshield-grow so consumer parent styles cannot silently break cursor/text alignment:

  • text-align — shifts visible text but not cursor
  • text-indent — offsets first line away from cursor start
  • text-transform — changes glyph widths causing cursor drift
  • font-variant-ligatures — collapses 2 chars to 1 wider glyph
  • font-kerning — kern pairs shift advance widths cumulatively
  • hyphens — auto-breaks lines at different points than real input

• text-align and text-indent also reset on .fieldshield-real-input so the cursor originates from the same edge as visible text.

• Textarea selector reliability — replaced :has(textarea) CSS selector with [data-type="textarea"] attribute selector. More reliable across consumer app contexts where CSS import order or specificity affects :has().

• Textarea minimum height — empty textarea now enforces a minimum 2-row height instead of collapsing to a single line.

Root cause

The standard Vite React template sets #root { text-align: center }. This cascades into FieldShield's mask layer, centering visible text while the cursor stays left-aligned. The demo app never exposed this — it sets no text-align on parent elements. This is a novel finding: CSS containment gaps exist beyond scoped selectors for overlay-based security components.

Tests

• 2 new Vitest unit tests (total: 454 passing)
• 7 new Playwright E2E tests (total: 45 passing)

Documentation

• README: new "CSS inheritance and customisation" section in Known Limitations
• THREAT_MODEL.md: Expanded Threat Landscape (April 2026) — AI screen-reading
  assistants (Copilot Vision, Gemini Live) and browser extensions with DOM
  access added as documented threat actors

Live demo

https://fieldshield-demo.vercel.app