@cloudflare/kumo 2.4.1 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @cloudflare/kumo
 
+## 2.5.1
+
+### Patch Changes
+
+- b06e35b: Allow unprefixed Dialog max-width classes to override the default viewport cap at desktop breakpoints.
+
+## 2.5.0
+
+### Minor Changes
+
+- 7401701: Sidebar: mobile rewrite, smooth collapse transitions, and new props
+
+  **New features:**
+  - `mobileBreakpoint` prop on Provider — configurable viewport width for mobile detection
+  - `contentClassName` prop on Sidebar root — pass-through class for the inner content container
+  - Controlled mobile state — `open` prop now controls the mobile sidebar too, not just desktop
+
+  **Fixes:**
+  - Replaced Base UI Dialog mobile sidebar with a plain `<nav>` + backdrop for simpler, more predictable transitions
+  - Collapsible sections now animate closed smoothly when the sidebar collapses instead of snapping shut
+  - Removed `hidden` class from `Sidebar.MenuSub` so sub-menus participate in collapse animations
+  - Removed `inertValue` React-version helper — `SidebarSlidingView` now sets `inert` imperatively for React 18 compatibility
+  - Restored `inert` on closed `SidebarCollapsibleContent` while removing its `data-open` attribute
+
+  **Styling:**
+  - `bg-kumo-tint` → `bg-(--sidebar-active-bg)` CSS variable for active/hover/focus backgrounds
+  - Icon opacity `0.5` → `0.4`; chevron gains hover opacity transition
+  - Header gains `shrink-0` and animated padding on collapse
+  - Content scroll area gains animated `gap` transition and `tabIndex={-1}` on viewport
+  - Sliding views container gains `max-w-(--sidebar-width)` to prevent overflow
+  - Mobile sidebar uses `--sidebar-animation-duration` CSS variable for slide transition
+
+### Patch Changes
+
+- f957dbc: Add React 18 and React 19 compatibility checks for Kumo tests.
+- ac46184: Fix `Chart` (and `SankeyChart`) rendering in dark mode. The chart canvas
+  now stays transparent so the surrounding `bg-kumo-*` surface shows through
+  symmetrically in both modes, and ECharts' built-in `"dark"` theme is
+  applied when `isDarkMode` is true so the tooltip card, axes, splitLines,
+  and legend text are themed correctly.
+- e25a3d6: fix(sidebar): add text truncation with ellipsis to Sidebar.MenuButton content
+
+  Previously, `Sidebar.MenuButton` used `overflow-hidden` which clipped long text without showing an ellipsis. Now uses `truncate` to match `Sidebar.MenuSubButton`'s behavior.
+
+- d3feec0: Fix segmented `Tabs` scroll fade, scroll-into-view, and ring styling:
+  - Rewrite CSS scroll-fade masking to use `@property`-animated custom properties, fixing proportional fade rendering across browsers.
+  - Scroll the selected tab into view on click so it stays visible in overflowing tab lists.
+  - Move `ring ring-kumo-hairline/70` from the inner list to the root container so the segmented variant ring wraps the entire component correctly.
+
+- f831482: Fix Flow connector rendering in Firefox by emitting valid SVG path data without array commas and setting visible overflow on the SVG element attribute.
+- 4a8b992: Restore React 18-compatible Sidebar inert attribute handling while keeping the full React compatibility CI suite.
+
 ## 2.4.1
 
 ### Patch Changes

package/ai/component-registry.json

@@ -2816,9 +2816,10 @@
       "examples": [
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open capped dialog</Button>} />\n      <Dialog className=\"max-w-lg p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Max width override\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This dialog uses <code>className=\"max-w-lg\"</code> and should stay\n          capped around 512px on desktop.\n        </Dialog.Description>\n        <div className=\"mt-4 truncate rounded-md border border-kumo-line bg-kumo-recessed p-3 font-mono text-sm\">\n          abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root role=\"alertdialog\">\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Account\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" weight=\"fill\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Account?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. All your data will be permanently\n          removed from our servers. Are you sure you want to proceed?\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete Account\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
-        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          placeholder=\"Select region...\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
       ],
@@ -5049,6 +5050,11 @@
           "optional": true,
           "description": "Duration of sidebar expand/collapse animation in milliseconds."
         },
