@mtdt/observeops-ds-spec 0.1.6 → 0.1.8

package/components/registry/button.json

@@ -370,5 +370,20 @@
   },
   "slots": {
     "default": "button label / content (text and/or an icon)"
-  }
-}
+  },
+  "variantEnum": [
+    "primary",
+    "primary-alt",
+    "default",
+    "neutral-lighter",
+    "neutral-lightest",
+    "transparent",
+    "error",
+    "success",
+    "danger",
+    "info",
+    "neutral",
+    "neutral-light",
+    "warning"
+  ]
+}

package/components/registry/link.json

@@ -182,5 +182,20 @@
     ],
     "doc": "Atoms/Link/Accessibility",
     "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
-  }
+  },
+  "variantEnum": [
+    "primary",
+    "primary-alt",
+    "default",
+    "neutral-lighter",
+    "neutral-lightest",
+    "transparent",
+    "error",
+    "success",
+    "danger",
+    "info",
+    "neutral",
+    "neutral-light",
+    "warning"
+  ]
 }

package/components/registry/severity.json

@@ -179,5 +179,19 @@
   "changelog": [
     "2026-06-27: added to the Elements site — 13 severity levels in dot / dot+label / solid-chip / coloured-text / bg-fill shapes; source-accurate 11px dot (the Storybook reproduction enlarges to 14px).",
     "2026-06-29: stripe shown in both real usages — the standalone bar AND the table/list left-rule row."
+  ],
+  "severityEnum": [
+    "down",
+    "critical",
+    "major",
+    "warning",
+    "clear",
+    "up",
+    "maintenance",
+    "unreachable",
+    "disable",
+    "unknown",
+    "suspended",
+    "none"
   ]
 }

package/components/registry/tag.json

@@ -341,5 +341,14 @@
     ],
     "doc": "Atoms/Tag/Accessibility",
     "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
-  }
+  },
+  "variantEnum": [
+    "tag-primary",
+    "tag-green",
+    "tag-red",
+    "tag-yellow",
+    "tag-orange",
+    "tag-purple",
+    "tag-unknown"
+  ]
 }

package/conformance/ds-conformance.mjs

@@ -99,6 +99,27 @@ function buildScale() {
 }
 const onScale = (v, scale) => scale.some((s) => Math.abs(s - v) <= 1)
 
+// ── variant/state fidelity: valid values per component, from the registry ─────
+const TAGMAP = { 'obs-button': 'button', 'obs-input': 'input', 'obs-tag': 'tag', 'obs-radio': 'radio', 'obs-select': 'select', 'obs-severity': 'severity', 'obs-checkbox': 'checkbox', 'obs-switch': 'switch', 'obs-link': 'link', 'obs-tags': 'loose-tags', 'obs-date-time-picker': 'date-time-pickers', 'obs-filters': 'filters' }
+const _regCache = {}
+function validValues(tag) {
+  const id = TAGMAP[tag]; if (!id) return null
+  if (_regCache[id] !== undefined) return _regCache[id]
+  const p = path.join(DS, 'components', 'registry', `${id}.json`)
+  if (!fs.existsSync(p)) return (_regCache[id] = null)
+  const r = JSON.parse(fs.readFileSync(p, 'utf8'))
+  const props = r.props || {}
+  const enumOf = (k) => (props[k] && Array.isArray(props[k].enum) && props[k].enum.length ? props[k].enum : null)
+  // `variantEnum` / `severityEnum` are purpose-built fields listing the CANONICAL DS variant values that
+  // match the obs-* component + the CSS-class form (e.g. tag-green) — the values a rendered page actually
+  // uses. (The product-API `props.variant.enum` documents MTag's raw variants, which differ.) size/type
+  // use the reliable prop enum.
+  return (_regCache[id] = { id,
+    variant: (Array.isArray(r.variantEnum) && r.variantEnum.length) ? r.variantEnum : null,
+    severity: (Array.isArray(r.severityEnum) && r.severityEnum.length) ? r.severityEnum : null,
+    size: enumOf('size'), type: enumOf('type') })
+}
+
 // ── static server (reused from diff.mjs) ─────────────────────────────────────
 const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.woff': 'font/woff', '.woff2': 'font/woff2' }
 function serve(root) {
@@ -144,7 +165,17 @@ const MEASURE = () => {
     const txt = (el.textContent || '').trim()
     return hasBg && rad >= 4 && r.width > 0 && r.width < 160 && r.height < 40 && txt.length >= 1 && txt.length <= 24 && el.children.length <= 1
   }).map((el) => (el.textContent || '').trim().slice(0, 24))
