@loworbitstudio/visor 1.3.4 → 1.5.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-05-30T23:15:47.105Z",
+  "generated_at": "2026-06-04T00:42:59.544Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -239,6 +239,10 @@
         {
           "name": "AlertDescription",
           "description": "Secondary descriptive text below the title."
+        },
+        {
+          "name": "AlertActions",
+          "description": "Right-aligned, gap-aware row for inline action buttons (e.g. retry/dismiss)."
         }
       ],
       "dependencies": [
@@ -254,6 +258,7 @@
         "--radius-lg",
         "--shadow-sm",
         "--spacing-1",
+        "--spacing-2",
         "--spacing-3",
         "--spacing-4",
         "--surface-card",
@@ -301,6 +306,10 @@
         {
           "name": "AvatarFallback",
           "description": "Centered fallback content (initials or icon) shown when image is unavailable."
+        },
+        {
+          "name": "AvatarStack",
+          "description": "Compound primitive for overlapping avatar groups with a `+N` overflow indicator. Accepts an array of image sources (`avatars`), a `total` count (supports server-truncated lists), a `max` cap (default 6), a `size` pass-through (`\"sm\" | \"default\" | \"lg\"`, default `\"sm\"`), and an optional accessible `label` override. Renders `role=\"img\"` with `data-slot=\"avatar-stack\"`.\n"
         }
       ],
       "dependencies": [
@@ -335,6 +344,7 @@
           "default",
           "secondary",
           "outline",
+          "neutral",
           "destructive",
           "success",
           "warning",
@@ -342,14 +352,26 @@
           "filled-destructive",
           "filled-success",
           "filled-warning",
-          "filled-info"
+          "filled-info",
+          "filled-neutral"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
         ]
       },
       "props": [
         {
           "name": "variant",
-          "type": "\"default\" | \"secondary\" | \"outline\" | \"destructive\" | \"success\" | \"warning\" | \"info\" | \"filled-destructive\" | \"filled-success\" | \"filled-warning\" | \"filled-info\"",
+          "type": "\"default\" | \"secondary\" | \"outline\" | \"neutral\" | \"destructive\" | \"success\" | \"warning\" | \"info\" | \"filled-destructive\" | \"filled-success\" | \"filled-warning\" | \"filled-info\" | \"filled-neutral\"",
           "default": "\"default\""
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "\"md\"",
+          "description": "Controls token-driven padding, font-size, gap, and embedded-icon scaling. `md` (the default) reproduces the original badge sizing exactly — existing call sites are unchanged. `sm` is tighter for dense inline data contexts; `lg` is larger for editorial contexts like page headers and stat-card status pills. Icons inside the badge scale with the size step.\n"
         }
       ],
       "dependencies": [
@@ -358,8 +380,11 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--color-neutral-600",
+        "--color-white",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
         "--interactive-primary-bg",
@@ -371,10 +396,12 @@
         "--radius-full",
         "--spacing-1",
         "--spacing-2",
+        "--spacing-3",
         "--surface-error-default",
         "--surface-error-subtle",
         "--surface-info-default",
         "--surface-info-subtle",
+        "--surface-muted",
         "--surface-subtle",
         "--surface-success-default",
         "--surface-success-subtle",
@@ -384,10 +411,11 @@
         "--text-info",
         "--text-inverse",
         "--text-primary",
+        "--text-secondary",
         "--text-success",
         "--text-warning"
       ],
