@plus234feed/ds 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Plus234Feed design system. Editorial tokens, type scale and components for a news intelligence platform: newspaper hierarchy, accessible colour in both themes, one component per job.",
   "keywords": [
     "design-system",

package/src/components.css

@@ -333,18 +333,30 @@
 .p234-tiles {
   display: grid;
   gap: var(--p234-space-6);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
 }
 
-/* Quantity queries. At the page measure a 11rem minimum fits three across,
-   so four tiles break as three and one, and seven as three, three and one.
-   A wider minimum drops those to two and four across, which divide evenly.
-   On a wider container they still fit four, and four divides four. */
-.p234-tiles:has(> :nth-child(4):last-child) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
-}
-.p234-tiles:has(> :nth-child(7):last-child) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+/* One column on a phone, a row once there is space for one.
+ *
+ * The first version used `minmax(min(100%, 11rem), 1fr)` to get the single
+ * column without a media query. A percentage inside minmax under auto-fit is
+ * treated as indefinite while tracks are being sized, so the track falls back
+ * to sizing from its contents, and a row of three tiles with labels as long
+ * as "Parallel market, USD" came out as three rows. The same mistake cost
+ * four pages their layout in .p234-split: the clever form loses to the
+ * explicit one. */
+@media (min-width: 40rem) {
+  .p234-tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
+
+  /* Quantity queries. At the page measure an 11rem minimum fits three
+     across, so four tiles break as three and one, and seven as three, three
+     and one. A wider minimum drops those to two and four across, which
+     divide evenly. */
+  .p234-tiles:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  }
+  .p234-tiles:has(> :nth-child(7):last-child) {
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  }
 }
 
 /* --- meter -------------------------------------------------------------