+        "mobileBreakpoint": {
+          "type": "number",
+          "optional": true,
+          "description": "Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail."
+        },
         "children": {
           "type": "ReactNode",
           "optional": true,
@@ -5066,16 +5072,16 @@
         "<DemoContainer>\n      <Sidebar.Provider contained\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"min-h-0! h-full\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p>Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
         "<DemoContainer>\n      <Sidebar.Provider contained defaultOpen side=\"right\" className=\"min-h-0! h-full\">\n        <DemoMain />\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  Properties\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Metrics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>Alerts</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>",
         "<DemoContainer>\n      <Sidebar.Provider contained defaultOpen peekable className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <PeekStateIndicator />\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<div className=\"relative h-[420px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base\">\n      <Sidebar.Provider contained defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  Security\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Zero Trust\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GearIcon}>\n                  Settings\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible autoScrollOnOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Workers\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>Overview</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>Deployments</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>Observability</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>Settings</Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={CubeIcon}>\n                  Containers\n                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <p>Open Workers near the bottom of the list</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>",
         "<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <button\n              type=\"button\"\n              onClick={() =>\n                setSurface((s) => (s === \"account\" ? \"zone\" : \"account\"))\n              }\n              className=\"flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-kumo-default hover:bg-kumo-tint transition-colors\"\n            >\n              <ArrowsLeftRightIcon className=\"size-4 shrink-0 text-kumo-brand\" />\n              <span className=\"flex-1 text-left font-semibold text-kumo-strong\">\n                {surface === \"account\" ? \"Account Nav\" : \"Zone Nav\"}\n              </span>\n            </button>\n          </Sidebar.Header>\n\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"zone\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Account</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      Home\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={UserIcon}>\n                      Members\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={GearIcon}>\n                      Settings\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"zone\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Zone</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      Overview\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Caching\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n        </Sidebar>\n        <DemoMain>\n          <div className=\"flex flex-col items-center gap-2\">\n            <p className=\"font-medium text-kumo-default\">\n              Active: {surface === \"account\" ? \"Account\" : \"Zone\"} surface\n            </p>\n            <p>\n              Click the header button to slide between views\n            </p>\n          </div>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider contained defaultOpen peekable className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"domain\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={MagnifyingGlassIcon}\n                      tooltip=\"Search\"\n                      className=\"ring ring-kumo-line group-data-[state=collapsed]/sidebar:ring-transparent\"\n                    >\n                      Quick search&hellip;\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      Home\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics & Logs\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton\n                      icon={GlobeIcon}\n                      onClick={() => setSurface(\"domain\")}\n                    >\n                      Domains\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuItem>\n                      <Sidebar.Collapsible defaultOpen>\n                        <Sidebar.CollapsibleTrigger\n                          render={\n                            <Sidebar.MenuButton icon={CodeIcon}>\n                              Compute\n                              <Sidebar.MenuChevron />\n                            </Sidebar.MenuButton>\n                          }\n                        />\n                        <Sidebar.CollapsibleContent>\n                          <Sidebar.MenuSub>\n                            <Sidebar.MenuSubItem>\n                              <Sidebar.Collapsible>\n                                <Sidebar.CollapsibleTrigger\n                                  render={\n                                    <Sidebar.MenuSubButton>\n                                      Workers & Pages\n                                      <Sidebar.MenuChevron />\n                                    </Sidebar.MenuSubButton>\n                                  }\n                                />\n                                <Sidebar.CollapsibleContent>\n                                  <Sidebar.MenuSub>\n                                    <Sidebar.MenuSubButton>\n                                      Overview\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Workers\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Pages\n                                    </Sidebar.MenuSubButton>\n                                  </Sidebar.MenuSub>\n                                </Sidebar.CollapsibleContent>\n                              </Sidebar.Collapsible>\n                            </Sidebar.MenuSubItem>\n                            <Sidebar.MenuSubButton>\n                              Durable Objects\n                            </Sidebar.MenuSubButton>\n                            <Sidebar.MenuSubButton>\n                              Containers\n                              <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                            </Sidebar.MenuSubButton>\n                          </Sidebar.MenuSub>\n                        </Sidebar.CollapsibleContent>\n                      </Sidebar.Collapsible>\n                    </Sidebar.MenuItem>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Storage\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      Zero Trust\n                      <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"domain\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={ArrowLeftIcon}\n                      onClick={() => setSurface(\"account\")}\n                    >\n                      Back\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>example.com</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      Overview\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Caching\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>"
+        "<DemoContainer>\n      <Sidebar.Provider contained defaultOpen peekable className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"domain\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={MagnifyingGlassIcon}\n                      tooltip=\"Search\"\n                      className=\"ring ring-kumo-line group-data-[state=collapsed]/sidebar:ring-transparent mb-3 group-data-[state=collapsed]/sidebar:mb-0 transition-[margin] duration-(--sidebar-animation-duration)\"\n                    >\n                      Quick search&hellip;\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      Home\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics & Logs\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton\n                      icon={GlobeIcon}\n                      onClick={() => setSurface(\"domain\")}\n                    >\n                      Domains\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuItem>\n                      <Sidebar.Collapsible defaultOpen>\n                        <Sidebar.CollapsibleTrigger\n                          render={\n                            <Sidebar.MenuButton icon={CodeIcon}>\n                              Compute\n                              <Sidebar.MenuChevron />\n                            </Sidebar.MenuButton>\n                          }\n                        />\n                        <Sidebar.CollapsibleContent>\n                          <Sidebar.MenuSub>\n                            <Sidebar.MenuSubItem>\n                              <Sidebar.Collapsible>\n                                <Sidebar.CollapsibleTrigger\n                                  render={\n                                    <Sidebar.MenuSubButton>\n                                      Workers & Pages\n                                      <Sidebar.MenuChevron />\n                                    </Sidebar.MenuSubButton>\n                                  }\n                                />\n                                <Sidebar.CollapsibleContent>\n                                  <Sidebar.MenuSub>\n                                    <Sidebar.MenuSubButton>\n                                      Overview\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Workers\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Pages\n                                    </Sidebar.MenuSubButton>\n                                  </Sidebar.MenuSub>\n                                </Sidebar.CollapsibleContent>\n                              </Sidebar.Collapsible>\n                            </Sidebar.MenuSubItem>\n                            <Sidebar.MenuSubButton>\n                              Durable Objects\n                            </Sidebar.MenuSubButton>\n                            <Sidebar.MenuSubButton>\n                              Containers\n                              <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                            </Sidebar.MenuSubButton>\n                          </Sidebar.MenuSub>\n                        </Sidebar.CollapsibleContent>\n                      </Sidebar.Collapsible>\n                    </Sidebar.MenuItem>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Storage\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      Zero Trust\n                      <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"domain\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={ArrowLeftIcon}\n                      onClick={() => setSurface(\"account\")}\n                    >\n                      Back\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>example.com</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      Overview\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Caching\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<div className=\"relative h-[540px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base\">\n      <Sidebar.Provider contained mobileBreakpoint={9999} className=\"h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={CodeIcon}>\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <MobileToggleButton />\n          <p>Click the button to open the mobile sidebar</p>\n          <p className=\"text-sm text-kumo-subtle\">\n            Press Escape or click the backdrop to close\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>"
       ],
       "colors": [
-        "bg-kumo-base",
         "bg-kumo-brand",
         "bg-kumo-hairline",
         "bg-kumo-line",
         "bg-kumo-recessed",
-        "bg-kumo-tint",
         "border-kumo-line",
         "ring-kumo-brand",
         "text-kumo-default",
@@ -5135,6 +5141,10 @@
               "type": "number",
               "optional": true
             },
+            "mobileBreakpoint": {
+              "type": "number",
+              "optional": true
+            },
             "children": {
               "type": "ReactNode",
               "required": true
@@ -5292,6 +5302,10 @@
             "open": {
               "type": "boolean",
               "optional": true
+            },
+            "autoScrollOnOpen": {
+              "type": "boolean",
+              "optional": true
             }
           }
         },
@@ -5306,6 +5320,10 @@
             "open": {
               "type": "boolean",
               "optional": true
+            },
+            "autoScrollOnOpen": {
+              "type": "boolean",
+              "optional": true
             }
           }
         },
@@ -5320,6 +5338,10 @@
             "open": {
               "type": "boolean",
               "optional": true
+            },
+            "autoScrollOnOpen": {
+              "type": "boolean",
+              "optional": true
             }
           }
         },