-      "example": "<Badge variant=\"default\">Active</Badge>\n<Badge variant=\"secondary\">Draft</Badge>\n<Badge variant=\"outline\">v2.1.0</Badge>\n<Badge variant=\"destructive\">Error</Badge>\n<Badge variant=\"success\">Published</Badge>\n<Badge variant=\"warning\">Pending</Badge>\n<Badge variant=\"info\">Beta</Badge>\n<Badge variant=\"filled-destructive\">Critical</Badge>\n"
+      "example": "<Badge variant=\"default\">Active</Badge>\n<Badge variant=\"secondary\">Secondary</Badge>\n<Badge variant=\"outline\">v2.1.0</Badge>\n<Badge variant=\"neutral\">Draft</Badge>\n<Badge variant=\"destructive\">Error</Badge>\n<Badge variant=\"success\">Published</Badge>\n<Badge variant=\"warning\">Pending</Badge>\n<Badge variant=\"info\">Beta</Badge>\n<Badge variant=\"filled-destructive\">Critical</Badge>\n\n{/* Sizes — sm for dense inline data, md (default) inline, lg for headers/pills */}\n<Badge size=\"sm\" variant=\"secondary\">v2.1.0</Badge>\n<Badge size=\"md\" variant=\"success\">Published</Badge>\n<Badge size=\"lg\" variant=\"info\">Beta</Badge>\n"
     },
     "banner": {
       "category": "feedback",
@@ -970,12 +998,26 @@
           "name": "disabled",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "gated",
+          "type": "boolean",
+          "default": false,
+          "description": "Renders the button in an inert permission-gated state — visually dimmed, cursor not-allowed, and click handlers suppressed. Uses aria-disabled instead of native disabled so the button stays keyboard-focusable (required for the tooltip to be reachable by keyboard and screen-reader users). Works orthogonally with all variants and sizes.\n"
+        },
+        {
+          "name": "gatedReason",
+          "type": "string",
+          "default": "undefined",
+          "description": "Explanation surfaced in an anchored Radix tooltip when the button is gated. Only rendered when gated is also true. A TooltipProvider ancestor is required whenever gatedReason is set — add one at the page or layout level. Example: \"You can't delete this — you're not an owner\".\n"
         }
       ],
       "dependencies": [
-        "class-variance-authority"
+        "class-variance-authority",
+        "@radix-ui/react-tooltip"
       ],
       "tokens_used": [
+        "--border-default",
         "--border-focus",
         "--border-strong",
         "--focus-ring-offset",
@@ -997,6 +1039,8 @@
         "--interactive-secondary-text",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--opacity-50",
+        "--primary",
         "--radius-md",
         "--spacing-2",
         "--spacing-3",
@@ -1005,7 +1049,7 @@
         "--surface-muted",
         "--text-primary"
       ],
-      "example": "<Button variant=\"default\" size=\"md\">Save changes</Button>\n\n<Button variant=\"destructive\">Delete account</Button>\n\n<Button variant=\"ghost\" size=\"sm\">Cancel</Button>\n"
+      "example": "<Button variant=\"default\" size=\"md\">Save changes</Button>\n\n<Button variant=\"destructive\">Delete account</Button>\n\n<Button variant=\"ghost\" size=\"sm\">Cancel</Button>\n\n{/* Gated — no reason (tooltip suppressed) */}\n<Button gated>Delete organization</Button>\n\n{/* Gated with reason — tooltip shown on hover/focus */}\n<TooltipProvider>\n  <Button gated gatedReason=\"You can't delete this — you're not an owner\">\n    Delete organization\n  </Button>\n</TooltipProvider>\n"
     },
     "calendar": {
       "category": "form",
@@ -1367,6 +1411,7 @@
         "--interactive-primary-text",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
         "--radius-sm"
       ],
       "example": "<div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n  <Checkbox id=\"terms\" />\n  <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n</div>\n"
@@ -1465,7 +1510,7 @@
         {
           "name": "FilterChip",
           "element": "button",
-          "description": "Toggle-style multi-select chip. Renders with role=\"checkbox\" and aria-checked. Use inside a ChipGroup with type=\"multiple\".",
+          "description": "Toggle-style multi-select chip. Renders with role=\"checkbox\" and aria-checked. Use inside a ChipGroup with type=\"multiple\". Supports an optional count pill for quick-filter pivots (e.g. \"Active 47\").",
           "props": [
             {
               "name": "selected",
@@ -1481,6 +1526,18 @@
               "name": "value",
               "type": "string",
               "optional": true
+            },
+            {
+              "name": "count",
+              "type": "React.ReactNode",
+              "optional": true,
+              "description": "Count pill rendered after the label. Accepts strings, numbers, or elements. Part of the accessible button name."
+            },
+            {
+              "name": "countTone",
+              "type": "\"primary\" | \"neutral\"",
+              "default": "\"neutral\"",
+              "description": "Tone for the count pill. \"neutral\" uses muted surface; \"primary\" uses accent surface. Auto re-tones on selected state."
             }
           ]
         }
