Detect single-edge stripes painted with an inset box-shadow (#378)

* Detect single-edge stripes painted with an inset box-shadow The side-tab rule caught bordered stripes but not the inset box-shadow spelling of the same anti-pattern, which is how it usually reaches an Astro/CSS source file. Adds a structural CSS scan for `box-shadow: inset` layers whose shape is a 3-12px stripe on exactly one edge with no blur or spread, reusing the existing `side-tab` rule id, so the rule count is unchanged. Scoped narrowly, because a stripe is correct design in some places. It skips selection and focus indicators (the rule's one documented exception), interactive and semantic elements, narrow artwork, and neutral colors: `inset 4px 0 0 #000` is a hairline, not an AI tell. Chromatic intent is read from the color literal or from a `var(--token)` name. Grammar rather than one spelling, learned the hard way — three of the four false-negative shapes below were found only after the first pass shipped: - `inset` is order-independent, so `4px 0 0 red inset` is the same stripe. Only a standalone keyword is stripped, so `var(--inset-accent)` is not mangled. - box-shadow takes <length>{2,4}: `inset 4px 0 red` omits blur and spread, which default to 0. That is exactly the stripe shape. - Authored CSS spells neutrals as `#000` / `black`, and shared/color.mjs only parses the computed function forms a browser emits, deliberately reporting anything else as chromatic. Routing authored colors through it flagged plain black hairlines, so hex and named neutrals are handled before deferring. - Comment bodies are blanked before matching, preserving byte offsets so line numbers stay right, and the selector's line is taken from its first non-whitespace character rather than the greedy match start. Fixture covers 8 flag shapes and 13 pass shapes, including a literal-color column that the original had none of, which is why the neutral bug survived review. Prepared with AI assistance under maintainer direction. Co-Authored-By: Claude <noreply@anthropic.com> * Parse box-shadow layers by grammar, not by one spelling Three review-bot findings, two of them the same mistake I had already made twice in this rule. Color-first layers were missed (greptile). `box-shadow` orders `inset`, the lengths, and the color freely, so `red 4px 0 inset` and `var(--brand-accent) 4px 0 0 inset` paint the stripe the length-first regex was looking for and were skipped. That is the third valid spelling this rule has missed after trailing `inset` and the two-length form, all from encoding one spelling instead of the grammar. Stop patching spellings: tokenize the layer, pick out `inset` and the 2-4 lengths in any order, and treat the single remaining token as the color. Tokenizing is paren-aware because `rgb(0 0 0)` is one color value whose channels would otherwise read as lengths. Neutral `rgb()` with space-separated channels was flagged (cursor). shared/color.mjs parses only the comma form that getComputedStyle emits, so an authored `rgb(0 0 0)` fell through it and reported chromatic — the exemption isNeutralAuthoredColor exists for, missed. Parse both separators before delegating. Left shared/color.mjs alone: it reads computed styles, where the comma form is all a browser produces. Line numbers were derived by re-slicing the whole prefix per rule, O(n^2) on a large stylesheet (Copilot). Matches arrive in source order, so carry a monotonic cursor: one pass total. Fixtures cover both flag shapes and the neutral pass shape; all three fail against the previous parse ("expected Color First Edge to flag", and Space Rgb Neutral Edge appearing in the old flag list). Assisted-by: Claude Code * Fix the !important regression my tokenizer introduced, plus two cascade bugs Three findings from Cursor on the grammar rewrite. The first is mine, from the commit that claimed to end this bug class. `!important` stopped flagging. Tokenizing split it into its own token, so the color count came out at two and the layer was skipped — a shape the regex it replaced handled correctly. `!important` qualifies the declaration, not the shadow value, so strip it before reading layers. Style-block findings reported one line low. block.startLine is the first line after the <style> tag, but block.content begins at the character right after that tag, so content's own line 1 sits on the tag's line. Passing startLine - 1 to a 1-based line lookup counted that line twice. It is startLine - 2. runRegexMatchers is unaffected and stays at startLine - 1 because it indexes its split lines from zero — verified by a fixture where bounce-easing and side-tab share one block and now both report correctly. Repeated declarations read the first, not the last. The cascade paints the last, so `box-shadow: inset 4px 0 red; box-shadow: none` was flagged though it paints nothing, and the reverse order was missed. Same for a width override deciding the narrow-artwork skip. Fixtures cover !important, both cascade orders, and the line-accuracy shapes (multi-line block, single-line block, plain .css); they fail against the previous commit. Assisted-by: Claude Code --------- Co-authored-by: Claude <noreply@anthropic.com>
2026-09-14 07:06:45 +03:00 · 2026-07-18 15:25:29 -07:00
parent 8967edc988
commit 428b86b139
3 changed files with 372 additions and 17 deletions
@@ -43,23 +43,94 @@ function firstOverusedGoogleFont(text) {
  return extractGoogleFontFamilies(text).find(f => OVERUSED_FONTS.has(f)) || '';
 }

+// CSS named colors whose channels are equal (achromatic). Anything outside
+// this set falls through to the format parsers, and an unrecognized spelling
+// stays non-neutral so a real accent is never skipped.
+const NEUTRAL_COLOR_KEYWORDS = new Set([
+  'transparent', 'currentcolor',
+  'black', 'white', 'gray', 'grey', 'silver',
+  'dimgray', 'dimgrey', 'darkgray', 'darkgrey', 'lightgray', 'lightgrey',
+  'gainsboro', 'whitesmoke',
+]);
+
+function hexChannels(color) {
+  const long = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})(?:[0-9a-f]{2})?$/i);
+  if (long) return [parseInt(long[1], 16), parseInt(long[2], 16), parseInt(long[3], 16)];
+  const short = color.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])(?:[0-9a-f])?$/i);
+  if (short) return [1, 2, 3].map((i) => parseInt(short[i] + short[i], 16));
+  return null;
+}
+
+/**
+ * Split one box-shadow layer into top-level tokens.
+ *
+ * Whitespace inside parens does not separate tokens: `rgb(0 0 0)` and
+ * `var(--x, 4px)` are each a single value, and splitting them on spaces would
+ * read their innards as separate lengths.
+ */
+function tokenizeShadowLayer(layer) {
+  const tokens = [];
+  let depth = 0;
+  let current = '';
+  for (const char of String(layer || '')) {
+    if (char === '(') depth++;
+    else if (char === ')') depth--;
+    else if (depth === 0 && /\s/.test(char)) {
+      if (current) tokens.push(current);
+      current = '';
+      continue;
+    }
+    current += char;
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+
+function lastMatch(text, re) {
+  const all = [...String(text || '').matchAll(re)];
+  return all.length ? all[all.length - 1] : null;
+}
+
+function isShadowLength(token) {
+  return /^-?\d*\.?\d+(?:px)?$/i.test(String(token || ''));
+}
+
+/**
+ * Neutrality test for colors as written in source CSS.
+ *
+ * shared/color.mjs's isNeutralColor only parses the computed function forms a
+ * browser or jsdom emits (rgb/oklch/lab/...) and deliberately reports every
+ * other spelling as chromatic so an unknown format is never silently skipped.
+ * That default is wrong for authored CSS, where `#000` and `black` are the
+ * normal spellings: calling it directly reports a plain black hairline as a
+ * colored stripe. Handle hex and named neutrals here, then defer.
+ */
+function isNeutralAuthoredColor(rawColor) {
+  const c = String(rawColor || '').trim().toLowerCase();
+  if (!c) return false;
+  if (NEUTRAL_COLOR_KEYWORDS.has(c)) return true;
+  // Modern rgb() takes space-separated channels (`rgb(0 0 0)`). shared/color.mjs
+  // parses only the comma form a browser's getComputedStyle emits, so authored
+  // space-separated neutrals fell through it and reported as chromatic — the
+  // exemption this function exists for, missed. Normalize before delegating.
+  if (/^rgba?\(/i.test(c)) {
+    const channels = c.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (channels) {
+      const values = [1, 2, 3].map((i) => Number(channels[i]));
+      return (Math.max(...values) - Math.min(...values)) < 30;
+    }
+    return isNeutralColor(c);
+  }
+  if (/^(?:hsla?|oklch|oklab|lab|lch|hwb)\(/i.test(c)) return isNeutralColor(c);
+  const channels = hexChannels(c);
+  if (channels) return (Math.max(...channels) - Math.min(...channels)) < 30;
+  return false;
+}
+
 function isNeutralBorderColor(str) {
  const m = str.match(/solid\s+((?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color)\([^)]*\)|#[0-9a-f]{3,8}\b|[a-z]+)/i);
  if (!m) return false;
-  const c = m[1].toLowerCase();
-  if (['gray', 'grey', 'silver', 'white', 'black', 'transparent', 'currentcolor'].includes(c)) return true;
-  if (/^(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\(/i.test(c)) return isNeutralColor(c);
-  const hex = c.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/);
-  if (hex) {
-    const [r, g, b] = [parseInt(hex[1], 16), parseInt(hex[2], 16), parseInt(hex[3], 16)];
-    return (Math.max(r, g, b) - Math.min(r, g, b)) < 30;
-  }
-  const shex = c.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
-  if (shex) {
-    const [r, g, b] = [parseInt(shex[1] + shex[1], 16), parseInt(shex[2] + shex[2], 16), parseInt(shex[3] + shex[3], 16)];
-    return (Math.max(r, g, b) - Math.min(r, g, b)) < 30;
-  }
-  return false;
+  return isNeutralAuthoredColor(m[1]);
 }

 const REGEX_MATCHERS = [
@@ -345,12 +416,120 @@ const REGEX_ANALYZERS = [
 ];

 // ---------------------------------------------------------------------------
-// Style block extraction (Vue/Svelte <style> blocks)
+// Structural CSS checks used by source files whose styles are not parsed by
+// the static HTML engine.
+// ---------------------------------------------------------------------------
+
+const CHROMATIC_SHADOW_TOKEN_RE = /(?:^|-)(?:accent|kinpaku|patina|gold|red|orange|amber|yellow|lime|green|emerald|teal|cyan|blue|indigo|violet|purple|magenta|pink|rose|coral|aqua|mint|burgundy|crimson|scarlet)(?:-|$)/i;
+
+function insetStripeColorIsChromatic(rawColor) {
+  const color = String(rawColor || '').trim().replace(/\s*!important\s*$/i, '');
+  if (/^(?:currentcolor|transparent|inherit|unset)$/i.test(color)) return false;
+  const variable = color.match(/^var\(\s*(--[\w-]+)/i);
+  if (variable) return CHROMATIC_SHADOW_TOKEN_RE.test(variable[1]);
+  if (!/^(?:#|rgba?\(|hsla?\(|hwb\(|oklch\(|oklab\(|lch\(|lab\(|color\(|[a-z]+$)/i.test(color)) return false;
+  return !isNeutralAuthoredColor(color);
+}
+
+/**
+ * Blank out comment bodies while preserving every byte offset (and therefore
+ * every line number) so commented-out CSS is not scanned as live rules.
+ */
+function blankCssComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, (block) => block.replace(/[^\n]/g, ' '));
+}
+
+function scanInsetStripeCss(rawContent, filePath, lineOffset = 0) {
+  const content = blankCssComments(rawContent);
+  const findings = [];
+  const ruleRe = /([^{};]+)\{([^{}]*)\}/g;
+  let match;
+  // Deriving each line with content.slice(0, offset).split('\n') re-scans the
+  // whole prefix per rule, which is O(n^2) on a large stylesheet. Rule matches
+  // arrive in source order, so carry a monotonic cursor instead: one pass total.
+  let scanOffset = 0;
+  let scanLine = 1;
+  const lineAtOffset = (offset) => {
+    while (scanOffset < offset) {
+      if (content[scanOffset] === '\n') scanLine++;
+      scanOffset++;
+    }
+    return scanLine;
+  };
+  while ((match = ruleRe.exec(content)) !== null) {
+    // The selector group is `[^{};]+`, which greedily absorbs the whitespace and
+    // newlines trailing the previous rule. Advance past that run before deriving
+    // the line, or every rule after the first reports the preceding line.
+    const selectorStart = match.index + (match[1].length - match[1].trimStart().length);
+    const selector = match[1].trim().replace(/\s+/g, ' ');
+    if (!selector) continue;
+    if (/:(?:hover|focus|focus-visible|focus-within|active|checked|target)\b/i.test(selector)) continue;
+    if (/\[aria-selected\s*[*^$|~]?=\s*["']?true/i.test(selector)) continue;
+    if (/\[aria-current(?!\s*[*^$|~]?=\s*["']?false)/i.test(selector)) continue;
+    if (/(?:^|[\s._[-])(?:active|current|selected)(?![\w])/i.test(selector)) continue;
+    if (/(?:^|[\s>+~,(])(?:button|hr|tr|td|th|table|blockquote|pre|code)(?![\w-])/i.test(selector)) continue;
+
+    // Read the last of a repeated declaration, not the first: that is what the
+    // cascade paints. Taking the first both flagged stripes that a later
+    // `box-shadow: none` had cancelled and missed stripes that overrode an
+    // earlier value, and mis-skipped rules whose narrow width was overridden.
+    const width = lastMatch(match[2], /(?:^|;)\s*(?:width|inline-size)\s*:\s*(\d+(?:\.\d+)?)px/gi);
+    if (width && Number(width[1]) <= 40) continue;
+    const declaration = lastMatch(match[2], /(?:^|;)\s*box-shadow\s*:\s*([^;]+)/gi);
+    if (!declaration || !/\binset\b/i.test(declaration[1])) continue;
+    // `!important` qualifies the declaration, not the shadow value, so strip it
+    // before the layers are read. Tokenizing split it into its own token, which
+    // made the color count wrong and silently stopped flagging stripes declared
+    // with it — a shape the previous regex handled.
+    const shadowValue = declaration[1].replace(/\s*!\s*important\s*$/i, '').trim();
+
+    for (const rawLayer of shadowValue.split(/,(?![^(]*\))/)) {
+      const layer = rawLayer.trim();
+      // Parse the layer by its grammar rather than by one spelling of it.
+      // A box-shadow layer is `inset? && <length>{2,4} && <color>?` in any
+      // order, so `inset 4px 0 red`, `4px 0 0 red inset`, and `red 4px 0 inset`
+      // all paint the same stripe. Matching a fixed token order missed three
+      // valid spellings in a row; enumerate the tokens instead. Tokenizing must
+      // respect parens: `rgb(0 0 0)` is one color token, and splitting it on
+      // whitespace would read its channels as lengths.
+      const tokens = tokenizeShadowLayer(layer);
+      if (!tokens.some((token) => /^inset$/i.test(token))) continue;
+      const rest = tokens.filter((token) => !/^inset$/i.test(token));
+      const lengths = rest.filter(isShadowLength);
+      const colors = rest.filter((token) => !isShadowLength(token));
+      // Only the two offsets are required; omitted blur/spread default to 0,
+      // which is exactly the stripe shape. More than one non-length token is a
+      // layer shape we do not claim to understand, so leave it alone.
+      if (lengths.length < 2 || lengths.length > 4 || colors.length !== 1) continue;
+      const values = lengths.map((token) => ({
+        n: Number(token.replace(/px$/i, '')),
+        hasPx: /px$/i.test(token),
+      }));
+      const x = values[0];
+      const y = values[1];
+      const blur = values[2] ? values[2].n : 0;
+      const spread = values[3] ? values[3].n : 0;
+      if ((x.n !== 0 && !x.hasPx) || (y.n !== 0 && !y.hasPx) || blur !== 0 || spread !== 0) continue;
+      const ax = Math.abs(x.n);
+      const ay = Math.abs(y.n);
+      if (!((ax >= 3 && ax <= 12 && ay === 0) || (ay >= 3 && ay <= 12 && ax === 0))) continue;
+      if (!insetStripeColorIsChromatic(colors[0])) continue;
+      const edge = ay === 0 ? (x.n > 0 ? 'left' : 'right') : (y.n > 0 ? 'top' : 'bottom');
+      const line = lineOffset + lineAtOffset(selectorStart);
+      findings.push(finding('side-tab', filePath, `${selector} — inset box-shadow ${ay === 0 ? ax : ay}px stripe (${edge})`, line));
+      break;
+    }
+  }
+  return findings;
+}
+
+// ---------------------------------------------------------------------------
+// Style block extraction (Astro/Vue/Svelte <style> blocks)
 // ---------------------------------------------------------------------------

 function extractStyleBlocks(content, ext) {
  ext = ext.toLowerCase();
-  if (ext !== '.vue' && ext !== '.svelte') return [];
+  if (ext !== '.astro' && ext !== '.vue' && ext !== '.svelte') return [];
  const blocks = [];
  const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
  let m;
@@ -477,8 +656,9 @@ function detectText(content, filePath, options = {}) {
    profile,
    phase: 'source',
  }));
+  if (cssLike.has(ext)) findings.push(...scanInsetStripeCss(content, filePath));

-  // Extract and scan <style> blocks from Vue/Svelte SFCs
+  // Extract and scan <style> blocks from Astro/Vue/Svelte components.
  const styleBlocks = profile
    ? profileStep(profile, {
      engine: 'regex',
@@ -493,6 +673,13 @@ function detectText(content, filePath, options = {}) {
      profile,
      phase: 'style-block',
    }));
+    // block.startLine is the first line *after* the <style> tag, but block.content
+    // begins at the character right after that tag — so its own line 1 sits on the
+    // tag's line, whether or not a newline follows immediately. lineAtOffset is
+    // 1-based, so the offset is startLine - 2; startLine - 1 double-counted and
+    // reported every selector one line low. runRegexMatchers keeps startLine - 1
+    // because it indexes its split lines from zero.
+    findings.push(...scanInsetStripeCss(block.content, filePath, block.startLine - 2));
  }

  // Extract and scan CSS-in-JS template literals
@@ -510,6 +697,7 @@ function detectText(content, filePath, options = {}) {
      profile,
      phase: 'css-in-js',
    }));
+    findings.push(...scanInsetStripeCss(block.content, filePath, block.startLine - 1));
  }

  if (options?.designSystem) {
@@ -6,6 +6,7 @@
 */
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
+import fs from 'node:fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import {
@@ -17,6 +18,72 @@ import {
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const FIXTURES = path.join(__dirname, 'fixtures', 'antipatterns');

+describe('detectText - Astro structural CSS fixtures', () => {
+  const SHOULD_FLAG = [
+    'Kinpaku Edge',
+    'Patina Edge',
+    'Accent Edge',
+    'Signal Blue Edge',
+    'Chromatic Hex Edge',
+    'Named Red Edge',
+    'Chromatic Rgb Edge',
+    'Chromatic Oklch Edge',
+    // `inset` may follow the offsets/color. Requiring it first missed the same
+    // stripe written the other legal way.
+    'Trailing Inset Edge',
+    'Trailing Inset Token Edge',
+    'Inset Named Token Edge',
+    // Only the two offsets are required; blur/spread default to 0.
+    'Two Length Edge',
+    'Important Edge',
+    'Cascade Override Edge',
+    'Color First Edge',
+    'Color First Var Edge',
+    'Two Length Trailing Inset Edge',
+  ];
+  const SHOULD_PASS = [
+    'Neutral Shadow Token',
+    'Current Color Edge',
+    'Selected State Edge',
+    'Hairline Edge',
+    'Thick Fill Edge',
+    'Blurred Edge',
+    'Narrow Artwork',
+    // Authored CSS spells neutrals as hex and keywords. isNeutralColor only
+    // parses the computed function forms and reports everything else as
+    // chromatic, so routing these through it flagged plain black and gray
+    // hairlines as the "colored stripe" AI tell.
+    'Black Hex Edge',
+    'Black Named Edge',
+    'Gray Hex Edge',
+    'Dimgray Named Edge',
+    'Black Rgb Edge',
+    'Shorthand Neutral Hex Edge',
+    // Commented-out CSS is not a live rule.
+    'Commented Out Edge',
+    // Trailing `inset` still respects the neutral-color exemption.
+    'Trailing Inset Neutral Edge',
+    // The short form still respects the neutral and blur exclusions.
+    'Two Length Neutral Edge',
+    'Space Rgb Neutral Edge',
+    'Cascade Cancelled Edge',
+    'Two Length Blurred Edge',
+  ];
+
+  it('Astro style blocks flag unresolved chromatic inset stripes only', () => {
+    const filePath = path.join(FIXTURES, 'astro-inset-shadow-stripe.astro');
+    const source = fs.readFileSync(filePath, 'utf8');
+    const findings = detectText(source, filePath).filter(r => r.antipattern === 'side-tab');
+    const snippets = findings.map(r => r.snippet || '').join(' | ');
+    for (const heading of SHOULD_FLAG) {
+      assert.match(snippets, new RegExp(`data-case=${JSON.stringify(heading)}`), `expected "${heading}" to flag`);
+    }
+    for (const heading of SHOULD_PASS) {
+      assert.doesNotMatch(snippets, new RegExp(`data-case=${JSON.stringify(heading)}`), `"${heading}" should pass`);
+    }
+  });
+});
+
 describe('detectHtml — static HTML/CSS fixtures', () => {
  it('should-flag: catches border anti-patterns', async () => {
    const f = await detectHtml(path.join(FIXTURES, 'should-flag.html'));
@@ -0,0 +1,100 @@
+---
+const title = 'Astro inset shadow stripe regression';
+---
+
+<main>
+  <h1>{title}</h1>
+  <section aria-labelledby="should-flag">
+    <h2 id="should-flag">Should flag</h2>
+    <article data-case="Kinpaku Edge"><h3>Kinpaku Edge</h3></article>
+    <article data-case="Patina Edge"><h3>Patina Edge</h3></article>
+    <article data-case="Accent Edge"><h3>Accent Edge</h3></article>
+    <article data-case="Signal Blue Edge"><h3>Signal Blue Edge</h3></article>
+    <article data-case="Chromatic Hex Edge"><h3>Chromatic Hex Edge</h3></article>
+    <article data-case="Named Red Edge"><h3>Named Red Edge</h3></article>
+    <article data-case="Chromatic Rgb Edge"><h3>Chromatic Rgb Edge</h3></article>
+    <article data-case="Chromatic Oklch Edge"><h3>Chromatic Oklch Edge</h3></article>
+    <article data-case="Trailing Inset Edge"><h3>Trailing Inset Edge</h3></article>
+    <article data-case="Trailing Inset Token Edge"><h3>Trailing Inset Token Edge</h3></article>
+    <article data-case="Inset Named Token Edge"><h3>Inset Named Token Edge</h3></article>
+    <article data-case="Two Length Edge"><h3>Two Length Edge</h3></article>
+    <article data-case="Two Length Trailing Inset Edge"><h3>Two Length Trailing Inset Edge</h3></article>
+  </section>
+  <section aria-labelledby="should-pass">
+    <h2 id="should-pass">Should pass</h2>
+    <article data-case="Neutral Shadow Token"><h3>Neutral Shadow Token</h3></article>
+    <article data-case="Current Color Edge"><h3>Current Color Edge</h3></article>
+    <article data-case="Selected State Edge" aria-current="page"><h3>Selected State Edge</h3></article>
+    <article data-case="Hairline Edge"><h3>Hairline Edge</h3></article>
+    <article data-case="Thick Fill Edge"><h3>Thick Fill Edge</h3></article>
+    <article data-case="Blurred Edge"><h3>Blurred Edge</h3></article>
+    <article data-case="Narrow Artwork"><h3>Narrow Artwork</h3></article>
+    <article data-case="Black Hex Edge"><h3>Black Hex Edge</h3></article>
+    <article data-case="Black Named Edge"><h3>Black Named Edge</h3></article>
+    <article data-case="Gray Hex Edge"><h3>Gray Hex Edge</h3></article>
+    <article data-case="Dimgray Named Edge"><h3>Dimgray Named Edge</h3></article>
+    <article data-case="Black Rgb Edge"><h3>Black Rgb Edge</h3></article>
+    <article data-case="Shorthand Neutral Hex Edge"><h3>Shorthand Neutral Hex Edge</h3></article>
+    <article data-case="Commented Out Edge"><h3>Commented Out Edge</h3></article>
+    <article data-case="Trailing Inset Neutral Edge"><h3>Trailing Inset Neutral Edge</h3></article>
+    <article data-case="Important Edge"><h3>Important Edge</h3></article>
+    <article data-case="Cascade Override Edge"><h3>Cascade Override Edge</h3></article>
+    <article data-case="Cascade Cancelled Edge"><h3>Cascade Cancelled Edge</h3></article>
+    <article data-case="Color First Edge"><h3>Color First Edge</h3></article>
+    <article data-case="Color First Var Edge"><h3>Color First Var Edge</h3></article>
+    <article data-case="Two Length Neutral Edge"><h3>Two Length Neutral Edge</h3></article>
+    <article data-case="Space Rgb Neutral Edge"><h3>Space Rgb Neutral Edge</h3></article>
+    <article data-case="Two Length Blurred Edge"><h3>Two Length Blurred Edge</h3></article>
+  </section>
+</main>
+
+<style is:inline>
+  [data-case="Kinpaku Edge"] { box-shadow: inset 3px 0 0 var(--ks-kinpaku-deep); }
+  [data-case="Patina Edge"] { box-shadow: inset 3px 0 0 var(--ks-patina-deep); }
+  [data-case="Accent Edge"] { box-shadow: inset -4px 0 0 var(--brand-accent); }
+  [data-case="Signal Blue Edge"] { box-shadow: inset 0 5px 0 var(--signal-blue); }
+  [data-case="Neutral Shadow Token"] { box-shadow: inset 3px 0 0 var(--shadow-color); }
+  [data-case="Current Color Edge"] { box-shadow: inset 3px 0 0 currentColor; }
+  [data-case="Selected State Edge"][aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand-accent); }
+  [data-case="Hairline Edge"] { box-shadow: inset 2px 0 0 var(--brand-accent); }
+  [data-case="Thick Fill Edge"] { box-shadow: inset 14px 0 0 var(--brand-accent); }
+  [data-case="Blurred Edge"] { box-shadow: inset 3px 0 5px var(--brand-accent); }
+  [data-case="Narrow Artwork"] { width: 24px; box-shadow: inset 3px 0 0 var(--brand-accent); }
+
+  /* Literal colors: authored CSS spells neutrals as hex and keywords, not as
+     the computed rgb()/oklch() forms a browser emits. */
+  [data-case="Chromatic Hex Edge"] { box-shadow: inset 4px 0 0 #6366f1; }
+  [data-case="Named Red Edge"] { box-shadow: inset 4px 0 0 red; }
+  [data-case="Chromatic Rgb Edge"] { box-shadow: inset 4px 0 0 rgb(99, 102, 241); }
+  [data-case="Chromatic Oklch Edge"] { box-shadow: inset 4px 0 0 oklch(65% 0.18 250); }
+  [data-case="Black Hex Edge"] { box-shadow: inset 4px 0 0 #000; }
+  [data-case="Black Named Edge"] { box-shadow: inset 4px 0 0 black; }
+  [data-case="Gray Hex Edge"] { box-shadow: inset 4px 0 0 #e5e7eb; }
+  [data-case="Dimgray Named Edge"] { box-shadow: inset 4px 0 0 dimgray; }
+  [data-case="Black Rgb Edge"] { box-shadow: inset 4px 0 0 rgb(0, 0, 0); }
+  [data-case="Shorthand Neutral Hex Edge"] { box-shadow: inset 4px 0 0 #1118; }
+
+  /* `inset` is order-independent per spec; these paint the same stripe as above. */
+  [data-case="Trailing Inset Edge"] { box-shadow: 4px 0 0 #6366f1 inset; }
+  [data-case="Trailing Inset Token Edge"] { box-shadow: 4px 0 0 var(--brand-accent) inset; }
+  /* The keyword must only be stripped standalone: this token merely contains it. */
+  [data-case="Inset Named Token Edge"] { box-shadow: inset 4px 0 0 var(--inset-accent); }
+  [data-case="Trailing Inset Neutral Edge"] { box-shadow: 4px 0 0 #000 inset; }
+
+  /* box-shadow takes <length>{2,4}: blur and spread are optional and default to
+     0, so these paint the same stripe as the four-length forms above. */
+  [data-case="Two Length Edge"] { box-shadow: inset 4px 0 var(--brand-accent); }
+  [data-case="Two Length Trailing Inset Edge"] { box-shadow: 0 5px #6366f1 inset; }
+  [data-case="Important Edge"] { box-shadow: inset 4px 0 var(--brand-accent) !important; }
+  [data-case="Cascade Override Edge"] { box-shadow: none; box-shadow: inset 4px 0 red; }
+  [data-case="Cascade Cancelled Edge"] { box-shadow: inset 4px 0 red; box-shadow: none; }
+  [data-case="Color First Edge"] { box-shadow: red 4px 0 inset; }
+  [data-case="Color First Var Edge"] { box-shadow: var(--brand-accent) 4px 0 0 inset; }
+  [data-case="Two Length Neutral Edge"] { box-shadow: inset 4px 0 #000; }
+  [data-case="Space Rgb Neutral Edge"] { box-shadow: inset 4px 0 rgb(0 0 0); }
+  [data-case="Two Length Blurred Edge"] { box-shadow: inset 4px 0 5px var(--brand-accent); }
+
+  /* Commented-out rules are not live CSS.
+  [data-case="Commented Out Edge"] { box-shadow: inset 4px 0 0 var(--brand-accent); }
+  */
+</style>