@@ -5334,6 +5356,10 @@
             "open": {
               "type": "boolean",
               "optional": true
+            },
+            "autoScrollOnOpen": {
+              "type": "boolean",
+              "optional": true
             }
           }
         },
@@ -5358,6 +5384,10 @@
             "open": {
               "type": "boolean",
               "optional": true
+            },
+            "autoScrollOnOpen": {
+              "type": "boolean",
+              "optional": true
             }
           }
         },

package/ai/component-registry.md

@@ -2800,6 +2800,38 @@ Close sub-component
     </Dialog.Root>
 ```
 
+```tsx
+<Dialog.Root>
+      <Dialog.Trigger render={(p) => <Button {...p}>Open capped dialog</Button>} />
+      <Dialog className="max-w-lg p-8">
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <Dialog.Title className="text-2xl font-semibold">
+            Max width override
+          </Dialog.Title>
+          <Dialog.Close
+            aria-label="Close"
+            render={(props) => (
+              <Button
+                {...props}
+                variant="secondary"
+                shape="square"
+                icon={<X />}
+                aria-label="Close"
+              />
+            )}
+          />
+        </div>
+        <Dialog.Description className="text-kumo-subtle">
+          This dialog uses <code>className="max-w-lg"</code> and should stay
+          capped around 512px on desktop.
+        </Dialog.Description>
+        <div className="mt-4 truncate rounded-md border border-kumo-line bg-kumo-recessed p-3 font-mono text-sm">
+          abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
+        </div>
+      </Dialog>
+    </Dialog.Root>
+```
+
 ```tsx
 <Dialog.Root disablePointerDismissal>
       <Dialog.Trigger