@@ -1517,7 +1574,7 @@
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<Chip label=\"React\" />\n<Chip label=\"Featured\" onDeleted={() => removeTag(\"featured\")} />\n<ChoiceChip label=\"Compact\" selected={density === \"compact\"} onPressed={() => setDensity(\"compact\")} />\n<FilterChip label=\"Events\" selected={filters.includes(\"events\")} onPressed={() => toggleFilter(\"events\")} />\n"
+      "example": "<Chip label=\"React\" />\n<Chip label=\"Featured\" onDeleted={() => removeTag(\"featured\")} />\n<ChoiceChip label=\"Compact\" selected={density === \"compact\"} onPressed={() => setDensity(\"compact\")} />\n<FilterChip label=\"Events\" selected={filters.includes(\"events\")} onPressed={() => toggleFilter(\"events\")} />\n<FilterChip label=\"All\" count={132} onPressed={() => setFilter(\"all\")} />\n<FilterChip label=\"Active\" count={47} countTone=\"primary\" selected onPressed={() => setFilter(\"active\")} />\n<FilterChip label=\"Suspended\" count={8} onPressed={() => setFilter(\"suspended\")} />\n"
     },
     "chrome-button": {
       "category": "admin",
@@ -1566,7 +1623,6 @@
         "class-variance-authority"
       ],
       "tokens_used": [
-        "--accent-primary",
         "--border-focus",
         "--focus-ring-offset",
         "--focus-ring-width",
@@ -1579,6 +1635,7 @@
         "--motion-duration-150",
         "--motion-easing-default",
         "--opacity-50",
+        "--primary",
         "--radius-md",
         "--spacing-1",
         "--spacing-2",
@@ -2024,6 +2081,9 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--combobox-bg",
+        "--combobox-border",
+        "--field-menu-bg",
         "--focus-ring-width",
         "--font-size-sm",
         "--font-size-xs",
@@ -2031,6 +2091,7 @@
         "--interactive-primary-bg",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
         "--radius-lg",
         "--radius-md",
         "--radius-sm",
@@ -2172,6 +2233,9 @@
         "severity": [
           "info",
           "warning",
+          "destructive"
+        ],
+        "severity_deprecated": [
           "danger"
         ]
       },
@@ -2180,7 +2244,7 @@
           "name": "title",
           "type": "React.ReactNode",
           "required": true,
