@plus234feed/ds 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.7.0",
+  "version": "0.8.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

@@ -292,6 +292,34 @@
 .p234-delta--cost[data-direction="up"] { color: var(--p234-color-data-down); }
 .p234-delta--cost[data-direction="down"] { color: var(--p234-color-data-up); }
 
+/* --- tile row ----------------------------------------------------------
+   The grid a row of tiles sits in. Every page that showed figures was
+   writing this inline, with a different minimum each time, and the counts
+   that left one tile alone on a second row were found by eye afterwards.
+
+   A lone tile on its own row reads as a separate section rather than the
+   fourth of four, which is the same fault the footer had with seven link
+   groups in a six column grid.
+
+   `min(100%, ...)` is what keeps a single column on a phone: without it the
+   minimum wins and the row overflows the screen. */
+.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));
+}
+
 /* --- meter -------------------------------------------------------------
    An inline bar for one value's share of a whole: a food group's share of a
    daily diet, a party's share of a vote, a source's share of coverage.