@@ -2910,8 +2942,9 @@ Close sub-component
         </Dialog.Description>
         <Select
           className="w-full"
+          placeholder="Select region..."
           renderValue={(v) =>
-            regions.find((r) => r.value === v)?.label ?? "Select region..."
+            regions.find((r) => r.value === v)?.label
           }
         >
           {regions.map((region) => (
@@ -6157,6 +6190,8 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
   When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `"peeking"` during the peek. Moving away collapses it back.
 - `animationDuration`: number
   Duration of sidebar expand/collapse animation in milliseconds.
+- `mobileBreakpoint`: number
+  Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail.
 - `children`: ReactNode
   Content — typically `<Sidebar>` + main content.
 - `className`: string
@@ -6164,7 +6199,7 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-hairline`, `bg-kumo-line`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-brand`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-brand`, `bg-kumo-hairline`, `bg-kumo-line`, `bg-kumo-recessed`, `border-kumo-line`, `ring-kumo-brand`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -6190,6 +6225,7 @@ Props:
 - `contained`: boolean
 - `peekable`: boolean
 - `animationDuration`: number
+- `mobileBreakpoint`: number
 - `children`: ReactNode (required)
 - `className`: string
 
@@ -6288,6 +6324,7 @@ Separator sub-component
 Props:
 - `defaultOpen`: boolean
 - `open`: boolean
+- `autoScrollOnOpen`: boolean
 
 #### Sidebar.Trigger
 
@@ -6296,6 +6333,7 @@ Trigger sub-component
 Props:
 - `defaultOpen`: boolean
 - `open`: boolean
+- `autoScrollOnOpen`: boolean
 
 #### Sidebar.Rail
 
@@ -6304,6 +6342,7 @@ Rail sub-component
 Props:
 - `defaultOpen`: boolean
 - `open`: boolean
+- `autoScrollOnOpen`: boolean
 
 #### Sidebar.ResizeHandle
 
@@ -6312,6 +6351,7 @@ ResizeHandle sub-component
 Props:
 - `defaultOpen`: boolean
 - `open`: boolean
+- `autoScrollOnOpen`: boolean
 
 #### Sidebar.MenuChevron
 
@@ -6327,6 +6367,7 @@ Collapsible sub-component
 Props:
 - `defaultOpen`: boolean
 - `open`: boolean
+- `autoScrollOnOpen`: boolean
 
 #### Sidebar.CollapsibleTrigger
 
@@ -6544,6 +6585,88 @@ Props:
     </DemoContainer>
 ```
 
+```tsx
+<div className="relative h-[420px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base">
+      <Sidebar.Provider contained defaultOpen className="min-h-0! h-full">
+        <Sidebar>
+          <Sidebar.Header>
+            <BrandLogo />
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+              <Sidebar.Menu>
+                <Sidebar.MenuButton icon={HouseIcon} active>
+                  Home
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={ChartBarIcon}>
+                  Analytics
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={GlobeIcon}>
+                  Domains
+                </Sidebar.MenuButton>
+              </Sidebar.Menu>
+            </Sidebar.Group>
+
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
+              <Sidebar.Menu>
+                <Sidebar.MenuButton icon={DatabaseIcon}>
+                  Storage
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={ShieldCheckIcon}>
+                  Security
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={LockIcon}>
+                  Zero Trust
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={GearIcon}>
+                  Settings
+                </Sidebar.MenuButton>
+              </Sidebar.Menu>
+            </Sidebar.Group>
+
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+              <Sidebar.Menu>
+                <Sidebar.MenuItem>
+                  <Sidebar.Collapsible autoScrollOnOpen>
+                    <Sidebar.CollapsibleTrigger
+                      render={
+                        <Sidebar.MenuButton icon={CodeIcon}>
+                          Workers
+                          <Sidebar.MenuChevron />
+                        </Sidebar.MenuButton>
+                      }
+                    />
+                    <Sidebar.CollapsibleContent>
+                      <Sidebar.MenuSub>
+                        <Sidebar.MenuSubButton>Overview</Sidebar.MenuSubButton>
+                        <Sidebar.MenuSubButton>Deployments</Sidebar.MenuSubButton>
+                        <Sidebar.MenuSubButton>Observability</Sidebar.MenuSubButton>
+                        <Sidebar.MenuSubButton>Settings</Sidebar.MenuSubButton>
+                      </Sidebar.MenuSub>
+                    </Sidebar.CollapsibleContent>
+                  </Sidebar.Collapsible>
+                </Sidebar.MenuItem>
+                <Sidebar.MenuButton icon={CubeIcon}>
+                  Containers
+                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+                </Sidebar.MenuButton>
+              </Sidebar.Menu>
+            </Sidebar.Group>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <Sidebar.Trigger />
+          </Sidebar.Footer>
+        </Sidebar>
+        <DemoMain>
+          <p>Open Workers near the bottom of the list</p>
+        </DemoMain>
+      </Sidebar.Provider>
+    </div>
+```
+
 ```tsx
 <DemoContainer>
       <Sidebar.Provider contained defaultOpen className="min-h-0! h-full">
@@ -6644,7 +6767,7 @@ Props:
                     <Sidebar.MenuButton
                       icon={MagnifyingGlassIcon}
                       tooltip="Search"
-                      className="ring ring-kumo-line group-data-[state=collapsed]/sidebar:ring-transparent"
+                      className="ring ring-kumo-line group-data-[state=collapsed]/sidebar:ring-transparent mb-3 group-data-[state=collapsed]/sidebar:mb-0 transition-[margin] duration-(--sidebar-animation-duration)"
                     >
                       Quick search&hellip;
                     </Sidebar.MenuButton>
@@ -6784,6 +6907,56 @@ Props:
     </DemoContainer>
 ```
 
+```tsx
+<div className="relative h-[540px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base">
+      <Sidebar.Provider contained mobileBreakpoint={9999} className="h-full">
+        <Sidebar>
+          <Sidebar.Header>
+            <BrandLogo />
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+              <Sidebar.Menu>
+                <Sidebar.MenuButton icon={HouseIcon} active>
+                  Home
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={ChartBarIcon}>
+                  Analytics
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={GlobeIcon}>
+                  Domains
+                </Sidebar.MenuButton>
+              </Sidebar.Menu>
+            </Sidebar.Group>
+
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+              <Sidebar.Menu>
+                <Sidebar.MenuButton icon={CodeIcon}>
+                  Compute
+                </Sidebar.MenuButton>
+                <Sidebar.MenuButton icon={DatabaseIcon}>
+                  Storage
+                </Sidebar.MenuButton>
+              </Sidebar.Menu>
+            </Sidebar.Group>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <Sidebar.Trigger />
+          </Sidebar.Footer>
+        </Sidebar>
+        <DemoMain>
+          <MobileToggleButton />
+          <p>Click the button to open the mobile sidebar</p>
+          <p className="text-sm text-kumo-subtle">
+            Press Escape or click the backdrop to close
+          </p>
+        </DemoMain>
+      </Sidebar.Provider>
+    </div>
+```
+
 
 ---
 

package/ai/schemas.ts

@@ -714,6 +714,7 @@ export const SidebarPropsSchema = z.object({
   contained: z.boolean().optional(), // When true, the collapsed sidebar uses absolute positioning instead of fixed, keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars.
   peekable: z.boolean().optional(), // When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `"peeking"` during the peek. Moving away collapses it back.
   animationDuration: z.number().optional(), // Duration of sidebar expand/collapse animation in milliseconds.
+  mobileBreakpoint: z.number().optional(), // Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content — typically `<Sidebar>` + main content.
   className: z.string().optional(), // Additional CSS classes for the wrapper div.
 });

package/dist/.build-complete

@@ -1 +1 @@
-1780084158364
+1780927666222

package/dist/ai/schemas.d.ts

@@ -1017,6 +1017,7 @@ export declare const SidebarPropsSchema: z.ZodObject<{
     contained: z.ZodOptional<z.ZodBoolean>;
     peekable: z.ZodOptional<z.ZodBoolean>;
     animationDuration: z.ZodOptional<z.ZodNumber>;
+    mobileBreakpoint: z.ZodOptional<z.ZodNumber>;
     children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
         path: z.ZodString;
     }, z.core.$strip>]>]>>;
@@ -2163,6 +2164,7 @@ export declare const ComponentPropsSchemas: {
         contained: z.ZodOptional<z.ZodBoolean>;
         peekable: z.ZodOptional<z.ZodBoolean>;
         animationDuration: z.ZodOptional<z.ZodNumber>;
+        mobileBreakpoint: z.ZodOptional<z.ZodNumber>;
         children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
             path: z.ZodString;
         }, z.core.$strip>]>]>>;