-          "description": "Dialog title. Rendered next to the severity icon."
+          "description": "Dialog title. Rendered below the severity icon plate in the dialog header."
         },
         {
           "name": "description",
@@ -2194,9 +2258,9 @@
         },
         {
           "name": "severity",
-          "type": "'info' | 'warning' | 'danger'",
+          "type": "'info' | 'warning' | 'destructive' | 'danger'",
           "default": "warning",
-          "description": "Drives icon, icon color, and confirm button variant."
+          "description": "Drives icon, tinted icon plate, and confirm button variant. Use \"info\", \"warning\", or \"destructive\". The value \"danger\" is a deprecated alias for \"destructive\" and will be removed in the next major version.\n"
         },
         {
           "name": "trigger",
@@ -2221,7 +2285,7 @@
         {
           "name": "confirmLabel",
           "type": "React.ReactNode",
-          "description": "Confirm button label. Defaults to \"Delete\" for danger, \"Confirm\" otherwise."
+          "description": "Confirm button label. Defaults to \"Delete\" for destructive/danger severity, \"Confirm\" otherwise."
         },
         {
           "name": "cancelLabel",
@@ -2272,19 +2336,23 @@
         "--motion-easing-default",
         "--radius-md",
         "--spacing-1",
+        "--spacing-10",
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
         "--spacing-5",
         "--spacing-6",
+        "--surface-error-subtle",
+        "--surface-info-subtle",
         "--surface-page",
+        "--surface-warning-subtle",
         "--text-error",
         "--text-info",
         "--text-primary",
         "--text-secondary",
         "--text-warning"
       ],
-      "example": "<ConfirmDialog\n  trigger={<Button variant=\"destructive\">Delete project</Button>}\n  severity=\"danger\"\n  title=\"Delete project?\"\n  description=\"This action cannot be undone. All associated data will be permanently removed.\"\n  confirmText=\"acme\"\n  onConfirm={async () => {\n    await deleteProject()\n  }}\n/>\n"
+      "example": "<ConfirmDialog\n  trigger={<Button variant=\"destructive\">Delete project</Button>}\n  severity=\"destructive\"\n  title=\"Delete project?\"\n  description=\"This action cannot be undone. All associated data will be permanently removed.\"\n  confirmText=\"acme\"\n  onConfirm={async () => {\n    await deleteProject()\n  }}\n/>\n"
     },
     "container": {
       "category": "layout",
@@ -2682,6 +2750,7 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--field-menu-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
@@ -2750,6 +2819,7 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--field-menu-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
@@ -2907,7 +2977,13 @@
           "name": "variant",
           "type": "'default' | 'destructive'",
           "default": "default",
-          "description": "Visual style for the menu item"
+          "description": "Visual style for the menu item (DropdownMenuItem)"
+        },
+        {
+          "name": "variant (DropdownMenuContent / DropdownMenuSubContent)",
+          "type": "'default' | 'breakout'",
+          "default": "default",
+          "description": "Elevation variant for the menu container. Use \"breakout\" inside scroll-clipped containers like DataTable rows, sticky toolbars, or any overflow:hidden ancestor. The breakout variant raises z-index to 200 and deepens the shadow so the menu escapes the stacking context. The \"default\" value is byte-identical to pre-variant rendering — no consumer migration required.\n"
         }
       ],
       "sub_components": [
@@ -2921,7 +2997,7 @@
         },
         {
           "name": "DropdownMenuContent",
-          "description": "The floating menu container."
+          "description": "The floating menu container. Accepts variant=\"breakout\" for scroll-clipped contexts."
         },
         {
           "name": "DropdownMenuItem",
@@ -2965,7 +3041,7 @@
         },
         {
           "name": "DropdownMenuSubContent",
-          "description": "The nested sub-menu container."
+          "description": "The nested sub-menu container. Accepts variant=\"breakout\" for scroll-clipped contexts."
         },
         {
           "name": "DropdownMenuPortal",
@@ -2987,6 +3063,7 @@
         "--radius-lg",
         "--radius-md",
         "--shadow-lg",
+        "--shadow-xl",
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
@@ -3993,9 +4070,13 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-base",
         "--font-size-sm",
+        "--input-bg",
+        "--input-bg-invalid",
+        "--input-border",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-sm",
@@ -4005,6 +4086,7 @@
         "--spacing-4",
         "--spacing-4_5",
         "--spacing-5",
+        "--surface-error-subtle",
         "--surface-interactive-default",
         "--text-primary",
         "--text-secondary"
@@ -4080,6 +4162,69 @@
       ],
       "example": "<Kbd>⌘K</Kbd>\n<Kbd keys={[\"⌘\", \"K\"]} />\n<Kbd keys={[\"Ctrl\", \"K\"]} separator=\"+\" size=\"lg\" variant=\"outline\" />\n"
     },
