Initial commit: HMDesignSystem baseline

.storybook/pseudo-states.ts

@@ -0,0 +1,34 @@
+// Pins :hover and :active visuals for state Stories (Storybook only, never loaded by the app).
+// Every rule that uses :hover or :active is cloned right after itself with the pseudo-class swapped for a
+// data attribute, so cascade order and specificity stay the same. No declaration or value is authored here.
+const HOVER = "data-sb-hover"
+const ACTIVE = "data-sb-active"
+const mirrored = new WeakSet<CSSStyleSheet>()
+
+function mirror(list: CSSStyleSheet | CSSGroupingRule) {
+  for (let i = list.cssRules.length - 1; i >= 0; i--) {
+    const rule = list.cssRules[i]
+    if (rule instanceof CSSStyleRule) {
+      if (/:hover\b|:active\b/.test(rule.selectorText)) {
+        list.insertRule(
+          rule.cssText.replace(/:hover\b/g, `[${HOVER}]`).replace(/:active\b/g, `[${ACTIVE}]`),
+          i + 1,
+        )
+      }
+    } else if ("cssRules" in rule) {
+      mirror(rule as CSSGroupingRule)
+    }
+  }
+}
+
+export function ensurePseudoStates() {
+  for (const sheet of document.styleSheets) {
+    if (mirrored.has(sheet)) continue
+    mirrored.add(sheet)
+    try {
+      mirror(sheet)
+    } catch {
+      // Unreadable (cross-origin) sheet: nothing to mirror.
+    }
+  }
+}