package/dist/ai/schemas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schemas.d.ts","sourceRoot":"","sources":["../../ai/schemas.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACzC;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAM7D;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;mBAM7B,CAAC;AAEH,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAM7D;;;GAGG;AAIH,MAAM,MAAM,eAAe,GACvB;IAAE,GAAG,EAAE,eAAe,EAAE,CAAA;CAAE,GAC1B;IAAE,EAAE,EAAE,eAAe,EAAE,CAAA;CAAE,GACzB;IAAE,GAAG,EAAE,eAAe,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACrC;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACrC;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,CAAC;AAkB1C,eAAO,MAAM,yBAAyB;;;;;;;4GAKpC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAM5E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;iBAM9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;iBAMvB,CAAC;AAEH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;iBAWlC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAK3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;iBAW5B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;iBAIjC,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAe5B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;iBAW9B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;iBAOnC,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+PpC,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;iBAK1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;iBAGjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAe9B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;iBAIpC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;iBAGhC,CAAC;AAEH,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;iBAOrC,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;iBAK5B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;iBAElC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;iBAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;iBAS3B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;iBAQ3B,CAAC;AAEH,eAAO,MAAM,oBAAoB,gCAAe,CAAC;AAEjD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;iBAahC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;iBAO3B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;iBAO/B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiB1B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;iBAG5B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;iBAK7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;iBAS3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;iBAUhC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;iBAE7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;iBAY3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmB5B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwBpC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAe7B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;iBAQ7B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkB5B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;iBAM3B,CAAC;AAEH,eAAO,MAAM,0BAA0B;;;;;;;;iBAMrC,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;iBAW1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAO1B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;iBAI5B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;iBAK7B,CAAC;AAMH;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,gBAAgB,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,gBAAgB,GAAG,YAAY,GAAG,iBAAiB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5jB,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2ClC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAQ9B,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAGvB,CAAC;AAEH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,CAMjF;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAErE;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,+fAAggB,CAAC"}
+{"version":3,"file":"schemas.d.ts","sourceRoot":"","sources":["../../ai/schemas.ts"],"names":[],"mappings":"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"}