@plus234feed/ds 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.7.0",
+  "version": "0.9.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.
@@ -1346,7 +1374,14 @@ textarea.p234-field__control {
 /* --- directory ---------------------------------------------------------
    A long index: every equity, every state, every seat. Grouped, with the
    group letter sticking as the reader scrolls past it. */
-.p234-directory { border-top: var(--p234-border-thick) solid var(--p234-color-ink); }
+.p234-directory {
+  border-top: var(--p234-border-thick) solid var(--p234-color-ink);
+  /* So a row can lay itself out from the width it actually has, rather than
+     the page deciding for it. A directory in a full width column and the same
+     directory in one half of a two-up both read correctly without the page
+     passing a variant down. */
+  container-type: inline-size;
+}
 .p234-directory__letter {
   position: sticky;
   top: 0;
@@ -1391,6 +1426,26 @@ textarea.p234-field__control {
   color: var(--p234-color-ink);
 }
 
+/* In a narrow column the three parts of a row compete for the same line and
+   the name truncates to nothing. Below this width the detail moves under the
+   name and the figure keeps the right edge, which is the shape a list of
+   movers wants when two of them sit side by side. */
+@container (max-width: 26rem) {
+  .p234-directory__row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    column-gap: var(--p234-space-4);
+    align-items: baseline;
+  }
+  .p234-directory__name { grid-area: 1 / 1; }
+  .p234-directory__detail { grid-area: 2 / 1; }
+  .p234-directory__value {
+    grid-area: 1 / 2 / span 2;
+    margin-left: 0;
+    align-self: center;
+  }
+}
+
 /* --- chart -------------------------------------------------------------
    The frame around a plot: title, legend, the plot itself, and the line
    saying where the numbers came from and as of when. */