+    "key-value-list": {
+      "category": "data-display",
+      "description": "Definition-list display primitive for one record's attributes — label/value pairs in a responsive grid. Values accept any node (Badge, AvatarStack, StatHero, ScoreIndicator, text).",
+      "when_to_use": [
+        "The \"key facts\" panel atop a detail / inspector page (org detail, user detail, billing summary)",
+        "Rendering a single record's attributes as label/value pairs",
+        "A 4-up editorial facts row with rich value nodes (badges, avatar stacks, stat figures, score rings)"
+      ],
+      "when_not_to_use": [
+        "Many records in rows and columns (use DataTable)",
+        "A single large KPI figure with delta / trend (use StatCard or StatHero)",
+        "Editable form fields (use the Field family)"
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "KeyValueItem[]",
+          "description": "The label/value pairs. Each item is { label, value, hint? } with ReactNode fields."
+        },
+        {
+          "name": "columns",
+          "type": "1 | 2 | 3 | 4",
+          "default": "1",
+          "description": "Grid column count; collapses responsively on narrow viewports."
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"stacked\"",
+          "default": "\"stacked\"",
+          "description": "stacked = label above value (facts panel); horizontal = label beside value (inspector)."
+        },
+        {
+          "name": "density",
+          "type": "\"compact\" | \"default\" | \"editorial\"",
+          "default": "\"editorial\"",
+          "description": "Row density; editorial is the admin-ui default."
+        },
+        {
+          "name": "as",
+          "type": "\"dl\" | \"div\"",
+          "default": "\"dl\"",
+          "description": "Root element; dl renders semantic <dl>/<dt>/<dd>, div opts out."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--font-size-base",
+        "--font-size-lg",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--font-weight-normal",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-6",
+        "--spacing-8",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "<KeyValueList\n  columns={4}\n  items={[\n    { label: \"Plan\", value: <Badge tone=\"info\">Enterprise</Badge> },\n    { label: \"Members\", value: <AvatarStack avatars={avatars} total={142} />, hint: \"142 total\" },\n    { label: \"Monthly revenue\", value: <StatHero value=\"$48,200\" /> },\n    { label: \"Health score\", value: <ScoreIndicator value={98} max={100} />, hint: \"/ 100\" },\n  ]}\n/>\n"
+    },
     "label": {
       "category": "form",
       "description": "An accessible label component built on Radix UI Label.",
@@ -4678,6 +4823,8 @@
         "--font-size-sm",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--number-input-bg",
+        "--number-input-border",
         "--radius-md",
         "--surface-interactive-default",
         "--surface-interactive-hover",
@@ -4769,6 +4916,8 @@
         "--font-weight-medium",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--otp-bg",
+        "--otp-border",
         "--radius-md",
         "--spacing-2",
         "--surface-interactive-default",
@@ -5084,7 +5233,8 @@
         "Displaying a small form or filter controls near a trigger",
         "Rich content previews that need more space than a tooltip",
         "Non-modal floating panels for settings or options",
-        "Date pickers or color pickers anchored to an input"
+        "Date pickers or color pickers anchored to an input",
+        "Single-select or multi-select option lists inside a filter popover (use PopoverSelectionList)"
       ],
       "when_not_to_use": [
         "Simple text hints on hover (use Tooltip)",
@@ -5121,23 +5271,58 @@
         {
           "name": "PopoverAnchor",
           "description": "Optional custom anchor element for positioning."
+        },
+        {
+          "name": "PopoverFooter",
+          "description": "Right-aligned action row separated from the body by a top border. Hosts a primary/secondary button pair (e.g. Apply/Cancel) for filter popovers, inline editors, and lightweight confirms.\n"
+        },
+        {
+          "name": "PopoverSelectionList",
+          "description": "WAI-ARIA listbox container for single- or multi-select option lists. Takes a mode prop (\"checkbox\" | \"radio\", default \"checkbox\") that propagates to all child PopoverSelectionItem elements via context. Implements roving-tabindex keyboard navigation (Arrow Up/Down, Home/End, Enter/Space, Esc closes via Radix).\n"
+        },
+        {
+          "name": "PopoverSelectionItem",
+          "description": "A selectable option row inside PopoverSelectionList. Renders role=\"option\" with aria-selected, aria-disabled, and an always-rendered indicator plate (checkbox: filled square on selection; radio: ring with dot on selection). Accepts selected, onSelect, disabled, count, and leadingIcon props.\n"
+        },
+        {
+          "name": "PopoverSelectionLabel",
+          "description": "A non-interactive label heading row for a PopoverSelectionList, styled as a small-caps section header.\n"
         }
       ],
       "dependencies": [
-        "@radix-ui/react-popover"
+        "@radix-ui/react-popover",
+        "@phosphor-icons/react"
       ],
       "tokens_used": [
+        "--border-default",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--hairline-strong",
+        "--interactive-primary-text",
         "--motion-duration-fast",
+        "--motion-easing-default",
         "--motion-easing-enter",
         "--motion-easing-exit",
+        "--opacity-40",
+        "--primary",
         "--radius-lg",
+        "--radius-md",
         "--shadow-lg",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
         "--spacing-4",
+        "--stroke-width-thin",
         "--surface-card",
+        "--surface-interactive-hover",
         "--surface-popover",
-        "--text-primary"
+        "--surface-subtle",
+        "--text-primary",
+        "--text-secondary"
       ],
-      "example": "<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Open settings</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Popover content here</p>\n  </PopoverContent>\n</Popover>\n"
+      "example": "<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Filter</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Filter options here</p>\n    <PopoverFooter>\n      <Button variant=\"ghost\">Cancel</Button>\n      <Button>Apply</Button>\n    </PopoverFooter>\n  </PopoverContent>\n</Popover>\n"
     },
     "progress": {
       "category": "feedback",
@@ -5179,8 +5364,10 @@
       ],
       "tokens_used": [
         "--interactive-primary-bg",
-        "--motion-duration-300",
+        "--motion-duration-1500",
         "--motion-easing-default",
+        "--primary",
+        "--progress-animation-duration",
         "--radius-full",
         "--surface-interactive-active",
         "--surface-muted"
@@ -5293,6 +5480,8 @@
         "--interactive-primary-text",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
+        "--radio-border",
         "--spacing-2"
       ],
       "example": "<RadioGroup defaultValue=\"medium\">\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"small\" id=\"small\" />\n    <Label htmlFor=\"small\">Small</Label>\n  </div>\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"medium\" id=\"medium\" />\n    <Label htmlFor=\"medium\">Medium</Label>\n  </div>\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"large\" id=\"large\" />\n    <Label htmlFor=\"large\">Large</Label>\n  </div>\n</RadioGroup>\n"
