@duro-app/cli 4.4.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/cli",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "type": "module",
   "license": "MIT",
   "description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.0.0",
-    "@duro-app/ui": "^4.4.0"
+    "@duro-app/ui": "^4.5.0"
   },
   "peerDependenciesMeta": {
     "@duro-app/ui": {
@@ -60,9 +60,9 @@
     "@types/node": "^24.0.0",
     "ts-morph": "^26.0.0",
     "typescript": "^5.7.0",
-    "@duro-app/eslint-plugin": "^4.4.0",
-    "@duro-app/tokens": "^4.4.0",
-    "@duro-app/ui": "^4.4.0"
+    "@duro-app/eslint-plugin": "^4.5.0",
+    "@duro-app/tokens": "^4.5.0",
+    "@duro-app/ui": "^4.5.0"
   },
   "scripts": {
     "registry": "node scripts/build-registry.mjs",

package/registry.json

@@ -1059,6 +1059,11 @@
         "description": "Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required.",
         "example": "<Combobox.Root name=\"country\" defaultValue=\"us\" initialLabels={{us: 'United States'}}>\n  <Combobox.Input placeholder=\"Search countries…\" />\n  <Combobox.Popup>\n    <Combobox.Item value=\"us\">United States</Combobox.Item>\n    <Combobox.Item value=\"gb\">United Kingdom</Combobox.Item>\n    <Combobox.Item value=\"fr\">France</Combobox.Item>\n    <Combobox.Item value=\"de\">Germany</Combobox.Item>\n    <Combobox.Empty>No countries found</Combobox.Empty>\n  </Combobox.Popup>\n</Combobox.Root>",
         "relatedTo": [
+          {
+            "component": "Popover",
+            "kind": "composition",
+            "relationship": "Inside Popover.Popup a Combobox keeps the popover open while you choose; Escape closes only the list"
+          },
           {
             "component": "Select",
             "kind": "contrast",
@@ -1953,7 +1958,7 @@
             "Portal"
           ]
         },
-        "description": "Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Use for secondary workflows, settings panels, or mobile-friendly detail views.",
+        "description": "Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). Use for secondary workflows, settings panels, or mobile-friendly detail views.",
         "example": "<Drawer.Root anchor=\"right\" open={open} onOpenChange={setOpen}>\n  <Drawer.Trigger>\n    <Button>Open drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Portal size=\"md\">\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Close />\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Text>Drawer content goes here.</Text>\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Button variant=\"secondary\" onClick={() => setOpen(false)}>Done</Button>\n    </Drawer.Footer>\n  </Drawer.Portal>\n</Drawer.Root>",
         "relatedTo": [
           {
@@ -3767,6 +3772,11 @@
             "kind": "contrast",
             "relationship": "Drawer is the modal edge panel for phone width; Popover is anchored and non-modal"
           },
+          {
+            "component": "Select",
+            "kind": "composition",
+            "relationship": "A Select or Combobox inside Popover.Popup keeps the popover open while you choose; a Select backdrop press closes only its list"
+          },
           {
             "component": "Field",
             "kind": "composition",
@@ -3782,7 +3792,8 @@
         ],
         "whenToUse": [
           "A small form or controls tied to one element that stay open while you work in them",
-          "Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor"
+          "Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor",
+          "Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover"
         ]
       },
       "name": "Popover",
@@ -4011,7 +4022,7 @@
             "Thumb"
           ]
         },
-        "description": "Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required.",
+        "description": "Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.",
         "example": "<ScrollArea.Root>\n  <ScrollArea.Viewport maxHeight={300}>\n    <ScrollArea.Content>\n      {/* Long content here */}\n    </ScrollArea.Content>\n  </ScrollArea.Viewport>\n  <ScrollArea.Scrollbar orientation=\"vertical\">\n    <ScrollArea.Thumb orientation=\"vertical\" />\n  </ScrollArea.Scrollbar>\n</ScrollArea.Root>",
         "whenNotToUse": [
           "Simple page-level scrolling — browser scroll is fine",
@@ -4087,6 +4098,19 @@
               "name": "maxHeight",
               "required": false,
               "type": "number | string"
+            },
+            {
+              "description": "Extra styles for the viewport (e.g. a pointer-aware max height).",
+              "name": "style",
+              "required": false,
+              "type": "ComponentProps<typeof html.div>['style']"
+            },
+            {
+              "default": "false",
+              "description": "A roving-focus group owns the keyboard: drop the viewport's own tab stop and region role.",
+              "name": "rovingOwner",
+              "required": false,
+              "type": "boolean"
             }
           ],
           "sourcePath": "packages/ui/src/components/ScrollArea/ScrollArea.tsx"
