@plus234feed/ds 0.8.0 → 0.10.0

package/package.json

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

@@ -1374,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;
@@ -1410,6 +1417,26 @@ textarea.p234-field__control {
   font-size: var(--p234-type-meta-size);
   color: var(--p234-color-ink-muted);
 }
+
+/* A logo, flag or favicon beside the name.
+ *
+ * Left as an inline image it sits in the text flow, so a long name wraps
+ * underneath it and the mark ends up alone on the first line. The name slot
+ * becomes a row only when it actually contains a mark, so every directory
+ * without one is untouched. */
+.p234-directory__name:has(.p234-directory__mark) {
+  display: flex;
+  align-items: center;
+  gap: var(--p234-space-3);
+  min-width: 0;
+}
+.p234-directory__mark {
+  flex: none;
+  width: var(--p234-icon-size-md);
+  height: var(--p234-icon-size-md);
+  border-radius: var(--p234-radius-sm);
+  object-fit: contain;
+}
 .p234-directory__value {
   margin-left: auto;
   font-family: var(--p234-type-data-sm-family);
@@ -1419,6 +1446,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. */