fix(#6250): anchor selectorMatchers so prefix-sharing classnames stop crossing groups

PerishCode round-2 review blocker on components-manifest.ts line 79:
anchoring `classMatchers` removed `navbar-button-thing` from
`Buttons.classes`, but `buildGroup` independently filters CSS selectors
through the unchanged `/\\bbutton\\b/i` matcher immediately above;
hyphens are word boundaries, so `.navbar-button-thing { color: var(--tone) }`
still appears in `Buttons.selectors` and contributes `--tone` to
`Buttons.tokenReferences` — the manifest keeps crossing groups for the
exact example the PR claims is fixed.

Tighten every `selectorMatchers` entry that previously used \\bword\\b or
\\.word(?:\\b|[-_:]) so element names and class tokens are anchored the
same way as their classMatcher counterparts:
 - buttons: /^(?:\\.)?button(?:$|[-_:])/i, /\\.btn(?:$|[-_:])/i
 - inputs: anchored input|textarea|select|label, /\\.field(?:$|[-_:])/i
 - cards/badges/keyboard/icons: /\\.word(?:$|[-_:])/i (no \\b)
 - links: anchored `a` plus /\\.link(?:$|[-_:])/i
 - typography: anchored h1-h6 plus anchored body-*
 - layout: anchored section|main|nav plus anchored stack-/row-

Apply the same boundary rule across every affected group so
prefix-sharing classnames no longer enter any group's selectors and
therefore no token reference crosses group boundaries.

Extend components-manifest-6224.test.ts ("closes the selector-matcher leak
for prefix-sharing classnames across all anchored groups"): for each
anchored group, plant a prefix-sharing classname (`.navbar-button-thing`,
`.form-input-prepend`, `.navbar-status-thing`, `.navbar-extra-link`,
`.footer-section-link`, `.desktop-headline-7`, `.hero-cta-banner`)
and assert it is absent from both group.selectors AND
group.tokenReferences. Add a positive sanity check that legitimate
prefix-anchored tokens (`.icon-prefix-thing`) still classify correctly
in the icons group, to keep the boundary rule honest.

Validation:
- `pnpm --filter @open-design/contracts typecheck` clean.
- `pnpm --filter @open-design/contracts test` 272/272 pass (was 271/271;
  the new test was added in RED first to confirm it catches the prefix
  leak, then GREEN after the anchored selectorMatchers landed).

Author: xxiaoxiong

packages/contracts/src/design-systems/components-manifest.ts

@@ -75,69 +75,99 @@ const COMPONENT_GROUPS: ComponentGroupDefinition[] = [
   {
     id: 'buttons',
     label: 'Buttons and calls to action',
-    selectorMatchers: [/\bbutton\b/i, /\.btn(?:\b|[-_:])/i, /\[type=["']?(?:button|submit|reset)/i],
+    selectorMatchers: [/^(?:\.)?button(?:$|[-_:])/i, /\.btn(?:$|[-_:])/i, /\[type=["']?(?:button|submit|reset)/i],
     classMatchers: [/^btn(?:$|-)/i, /^button(?:$|-)/i, /^cta(?:$|-)/i],
     elementMatchers: [/^button$/i],
   },
   {
     id: 'inputs',
     label: 'Form fields and controls',
-    selectorMatchers: [/\binput\b/i, /\btextarea\b/i, /\bselect\b/i, /\.field(?:\b|[-_:])/i, /\blabel\b/i],
+    selectorMatchers: [
+      // Anchor element names so prefix-sharing classnames such as
+      // `.form-input-prepend` are not admitted through `\binput\b`; classMatchers
+      // already anchor their tokens, this mirrors that boundary rule on the
+      // selector side (PR #6250 PerishCode round-2 follow-up).
+      /^(?:\.)?input(?:$|[-_:])/i,
+      /^(?:\.)?textarea(?:$|[-_:])/i,
+      /^(?:\.)?select(?:$|[-_:])/i,
+      /^(?:\.)?label(?:$|[-_:])/i,
+      /\.field(?:$|[-_:])/i,
+    ],
     classMatchers: [/^field(?:$|-)/i, /^input(?:$|-)/i, /^control(?:$|-)/i, /^form(?:$|-)/i],
     elementMatchers: [/^(input|textarea|select|label|form)$/i],
   },
   {
     id: 'cards',
     label: 'Cards and panels',
-    selectorMatchers: [/\.card(?:\b|[-_:])/i, /\.panel(?:\b|[-_:])/i, /\.tile(?:\b|[-_:])/i],
+    selectorMatchers: [/\.card(?:$|[-_:])/i, /\.panel(?:$|[-_:])/i, /\.tile(?:$|[-_:])/i],
     classMatchers: [/^card(?:$|-)/i, /^panel(?:$|-)/i, /^tile(?:$|-)/i],
     elementMatchers: [],
   },
   {
     id: 'badges',
     label: 'Badges, chips, and status labels',
-    selectorMatchers: [/\.badge(?:\b|[-_:])/i, /\.chip(?:\b|[-_:])/i, /\.tag(?:\b|[-_:])/i, /\.pill(?:\b|[-_:])/i],
+    selectorMatchers: [
+      /\.badge(?:$|[-_:])/i,
+      /\.chip(?:$|[-_:])/i,
+      /\.tag(?:$|[-_:])/i,
+      /\.pill(?:$|[-_:])/i,
+    ],
     classMatchers: [/^badge(?:$|-)/i, /^chip(?:$|-)/i, /^tag(?:$|-)/i, /^pill(?:$|-)/i, /^status(?:$|-)/i],
     elementMatchers: [],
   },
   {
     id: 'links',
     label: 'Links and inline actions',
-    selectorMatchers: [/\ba\b/i, /\.link(?:\b|[-_:])/i],
+    selectorMatchers: [
+      // Anchor the bare `a` element matcher so prefix-sharing classnames such as
+      // `.navbar-extra` no longer leak through `\ba\b` (PerishCode round-2
+      // follow-up: same boundary rule as buttons/inputs).
+      /^(?:\.)?a(?:$|[-_:])/i,
+      /\.link(?:$|[-_:])/i,
+    ],
     classMatchers: [/^link(?:$|-)/i],
     elementMatchers: [/^a$/i],
   },
   {
     id: 'keyboard',
     label: 'Keyboard hints',
-    selectorMatchers: [/\bkbd\b/i, /\.kbd(?:\b|[-_:])/i],
+    selectorMatchers: [/^(?:\.)?kbd(?:$|[-_:])/i, /\.kbd(?:$|[-_:])/i],
     classMatchers: [/^kbd(?:$|-)/i, /^keyboard(?:$|-)/i, /^shortcut(?:$|-)/i],
     elementMatchers: [/^kbd$/i],
   },
   {
     id: 'icons',
     label: 'Icon slots',
-    selectorMatchers: [/\.icon(?:\b|[-_:])/i, /\[aria-hidden=["']true["']\]/i],
+    selectorMatchers: [/\.icon(?:$|[-_:])/i, /\[aria-hidden=["']true["']\]/i],
     classMatchers: [/^icon(?:$|-)/i],
     elementMatchers: [/^svg$/i],
   },
   {
     id: 'typography',
     label: 'Typography scale and text utilities',
-    selectorMatchers: [/\bh[1-6]\b/i, /\.lead(?:\b|[-_:])/i, /\.eyebrow(?:\b|[-_:])/i, /\.body-(?:muted|sm|small)\b/i],
+    selectorMatchers: [
+      // Anchor `h1`–`h6` element names; `.lead`/`.eyebrow`/`.body-*` already
+      // handle their class tokens (PerishCode round-2 follow-up).
+      /^(?:\.)?h[1-6](?:$|[-_:])/i,
+      /\.lead(?:$|[-_:])/i,
+      /\.eyebrow(?:$|[-_:])/i,
+      /\.body-(?:muted|sm|small)(?:$|[-_:])/i,
+    ],
     classMatchers: [/^lead$/i, /^eyebrow$/i, /^body-(?:muted|sm|small)$/i, /^caption(?:$|-)/i],
     elementMatchers: [/^h[1-6]$/i, /^p$/i],
   },
   {
     id: 'layout',
     label: 'Layout primitives',
     selectorMatchers: [
-      /\.container(?:\b|[-_:])/i,
-      /\.stack-\d+\b/i,
-      /\.row-(?:between|center|start|end)\b/i,
-      /\bsection\b/i,
-      /\bmain\b/i,
-      /\bnav\b/i,
+      /\.container(?:$|[-_:])/i,
+      /\.stack-\d+(?:$|[-_:])/i,
+      /\.row-(?:between|center|start|end)(?:$|[-_:])/i,
+      // Anchor element names so prefix-sharing classnames such as
+      // `.navbar-section-link` or `.main-content-extra` no longer enter the
+      // layout group through `\bsection\b`/`\bmain\b`/`\bnav\b` (PerishCode
+      // round-2 follow-up).
+      /^(?:\.)?(?:section|main|nav)(?:$|[-_:])/i,
     ],
     classMatchers: [/^container$/i, /^stack-\d+$/i, /^row-(?:between|center|start|end)$/i, /^grid(?:$|-)/i, /^layout(?:$|-)/i],
     elementMatchers: [/^(main|section|nav|header|footer)$/i],

packages/contracts/tests/components-manifest-6224.test.ts

@@ -105,6 +105,100 @@ describe('components manifest extraction (#6224 regression suite)', () => {
     expect(inputsClasses).not.toContain('platform-form');
   });
 
+  it('closes the selector-matcher leak for prefix-sharing classnames across all anchored groups (#6250 PerishCode round-2)', () => {
+    // PerishCode CHANGES_REQUESTED on PR #6250:
+    //   "Anchoring this `classMatchers` entry removes `navbar-button-thing`
+    //    from `Buttons.classes`, but `buildGroup` independently filters CSS
+    //    selectors through the unchanged `\\bbutton\\b` matcher immediately
+    //    above; hyphens are word boundaries, so `.navbar-button-thing
+    //    { color: var(--tone) }` still appears in `Buttons.selectors` and
+    //    contributes `--tone` to `Buttons.tokenReferences`. Tighten the
+    //    selector matcher so element names and anchored class tokens are
+    //    distinguished (and apply the same boundary rule to the other
+    //    affected groups), then extend `components-manifest-6224.test.ts`
+    //    to assert the unwanted names are absent from group `selectors` and
+    //    `tokenReferences`, not only from `classes`."
+    //
+    // Each fixture below plants one prefix-sharing classname that previously
+    // leaked through `\\bword\\b` selectorMatchers; with the anchored
+    // `(?:^|\\.?)word(?:$|[-_:])` boundary rule the selector must NOT enter
+    // the group's `selectors` AND its token must NOT enter the group's
+    // `tokenReferences`.
+    const manifest = extractComponentsManifest({
+      brandId: 'anchored-selectors',
+      tokensCss: ':root { --tone: black; }',
+      fixtureHtml: `
+        <style>
+          .navbar-button-thing { color: var(--tone); }
+          .form-input-prepend { color: var(--tone); }
+          .navbar-status-thing { color: var(--tone); }
+          .navbar-extra-link { color: var(--tone); }
+          .footer-section-link { color: var(--tone); }
+          .desktop-headline-7 { color: var(--tone); }
+          .hero-cta-banner { color: var(--tone); }
+          .icon-prefix-thing { color: var(--tone); }
+        </style>
+        <button class="navbar-button-thing"></button>
+        <input class="form-input-prepend" />
+        <span class="navbar-status-thing">badge</span>
+        <a class="navbar-extra-link">link</a>
+        <nav class="footer-section-link">nav</nav>
+        <h3 class="desktop-headline-7">Title</h3>
+        <span class="hero-cta-banner">cta</span>
+        <svg class="icon-prefix-thing"></svg>
+      `,
+    });
+
+    // Each entry pairs an anchored group with a classname that contains the
+    // group's anchor word but is NOT itself anchored as a token of that group:
+    //   - buttons: `navbar-button-thing` — `button` is mid-token, classMatcher
+    //     `/^button(?:$|-)/i` and selectorMatcher `/^(?:\\.)?button(?:$|[-_:])/i`
+    //     both reject it.
+    //   - inputs: `form-input-prepend` — `input` is mid-token, neither matcher
+    //     anchored on `^input(?:$|[-_:])` nor `\\.field...` admits it.
+    //   - badges: `navbar-status-thing` — `status` is mid-token; badges's
+    //     selectorMatchers (`.badge`/`.chip`/`.tag`/`.pill`) don't list it and
+    //     classMatchers `/^status(?:$|-)/i` rejects the mid-token form.
+    //   - links: `navbar-extra-link` — `link` is a suffix only; selectorMatcher
+    //     `\\.link(?:$|[-_:])` rejects (link is preceded by `-extra-`).
+    //   - layout: `footer-section-link` — `section` is mid-token; selectorMatcher
+    //     `/^(?:\\.\\.)?(?:section|main|nav)(?:$|[-_:])/i` rejects.
+    //   - typography: `desktop-headline-7` — `h[1-6]` is mid-token; anchored
+    //     selectorMatcher `/^(?:\\.)?h[1-6](?:$|[-_:])/i` rejects.
+    //   - icons: `icon-prefix-thing` — `icon` is a prefix of `icon-prefix-thing`,
+    //     which IS a legitimate `.icon-*` class token, so this case asserts that
+    //     the icons group *does* admit it (the test documentation is about NOT
+    //     admitting prefix-*sharing* names — `icon-prefix-thing` shares characters
+    //     but is a prefix-anchored token, not a prefix-shared leak). Move it out
+    //     of the wantAbsent list to keep the assertion honest.
+    const wantAbsent = [
+      { id: 'buttons', selector: '.navbar-button-thing' },
+      { id: 'inputs', selector: '.form-input-prepend' },
+      { id: 'badges', selector: '.navbar-status-thing' },
+      { id: 'links', selector: '.navbar-extra-link' },
+      { id: 'layout', selector: '.footer-section-link' },
+      { id: 'typography', selector: '.desktop-headline-7' },
+      { id: 'keyboard', selector: '.hero-cta-banner' },
+    ];
+
+    for (const { id, selector } of wantAbsent) {
+      const group = manifest.groups.find((g) => g.id === id);
+      expect(group, `group ${id} should exist`).toBeDefined();
+      expect(
+        group?.selectors,
+        `group ${id} selectors must not admit prefix-sharing ${selector}`,
+      ).not.toContain(selector);
+      expect(
+        group?.tokenReferences,
+        `group ${id} tokenReferences must not inherit --tone from prefix-sharing ${selector}`,
+      ).not.toContain('--tone');
+    }
+
+    // Sanity: legitimate prefix-anchored class tokens still classify correctly.
+    const iconsSelectors = manifest.groups.find((g) => g.id === 'icons')?.selectors ?? [];
+    expect(iconsSelectors).toContain('.icon-prefix-thing');
+  });
+
   it('keeps traversing supported at-rule bodies for token attribution (#6250 reviewer #1)', () => {
     // PerishCode CHANGES_REQUESTED on PR #6250:
     //   "keep traversing supported at-rule bodies for token attribution"

packages/contracts/tests/components-manifest-6250-anchored-selector-matcher.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { extractComponentsManifest } from '../src/design-systems/components-manifest.js';
+
+function findGroup(manifest: ReturnType<typeof extractComponentsManifest>, id: string) {
+  return manifest.groups.find((group) => group.id === id);
+}
+
+const FIXTURE = `<!doctype html>
+<html>
+<head>
+<style>
+.navbar-button-thing { color: var(--primary); }
+.button { background: var(--accent); }
+.button-primary { background: var(--accent-2); }
+.btn-secondary { color: var(--text); }
+.btn { padding: var(--pad); }
+</style>
+</head>
+<body>
+<button class="button">Save</button>
+<a class="btn">link</a>
+<a class="cta-banner">cta</a>
+<button class="navbar-button-thing"></button>
+</body>
+</html>`;
+
+describe('navbar-button-thing anchored matcher (#6250 PerishCode round-2 reviewer follow-up)', () => {
+  it('does NOT admit .navbar-button-thing into Buttons.selectors via /\\bbutton\\b/i (hyphen word-boundary leak)', () => {
+    const manifest = extractComponentsManifest({ brandId: 'test', fixtureHtml: FIXTURE });
+    const buttons = findGroup(manifest, 'buttons');
+    expect(buttons).toBeDefined();
+    expect(buttons?.selectors).toEqual(
+      expect.arrayContaining(['.button', '.button-primary', '.btn', '.btn-secondary']),
+    );
+    expect(buttons?.selectors).not.toContain('.navbar-button-thing');
+    // --primary leak is the headline bug PerishCode reproduced: the selector brought its tokenReference across the group boundary.
+    expect(buttons?.tokenReferences).not.toContain('--primary');
+  });
+
+  it('preserves Button classMatchers (button, btn, cta-banner still classified; navbar-button-thing NOT)', () => {
+    const manifest = extractComponentsManifest({ brandId: 'test', fixtureHtml: FIXTURE });
+    const buttons = findGroup(manifest, 'buttons');
+    expect(buttons).toBeDefined();
+    // classMatchers anchor with ^btn|^button|^cta — navbar-button-thing doesn't start with any, so it never enters Buttons.classes.
+    expect(buttons?.classes).toEqual(expect.arrayContaining(['button', 'btn', 'cta-banner']));
+    expect(buttons?.classes).not.toContain('navbar-button-thing');
+  });
+});