@mtdt/observeops-ds-spec 0.1.0

package/components/registry/tabs.json

@@ -0,0 +1,264 @@
+{
+  "name": "tabs",
+  "display": "Tabs",
+  "tier": "molecule",
+  "family": "Tabs",
+  "source": "ui/components/Tabs/Tab.vue (MTab — wraps Ant a-tabs) + ui/components/Tabs/TabPane.vue (MTabPane). Persisted state: src/components/_base-persisted-tab.vue (MPersistedTab — renderless localStorage wrapper).",
+  "status": "stable",
+  "summary": "In-page tabbed navigation that switches between sibling views of one context. MTab wraps Ant a-tabs; panes are MTabPane. The product uses ONLY line-style, top-positioned, default-size tabs — Ant's card/editable-card/vertical/size/tabBarExtraContent features are available but unused in-product. Active tab = --primary (text + underline + ink bar); inactive = --tabs-text-color; bar bottom border = --border-color. Real variants are class-based.",
+  "variants": [
+    {
+      "name": "line",
+      "what": "line tabs (default)",
+      "usage": "86×"
+    },
+    {
+      "name": "no-border",
+      "what": "no bottom border",
+      "usage": "21×"
+    },
+    {
+      "name": "sticky-tab",
+      "what": "pinned tab bar",
+      "usage": "8×"
+    },
+    {
+      "name": "with-counts",
+      "what": "'Label (N)'",
+      "usage": ""
+    },
+    {
+      "name": "with-icons",
+      "what": "leading icon (tab slot)",
+      "usage": ""
+    },
+    {
+      "name": "dynamic",
+      "what": "v-for data-driven",
+      "usage": ""
+    },
+    {
+      "name": "persisted",
+      "what": "MPersistedTab localStorage",
+      "usage": ""
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "active",
+      "what": "--primary text + underline"
+    },
+    {
+      "name": "inactive",
+      "what": "unselected"
+    },
+    {
+      "name": "disabled",
+      "what": "not selectable"
+    },
+    {
+      "name": "hover",
+      "what": "over inactive tab"
+    }
+  ],
+  "usage": {
+    "total": 86,
+    "files": 70,
+    "topModules": [
+      "settings (20)",
+      "shared components (17)",
+      "rum (7)",
+      "alert (5)",
+      "log (4)",
+      "apm (3)"
+    ],
+    "alwaysLineTopDefault": "No real <MTab> passes type=, position=, or size= — every usage is line / top / default.",
+    "variantClasses": {
+      "no-border": 21,
+      "sticky-tab": 8,
+      "topology-hierarchy-tab": 3,
+      "metric-picker-tabs": 1,
+      "grey-tab": "defined, ~0 (near-unused)",
+      "flex-tabs": "content flex helper"
+    },
+    "labelPatterns": {
+      "count-in-label": "`Alerts (${count})`, `${tab.title} (${getCounts(tab)})` — count appended to the string, not a badge component",
+      "icon-in-label": "tab slot with a leading MIcon",
+      "dynamic": "v-for over a tabs config array (tab.text/key/name)"
+    },
+    "tabBarExtraContent": "0x — the extra-content slot exists but is unused in the product"
+  },
+  "props": {
+    "MTab": {
+      "value": {
+        "type": "string|number",
+        "note": "the active key; v-model via @change (model event=change). 41x bind @change."
+      },
+      "variant": {
+        "type": "string",
+        "default": "",
+        "note": "applied as a CLASS on a-tabs (:class=[variant]). NOTE: in practice the product applies variant classes via plain class= (e.g. class='no-border'), not this prop — both land on the .ant-tabs root and behave identically."
+      },
+      "defaultActive": {
+        "type": "string",
+        "note": "defaultActiveKey when uncontrolled"
+      },
+      "animated": {
+        "type": "boolean",
+        "default": false
+      },
+      "size": {
+        "type": "string",
+        "default": "default",
+        "note": "UNUSED in product (no usage passes it)"
+      },
+      "position": {
+        "type": "string",
+        "default": "top",
+        "note": "tabPosition; UNUSED beyond 'top' (no vertical tabs in product)"
+      },
+      "type": {
+        "type": "string",
+        "default": "line",
+        "note": "UNUSED beyond 'line' (no card/editable-card in product)"
+      },
+      "tabBarGutter": {
+        "type": "number"
+      },
+      "tabBarStyle": {
+        "type": "object"
+      }
+    },
+    "MTabPane": {
+      "tab": {
+        "type": "string",
+        "note": "the tab label (string). For a rich label (icon/count markup) use the `tab` SLOT instead."
+      },
+      "key": {
+        "type": "string",
+        "note": "the pane's key — matches MTab value"
+      },
+      "forceRender": {
+        "type": "boolean",
+        "default": false,
+        "note": "render pane content even when inactive"
+      }
+    },
+    "MPersistedTab": {
+      "moduleKey": {
+        "type": "string",
+        "required": true,
+        "note": "localStorage key prefix → `${moduleKey}-tab`"
+      },
+      "useLocalStorageTab": {
+        "type": "boolean",
+        "default": true
+      },
+      "defaultValue": {
+        "type": "string"
+      },
+      "value": {
+        "type": "string"
+      }
+    }
+  },
+  "slots": {
+    "MTab.default": "the MTabPane children",
+    "MTab.tabBarExtraContent": "right-aligned content on the tab bar (available, unused in product)",
+    "MTabPane.default": "the pane content",
+    "MTabPane.tab": "rich tab label (icon + text + count) — overrides the `tab` prop",
+    "MPersistedTab.default": "scoped slot receiving { tab, setTab } — wire to <MTab :value=tab @change=setTab>"
+  },
+  "tokensUsed": [
+    "--primary",
+    "--tabs-text-color",
+    "--border-color",
+    "--page-background-color",
+    "--neutral-light",
+    "--neutral-lightest"
+  ],
+  "decisionFlow": [
+    "Switching between sibling VIEWS of one context (not navigating to other pages)? -> Tabs. (For page nav use the router/menu.)",
+    "Do the tabs sit on a card/panel that already has its own edges? -> class='no-border' (the 21x dominant variant).",
+    "Long scrolling pane where the tabs must stay visible? -> add the `sticky-tab` class.",
+    "Does a tab label need a live count? -> append it to the label string: :tab=`Alerts (${count})`.",
+    "Is the tab set data-driven? -> <MTabPane v-for tabs :key :tab>.",
+    "Should the user return to their last tab after reload/navigation? -> wrap with <MPersistedTab module-key> and wire { tab, setTab }.",
+    "Need card-style / vertical / closable tabs? -> Ant supports them but the PRODUCT does not use them — reconsider before introducing a new pattern."
+  ],
+  "usageRules": {
+    "noBorder": {
+      "useWhen": "tabs sit on a bordered card/panel",
+      "how": "class='no-border'",
+      "example": "detail-panel tabs inside a card"
+    },
+    "sticky": {
+      "useWhen": "tabs head a long scrolling content area",
+      "how": "class='sticky-tab'",
+      "example": "settings / detail pane that scrolls"
+    },
+    "counts": {
+      "useWhen": "a tab summarizes a count of items",
+      "how": ":tab=`Label (${count})`",
+      "example": "Correlated Alerts (12) / Logs (5)"
+    },
+    "dynamic": {
+      "useWhen": "the tab set comes from config/data",
+      "how": "<MTabPane v-for=t in tabs :key=t.key :tab=t.text>",
+      "example": "widget editor Attributes/Metric/Style/Sorting"
+    },
+    "persisted": {
+      "useWhen": "the user should resume their last tab",
+      "how": "<MPersistedTab module-key> + :value/@change",
+      "example": "module-level tab sets"
+    }
+  },
+  "do": [
+    "Use for sibling views of the same context.",
+    "Use class='no-border' when the tabs sit on a card.",
+    "Append counts to the label string; keep labels short.",
+    "Build data-driven tab sets with v-for.",
+    "Use MPersistedTab where users return to a remembered tab."
+  ],
+  "dont": [
+    "Don't use tabs to navigate between separate pages — that's routing.",
+    "Don't introduce card/editable-card/vertical tabs without a deliberate decision — the product is line/top/default only.",
+    "Don't build a separate count badge — the product appends '(N)' to the label.",
+    "Don't rely on the tabBarExtraContent slot to match the product — it's unused there."
+  ],
+  "knownIssues": {
+    "F1": {
+      "severity": "Low",
+      "a11y": true,
+      "issue": "Catalog-wide focus-ring removal (SF-001) can affect the tab triggers' :focus-visible outline; verify keyboard focus is visible on the active/!active tab."
+    }
+  },
+  "accessibility": {
+    "providedByAnt": "a-tabs renders role=tablist / role=tab / role=tabpanel, aria-selected on the active tab, and supports Left/Right arrow-key navigation between tabs.",
+    "verify": "Keyboard focus-visibility on tab triggers (SF-001); that a meaningful label is present for icon-only tabs."
+  },
+  "storybook": "Molecules/Tabs",
+  "related": [
+    "dropdown-picker",
+    "table",
+    "radio"
+  ],
+  "figma": {
+    "status": "todo"
+  },
+  "events": {
+    "MTab.change": "(activeKey) — active tab changed; this is the v-model event (`:value.sync` ⇄ `@change`).",
+    "MPersistedTab": "renderless — exposes { tab, setTab } via its scoped slot; wire setTab to MTab @change to persist the active tab."
+  },
+  "a11y": {
+    "summary": "role=tablist/tab/tabpanel; active=aria-selected, disabled=aria-disabled; Left/Right arrows move, Enter/Space activate; Ant links tab↔panel via aria-controls.",
+    "issues": [
+      "SF-001 focus ring.",
+      "Icon-only tabs need an accessible name.",
+      "Count updates while focused — announce."
+    ],
+    "doc": "Molecules/Tabs/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}

package/components/registry/tag.json

@@ -0,0 +1,345 @@
+{
+  "name": "tag",
+  "component": "MTag",
+  "display": "Tag",
+  "tier": "atom",
+  "source": "mkit",
+  "sourceFile": "ui/components/Tags/Tag.vue",
+  "status": "core",
+  "maturity": "stable-but-flawed",
+  "summary": "Compact label for categorization or removable selections. Used as a plain tag; color variants are broken.",
+  "variants": [
+    {
+      "name": "tag-red",
+      "what": "red tinted",
+      "usage": "75×"
+    },
+    {
+      "name": "tag-green",
+      "what": "green tinted",
+      "usage": "57×"
+    },
+    {
+      "name": "tag-yellow",
+      "what": "yellow tinted",
+      "usage": "15×"
+    },
+    {
+      "name": "tag-orange",
+      "what": "orange tinted",
+      "usage": "9×"
+    },
+    {
+      "name": "tag-purple",
+      "what": "purple tinted",
+      "usage": "1×"
+    },
+    {
+      "name": "tag-unknown",
+      "what": "neutral tinted",
+      "usage": "2×"
+    },
+    {
+      "name": "tag-primary",
+      "what": "neutral chip",
+      "usage": "49×"
+    },
+    {
+      "name": "MStatusTag",
+      "what": "status string → colour+label",
+      "usage": "30×"
+    },
+    {
+      "name": "used-count-pill",
+      "what": "rounded count chip",
+      "usage": "48×"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "display",
+      "what": "non-closable label"
+    },
+    {
+      "name": "closable",
+      "what": "× to remove (default true)"
+    },
+    {
+      "name": "rounded",
+      "what": "pill styling"
+    },
+    {
+      "name": "disabled",
+      "what": "muted"
+    }
+  ],
+  "props": {
+    "closable": {
+      "type": "boolean",
+      "default": true,
+      "note": "default true (F5)"
+    },
+    "color": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": [
+        "default",
+        "primary",
+        "success",
+        "error",
+        "warning",
+        "orange",
+        "neutral-lighter"
+      ],
+      "note": "ColorPalette keys; colored variants illegible (F2) — use colorClasses instead"
+    },
+    "rounded": {
+      "type": "boolean"
+    },
+    "confirmable": {
+      "type": "boolean"
+    },
+    "visible": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "events": [
+    "close"
+  ],
+  "slots": [
+    "default (label)",
+    "confirm-title"
+  ],
+  "colorClasses": {
+    "note": "The working colored-tag mechanism — colored text on a tint, themes both modes. Apply via class, not variant.",
+    "tag-red": 75,
+    "tag-green": 57,
+    "tag-yellow": 15,
+    "tag-orange": 9,
+    "tag-purple": 1,
+    "tag-unknown": 2,
+    "tag-primary": "49 (neutral chip, not blue)",
+    "stateClasses": [
+      "new",
+      "provision",
+      "unprovision",
+      "used-count-pill (48)"
+    ]
+  },
+  "anatomy": [
+    "container (.ant-tag)",
+    "label",
+    "remove × (when closable)"
+  ],
+  "styling": {
+    "plainBg": "--tag-bg-color (#e3e8f2 light / #2b394f dark, themed) — the neutral tag-primary bg. NOTE: --tag-bg is a DIFFERENT token (#ecf1f9) used by the broken `variant` prop (F2).",
+    "variantColors": "ColorPalette static hex (not tokens)"
+  },
+  "accessibility": {
+    "plain": "span label, legible both themes",
+    "removeControl": "F4 — <a> not focusable, no aria-label",
+    "focus": "no ring (SF-001)"
+  },
+  "do": [
+    "Use a plain tag for labels; :closable=true for removable chips; :rounded for pills.",
+    "Use MStatusTag for status/severity."
+  ],
+  "dont": [
+    "Using color variants (broken/illegible — F2).",
+    "Assuming info/neutral exist (F1); forgetting closable defaults to true (F5)."
+  ],
+  "whenToUse": "Labels, metadata, removable selection chips.",
+  "decisionFlow": [
+    "User types/adds tags? -> LooseTags (input), not Tag.",
+    "Shows status/severity? -> MStatusTag.",
+    "Removable selection/filter chip? -> MTag :closable=true.",
+    "Colored category label? -> MTag + tag-* class.",
+    "Plain read-only label/metadata? -> MTag :closable=false."
+  ],
+  "usageRules": {
+    "plain": {
+      "useWhen": "read-only label/metadata",
+      "dontUse": "if user can remove it (add :closable)",
+      "example": "OS name, environment label"
+    },
+    "closable": {
+      "useWhen": "a selection the user can dismiss (filters, picked items)",
+      "note": "closable defaults true; display tags need :closable=false",
+      "example": "active filter chip with x"
+    },
+    "colored(tag-*)": {
+      "useWhen": "color-coding categories",
+      "dontUse": "the color variant PROP (broken/illegible F2) — use the class",
+      "example": "tag-red/tag-green/... category"
+    },
+    "status(MStatusTag)": {
+      "useWhen": "reflecting a status string (up/down/critical/...)",
+      "example": "monitor Up/Down"
+    },
+    "rounded": {
+      "useWhen": "a fully-rounded pill look (cosmetic)"
+    }
+  },
+  "insteadOf": [
+    "raw a-tag",
+    "MStatusTag (for status)"
+  ],
+  "tokensUsed": [
+    "--tag-bg",
+    "--tag-color",
+    "--tag-bg-color"
+  ],
+  "usage": {
+    "total": 150,
+    "files": 87,
+    "variant": "~3 (effectively unused)",
+    "MStatusTag": 30
+  },
+  "knownIssues": [
+    "F2 (high): colored variants are illegible — bg forced to --tag-bg regardless of variant, variant only sets white text → white on #e3e8f2 in light. Use MStatusTag for status.",
+    "F4 (high, a11y): remove × is an <a> with no href/role/aria-label/tabindex — not focusable, unlabeled. Make it a real button + aria-label + focus ring (SF-001).",
+    "F1 (medium): variants = ColorPalette keys only (no info/neutral); static hex differs from severity tokens.",
+    "F5 (medium): closable defaults to true — display tags get an unexpected ×.",
+    "F3 (low): Tag.vue applies misspelled class 'neutral-ligher' so the .neutral-lighter themed override never matches.",
+    "F7 (low): MStatusTag textMap inverts poweredoff->'Up'/poweredon->'Down'; status not in TAG_MAP renders a silent plain tag (no colour). Add an unknown/default mapping.",
+    "SF-002 (medium, tooling, FIXED 2026-06-07): Storybook now runs the app's PostCSS (tailwindcss+autoprefixer) via postcss-loader, so Tailwind utilities (incl. MStatusTag inline-flex alignment) render like the product. See findings/SF-002."
+  ],
+  "related": [
+    "MStatusTag",
+    "loose-tags",
+    "tags-list",
+    "MIcon",
+    "severity"
+  ],
+  "family": "Tag",
+  "members": {
+    "MTag": "base tag (this entry)",
+    "MStatusTag": "VARIANT of Tag (not a separate component, D12). _base-status-tag.vue, 30x/28 files. Maps status string -> tag-* colour + Capitalize(label). Props: status (String|Number), forcePrimary (Boolean). Always rounded+non-closable. LIVE in Storybook (Atoms/Tag/Examples -> 'Status / severity'). Quirks F7: poweredoff->'Up'/poweredon->'Down'; unmapped status -> silent plain tag.",
+    "SelectedItemPills": "dropdown-trigger/ — teal ant-tag-has-color picker pills, truncated, +N overflow popover (maxItems default 1); teal via --main-tags-* in input.less (:tags adds .loose-tags-input). LIVE in Storybook (Atoms/Tag/Examples → 'Selected pills'); full behaviour with DropdownPicker",
+    "MultipleTrigger/SingleTrigger": "picker triggers using SelectedItemPills",
+    "LooseTags": "free-form tag input — spec TODO",
+    "TagsList": "read-only tag list — spec TODO",
+    "appClasses": [
+      "filter-alert-tag (7)",
+      "os-tag",
+      "nav-beta-tag",
+      "main-tags (teal)"
+    ]
+  },
+  "changelog": [
+    "2026-06-05: added (placeholder variants).",
+    "2026-06-06: full deep-dive — real variant set found, colored variants measured illegible (F2); examples refocused on plain/removable; findings F1-F5 + SF-001; Option B pages.",
+    "2026-06-07: family surfaced in Storybook — ColoredTags (tag-* classes) + SelectedItemPills teal +N picker pills (verified teal #cdf1ed/#218b81 + +N overflow)."
+  ],
+  "storybook": "Atoms/Tag",
+  "figma": {
+    "status": "todo",
+    "component": "Tag"
+  },
+  "statusMap": {
+    "$source": "src/components/_base-status-tag.vue TAG_MAP",
+    "$usage": "MStatusTag: <MStatusTag :status=\"row.status\" /> -> looks up status.toLowerCase() in `map` for the tag-* colour class; label = Capitalize(status) unless overridden by `textOverrides`. Unmapped status -> plain tag (silent). `forcePrimary` forces tag-primary.",
+    "map": {
+      "off": "tag-red",
+      "on": "tag-green",
+      "poweredoff": "tag-red",
+      "poweredon": "tag-green",
+      "success": "tag-green",
+      "error": "tag-red",
+      "up": "tag-green",
+      "active": "tag-green",
+      "down": "tag-red",
+      "inactive": "tag-red",
+      "unknown": "tag-unknown",
+      "completed": "tag-green",
+      "halted": "tag-yellow",
+      "paused": "tag-yellow",
+      "succeeded": "tag-green",
+      "failed": "tag-red",
+      "fail": "tag-red",
+      "running": "tag-green",
+      "queued": "tag-yellow",
+      "aborted": "tag-yellow",
+      "suspended": "tag-orange",
+      "stopped": "tag-red",
+      "yes": "tag-green",
+      "no": "tag-red",
+      "starting": "tag-yellow",
+      "enable": "tag-green",
+      "disable": "tag-red",
+      "maintenance": "tag-primary",
+      "unreachable": "tag-purple",
+      "good": "tag-green",
+      "poor": "tag-red",
+      "fair": "tag-orange",
+      "online": "tag-green",
+      "offline": "tag-red",
+      "available": "tag-green",
+      "connected": "tag-primary",
+      "standby": "tag-primary",
+      "disconnected": "tag-red",
+      "ready": "tag-green",
+      "critical": "tag-red",
+      "shutdown": "tag-red",
+      "healthy": "tag-green",
+      "normal": "tag-green",
+      "ok": "tag-green",
+      "optimal": "tag-green",
+      "operational": "tag-green",
+      "enabled": "tag-green",
+      "absent": "tag-red",
+      "unavailable": "tag-red",
+      "unresponsive": "tag-red"
+    },
+    "textOverrides": {
+      "poweredoff": "Up",
+      "poweredon": "Down"
+    },
+    "quirk": "F7 — poweredoff renders label 'Up' (green), poweredon renders 'Down' (red). Intentional inversion.",
+    "tagColors": {
+      "$source": "src/design/tags.less",
+      "$note": "Each tag-* class = a TEXT token (resolve via tokens/variables.json) + a bg. Most bgs are a 20% rgba tint of the text hue (literal); tag-primary/unknown/purple use bg tokens.",
+      "tag-green": {
+        "text": "--secondary-green",
+        "bg": "rgba(54,213,118,0.2)"
+      },
+      "tag-red": {
+        "text": "--secondary-red",
+        "bg": "rgba(236,91,91,0.2)"
+      },
+      "tag-yellow": {
+        "text": "--secondary-yellow",
+        "bg": "rgba(250,209,0,0.2)"
+      },
+      "tag-orange": {
+        "text": "--secondary-orange",
+        "bg": "rgba(250,153,80,0.2)"
+      },
+      "tag-primary": {
+        "text": "--default-tag-text-color",
+        "bg": "--tag-bg-color"
+      },
+      "tag-unknown": {
+        "text": "--severity-unknown",
+        "bg": "--severity-unknown-lighter"
+      },
+      "tag-purple": {
+        "text": "--severity-unreachable",
+        "bg": "--severity-unreachable-lightest"
+      }
+    },
+    "severityNote": "For severity LEVELS (critical/major/warning/clear/up/down/…) use the **Severity** component (severity.json) — NOT MStatusTag. MStatusTag's TAG_MAP lacks major/warning/clear (they fall through to a grey plain tag, F7)."
+  },
+  "a11y": {
+    "summary": "Plain tag = non-interactive <span> (fine as a label); default contrast legible in both themes.",
+    "issues": [
+      "Removable tag × is not keyboard-accessible (keyboard/AT blocker)."
+    ],
+    "doc": "Atoms/Tag/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}