@@ -5647,6 +5836,7 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--field-menu-bg",
         "--focus-ring-width",
         "--font-size-base",
         "--font-size-sm",
@@ -5659,6 +5849,8 @@
         "--radix-select-content-available-height",
         "--radix-select-trigger-height",
         "--radix-select-trigger-width",
+        "--select-bg",
+        "--select-border",
         "--shadow-lg",
         "--spacing-1",
         "--spacing-2",
@@ -6081,6 +6273,7 @@
         "--interactive-primary-bg-hover",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
         "--shadow-sm",
         "--surface-card",
         "--surface-interactive-default",
@@ -6214,7 +6407,7 @@
         {
           "name": "color",
           "type": "string",
-          "default": "var(--accent-primary)",
+          "default": "var(--primary, currentColor)",
           "description": "Stroke color. Accepts any CSS color string — token, hex, hsl, oklch."
         },
         {
@@ -6236,7 +6429,13 @@
         }
       ],
       "dependencies": [],
-      "tokens_used": [],
+      "tokens_used": [
+        "--motion-duration-1500",
+        "--motion-easing-ease-out",
+        "--sparkline-animation-duration",
+        "--sparkline-animation-easing",
+        "--sparkline-length"
+      ],
       "example": "<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} width={120} height={32} />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} color=\"var(--text-success)\" />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} fluid />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} aria-label=\"RSVPs over the last 12 weeks\" />\n"
     },
     "stack": {
@@ -6594,6 +6793,7 @@
         "Labeling service health (healthy, degraded, down)",
         "Labeling job or task lifecycle (queued, running, pending, complete, failed, idle)",
         "Labeling admin-ui event state (live, warn, scheduled, sold, draft)",
+        "Labeling CRM / pipeline stage (prospect, pitched, contracted, active, paused, completed, archived)",
         {
           "Any place you want a consistent \"Status": "X\" accessible announcement"
         }
@@ -6618,7 +6818,14 @@
           "warn",
           "scheduled",
           "sold",
-          "draft"
+          "draft",
+          "prospect",
+          "pitched",
+          "contracted",
+          "active",
+          "paused",
+          "completed",
+          "archived"
         ],
         "tone": [
           "subtle",
@@ -6660,6 +6867,7 @@
         "badge"
       ],
       "tokens_used": [
+        "--color-white",
         "--motion-duration-800",
         "--motion-easing-standard",
         "--radius-full",
@@ -6792,6 +7000,7 @@
         "--line-height-snug",
         "--motion-duration-200",
         "--motion-easing-default",
+        "--primary",
         "--radius-full",
         "--spacing-1",
         "--spacing-2",
@@ -6903,8 +7112,10 @@
         "--interactive-primary-bg",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
         "--shadow-sm",
-        "--surface-page"
+        "--surface-page",
+        "--switch-track-bg"
       ],
       "example": "<div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n  <Switch id=\"notifications\" />\n  <Label htmlFor=\"notifications\">Enable notifications</Label>\n</div>\n"
     },
