@plus234feed/ds 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.11.0",
+  "version": "0.13.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
@@ -1455,10 +1482,31 @@ 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. */
+/* Stacked: the detail moves under the name and the figure keeps the right
+   edge, spanning both lines.
+ *
+ * Two things ask for it. A narrow column, where the three parts of a row
+ * compete for one line until the name truncates to nothing, which a container
+ * query handles on its own. And a page that wants it at any width: in a long
+ * list of companies the code trailing the name lands at a different place on
+ * every row, and a column of codes under the names is far easier to scan.
+ *
+ * The declarations are written twice because a container query cannot share a
+ * rule block with a plain selector. They must stay identical. */
+.p234-directory--stacked .p234-directory__row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--p234-space-4);
+  align-items: baseline;
+}
+.p234-directory--stacked .p234-directory__name { grid-area: 1 / 1; }
+.p234-directory--stacked .p234-directory__detail { grid-area: 2 / 1; }
+.p234-directory--stacked .p234-directory__value {
+  grid-area: 1 / 2 / span 2;
+  margin-left: 0;
+  align-self: center;
+}
+
 @container (max-width: 26rem) {
   .p234-directory__row {
     display: grid;