@plus234feed/ds 0.14.0 → 0.15.0

package/package.json

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

@@ -331,33 +331,86 @@
    `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;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--p234-space-6);
+  /* The row decides its columns from its own width, not the viewport's. The
+     version before this used a viewport media query with thresholds worked
+     out for the page measure, and the first page with a rail beside the
+     content got four tiles as three and one again. */
+  container-type: inline-size;
+}
+/* Flex rather than grid for one reason: when a count does not divide, the
+   tiles on the last row grow to fill it, so five never leaves a lone tile at
+   a third of the width. A grid leaves the hole. */
+.p234-tiles > * { flex: 1 1 100%; min-width: 0; }
+
+@container (min-width: 34rem) {
+  .p234-tiles > * { flex-basis: calc(50% - var(--p234-space-6)); }
+  .p234-tiles:has(> :nth-child(3):last-child) > * { flex-basis: calc(33.4% - var(--p234-space-6)); }
+}
+@container (min-width: 52rem) {
+  .p234-tiles:has(> :nth-child(4):last-child) > *,
+  .p234-tiles:has(> :nth-child(7):last-child) > *,
+  .p234-tiles:has(> :nth-child(8):last-child) > * { flex-basis: calc(25% - var(--p234-space-6)); }
+  .p234-tiles:has(> :nth-child(5):last-child) > *,
+  .p234-tiles:has(> :nth-child(6):last-child) > * { flex-basis: calc(33.4% - var(--p234-space-6)); }
+}
+
+/* --- section head ------------------------------------------------------
+   A heading with a note on the same line and a rule beneath: "Global
+   commodities" with "Spot, USD" at the right, "Monthly movers" with the date
+   range. The markets page did this six times, each with its own icon in
+   front of the heading saying what the heading said. */
+.p234-sectionhead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--p234-space-4);
+  flex-wrap: wrap;
+  padding-bottom: var(--p234-space-3);
+  border-bottom: var(--p234-border-thick) solid var(--p234-color-ink);
+  margin-bottom: var(--p234-space-5);
+}
+.p234-sectionhead__title {
+  font-family: var(--p234-type-headline-sm-family);
+  font-size: var(--p234-type-headline-sm-size);
+  line-height: var(--p234-type-headline-sm-leading);
+  letter-spacing: var(--p234-type-headline-sm-tracking);
+  font-weight: var(--p234-type-headline-sm-weight);
+  color: var(--p234-color-ink);
+  margin: 0;
+}
+.p234-sectionhead__note {
+  font-family: var(--p234-type-meta-family);
+  font-size: var(--p234-type-meta-size);
+  color: var(--p234-color-ink-muted);
 }
 
-/* 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));
-  }
+/* --- sparkline ---------------------------------------------------------
+   A line of recent prices beside a figure, small enough to sit in a row.
+   The page draws the path; this sets its size and stroke, and takes the
+   colour from the delta tokens so a rise and a fall look the same here as
+   they do in the number beside it. It is a shape, not a chart: no axes, no
+   labels, and it never carries a value the row does not also state. */
+.p234-sparkline {
+  display: inline-block;
+  width: 5rem;
+  height: 1.75rem;
+  flex: none;
+  vertical-align: middle;
+  overflow: visible;
 }
+.p234-sparkline path {
+  fill: none;
+  stroke: var(--p234-color-data-flat);
+  stroke-width: var(--p234-chart-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+.p234-sparkline[data-direction="up"] path { stroke: var(--p234-color-data-up); }
+.p234-sparkline[data-direction="down"] path { stroke: var(--p234-color-data-down); }
 
 /* --- meter -------------------------------------------------------------
    An inline bar for one value's share of a whole: a food group's share of a
@@ -1519,6 +1572,16 @@ textarea.p234-field__control {
   align-self: center;
 }
 
+/* Many short rows at once: 106 government bonds, each a code and a price.
+   One column of those is a scroll of a thousand pixels; laid out in columns
+   they fit a screen. A rem minimum, never a percentage, so the columns
+   collapse to one on a phone without the track-sizing trap. */
+.p234-directory--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  column-gap: var(--p234-space-7);
+}
+
 @container (max-width: 26rem) {
   .p234-directory__row {
     display: grid;