@@ -7029,7 +7240,20 @@
         },
         {
           "name": "TabsTrigger",
-          "description": "Clickable tab button tied to a content panel via matching value prop."
+          "description": "Clickable tab button tied to a content panel via matching value prop.",
+          "props": [
+            {
+              "name": "count",
+              "type": "React.ReactNode",
+              "description": "Optional inline count pill rendered after the label. Accepts strings, numbers, or elements. Omit to render the trigger without a pill."
+            },
+            {
+              "name": "countTone",
+              "type": "\"primary\" | \"neutral\"",
+              "default": "\"neutral\"",
+              "description": "Visual tone of the count pill when inactive. Active state (data-state=\"active\") re-tones the pill automatically regardless of this prop."
+            }
+          ]
         },
         {
           "name": "TabsContent",
@@ -7046,6 +7270,7 @@
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
+        "--font-size-xs",
         "--font-weight-medium",
         "--motion-duration-150",
         "--motion-duration-normal",
@@ -7055,13 +7280,15 @@
         "--shadow-sm",
         "--spacing-1",
         "--spacing-2",
+        "--surface-accent-subtle",
         "--surface-muted",
         "--surface-page",
         "--tabs-indicator-color",
+        "--text-link",
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<Tabs defaultValue=\"overview\">\n  <TabsList variant=\"default\">\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">Overview content here.</TabsContent>\n  <TabsContent value=\"settings\">Settings content here.</TabsContent>\n</Tabs>\n"
+      "example": "<Tabs defaultValue=\"members\">\n  <TabsList variant=\"default\">\n    <TabsTrigger value=\"members\" count={12}>Members</TabsTrigger>\n    <TabsTrigger value=\"pending\" count={3}>Pending</TabsTrigger>\n    <TabsTrigger value=\"roles\" count={4}>Roles</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"members\">Members content here.</TabsContent>\n  <TabsContent value=\"pending\">Pending content here.</TabsContent>\n  <TabsContent value=\"roles\">Roles content here.</TabsContent>\n</Tabs>\n"
     },
     "tag-input": {
       "category": "form",
@@ -7127,6 +7354,8 @@
         "--spacing-2",
         "--surface-interactive-default",
         "--surface-muted",
+        "--tag-input-bg",
+        "--tag-input-border",
         "--text-primary",
         "--text-secondary"
       ],
@@ -7282,7 +7511,9 @@
         "--spacing-5",
         "--surface-interactive-default",
         "--text-primary",
-        "--text-secondary"
+        "--text-secondary",
+        "--textarea-bg",
+        "--textarea-border"
       ],
       "example": "<Textarea placeholder=\"Write your message...\" rows={4} />\n\n<Textarea aria-invalid=\"true\" />\n"
     },
@@ -7427,6 +7658,7 @@
         "--line-height-snug",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--primary",
         "--radius-full",
         "--spacing-1",
         "--spacing-3",
@@ -7487,6 +7719,7 @@
         "--motion-duration-normal",
         "--motion-easing-enter",
         "--motion-easing-exit",
+        "--primary",
         "--radius-lg",
         "--radius-md",
         "--shadow-lg",
