@ashley-shrok/viewmodel-shell 6.0.0 → 6.1.0

package/dist/browser.js

@@ -954,8 +954,8 @@ export class BrowserAdapter {
         parent.appendChild(el);
     }
     list(n, parent, on) {
-        const ul = document.createElement("ul");
-        ul.className = "vms-list";
+        const ul = document.createElement(n.ordered ? "ol" : "ul");
+        ul.className = `vms-list${n.ordered ? " vms-list--ordered" : ""}`;
         if (n.id)
             ul.id = n.id;
         this.kids(n.children, ul, on);

package/dist/index.d.ts

@@ -233,6 +233,14 @@ export interface SectionNode {
 export interface ListNode {
     type: "list";
     id?: string;
+    /** When true, this is an ORDERED list — renders `<ol>` (numbered) instead of
+     *  `<ul>`. The semantic element gives real ordinal meaning (a11y: screen
+     *  readers announce position/count; agent-legibility: the order is structural,
+     *  not baked into item text). The visible "1." / "2." markers come from a CSS
+     *  counter (`.vms-list--ordered`), not native list markers, because `.vms-list`
+     *  is a flex column with `list-style:none` — so numbering survives the styled
+     *  list-item layout. Omitted/false = `<ul>` (byte-identical to today). */
+    ordered?: boolean;
     children: ViewNode[];
 }
 export interface ListItemNode {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic \u2014 a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",

package/styles/default.css

@@ -1043,6 +1043,22 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-list-item--success:hover { border-left-color: var(--vms-success); }
 .vms-list-item--info:hover    { border-left-color: var(--vms-info); }
 
+/* Ordered list — <ol>. `.vms-list` sets list-style:none for the styled
+   flex-column layout, so native markers never show; a CSS counter supplies the
+   number as the first flex child of each item (spaced by the item's own gap).
+   tabular-nums + right-aligned min-width keeps multi-digit numbers aligned. */
+.vms-list--ordered { counter-reset: vms-li; }
+.vms-list--ordered > .vms-list-item { counter-increment: vms-li; }
+.vms-list--ordered > .vms-list-item::before {
+  content: counter(vms-li) ".";
+  flex: 0 0 auto;
+  min-width: 1.5em;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: var(--vms-text-muted);
+}
+
 /* Selection state for master-detail / list-detail patterns (D-27). The
    currently-selected row. Stronger than the semantic hints (selection is
    the primary state) and stable through hover. Themable: uses only seam