@judarn/ui 0.8.0 → 0.8.2

package/README.md

@@ -23,7 +23,7 @@ export function Status() {
 
 ## Class names
 
-`@judarn/ui/styles` and `@judarn/ui/components.css` style only `jd-` classes (`jd-btn`, `jd-badge`, `jd-tag`, `jd-card`, `jd-field`, `jd-navbar`, `jd-footer`, `jd-table`, `jd-matrix`, `jd-lockup`), so a project's own `.btn` or `.card` stays its own. Buttons, badges, and tags are set apart by fill, with a transparent border that high-contrast modes turn into an outline.
+`@judarn/ui/styles` and `@judarn/ui/components.css` style only `jd-` classes (`jd-btn`, `jd-badge`, `jd-tag`, `jd-card`, `jd-field`, `jd-navbar`, `jd-footer`, `jd-table`, `jd-matrix`, `jd-lockup`, `jd-list`), so a project's own `.btn` or `.card` stays its own. Buttons, badges, and tags are set apart by fill, with a transparent border that high-contrast modes turn into an outline. Put `jd-list` on a `ul` or `ol` of text items for bullets or numbers in secondary ink with a hanging indent, and `jd-list jd-list--plain` with `role="list"` on rows of links or data.
 
 ## Accent colors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@judarn/ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Judarn design foundation tokens and React components for the web",
   "author": "Ruben Luthman",
   "license": "MIT",

package/styles/components.css

@@ -239,6 +239,28 @@ select.jd-field__input { cursor: pointer; } /* native appearance keeps the platf
 .jd-matrix tbody tr:hover td { background: var(--jd-surface-recessed); }
 .jd-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
 
+/* ---- LIST -------------------------------------------------------------- */
+/* Items of text get markers (DESIGN.md, Lists): bullets on ul, numbers on ol, in secondary ink,
+   hanging so wrapped lines align with the text. Items are spaced with margins, not gap,
+   so the list sits inside .flow as one block. The indent fits two-digit numbers on ol.
+   The margin reset has zero specificity, so .flow's space before and after the list still applies. */
+:where(.jd-list) { margin: 0; }
+.jd-list {
+  padding-inline-start: var(--jd-space-3);
+  max-width: var(--jd-measure-body);
+  list-style-type: disc;
+}
+ol.jd-list { list-style-type: decimal; padding-inline-start: var(--jd-space-4); }
+.jd-list > li + li { margin-block-start: var(--jd-space-1); }
+.jd-list > li::marker { color: var(--jd-ink-60); font-variant-numeric: tabular-nums; }
+.jd-card .jd-list { max-width: var(--jd-measure-compact); }
+/* One nested level: hollow bullets, same ink, spacing and indent. */
+.jd-list .jd-list { margin-block-start: var(--jd-space-1); max-width: none; }
+ul.jd-list ul.jd-list { list-style-type: circle; }
+/* Rows of links, data or controls: no markers, no indent, set apart by spacing.
+   Give the element role="list": Safari and VoiceOver drop list semantics without markers. */
+.jd-list.jd-list--plain { list-style: none; padding-inline-start: 0; }
+
 /* ---- HIGH CONTRAST RULE SCALING ---------------------------------------- */
 @media (prefers-contrast: more) {
   .jd-matrix th,