@@ -7589,6 +7822,7 @@
         "--motion-duration-150",
         "--motion-duration-200",
         "--motion-easing-default",
+        "--primary",
         "--radius-lg",
         "--radius-md",
         "--radius-sm",
@@ -8537,23 +8771,6 @@
         "Single-record inline edits (use admin-detail-drawer)"
       ]
     },
-    "avatar-stack": {
-      "category": "data-display",
-      "description": "Overlapping avatar group with a `+N more` overflow indicator. Pure composition of the Avatar primitive, no new tokens or ARIA pattern.",
-      "components_used": [
-        "avatar"
-      ],
-      "when_to_use": [
-        "Compact summary of multiple members on a card or facts row",
-        "Member presence indicators on org-detail, project, or workspace summaries",
-        "Server-truncated lists where the total count is known but only the first few avatar URLs were sent down"
-      ],
-      "when_not_to_use": [
-        "Single-user contexts (use Avatar directly)",
-        "Full member directories (use a paginated list or table)",
-        "Interactive selection of members (use a list block with checkboxes)"
-      ]
-    },
     "chip-group": {
       "category": "form",
       "description": "A composable container managing selection state for ChoiceChip (single-select) and FilterChip (multi-select) chips. Mirrors Flutter Material's chip selection model.",
@@ -8768,21 +8985,23 @@
     },
     "login-form": {
       "category": "authentication",
-      "description": "A login form block using Visor form components (Button, Input, Label, Card).",
+      "description": "A login form block using Visor form components (Button, Input, Label, Card), with optional OAuth provider buttons.",
       "components_used": [
         "button",
         "input",
         "field",
-        "card"
+        "card",
+        "separator",
+        "alert"
       ],
       "when_to_use": [
         "Authentication pages",
         "Sign-in screens",
+        "OAuth and social sign-in flows",
         "Demo login flows"
       ],
       "when_not_to_use": [
-        "Registration forms (extend with additional fields)",
-        "OAuth-only flows with no email/password fields"
+        "Registration forms (extend with additional fields)"
       ]
     },
     "pricing-section": {
@@ -9644,6 +9863,7 @@
       "bento-grid",
       "card",
       "chart",
+      "key-value-list",
       "marquee",
       "name-roster",
       "sparkline",
@@ -10582,6 +10802,13 @@
         "defaultLight": "800ms",
         "defaultDark": "800ms"
       },
+      {
+        "name": "--motion-duration-1500",
+        "tier": "primitive",
+        "description": "Primitive motion duration: 1500ms",
+        "defaultLight": "1500ms",
+        "defaultDark": "1500ms"
+      },
       {
         "name": "--motion-easing-linear",
         "tier": "primitive",
@@ -11585,7 +11812,7 @@
         "tier": "adaptive",
         "description": "Adaptive surface: success-subtle",
         "defaultLight": "#f0fdf4",
-        "defaultDark": "#14532d"
+        "defaultDark": "var(--color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card)))"
       },
       {
         "name": "--surface-success-default",
@@ -11599,7 +11826,7 @@
         "tier": "adaptive",
         "description": "Adaptive surface: warning-subtle",
         "defaultLight": "#fffbeb",
-        "defaultDark": "#78350f"
+        "defaultDark": "var(--color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card)))"
       },
       {
         "name": "--surface-warning-default",
@@ -11613,7 +11840,7 @@
         "tier": "adaptive",
         "description": "Adaptive surface: error-subtle",
         "defaultLight": "#fef2f2",
-        "defaultDark": "#7f1d1d"
+        "defaultDark": "var(--color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card)))"
       },
       {
         "name": "--surface-error-default",
@@ -11627,7 +11854,7 @@
         "tier": "adaptive",
         "description": "Adaptive surface: info-subtle",
         "defaultLight": "#f0f9ff",
-        "defaultDark": "#0c4a6e"
+        "defaultDark": "var(--color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card)))"
       },
       {
         "name": "--surface-info-default",
@@ -11953,7 +12180,7 @@
       }
     ],
     "summary": {
-      "total": 311
+      "total": 312
     }
   }
 }