@ashley-shrok/viewmodel-shell 2.1.0 → 3.0.0

package/dist/browser.js

@@ -353,7 +353,7 @@ export class BrowserAdapter {
             this.sectionKeyCounter.set(baseKey, ordinal + 1);
             const finalKey = `${baseKey}:${ordinal}`;
             const el = document.createElement("details");
-            el.className = `vms-section vms-section--collapsible${n.variant === "card" ? " vms-section--card" : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
+            el.className = `vms-section vms-section--collapsible${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
             el.dataset.sectionKey = finalKey;
             // Initial render is always closed — the post-render restore loop in
             // render() re-applies `open=true` for keys the user had open before.
@@ -377,7 +377,7 @@ export class BrowserAdapter {
         // action — see validateSectionAction in server.ts.
         if (n.link) {
             const a = document.createElement("a");
-            a.className = `vms-section vms-section--linked${n.variant === "card" ? " vms-section--card" : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
+            a.className = `vms-section vms-section--linked${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
             a.href = n.link.url;
             // Mirror LinkNode's external-attribute pattern (browser.ts ~line 666)
             // byte-for-byte: target=_blank + rel=noopener noreferrer when external.
@@ -421,7 +421,7 @@ export class BrowserAdapter {
             return;
         }
         const el = document.createElement("section");
-        el.className = `vms-section${n.variant === "card" ? " vms-section--card" : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.action ? " vms-section--clickable" : ""}`;
+        el.className = `vms-section${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.action ? " vms-section--clickable" : ""}`;
         if (n.heading) {
             const h = document.createElement("h2");
             h.className = "vms-section__heading";
@@ -480,7 +480,7 @@ export class BrowserAdapter {
     }
     listItem(n, parent, on) {
         const li = document.createElement("li");
-        li.className = `vms-list-item${n.variant ? ` vms-list-item--${n.variant}` : ""}`;
+        li.className = `vms-list-item${n.state ? ` vms-list-item--${n.state}` : ""}${n.tone ? ` vms-list-item--${n.tone}` : ""}`;
         if (n.id)
             li.dataset.id = n.id;
         this.kids(n.children, li, on);
@@ -769,7 +769,7 @@ export class BrowserAdapter {
     button(n, parent, on) {
         const btn = document.createElement("button");
         btn.type = "button";
-        btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
+        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}`;
         btn.textContent = n.label;
         btn.addEventListener("click", () => {
             // pendingLabel: instant client-side feedback. Swap text + add
@@ -786,7 +786,7 @@ export class BrowserAdapter {
     }
     text(n, parent) {
         const el = document.createElement(n.style === "pre" ? "pre" : "span");
-        el.className = `vms-text${n.style ? ` vms-text--${n.style}` : ""}`;
+        el.className = `vms-text${n.style ? ` vms-text--${n.style}` : ""}${n.tone ? ` vms-text--${n.tone}` : ""}`;
         el.textContent = n.value;
         parent.appendChild(el);
     }
@@ -1008,8 +1008,10 @@ export class BrowserAdapter {
         n.rows.forEach(row => {
             const tr = document.createElement("tr");
             let rowClass = "vms-table__row";
-            if (row.variant)
-                rowClass += ` vms-table__row--${row.variant}`;
+            if (row.state)
+                rowClass += ` vms-table__row--${row.state}`;
+            if (row.tone)
+                rowClass += ` vms-table__row--${row.tone}`;
             if (row.action)
                 rowClass += " vms-table__row--clickable";
             tr.className = rowClass;
@@ -1135,7 +1137,7 @@ export class BrowserAdapter {
     copyButton(n, parent) {
         const btn = document.createElement("button");
         btn.type = "button";
-        btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
+        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}`;
         btn.textContent = n.label ?? "Copy";
         btn.addEventListener("click", () => {
             const write = navigator.clipboard?.writeText(n.text);

package/dist/index.d.ts

@@ -88,8 +88,10 @@ export interface PageNode {
 export interface SectionNode {
     type: "section";
     heading?: string;
-    /** Section surface variant. Omitted = current behavior (no modifier class). "card" emits .vms-section--card. Closed union (D-03). */
+    /** Section surface variant — the structural KIND of the section's surface (the single meaning of "variant" framework-wide). Omitted = current behavior (no modifier class). "card" emits .vms-section--card. Closed union (D-03). */
     variant?: "card";
+    /** Semantic intent/severity tone — the universal status color axis (orthogonal to `variant`; a section can be a `card` AND `tone:"warning"`). Emits .vms-section--{tone} (subtle tinted surface + colored border, reusing the --vms-error/-warning/-success/-info tokens). Omitted = neutral. Closed union. */
+    tone?: "danger" | "warning" | "success" | "info";
     /** Layout preset arranging direct children. Omitted or "stack" = current vertical flow (no modifier class). "split" (equal 2-up), "cards" (uniform grid), "sidebar" (thin + wide app shell), "row" (left-aligned wrapping horizontal row; items hug content), "switcher" (N equal items flipping all-row ↔ all-stack atomically at a content-width `threshold` — the negative-flex-basis primitive a grid cannot express; distinct from `cards` auto-fit which passes through intermediate column counts) emit .vms-section--{value}. Closed union (D-01/D-02; sidebar D-28; row D-30; switcher SWITCH-01). */
     layout?: "stack" | "split" | "cards" | "sidebar" | "row" | "switcher";
     /** Main-axis arrangement for `layout:"row"` (the cluster primitive) — maps to `justify-content`. Omitted = no class → the row default (`flex-start`, left-pack) holds = byte-identical to today. Closed union copied verbatim from Jetpack Compose `Arrangement` ∩ Flutter `MainAxisAlignment` (ALIGN-01). Emits .vms-arrange--{value}. */
@@ -186,8 +188,10 @@ export interface ListNode {
 export interface ListItemNode {
     type: "list-item";
     id?: string;
-    /** Appended as a BEM modifier: vms-list-item--{variant} */
-    variant?: string;
+    /** Row lifecycle/selection STATE (NOT severity — that's `tone`). A freeform, app-extensible token; the framework ships styling for `active` (selected), `done`, `disabled`, `high` (priority), `running`, `moving`. Appended as a BEM modifier: vms-list-item--{state}. Orthogonal to `tone` (a row can be `state:"active"` AND `tone:"danger"`). */
+    state?: string;
+    /** Semantic intent/severity — the universal status tone axis (closed). Emits .vms-list-item--{tone} (colored accent border, reusing the shared tokens). Omitted = neutral. */
+    tone?: "danger" | "warning" | "success" | "info";
     children: ViewNode[];
 }
 export interface FormNode {
@@ -251,7 +255,12 @@ export interface ButtonNode {
     type: "button";
     label: string;
     action: ActionEvent;
-    variant?: "primary" | "secondary" | "danger";
+    /** Visual emphasis (how loud) — `primary` = filled, `secondary` = outline. Orthogonal to `tone` and `size`. Emits .vms-button--{emphasis}. Omitted = the neutral default button. Closed union. */
+    emphasis?: "primary" | "secondary";
+    /** Semantic intent/severity (what it means) — the universal status color axis, orthogonal to `emphasis`. A destructive primary button is `emphasis:"primary"` + `tone:"danger"`. Emits .vms-button--{tone}. Omitted = neutral. Closed union. */
+    tone?: "danger" | "warning" | "success" | "info";
+    /** Box geometry (padding + font), orthogonal to color/emphasis — the one axis no design system bakes into variant. Emits .vms-button--{size}. Omitted = the default (md) size. Closed union. */
+    size?: "sm" | "lg";
     /** Transient label shown from click until the dispatch resolves (response
      *  arrives or dispatch errors). Mirrors `CopyButtonNode.copiedLabel`'s
      *  lifecycle pattern at a different beat: shown DURING the round-trip
@@ -263,7 +272,10 @@ export interface ButtonNode {
 export interface TextNode {
     type: "text";
     value: string;
-    style?: "heading" | "subheading" | "body" | "muted" | "strikethrough" | "error" | "warning" | "pre";
+    /** Typography role only (NOT color) — emits .vms-text--{style}. Semantic color moved to `tone` (the old `error`/`warning` style values are now `tone:"danger"`/`tone:"warning"`). Closed union. */
+    style?: "heading" | "subheading" | "body" | "muted" | "strikethrough" | "pre";
+    /** Semantic intent/severity color — the universal status tone axis, orthogonal to `style` (a heading can be `tone:"danger"`). Emits .vms-text--{tone}; the tone color wins over a `style` color via source order. Omitted = default text color. Closed union. */
+    tone?: "danger" | "warning" | "success" | "info";
 }
 export interface LinkNode {
     type: "link";
@@ -357,7 +369,10 @@ export interface TableRow {
      *  cell (right). A previous version typed this as `ButtonNode[]` and called
      *  the button renderer blindly, silently dropping non-button entries. */
     actions?: (ButtonNode | CheckboxNode)[];
-    variant?: string;
+    /** Row lifecycle STATE (NOT severity — that's `tone`). A freeform, app-extensible token; the framework ships styling for `done`, `disabled`, `running`. Emits .vms-table__row--{state}. Orthogonal to `tone`. */
+    state?: string;
+    /** Semantic intent/severity — the universal status tone axis (closed). Emits .vms-table__row--{tone} (subtle tinted row background, reusing the shared tokens). Omitted = neutral. */
+    tone?: "danger" | "warning" | "success" | "info";
 }
 export interface TablePagination {
     /** 1-based current page. */
@@ -410,11 +425,12 @@ export interface CopyButtonNode {
     label?: string;
     /** Ephemeral label shown after a successful copy, reverts after ~1.5 s. Adapter default: "Copied!". */
     copiedLabel?: string;
-    /** Visual variant — mirrors ButtonNode.variant (issue #14). Adapter emits
-     *  `vms-button vms-button--{variant}` (browser) / variant-tinted text
-     *  (TUI), so a copy-button can read distinctly from neighboring default
-     *  buttons. Closed union; omitted = current behavior (no modifier). */
-    variant?: "primary" | "secondary" | "danger";
+    /** Visual emphasis — mirrors ButtonNode.emphasis. `primary` = filled, `secondary` = outline. Emits .vms-button--{emphasis}. Closed union. */
+    emphasis?: "primary" | "secondary";
+    /** Semantic intent/severity — mirrors ButtonNode.tone. Emits .vms-button--{tone}. Closed union. */
+    tone?: "danger" | "warning" | "success" | "info";
+    /** Box geometry — mirrors ButtonNode.size. Emits .vms-button--{size}. Omitted = md. Closed union. */
+    size?: "sm" | "lg";
 }
 /**
  * The SwiftUI `ViewThatFits` port. The renderer picks the FIRST child whose

package/dist/tui.js

@@ -855,14 +855,21 @@ const STYLE_ATTRS = {
     body: {},
     muted: { fg: "#888888" },
     strikethrough: { attributes: 16 /* STRIKETHROUGH */, fg: "#888888" },
-    error: { fg: "#ff5555" },
-    warning: { fg: "#e0a823" },
     pre: { fg: "#cccccc" },
 };
+// Universal semantic-tone → foreground color, shared by text / buttons / list items.
+const TONE_FG = {
+    danger: "#ff5555",
+    warning: "#e0a823",
+    success: "#5fd75f",
+    info: "#5fafff",
+};
 function TextView({ node }) {
     const style = node.style ?? "body";
     const attrs = STYLE_ATTRS[style];
-    return (_jsx("text", { ...(attrs.attributes != null ? { attributes: attrs.attributes } : {}), ...(attrs.fg != null ? { fg: attrs.fg } : {}), children: node.value }));
+    // tone color wins over the style's fg (mirrors the browser source-order rule).
+    const fg = node.tone ? TONE_FG[node.tone] : attrs.fg;
+    return (_jsx("text", { ...(attrs.attributes != null ? { attributes: attrs.attributes } : {}), ...(fg != null ? { fg } : {}), children: node.value }));
 }
 // ── link ──────────────────────────────────────────────────────────────────
 // External links emit a real OSC 8 hyperlink (\x1b]8;;url\x07label\x1b]8;;\x07);
@@ -896,13 +903,16 @@ function ImageView({ node }) {
 }
 // ── list / list-item ──────────────────────────────────────────────────────
 // A top-level `list` (direct child of page) is a pane on its own; nested
-// lists scroll as part of their containing section. list-item variants
-// ("done", "active", …) are mapped to text colors.
+// lists scroll as part of their containing section. list-item `state`
+// ("done", "active", …) maps to a text color; semantic `tone` (danger/…)
+// uses the shared TONE_FG and wins over state.
 const LIST_ITEM_FG = {
     done: "#88cc88",
     active: "#88aaff",
-    error: "#ff5555",
-    muted: "#888888",
+    running: "#88aaff",
+    moving: "#88aaff",
+    disabled: "#888888",
+    high: "#d76410",
 };
 function ListView({ node, ctx }) {
     const isPane = ctx.isTopLevel;
@@ -924,9 +934,9 @@ function ListView({ node, ctx }) {
     return (_jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsx("box", { flexDirection: "column", gap: 0, children: node.children.map((child, i) => renderNode(child, childCtx, i)) }) }));
 }
 function ListItemView({ node, ctx }) {
-    const fg = node.variant ? LIST_ITEM_FG[node.variant] : undefined;
+    const fg = node.tone ? TONE_FG[node.tone] : node.state ? LIST_ITEM_FG[node.state] : undefined;
     const childCtx = { ...ctx, isTopLevel: false };
-    // The variant tint applies to text children inside this item via inherited
+    // The tint applies to text children inside this item via inherited
     // color (OpenTUI <text fg> wins per-element, so this only affects items
     // whose children don't override). For B2 we just thread the children
     // through unchanged; full per-variant styling lands in B3 (with the focus +
@@ -1022,8 +1032,8 @@ function TableView({ node, ctx }) {
 // ── minimum-viable text surface for the rest of the node set ───────────────
 // Same as B1 — text only, no interactivity. Full widgets land in B3/B4.
 function ButtonView({ node, ctx }) {
-    const fg = node.variant === "danger" ? "#ff5555"
-        : node.variant === "primary" ? "#88aaff"
+    const fg = node.tone ? TONE_FG[node.tone]
+        : node.emphasis === "primary" ? "#88aaff"
             : undefined;
     // 0.8.0 (#11) — pendingLabel: when set + this button's key matches the
     // adapter's pendingButtonKey, render the pending label instead of the
@@ -1128,8 +1138,8 @@ function CopyButtonView({ node, ctx }) {
     // 0.9.0 (#14): variant coloring — mirrors ButtonView's fg derivation
     // verbatim. Adapter-medium-adaptation parity: the browser uses CSS
     // classes; the TUI uses ANSI fg colors. Same semantic mapping.
-    const fg = node.variant === "danger" ? "#ff5555"
-        : node.variant === "primary" ? "#88aaff"
+    const fg = node.tone ? TONE_FG[node.tone]
+        : node.emphasis === "primary" ? "#88aaff"
             : undefined;
     return (_jsxs("text", { ...(fg != null ? { fg } : {}), onMouseDown: () => ctx.copy(node.text), children: ["[ ", label, " ]"] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "2.1.0",
+  "version": "3.0.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 — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",

package/styles/default.css

@@ -328,6 +328,19 @@ body {
   padding: var(--vms-space-md);
 }
 
+/* ── Section tone — universal status axis (orthogonal to variant:card): a tinted
+   surface + solid tone-colored border, reusing the shared semantic tokens.
+   The tint is mixed into the OPAQUE surface (not transparent) so it reads on
+   dark themes too — a translucent layer over a dark surface is invisible, which
+   is why this must mix with var(--vms-surface). Composes with --card (a card
+   reads as warning/danger/etc; border-radius + padding come from --card) and
+   also tints a bare section. The solid tone border is the always-visible signal
+   on any background. ── */
+.vms-section--danger  { background: color-mix(in srgb, var(--vms-error) 14%, var(--vms-surface));   border: 1px solid var(--vms-error); }
+.vms-section--warning { background: color-mix(in srgb, var(--vms-warning) 14%, var(--vms-surface)); border: 1px solid var(--vms-warning); }
+.vms-section--success { background: color-mix(in srgb, var(--vms-success) 14%, var(--vms-surface)); border: 1px solid var(--vms-success); }
+.vms-section--info    { background: color-mix(in srgb, var(--vms-info) 14%, var(--vms-surface));    border: 1px solid var(--vms-info); }
+
 /* ── Section: clickable (1.4.0 — SectionNode.action click-anywhere primitive) ──
    Mirrors the 1.1.0 .vms-table__row--clickable idiom one level up the tree.
    Hover uses a 1px accent-dim ring (rather than a background swap — cards
@@ -497,8 +510,15 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 }
 .vms-checkbox__label { margin-left: var(--vms-space-xs); font-size: var(--vms-text-base); }
 
-/* ── Buttons ── */
+/* ── Buttons — three orthogonal axes: emphasis (fill) × tone (color) × size
+   (geometry). `--_btn-tone` carries the semantic color: it defaults to accent
+   and the tone classes override it, so an emphasis fills/outlines in whatever
+   tone is set (emphasis:primary + tone:danger = a filled RED button). Box
+   metrics (padding/font) live ONLY on the base (= md) and the size classes —
+   never on emphasis or tone — so a primary and a danger button are the SAME
+   size. ── */
 .vms-button {
+  --_btn-tone: var(--vms-accent);
   background: var(--vms-surface-2);
   border: 1px solid var(--vms-border);
   border-radius: var(--vms-radius);
@@ -507,32 +527,37 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   font-family: var(--vms-font-body);
   font-size: var(--vms-text-base);
   padding: var(--vms-space-sm) var(--vms-space-md);
+  align-self: flex-start;
   transition: background var(--vms-t), border-color var(--vms-t), transform var(--vms-t);
 }
 .vms-button:hover { border-color: var(--vms-accent-dim); }
 .vms-button:active { transform: scale(0.98); }
+
+/* tone — semantic color. Standalone (no emphasis) = colored text + border on the
+   neutral surface; combined with an emphasis it recolors the fill/outline. */
+.vms-button--danger  { --_btn-tone: var(--vms-error);   color: var(--vms-error);   border-color: var(--vms-error); }
+.vms-button--warning { --_btn-tone: var(--vms-warning); color: var(--vms-warning); border-color: var(--vms-warning); }
+.vms-button--success { --_btn-tone: var(--vms-success); color: var(--vms-success); border-color: var(--vms-success); }
+.vms-button--info    { --_btn-tone: var(--vms-info);    color: var(--vms-info);    border-color: var(--vms-info); }
+
+/* emphasis — fill treatment, colored by --_btn-tone (declared AFTER tone so the
+   filled text color / outline color wins on combination). */
 .vms-button--primary {
-  background: var(--vms-accent);
-  border-color: var(--vms-accent);
+  background: var(--_btn-tone);
+  border-color: var(--_btn-tone);
   color: #fff;
-  padding: var(--vms-space-sm) var(--vms-space-lg);
-  align-self: flex-start;
 }
 .vms-button--primary:hover { filter: brightness(1.1); }
 .vms-button--secondary {
   background: transparent;
-  border-color: var(--vms-accent-dim);
-  color: var(--vms-accent);
-  font-size: var(--vms-text-sm);
-  padding: var(--vms-space-2xs) var(--vms-space-sm);
-}
-.vms-button--secondary:hover { border-color: var(--vms-accent); background: var(--vms-accent-glow); }
-.vms-button--danger {
-  background: transparent;
-  border: 1px solid var(--vms-border);
-  color: var(--vms-error);
+  border-color: var(--_btn-tone);
+  color: var(--_btn-tone);
 }
-.vms-button--danger:hover { background: var(--vms-error-glow); border-color: var(--vms-error); }
+.vms-button--secondary:hover { background: var(--vms-accent-glow); }
+
+/* size — the ONLY axis that touches box metrics (md = base, no class). */
+.vms-button--sm { padding: var(--vms-space-2xs) var(--vms-space-sm); font-size: var(--vms-text-sm); }
+.vms-button--lg { padding: var(--vms-space-sm) var(--vms-space-lg); font-size: var(--vms-text-lg); }
 
 /* ── Pending state (0.8.0 / issue #11) ──
    Applied by BrowserAdapter when a ButtonNode with `pendingLabel` is clicked.
@@ -599,20 +624,23 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 }
 .vms-list-item:hover { border-color: var(--vms-accent-dim); }
 
-/* Common variants — apps can add more by writing .vms-list-item--{name} rules.
-   Variant accents go on border-left and are preserved through hover. */
+/* State (lifecycle) — done/high are framework-styled; apps can add more
+   .vms-list-item--{state} rules. The `high` priority accent goes on border-left. */
 .vms-list-item--done     { background: var(--vms-done-bg); border-color: transparent; opacity: 0.75; }
-.vms-list-item--critical { border-left: 3px solid var(--vms-error);         background: rgba(224, 90, 90, 0.04); }
+.vms-list-item--disabled { opacity: 0.55; }
 .vms-list-item--high     { border-left: 3px solid var(--vms-priority-high); }
+.vms-list-item--high:hover     { border-left-color: var(--vms-priority-high); }
+
+/* Tone (severity) — the universal status axis (was the old critical/warning/...
+   variants; critical → danger). Colored left accent, preserved through hover. */
+.vms-list-item--danger   { border-left: 3px solid var(--vms-error);   background: color-mix(in srgb, var(--vms-error) 4%, transparent); }
 .vms-list-item--warning  { border-left: 3px solid var(--vms-warning); }
 .vms-list-item--success  { border-left: 3px solid var(--vms-success); }
 .vms-list-item--info     { border-left: 3px solid var(--vms-info); }
-
-.vms-list-item--critical:hover { border-left-color: var(--vms-error); }
-.vms-list-item--high:hover     { border-left-color: var(--vms-priority-high); }
-.vms-list-item--warning:hover  { border-left-color: var(--vms-warning); }
-.vms-list-item--success:hover  { border-left-color: var(--vms-success); }
-.vms-list-item--info:hover     { border-left-color: var(--vms-info); }
+.vms-list-item--danger:hover  { border-left-color: var(--vms-error); }
+.vms-list-item--warning:hover { border-left-color: var(--vms-warning); }
+.vms-list-item--success:hover { border-left-color: var(--vms-success); }
+.vms-list-item--info:hover    { border-left-color: var(--vms-info); }
 
 /* Selection state for master-detail / list-detail patterns (D-27). The
    currently-selected row. Stronger than the semantic hints (selection is
@@ -631,9 +659,13 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-text--body          { line-height: 1.6; }
 .vms-text--muted         { color: var(--vms-text-muted); font-size: var(--vms-text-sm); }
 .vms-text--strikethrough { color: var(--vms-done-text); text-decoration: line-through; }
-.vms-text--error         { color: var(--vms-error); font-size: var(--vms-text-base); }
-.vms-text--warning       { color: var(--vms-warning); font-size: var(--vms-text-base); }
 .vms-text--pre           { font-family: var(--vms-font-mono); white-space: pre; }
+/* tone — semantic color axis (was the old style:"error"/"warning"). Placed after
+   the typography classes so a tone color wins over a style color (e.g. muted). */
+.vms-text--danger        { color: var(--vms-error); }
+.vms-text--warning       { color: var(--vms-warning); }
+.vms-text--success       { color: var(--vms-success); }
+.vms-text--info          { color: var(--vms-info); }
 
 /* ── Link ── */
 .vms-link {
@@ -731,9 +763,9 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   padding: var(--vms-space-sm) var(--vms-space-lg);
   border-top: 1px solid var(--vms-border);
 }
-/* Buttons inside the footer ignore the framework's default align-self so
-   they sit naturally on the footer row. */
-.vms-modal__footer .vms-button--primary { align-self: auto; padding: var(--vms-space-sm) var(--vms-space-md); }
+/* Buttons inside the footer ignore the base align-self:flex-start so they sit
+   naturally on the right-aligned footer row (all emphasis/tone variants). */
+.vms-modal__footer .vms-button { align-self: auto; }
 
 /* ── Table ── */
 .vms-table-wrapper {
@@ -780,16 +812,18 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   outline: 2px solid var(--vms-accent);
   outline-offset: -2px;
 }
-/* Row status variants — tints derive from theme vars (color-mix), so a
-   custom :root theme recolors them automatically; no app CSS, no literals. */
+/* Row STATE (lifecycle) — done/disabled/running framework-styled; apps can add
+   more .vms-table__row--{state} rules. */
 .vms-table__row--done     { opacity: 0.6; }
 .vms-table__row--disabled { opacity: 0.55; color: var(--vms-text-muted); }
 .vms-table__row--disabled.vms-table__row--clickable { cursor: default; }
 .vms-table__row--disabled.vms-table__row--clickable:hover { background: transparent; }
-.vms-table__row--success  { background: color-mix(in srgb, var(--vms-success) 8%, transparent); }
 .vms-table__row--running  { background: color-mix(in srgb, var(--vms-accent) 8%, transparent); }
+/* Row TONE (severity) — the universal status axis (was the old critical/danger;
+   critical → danger). Tints derive from theme vars (color-mix), so a custom
+   :root theme recolors them automatically; no app CSS, no literals. */
+.vms-table__row--success  { background: color-mix(in srgb, var(--vms-success) 8%, transparent); }
 .vms-table__row--warning  { background: color-mix(in srgb, var(--vms-warning) 9%, transparent); }
-.vms-table__row--critical,
 .vms-table__row--danger   { background: color-mix(in srgb, var(--vms-error) 9%, transparent); }
 .vms-table__td { padding: var(--vms-space-sm) var(--vms-space-md); vertical-align: middle; }
 .vms-table__link { color: var(--vms-accent); text-decoration: none; }