@plus234feed/ds 0.12.0 → 0.14.0

package/package.json

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

@@ -292,6 +292,33 @@
 .p234-delta--cost[data-direction="up"] { color: var(--p234-color-data-down); }
 .p234-delta--cost[data-direction="down"] { color: var(--p234-color-data-up); }
 
+/* --- split ------------------------------------------------------------
+   A column of content with a rail beside it: a table and its related links,
+   an article and its filings, a chart and its figures.
+
+   Written by hand on four pages before this existed, each time as an auto-fit
+   grid, and each time the wide thing inside it pushed its own track past its
+   share and ran under the rail. An auto-fit track sizes from its contents,
+   and `min-width: 0` on the child is not enough to stop that: the track
+   itself has to be told it may shrink, which is what minmax(0, 1fr) says.
+
+   One column until there is room for two, so a rail never becomes a sliver. */
+.p234-split {
+  display: grid;
+  gap: var(--p234-space-8);
+  align-items: start;
+}
+/* Both halves may shrink. Without this a table or a pre refuses to, and
+   whatever sits beside it is covered. */
+.p234-split > * { min-width: 0; }
+
+@media (min-width: 60rem) {
+  .p234-split { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
+  /* Equal halves, for two lists of the same kind rather than content plus a
+     rail: top gainers beside top losers. */
+  .p234-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+}
+
 /* --- 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
@@ -306,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 -------------------------------------------------------------