@spunto/design-system 0.18.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/styles.css

@@ -351,6 +351,34 @@
   ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }
 }
 
+/* ─── Touch devices — no zoom-on-focus ───────────────────────────────────────
+ * iOS Safari (and other coarse-pointer browsers) zoom the whole page in the
+ * moment a form control smaller than 16px takes focus, then leaves the user
+ * to zoom back out by hand. Individual components already set `text-base`
+ * for this (Input, Textarea, the command palette's search field), but any
+ * caller passing its own `text-sm`/`text-xs` override — very common, since
+ * that's how a form matches its surrounding density on desktop — clobbers it
+ * through `tailwind-merge`. Deliberately unlayered (outside `@layer`): Tailwind
+ * utilities all live inside named layers, and an unlayered rule always wins
+ * the cascade over a layered one regardless of source order or specificity —
+ * so this holds no matter what class a consumer adds. */
+@media (any-pointer: coarse) {
+  input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="color"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"]
+    ),
+  textarea,
+  select {
+    font-size: 16px;
+  }
+}
+
 /* ─── Terminal — xterm.js scrollbar ──────────────────────────────────────────
  * Restyle xterm's own custom scrollbar (14px, square corners) to match the
  * thin/rounded one above. Its width/position are set inline by xterm's JS on