Match easing and duration Tailwind classes only in a class list

outsideTheScale() read ease-in/ease-out/ease-in-out/duration-* line by line
across every file, the way it still reads its other scale steps — but a
plain CSS keyword read out of an API into a JS string (matchMedia(…) ?
'linear' : 'ease-out') names a real value, not a Tailwind class, and the
same line scan read the words back out of a stylesheet test's own regex
literals (`ease-in`, `ease-out`) as if they were Tailwind too. Tested both
ways per the plan's instruction: Blade/PHP class lists have the identical
false-positive shape, so the two families move to FAMILIES, matched only
through a class list (literalClasses()/tailwindFamilyHint()) as the newer
families already are, in Blade and PHP as much as in JavaScript.

Plan step 42 (Phase F), Part B.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/DesignGuardTest.php

@@ -150,6 +150,16 @@ it('sends an easing and a duration to the motion tokens', function () {
     ]);
 });
 
+it('leaves an easing or a duration word alone in a JavaScript string outside a class list', function () {
+    // scale/motion.js reads a real CSS keyword out of matchMedia() into a variable named `easing`
+    // (`'linear'`/`'ease-out'`), the shape the plan calls out as a false positive: nothing here
+    // is a class list, so the class-context match above never sees it, and the family is off
+    // outsideTheScale()'s line scan since the fix (see DesignGuard::outsideTheScale()'s header).
+    $violations = DesignGuard::scan(realpath(GUARD_FIXTURES.'/scale/motion.js'))->violations();
+
+    expect($violations)->toBe([]);
+});
+
 it('finds a colour written as a value', function () {
     expect(fixtureRelative(DesignGuard::scan(realpath(GUARD_FIXTURES.'/colour'))->violations()))->toBe([
         'colour/badge.blade.php:1 arbitrary colour `bg-[#1d7afc]`, use an M3 role',

tests/Fixtures/design-guard/scale/motion.js

@@ -0,0 +1,4 @@
+// A plain CSS keyword read out of an API, not a Tailwind class: matches DesignGuard's easing and
+// duration families only in a class list, never a bare JS string like this one.
+const easing = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'linear' : 'ease-out';
+const duration = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300;