@@ -4115,6 +4139,11 @@
         "description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it).",
         "example": "<Select.Root name=\"role\" defaultValue=\"viewer\">\n  <Select.Trigger>\n    <Select.Value placeholder=\"Select role\" />\n    <Select.Icon />\n  </Select.Trigger>\n  <Select.Popup>\n    <Select.Item value=\"admin\">Admin</Select.Item>\n    <Select.Item value=\"editor\">Editor</Select.Item>\n    <Select.Item value=\"viewer\">Viewer</Select.Item>\n  </Select.Popup>\n</Select.Root>",
         "relatedTo": [
+          {
+            "component": "Popover",
+            "kind": "composition",
+            "relationship": "Inside Popover.Popup a Select keeps the popover open while you choose; its backdrop press and Escape close only the list"
+          },
           {
             "component": "Menu",
             "kind": "contrast",
@@ -5829,7 +5858,7 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection.",
+        "description": "Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection. Under a coarse pointer (touch) every Toggle is at least 44×44px; in a wrapping ToggleGroup each keeps its own border and a fixed row height.",
         "example": "// Standalone\n<Toggle pressed={isBold} onPressedChange={setIsBold} aria-label=\"Bold\">\n  <Icon name=\"key\" size=\"sm\" />\n</Toggle>\n\n// In a group\n<ToggleGroup value={['grid']} onValueChange={setView} multiple={false}>\n  <Toggle value=\"list\">List</Toggle>\n  <Toggle value=\"grid\">Grid</Toggle>\n</ToggleGroup>",
         "relatedTo": [
           {
@@ -5921,7 +5950,7 @@
       "kind": "component",
       "meta": {
         "description": "Container for Toggle buttons enabling single or multi selection. Provides context to child Toggles.",
-        "example": "<ToggleGroup\n  value={selected}\n  onValueChange={setSelected}\n  multiple={false}\n  orientation=\"horizontal\"\n  size=\"default\"\n>\n  <Toggle value=\"list\">List view</Toggle>\n  <Toggle value=\"grid\">Grid view</Toggle>\n  <Toggle value=\"board\">Board view</Toggle>\n</ToggleGroup>",
+        "example": "<ToggleGroup\n  value={selected}\n  onValueChange={setSelected}\n  multiple={false}\n  orientation=\"horizontal\"\n  size=\"default\"\n>\n  <Toggle value=\"list\">List view</Toggle>\n  <Toggle value=\"grid\">Grid view</Toggle>\n  <Toggle value=\"board\">Board view</Toggle>\n</ToggleGroup>\n\n// Icon choices: wraps onto rows, scrolls past three, one tab stop\n<ToggleGroup wrap maxRows={3} size=\"small\" value={[icon]} onValueChange={(v) => v[0] && setIcon(v[0])} aria-label=\"Icon\">\n  {names.map((name) => (\n    <Toggle key={name} value={name} aria-label={name}>\n      <Icon name={name} size=\"sm\" />\n    </Toggle>\n  ))}\n</ToggleGroup>",
         "relatedTo": [
           {
             "component": "Toggle",
@@ -5936,12 +5965,13 @@
         ],
         "whenNotToUse": [
           "Dropdown selection — use Select",
-          "Many options (5+) — use Select for space efficiency",
+          "Many text options (5+) — use Select for space efficiency; does not apply to icon-only choices, which keep options visible and open no layer",
           "Form checkboxes — use Checkbox group in Fieldset"
         ],
         "whenToUse": [
           "Visible option set where user picks one or more (view mode, filter categories)",
-          "Segmented control pattern"
+          "Segmented control pattern",
+          "A visible grid of icon choices: wrap + maxRows (rows scroll past maxRows, one tab stop with arrow keys, 44px touch targets)"
         ]
       },
       "name": "ToggleGroup",
@@ -5997,6 +6027,19 @@
             "small"
           ]
         },
+        {
+          "default": "false",
+          "description": "Items wrap onto rows, each with its own border (default false). Enables roving focus: one tab stop, arrow keys move between items.",
+          "name": "wrap",
+          "required": false,
+          "type": "boolean"
+        },
+        {
+          "description": "Caps a wrapping group at this many rows (plus half a row, hinting more) and scrolls the rest. Only with `wrap`; ignored without it.",
+          "name": "maxRows",
+          "required": false,
+          "type": "number"
+        },
         {
           "description": "Accessible name when the group is not inside a Field.Root (inside one, the Field.Label names it).",
           "name": "aria-label",