Key breakpoints, scales, inks and states on M3's tokens

Tailwind's sm…2xl are cleared for M3's window size classes (medium 600, expanded
840, large 1200, extra-large 1600; resources/js/breakpoints.js for scripts), and
its radius, shadow, text-size, weight, leading, tracking and easing scales are
cleared like its palette, so only M3's utilities compile. The semantic inks are
roles rather than opacities (M3 reserves 38% for disabled). state.css declares
M3's state opacities as tokens, adds the dragged layer and a touch-target utility.
Plan: docs/plans/material-3-alignment.md, steps 1, 2, 3 and 8.

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

resources/js/breakpoints.js

@@ -0,0 +1,28 @@
+/**
+ * M3's window size classes, for scripts that ask the viewport width.
+ *
+ * The same four numbers as the `medium:`, `expanded:`, `large:` and `extra-large:` variants in
+ * tokens/theme.css; compact is everything below `medium`. `from('expanded')` and `upTo('medium')`
+ * return MediaQueryLists on the range syntax Tailwind compiles, so a script and a stylesheet
+ * never disagree at the boundary pixel.
+ */
+export const breakpoints = Object.freeze({
+    medium: 600,
+    expanded: 840,
+    large: 1200,
+    'extra-large': 1600,
+})
+
+const width = (name) => {
+    if (!(name in breakpoints)) {
+        throw new Error(`Unknown breakpoint "${name}". Use one of: ${Object.keys(breakpoints).join(', ')}.`)
+    }
+
+    return breakpoints[name]
+}
+
+/** Matches at and above the class's lower edge, like `medium:`. */
+export const from = (name) => window.matchMedia(`(width >= ${width(name)}px)`)
+
+/** Matches below the class's lower edge, like `max-medium:`. */
+export const upTo = (name) => window.matchMedia(`(width < ${width(name)}px)`)