@mtdt/observeops-ds-spec 0.1.0

package/components/registry/navigation.json

@@ -0,0 +1,425 @@
+{
+  "name": "navigation",
+  "display": "Navigation",
+  "tier": "molecule",
+  "family": "Navigation",
+  "status": "stable",
+  "summary": "The product's wayfinding components, by archetype: Primary nav (left module sidebar), Side menu (searchable collapsible section menu), Steps (wizard/stepper), Breadcrumb (back + trail), Back button. Tabs are their own family (Molecules/Tabs).",
+  "variants": [
+    {
+      "name": "primary-nav",
+      "what": "left module sidebar 65↔170px",
+      "usage": "global"
+    },
+    {
+      "name": "side-menu-section",
+      "what": "MCollapse sections (Settings)",
+      "usage": "20×"
+    },
+    {
+      "name": "side-menu-tree",
+      "what": "infinite-tree hierarchy",
+      "usage": "many"
+    },
+    {
+      "name": "side-menu-categories",
+      "what": "Dashboard categories + counts",
+      "usage": "many"
+    },
+    {
+      "name": "side-menu-list",
+      "what": "Report/saved-views list + inline edit",
+      "usage": "many"
+    },
+    {
+      "name": "steps",
+      "what": "report/setup/2FA wizards (bespoke)",
+      "usage": "3 flows"
+    },
+    {
+      "name": "breadcrumb",
+      "what": "back + path trail",
+      "usage": ""
+    },
+    {
+      "name": "back-button",
+      "what": "chevron-left FlotoLink",
+      "usage": "3×"
+    },
+    {
+      "name": "user-menu",
+      "what": "avatar → profile/theme/logout",
+      "usage": ""
+    },
+    {
+      "name": "notification-dropdown",
+      "what": "bell → Alerts/System tabs",
+      "usage": ""
+    },
+    {
+      "name": "omnibox",
+      "what": "global search palette",
+      "usage": ""
+    },
+    {
+      "name": "noc-player",
+      "what": "wallboard rotator",
+      "usage": ""
+    },
+    {
+      "name": "timeline-scrollbar",
+      "what": "temporal navigator",
+      "usage": ""
+    },
+    {
+      "name": "graph-breadcrumb",
+      "what": "expanded-node tags",
+      "usage": ""
+    },
+    {
+      "name": "metric-picker",
+      "what": "⊕-add + drag picker (cross-ref)",
+      "usage": ""
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "active",
+      "what": "selected (--primary)"
+    },
+    {
+      "name": "hover",
+      "what": "over item (--nav-hover-bg)"
+    },
+    {
+      "name": "collapsed",
+      "what": "primary-nav 65px"
+    },
+    {
+      "name": "expanded",
+      "what": "primary-nav 170px"
+    },
+    {
+      "name": "completed",
+      "what": "stepper ✓"
+    },
+    {
+      "name": "current",
+      "what": "stepper filled+ring"
+    },
+    {
+      "name": "remaining",
+      "what": "stepper grey"
+    }
+  ],
+  "renders": "REFERENCE REPRODUCTIONS — the live nav is router/store-bound (visibleMenuItems, FlotoLink :to, MCollapse). Built with real tokens + MIcon.",
+  "archetypes": {
+    "PrimaryNav": {
+      "source": "src/components/layout/navbar.vue (FlotoNavBar)",
+      "what": "the left vertical MODULE sidebar (MLayoutSider) — collapsed 65px by default (brand mark + module icons), hover-expands to 170px (mouseover -> pinned) showing the ObserveOps logo + labels. 16 modules from visibleMenuItems (role/license-gated): Dashboards, Monitors, Alerts, SLO (BETA), Reports, Topology, NCCM, NetRoute, Metric Explorer, Log Explorer, APM Explorer, RUM Explorer, Flow Explorer, Trap Explorer, Audits, Settings. Active module highlights --primary on --code-tag-background-color with an inset left rule when expanded.",
+      "variants": "collapsed (65px) <-> expanded (170px) is the primary variant",
+      "builtFrom": "MLayoutSider + MMenu theme=dark / MMenuItem + FlotoLink (router)"
+    },
+    "SideMenu": {
+      "source": "settings/components/left-menu.vue + log/components/hierarchy/* + topology-hierarchy.vue + dashboard/components/dashboard-dropdown.vue + report/components/report-sidebar.vue + ExplorerSavedViewList",
+      "usage": "many (per-module left-panels)",
+      "what": "the LEFT-PANEL nav archetype — one shell (optional tabs + search + scrollable list) in FOUR forms",
+      "forms": {
+        "section": "settings/left-menu.vue (20×) — MCollapse accordion of sections -> sub-items; active --primary left rule",
+        "tree": "Log Explorer hierarchy + Topology (shared components/hierarchy/infinite-tree.vue) — tabs (Type/Group/Saved Query), virtualised hierarchy: chevron + type icon/severity + name + count badge, nested",
+        "categoryList": "Dashboard dashboard-dropdown.vue — segmented Dashboard/NOC tabs + round + button, MCollapse categories with count badges + favourite star",
+        "listSavedViews": "Report report-sidebar.vue + ExplorerSavedViewList (APM/RUM/Metric/Log saved query) — tabs + search + flat MMenu list, Favorites star, active highlight, per-row pencil inline-rename"
+      },
+      "builtFrom": "MInput + MCollapse + MMenu + infinite-tree (tree form)",
+      "notInFamily": "faceted checkbox sidebar (vertical-filter/filters.vue) is a FILTER (see filters registry); Metric Explorer picker is a PICKER (see dropdown-picker); Flow Result-By is a config panel"
+    },
+    "Steps": {
+      "source": "BESPOKE — no MSteps in the product. report/components/report-steps.vue (ReportSteps, horizontal wizard) + product-setup/components/guide-section-step.vue (vertical guide steps) + auth/two-factor-verification.vue (Step 1/2/3)",
+      "usage": "3 flows",
+      "what": "a numbered wizard/stepper — count circle + label per step in states completed (✓ filled) · current (filled + ring) · remaining (grey); connectors fill --primary up to current",
+      "realUsages": {
+        "ReportBuilder": "report-steps.vue — horizontal 3-step: Report Properties -> Visualizations & Preview -> Schedule (the reproduction models this)",
+        "ProductSetupGuide": "product-setup guide-sections / guide-section-step — vertical numbered steps, completed shows green check; Log/Metric/Flow setup guides",
+        "TwoFactorSetup": "auth/two-factor-verification.vue — Step 1/2/3 indicator with dividers"
+      }
+    },
+    "Breadcrumb": {
+      "source": "e.g. src/modules/report/components/compliance-breadcrumb.vue",
+      "what": "back chevron + a path trail (Reports / Compliance / PCI-DSS Audit), current crumb bold. Some product breadcrumbs are a back + title/subtitle context header rather than a full trail."
+    },
+    "BackButton": {
+      "source": "src/components/_base-back-button.vue (FlotoBackButton)",
+      "usage": "3×",
+      "what": "a chevron-left MIcon in a FlotoLink (router :to); the smallest nav atom — also the Page header's back-button slot"
+    },
+    "Tabs": {
+      "note": "in-page tab navigation — its OWN family (Molecules/Tabs, MTab 86×). Cross-referenced, not duplicated here."
+    }
+  },
+  "appChromeAndNavigators": {
+    "UserMenu": {
+      "source": "components/layout/user-dropdown.vue",
+      "what": "header avatar -> MPopover: My Profile / Product Setup Guide / Documentation + theme toggle + Logout"
+    },
+    "NotificationDropdown": {
+      "source": "components/layout/notification-dropdown.vue",
+      "what": "header bell + MBadge count -> Alerts / System Notification tabs (MTab) + RecycleScroller list + View all / Clear all"
+    },
+    "Omnibox": {
+      "source": "components/omnibox/searchbar.vue",
+      "what": "global search / command palette: category picker + CodeMirror query editor + Execute (enter) / parse-error + clear"
+    },
+    "NocPlayer": {
+      "source": "dashboard/components/noc-player.vue",
+      "what": "wallboard rotator: logo + prev/next around current dashboard title + countdown + play/pause"
+    },
+    "TimelineScrollbar": {
+      "source": "netroute/components/timeline-scrollbar.vue",
+      "what": "temporal navigator: single (chevron) + batch (double-chevron) step controls around a time window; steps time-bucketed snapshots"
+    },
+    "GraphBreadcrumb": {
+      "source": "netroute/components/graph-view.vue",
+      "what": "a Breadcrumb variant: closable rounded MTags of expanded graph nodes (the traversal/expansion trail)"
+    }
+  },
+  "checkedAndScopedOut": {
+    "TopologyViewSwitch_ChartTypeSelector": {
+      "verdict": "Radio (segmented) usage, not a new nav entry -> cross-ref Atoms/Radio"
+    },
+    "TopologyCategory_APMSection_AlertTwoLevelTabs": {
+      "verdict": "Tabs usage (Alert adds a hover sub-menu) -> cross-ref Molecules/Tabs"
+    },
+    "ViewDetailDrawer": {
+      "verdict": "Drawer + Tabs composition -> cross-ref Organisms/Drawer"
+    },
+    "FacetedSidebar": {
+      "source": "vertical-filter/filters.vue",
+      "verdict": "a Filter, not nav -> Molecules/Filters -> Vertical filter"
+    },
+    "NotNavigation": {
+      "verdict": "swap/reorder control, role-navigation settings form, flame-graph zoom, Layer-3 toggle, keyboard-shortcuts tooltip -> not wayfinding"
+    },
+    "Pagination": {
+      "usage": "79x",
+      "verdict": "page-nav archetype, but belongs to the Table family (grid footer) — cross-referenced, not duplicated here"
+    },
+    "MenuToggle": {
+      "source": "menu-toggle-button",
+      "usage": "7x",
+      "verdict": "the Primary nav's collapse control — folded into the collapsed<->expanded variant, not a separate entry"
+    },
+    "NavLandmark": {
+      "source": "role=navigation",
+      "usage": "2x",
+      "verdict": "an a11y attribute, not a component — tracked in F2"
+    },
+    "MMenu": {
+      "usage": "13x",
+      "verdict": "shared primitive under Primary nav / Side menu -> now catalogued in its own right in the Menu family (Molecules/Menu)"
+    },
+    "MSubMenu": {
+      "usage": "0x",
+      "verdict": "flyout/mega-menu submenus confirmed ABSENT in the product"
+    },
+    "ContextMenu": {
+      "source": "FlotoGridActions (_base-grid-actions.vue) + MDropdown",
+      "usage": "grid rows + 1x",
+      "verdict": "an action surface (do something), not wayfinding -> now homed in the Menu family (Molecules/Menu)"
+    }
+  },
+  "decisionFlow": [
+    "Switch between top-level product MODULES? -> Primary nav (left sidebar).",
+    "Navigate SECTIONS within a module (e.g. Settings)? -> Side menu.",
+    "A multi-step create/setup flow? -> Steps (wizard).",
+    "Show location + a way up? -> Breadcrumb.",
+    "Just go back one level? -> Back button.",
+    "Switch between sibling VIEWS of one page? -> Tabs (Molecules/Tabs)."
+  ],
+  "do": [
+    "Use the Primary nav for modules, the Side menu for sections.",
+    "Use Steps for ordered multi-step flows (show completed/current/remaining).",
+    "Put the Back button in the Page header's back-button slot.",
+    "Use Tabs (separate family) for sibling views, not module/section nav."
+  ],
+  "dont": [
+    "Don't use Tabs for module/section navigation (that's Primary nav / Side menu).",
+    "Don't build a bespoke sidebar — reuse FlotoNavBar / the side-menu pattern.",
+    "Don't confuse a breadcrumb (location) with a toolbar (actions)."
+  ],
+  "knownIssues": {
+    "F1": {
+      "severity": "Low",
+      "issue": "Router/store-bound (visibleMenuItems, FlotoLink, MCollapse) -> reproductions."
+    },
+    "F2": {
+      "severity": "Low",
+      "a11y": true,
+      "issue": "Verify nav landmarks (role=navigation / aria-current on active), focus-visible ring (SF-001), and that the stepper conveys step state to assistive tech."
+    }
+  },
+  "tokensUsed": [
+    "--nav-panel-bg",
+    "--code-tag-background-color",
+    "--left-menu-text-color",
+    "--primary",
+    "--primary-alt",
+    "--border-color",
+    "--neutral-lightest",
+    "--neutral-light",
+    "--page-text-color"
+  ],
+  "storybook": "Molecules/Navigation",
+  "related": [
+    "tabs",
+    "toolbars",
+    "input",
+    "tag",
+    "table"
+  ],
+  "figma": {
+    "status": "todo"
+  },
+  "apis": {
+    "PrimaryNav": {
+      "source": "src/components/layout/navbar.vue (FlotoNavBar)",
+      "props": {
+        "portalMode": "Boolean (false)"
+      },
+      "events": {
+        "change": "v-model — pinned (collapse) state Boolean"
+      },
+      "slots": {},
+      "note": "router/Vuex-bound — reads visibleMenuItems from auth/permission + roleNavigation; v-model = pinned. Reproduction: the item list is store-driven."
+    },
+    "SideMenuSection": {
+      "source": "src/modules/settings/components/left-menu.vue",
+      "props": {},
+      "events": {},
+      "slots": {},
+      "note": "presentational + store-bound: maps a permission-checked MenuItems array to MCollapse sections; searchTerm + activeSection managed internally (synced to route). No public props/events — to reproduce, feed your own sections array (see source)."
+    },
+    "BackButton": {
+      "source": "src/components/_base-back-button.vue (FlotoBackButton)",
+      "props": {},
+      "events": {},
+      "slots": {},
+      "note": "thin wrapper — FlotoLink + chevron-left; inheritAttrs:false → bind :to on it for routing."
+    },
+    "Steps": {
+      "source": "report/components/report-steps.vue (ReportSteps) + product-setup/components/guide-section-step.vue",
+      "props": {
+        "report-stepper": {
+          "value": "Number (1) — current step; v-model"
+        },
+        "setup-guide-step": {
+          "step": "Object {title,description,route?,documentationLink?,icon?} (required)",
+          "index": "Number (required)",
+          "completed": "Boolean — shows ✓",
+          "isLastItem": "Boolean — hides connector",
+          "type": "String — 'log'/'flow' show icon vs number",
+          "hideLink": "Boolean"
+        }
+      },
+      "events": {
+        "report": {
+          "change": "new step Number (v-model)"
+        },
+        "setup-guide": {
+          "link": "step route clicked"
+        }
+      },
+      "slots": {
+        "setup-guide": {
+          "default": "replaces step title/description/link"
+        }
+      },
+      "note": "BESPOKE steppers (no MSteps). Report = horizontal, v-model current step (3 hardcoded). Setup-guide = one vertical step, props-driven."
+    },
+    "NocPlayer": {
+      "source": "src/modules/dashboard/components/noc-player.vue",
+      "props": {
+        "noc": "Object (required) — { dashboards[], refreshInterval (default 30s) }"
+      },
+      "events": {
+        "close": "exit button / Esc"
+      },
+      "slots": {},
+      "note": "self-contained fullscreen rotator; auto-rotates by noc.refreshInterval; keyboard Esc/arrows/space; renders Widgets per dashboard."
+    },
+    "TimelineScrollbar": {
+      "source": "src/modules/netroute/components/timeline-scrollbar.vue",
+      "props": {},
+      "events": {},
+      "slots": {},
+      "note": "display-only — consumes an INJECTED netRouteHistoryChartContext { startTime, endTime, onePontShift, oneBatchShift }; no public props/events (controls call the injected callbacks). To reproduce, provide that context."
+    },
+    "SideMenuCategories": {
+      "source": "src/modules/dashboard/components/dashboard-dropdown.vue",
+      "props": {
+        "value": "Number — selected dashboard/NOC id (v-model)",
+        "options": "Array {id,name,category,canEdit} (required)",
+        "nocOptions": "Array — NOC tab",
+        "menuVisible": "Boolean — sidebar visibility/affix"
+      },
+      "events": {
+        "change": "new id (v-model)",
+        "visible-change": "Boolean",
+        "toggle-favourite": "dashboard id",
+        "create": "",
+        "create-noc": "",
+        "edit-noc": "NOC obj",
+        "delete-noc": "NOC obj"
+      },
+      "slots": {},
+      "note": "store-bound (UserPreference/auth); Dashboard/NOC tabs (MRadioGroup as-button) + MCollapse categories + count + star; v-model=change."
+    },
+    "SideMenuList": {
+      "source": "src/modules/report/components/report-sidebar.vue",
+      "props": {
+        "value": "String — selected category key (v-model)",
+        "sidebarItems": "Array {key,text,isDefault,isNew,reportTypes[]} (required)",
+        "tab": "String (required) — filters categories by reportTypes",
+        "isSidebarForForm": "Boolean"
+      },
+      "events": {
+        "change": "category key (v-model)",
+        "add-new-category": "new name string",
+        "update-category": "(newKey, oldKey, isNew) — rename"
+      },
+      "slots": {},
+      "note": "MMenu category list + inline FlotoForm rename/create; filters by tab. Reused pattern as ExplorerSavedViewList."
+    },
+    "SideMenuTree": {
+      "source": "src/modules/log/components/hierarchy/hierarchy-container.vue + src/components/hierarchy/infinite-tree.vue (core)",
+      "props": {
+        "data": "Array — nested nodes {id,key,name,children[],resourceId,resourceType,severity,...}",
+        "value": "Object — selected node {id,resourceType,name,key} (v-model)",
+        "keyField": "String ('key')",
+        "openIds": "Array — pre-expanded node ids",
+        "rowHeight": "Number (35)",
+        "searchTerm": "String — debounced filter (750ms)",
+        "filterFn": "Function(node,term)->bool",
+        "autoExpandSearchResults": "Boolean"
+      },
+      "events": {
+        "change": "(selectedNode, tree) — v-model",
+        "mouseenter-infinite-tree-node": "node",
+        "mouseleave-infinite-tree-node": "node"
+      },
+      "slots": {
+        "default": "{ item:node, tree } — custom node render"
+      },
+      "note": "virtual tree on infinite-tree + RecycleScroller; container adds Type/Group/Saved-Query tabs. Node data shape is the key contract."
+    }
+  },
+  "a11y": {
+    "summary": "Nav rail/side-menus should be <nav>/role=navigation with a label; active item carries aria-current; steppers + collapsibles expose state (aria-expanded; completed/current/remaining).",
+    "issues": [
+      "SF-001 focus ring on nav items/rows/steps.",
+      "App-chrome triggers (user menu, bell, omnibox), notification count, NOC controls and graph-breadcrumb × need accessible names."
+    ],
+    "doc": "Molecules/Navigation/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}

package/components/registry/popover.json

@@ -0,0 +1,216 @@
+{
+  "name": "popover",
+  "display": "Popover",
+  "tier": "molecule",
+  "family": "Popover & Tooltip",
+  "source": "ui/components/Popover/Popover.vue (kit; wraps Ant a-popover). Related primitive: src/components/_base-popper.vue (MPopper, wraps v-popover).",
+  "status": "stable",
+  "summary": "Click-triggered floating panel anchored to a trigger, holding interactive content (action menus, pickers, mini-forms). Slots trigger/title/default each get {hide,show,toggle}. MPopper is the lower-level v-popover positioning primitive that powers FlotoDropdownPicker.",
+  "variants": [
+    {
+      "name": "click",
+      "what": "click trigger (default)",
+      "usage": "20×"
+    },
+    {
+      "name": "hover",
+      "what": "hover trigger (+N reveals)",
+      "usage": "13×"
+    },
+    {
+      "name": "action-menu",
+      "what": "kebab item actions",
+      "usage": ""
+    },
+    {
+      "name": "grid-row-actions",
+      "what": "grid row kebab",
+      "usage": ""
+    },
+    {
+      "name": "rich-panel",
+      "what": "colour/date picker panel",
+      "usage": ""
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "closed",
+      "what": "hidden"
+    },
+    {
+      "name": "open",
+      "what": "visible/interactive"
+    }
+  ],
+  "usage": {
+    "total": 35,
+    "mpopper": 2,
+    "patterns": [
+      "action/kebab menu (_base-grid-actions)",
+      "color picker",
+      "date/time picker",
+      "rich panels",
+      "+N overflow hover reveal (tags-list)"
+    ],
+    "triggerDistribution": {
+      "click": 20,
+      "hover": 13,
+      "explicit-click": 2
+    },
+    "placementDistribution": {
+      "bottomLeft": 11,
+      "bottomRight": 9,
+      "bottom": 7,
+      "leftTop": 4,
+      "top": 1,
+      "right": 1
+    },
+    "transition": "transition-name='slide-up' (16x)",
+    "overlayClassName": [
+      "picker-action-dropdown",
+      "color-picker-popover",
+      "picker-overlay",
+      "readable-content-overlay"
+    ]
+  },
+  "props": {
+    "trigger": {
+      "type": "string",
+      "default": "click",
+      "enum": [
+        "click",
+        "hover",
+        "focus",
+        "contextmenu"
+      ]
+    },
+    "placement": {
+      "type": "string",
+      "default": "bottom",
+      "enum": [
+        "top",
+        "bottom",
+        "bottomRight",
+        "bottomLeft",
+        "left",
+        "right"
+      ]
+    },
+    "visible": {
+      "type": "boolean",
+      "default": null,
+      "note": "controlled mode; pair with @visibleChange (one-way — F1)"
+    },
+    "overlayClassName": {
+      "type": "string",
+      "default": null
+    },
+    "overlayStyle": {
+      "type": "object",
+      "default": null
+    },
+    "mouseEnterDelay": {
+      "type": "number",
+      "default": null
+    },
+    "mouseLeaveDelay": {
+      "type": "number",
+      "default": null
+    },
+    "destroyTooltipOnHide": {
+      "type": "boolean",
+      "default": true,
+      "note": "re-creates content each open"
+    },
+    "getPopupContainer": {
+      "type": "function",
+      "default": null,
+      "note": "defaults to closest .__panel or document.body"
+    }
+  },
+  "slots": {
+    "trigger": "the anchor; scope { hide, show, toggle }",
+    "title": "optional header; scope { hide, show, toggle }",
+    "default": "the panel content; scope { hide, show, toggle }"
+  },
+  "events": {
+    "visibleChange": "fires on open/close (controlled mode)"
+  },
+  "tokensUsed": [
+    "--page-background-color",
+    "--border-color",
+    "--page-text-color"
+  ],
+  "decisionFlow": [
+    "Is the content a short non-interactive hint? -> Tooltip, not Popover.",
+    "Is it a row/item action list (edit/duplicate/delete)? -> Popover action menu (placement='bottomRight').",
+    "Is it a picker/mini-form/color or date picker? -> Popover rich panel (often a custom overlay-class).",
+    "Is it a center-interrupting task or confirmation? -> Modal, not Popover.",
+    "Is it a select-from-options field? -> FlotoDropdownPicker (which uses MPopper internally)."
+  ],
+  "usageRules": {
+    "actionMenu": {
+      "useWhen": "row/item actions (edit, duplicate, delete)",
+      "how": "kebab (ellipsis-v) trigger, placement='bottomRight', items call hide()",
+      "example": "grid row actions (_base-grid-actions)"
+    },
+    "richPanel": {
+      "useWhen": "an interactive picker/mini-form",
+      "how": "trigger='click' + a custom overlay-class",
+      "example": "color-picker-popover, date/time picker"
+    },
+    "hoverReveal": {
+      "useWhen": "a passive reveal on hover (no click) — +N overflow, quick peek",
+      "how": "trigger='hover' (often transition-name='slide-up')",
+      "example": "tags-list '+N' overflow (13x use hover)"
+    }
+  },
+  "placementVocabulary": "Ant names (bottomLeft/bottomRight/leftTop/bottom/top) — NOT the Tooltip's VTippy names (top-start). Not interchangeable.",
+  "do": [
+    "Use for interactive, click-triggered content",
+    "Give items a hide() on select",
+    "Anchor row actions bottomRight"
+  ],
+  "dont": [
+    "Don't use for plain hints (use Tooltip)",
+    "Don't use for center-interrupting tasks/confirmations (use Modal)",
+    "Don't hand-roll a select dropdown (use FlotoDropdownPicker)"
+  ],
+  "knownIssues": {
+    "F1": {
+      "severity": "Low",
+      "issue": "`visible` is one-way — controlled mode needs an explicit @visibleChange handler to stay in sync."
+    },
+    "F2": {
+      "severity": "Medium",
+      "a11y": true,
+      "issue": "Trigger lacks aria-haspopup/aria-expanded; no focus move into the panel on open and no focus-trap — keyboard/SR users aren't told a panel opened."
+    },
+    "F3": {
+      "severity": "Medium",
+      "a11y": true,
+      "issue": "No focus ring (`:focus { outline:none }` in _base-popper) — links to SF-001."
+    }
+  },
+  "storybook": "Molecules/Popover",
+  "related": [
+    "tooltip",
+    "modal",
+    "dropdown-picker"
+  ],
+  "figma": {
+    "status": "todo"
+  },
+  "a11y": {
+    "summary": "Holds interactive content → focus handling matters. Outside-click / Esc close (from a-popover); verify Esc returns focus.",
+    "issues": [
+      "Trigger not announced as a disclosure — no aria-haspopup/expanded (F2).",
+      "Focus not moved into the panel; no focus trap.",
+      "Overlay removes the focus outline."
+    ],
+    "doc": "Molecules/Popover/Accessibility",
+    "$note": "Catalogue-wide gap SF-001 = no visible :focus-visible ring; tracked in findings/."
+  }
+}