@plus234feed/ds 0.11.0 → 0.12.0

package/package.json

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

@@ -1455,10 +1455,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;