-  return { colors, spaces, dsInteractive, rawControls, chips: [...new Set(chips)], bodyBg: getComputedStyle(document.body).backgroundColor }
+  // capture each DS component instance + its variant/size/type/state attrs (validated vs the registry node-side)
+  const dsInstances = [...document.querySelectorAll(DS.join(','))].map((el) => ({
+    tag: el.tagName.toLowerCase(),
+    variant: el.getAttribute('variant'),
+    size: el.getAttribute('size'),
+    type: el.getAttribute('type'),
+    severity: el.getAttribute('severity'),
+    ariaLabel: el.getAttribute('aria-label') || el.getAttribute('aria-labelledby'),
+    hasText: (el.textContent || '').trim().length > 0,
+  }))
+  return { colors, spaces, dsInteractive, rawControls, chips: [...new Set(chips)], dsInstances, bodyBg: getComputedStyle(document.body).backgroundColor }
 }
 
 ;(async () => {
@@ -222,21 +253,38 @@ const MEASURE = () => {
   //    and no fabricated Tag/Badge look-alikes. A DS page renders controls via obs-* (shadow DOM), so any
   //    raw light-DOM control is a non-DS element. This is the "use DS components, not look-alikes" check.
   const rawN = m.rawControls.length
-  const denom = m.dsInteractive + rawN
-  const componentScore = denom === 0 ? 100 : Math.round((m.dsInteractive / denom) * 100)
   for (const rc of m.rawControls) violations.component.push({ detail: `raw <${rc.tag}${rc.role ? ' role=' + rc.role : ''}>${rc.text ? ` "${rc.text}"` : ''} — use ${rc.suggest}, not a raw element` })
   if (m.chips.length) violations.component.push({ advisory: true, detail: `possible fabricated chip(s) — use obs-tag / obs-severity: ${m.chips.slice(0, 6).join(', ')}` })
 
+  // variant/state fidelity — every variant/size/type used must be a REAL registry value (not invented),
+  // and required state must be present (icon-only control needs an aria-label).
+  let checked = 0, invalid = 0
+  for (const inst of (m.dsInstances || [])) {
+    const vv = validValues(inst.tag); if (!vv) continue
+    const bad = (attr, val, allowed) => { if (val == null || !allowed || !allowed.length) return; checked++; if (!allowed.includes(val)) { invalid++; violations.component.push({ detail: `invented ${attr} "${val}" on <${inst.tag}> — valid: ${allowed.slice(0, 8).join(', ')}` }) } }
+    // variant/severity validated against the canonical registry enum (variantEnum/severityEnum); size/type
+    // against the prop enum. All match the rendered obs-* values, so no reflected-default false positives.
+    bad('variant', inst.variant, vv.variant)
+    bad('severity', inst.severity, vv.severity)
+    bad('size', inst.size, vv.size)
+    bad('type', inst.type, vv.type)
+    // icon-only interactive control (no text) should carry an aria-label
+    if ((inst.tag === 'obs-button' || inst.tag === 'obs-link') && !inst.hasText && !inst.ariaLabel) { checked++; invalid++; violations.component.push({ detail: `icon-only <${inst.tag}> has no aria-label (required state)` }) }
+  }
+  const presence = (m.dsInteractive + rawN) === 0 ? 1 : m.dsInteractive / (m.dsInteractive + rawN)
+  const validity = checked === 0 ? 1 : (checked - invalid) / checked
+  const componentScore = Math.round(presence * validity * 100)
+
   // Component fidelity is weighted heavily — the point of the check is DS components, not just DS colours.
   const overall = Math.round(tokenScore * 0.35 + componentScore * 0.30 + philosophyScore * 0.20 + layoutScore * 0.15)
   const result = { target, theme, overall, dimensions: { token: tokenScore, component: componentScore, philosophy: philosophyScore, layout: layoutScore },
-    measured: { colors: tTot, spacings: lTot, dsComponents: m.dsInteractive, rawControls: rawN, fabricatedChips: m.chips.length }, violations }
+    measured: { colors: tTot, spacings: lTot, dsComponents: m.dsInteractive, rawControls: rawN, fabricatedChips: m.chips.length, variantChecks: checked, invalidVariants: invalid }, violations }
 
   if (jsonOut) fs.writeFileSync(jsonOut, JSON.stringify(result, null, 2))
   if (!QUIET) {
     console.log(`\n=== DS conformance — ${target} (theme=${theme}) ===`)
     console.log(`  OVERALL: ${overall}/100   ·  token ${tokenScore}  component ${componentScore}  philosophy ${philosophyScore}  layout ${layoutScore}`)
-    console.log(`  measured: ${tTot} colours · ${lTot} spacings · ${m.dsInteractive} DS components · ${rawN} raw controls · ${m.chips.length} fabricated chip(s)`)
+    console.log(`  measured: ${tTot} colours · ${lTot} spacings · ${m.dsInteractive} DS components · ${rawN} raw controls · ${m.chips.length} fabricated chip(s) · ${checked} variant checks (${invalid} invalid)`)
     if (violations.component.length) { console.log('\n  COMPONENT fidelity (use DS components, not raw/look-alikes):'); for (const v of violations.component.slice(0, 10)) console.log(`    ✗ ${v.detail}`) }
     if (violations.token.length) { console.log('\n  off-token colours (top):'); for (const v of violations.token.slice(0, 8)) console.log(`    ✗ ${v.value} (${v.prop}, ×${v.count}) → nearest DS token ${v.nearestToken} (${v.nearestVal}, Δ${v.delta})`) }
     if (violations.layout.length) { console.log('\n  off-scale spacing/radii:'); for (const v of violations.layout.slice(0, 6)) console.log(`    ~ ${v.value} (×${v.count})`) }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtdt/observeops-ds-spec",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Machine-readable spec and AI operating contract for the Motadata ObserveOps design system \u2014 components, tokens, page recipes, layout structure, and the rules an AI tool follows to build ObserveOps UI faithfully.",
   "license": "UNLICENSED",
   "main": "index.js",

package/spec.manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtdt/observeops-ds-spec",
-  "version": "0.1.6",
-  "generated": "2026-07-05T06:45:18.241Z",
+  "version": "0.1.8",
+  "generated": "2026-07-05T07:20:59.202Z",
   "entry": "llms.txt",
   "contract": "AGENTS.md",
   "index": "components/index.json",
@@ -50,8 +50,8 @@
     },
     {
       "path": "components/registry/button.json",
-      "bytes": 13613,
-      "sha256": "4b98033fc2df599f6e81dfcfb4ce24b5ebe869b336cd7fad99c6cf12c714506b"
+      "bytes": 13857,
+      "sha256": "b54bb602317cacf0eafb72211b9c63bc27bb7ecef1a4319c24b8174d628c2c1e"
     },
     {
       "path": "components/registry/checkbox.json",
@@ -130,8 +130,8 @@
     },
     {
       "path": "components/registry/link.json",
-      "bytes": 6575,
-      "sha256": "b3362ab4305d631e24c83149482d46723f964f4f9c62d516aaeec14bbf2e6ff4"
+      "bytes": 6818,
+      "sha256": "0502a87ed580f4899c0e0c4cea1b29303021ecdf3458049bc2e33da40a821d10"
     },
     {
       "path": "components/registry/loose-tags.json",
@@ -180,8 +180,8 @@
     },
     {
       "path": "components/registry/severity.json",
-      "bytes": 7118,
-      "sha256": "9aec8f6752f98d825bcd78e001284a98b737682b0da9125de6dd38c1fee1ff7b"
+      "bytes": 7318,
+      "sha256": "ecf038986b75313361bf7f38c57aedbc2e9c01280af37c1ba93f6c5f755ca82b"
     },
     {
       "path": "components/registry/switch.json",
@@ -200,8 +200,8 @@
     },
     {
       "path": "components/registry/tag.json",
-      "bytes": 11493,
-      "sha256": "245aef496865fb8ba8ddd065bba02c1f1b4863faa7b9b837bfd2bb09dae8738f"
+      "bytes": 11640,
+      "sha256": "8f50f7486f130d07f47484aaf5d1ef1aa772d5ea8fe13b2a90d45a6a4c35d6f2"
     },
     {
       "path": "components/registry/tags-list.json",
@@ -360,8 +360,8 @@
     },
     {
       "path": "conformance/ds-conformance.mjs",
-      "bytes": 17517,
-      "sha256": "2ab84ecc68575abf122b85beb3f9a9d4eccde9ffd629f71ea1cae2af50cfd3ac"
+      "bytes": 21068,
+      "sha256": "e710fd4aed8629bfdd95b5c3ced0135099d4b57fd36aafa827f05fc00e90082e"
     },
     {
       "path": "foundation/README.md",
@@ -411,7 +411,7 @@
     {
       "path": "package.json",
       "bytes": 1072,
-      "sha256": "3e5a5e13ada2e15ca887ec4d40f280a0fac033f4dbaba8ac601d6efd46011d2f"
+      "sha256": "1d9d5850f9aa6ee23a7f8b071b596d37ebb013fc07262629a0bfd6bcedca03a3"
     },
     {
       "path": "tokens/README.md",