@cloudflare/kumo 2.3.0 → 2.4.0

package/ai/component-registry.md

@@ -115,19 +115,17 @@ Collection sub-component (wraps AutocompleteBase)
 ```tsx
 <div className="w-80">
       <Autocomplete
-        items={countries}
-        label="Country"
-        description="Start typing to filter countries"
-        filter={(item: Country, query: string) =>
-          item.label.toLowerCase().includes(query.toLowerCase())
-        }
+        items={languages}
+        label="Language"
+        description="Start typing to filter languages"
+        filter={filter}
       >
-        <Autocomplete.InputGroup placeholder="Search countries…" />
+        <Autocomplete.InputGroup placeholder="Search a language…" />
         <Autocomplete.Content>
           <Autocomplete.List>
-            {(item: Country) => (
-              <Autocomplete.Item key={item.code} value={item}>
-                {item.label}
+            {(item: Language) => (
+              <Autocomplete.Item key={item.value} value={item}>
+                {item.emoji} {item.label}
               </Autocomplete.Item>
             )}
           </Autocomplete.List>
@@ -142,9 +140,7 @@ Collection sub-component (wraps AutocompleteBase)
         items={countries}
         label="Country"
         error={{ message: "Please enter a valid country", match: true }}
-        filter={(item: Country, query: string) =>
-          item.label.toLowerCase().includes(query.toLowerCase())
-        }
+        filter={filter}
       >
         <Autocomplete.InputGroup placeholder="Search countries…" />
         <Autocomplete.Content>
@@ -304,7 +300,7 @@ Small status label for categorizing or highlighting content.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-badge-blue`, `bg-kumo-badge-green`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-purple`, `bg-kumo-badge-red`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-subtle`, `bg-kumo-danger-tint`, `bg-kumo-fill`, `bg-kumo-info-tint`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-brand`, `border-kumo-fill`, `ring-kumo-hairline`, `text-kumo-badge-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-link`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-badge-blue`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-purple`, `bg-kumo-badge-red`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-subtle`, `bg-kumo-danger-tint`, `bg-kumo-fill`, `bg-kumo-info-tint`, `bg-kumo-success`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-brand`, `border-kumo-fill`, `ring-kumo-hairline`, `text-kumo-badge-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-link`, `text-kumo-success`, `text-kumo-warning`
 
 **Examples:**
 
@@ -326,7 +322,6 @@ Small status label for categorizing or highlighting content.
       <Badge variant="neutral">Neutral</Badge>
       <Badge variant="red">Red</Badge>
       <Badge variant="orange">Orange</Badge>
-      <Badge variant="green">Green</Badge>
       <Badge variant="teal">Teal</Badge>
       <Badge variant="blue">Blue</Badge>
       <Badge variant="purple">Purple</Badge>
@@ -364,6 +359,10 @@ Full-width message bar for informational, warning, or error notices. Supports st
 
 **Props:**
 
+- `className`: string
+  Additional CSS classes merged via `cn()`.
+- `id`: string
+- `lang`: string
 - `icon`: ReactNode
   Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`).
 - `title`: string
@@ -378,12 +377,11 @@ Full-width message bar for informational, warning, or error notices. Supports st
   - `"default"`: Informational banner for general messages
   - `"alert"`: Warning banner for cautionary messages
   - `"error"`: Error banner for critical issues
-- `className`: string
-  Additional CSS classes merged via `cn()`.
+  - `"secondary"`: Neutral banner for secondary messages
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-danger-tint`, `bg-kumo-info-tint`, `bg-kumo-warning-tint`, `border-kumo-danger`, `border-kumo-info`, `border-kumo-warning`, `text-kumo-danger`, `text-kumo-info`, `text-kumo-warning`
+`bg-kumo-banner-info`, `bg-kumo-banner-warning`, `bg-kumo-contrast`, `bg-kumo-danger-tint`, `text-kumo-danger`, `text-kumo-info`, `text-kumo-subtle`, `text-kumo-warning`
 
 **Examples:**
 
@@ -406,6 +404,12 @@ Full-width message bar for informational, warning, or error notices. Supports st
         title="Save failed"
         description="We couldn't save your changes. Please try again."
       />
+      <Banner
+        icon={<Info weight="fill" />}
+        variant="secondary"
+        title="Maintenance scheduled"
+        description="This service will be unavailable for 10 minutes."
+      />
     </div>
 ```
 
@@ -6114,7 +6118,7 @@ Password/secret input that masks its value by default and reveals on click. Incl
 
 ### Sidebar
 
-Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.  Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.
+Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.
 
 **Type:** component
 
@@ -6147,6 +6151,12 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
   Minimum width in pixels when resizing.
 - `maxWidth`: number
   Maximum width in pixels when resizing.
+- `contained`: boolean
+  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`: boolean
+  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.
 - `children`: ReactNode
   Content — typically `<Sidebar>` + main content.
 - `className`: string
@@ -6154,7 +6164,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-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-brand`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-subtle`
+`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`
 
 **Styling:**
 
@@ -6177,6 +6187,9 @@ Props:
 - `defaultWidth`: number
 - `minWidth`: number
 - `maxWidth`: number
+- `contained`: boolean
+- `peekable`: boolean
+- `animationDuration`: number
 - `children`: ReactNode (required)
 - `className`: string
 
@@ -6185,36 +6198,28 @@ Props:
 Header sub-component
 
 Props:
-- `collapsible`: boolean
-- `defaultOpen`: boolean
-- `open`: boolean
+- `icon`: React.ComponentType<{ className?: string
 
 #### Sidebar.Content
 
 Content sub-component
 
 Props:
-- `collapsible`: boolean
-- `defaultOpen`: boolean
-- `open`: boolean
+- `icon`: React.ComponentType<{ className?: string
 
 #### Sidebar.Footer
 
 Footer sub-component
 
 Props:
-- `collapsible`: boolean
-- `defaultOpen`: boolean
-- `open`: boolean
+- `icon`: React.ComponentType<{ className?: string
 
 #### Sidebar.Group
 
 Group sub-component
 
 Props:
-- `collapsible`: boolean
-- `defaultOpen`: boolean
-- `open`: boolean
+- `icon`: React.ComponentType<{ className?: string
 
 #### Sidebar.GroupLabel
 
@@ -6223,13 +6228,6 @@ GroupLabel sub-component
 Props:
 - `icon`: React.ComponentType<{ className?: string
 
-#### Sidebar.GroupContent
-
-GroupContent sub-component
-
-Props:
-- `icon`: React.ComponentType<{ className?: string
-
 #### Sidebar.Menu
 
 Menu sub-component
@@ -6251,14 +6249,6 @@ MenuButton sub-component
 Props:
 - `icon`: React.ComponentType<{ className?: string
 
-#### Sidebar.MenuAction
-
-MenuAction sub-component
-
-Props:
-- `active`: boolean
-- `href`: string
-
 #### Sidebar.MenuBadge
 
 MenuBadge sub-component
@@ -6296,29 +6286,33 @@ Props:
 Separator sub-component
 
 Props:
-- `placeholder`: string
-- `shortcut`: string
-
-#### Sidebar.Input
-
-Input sub-component
-
-Props:
-- `placeholder`: string
-- `shortcut`: string
+- `defaultOpen`: boolean
+- `open`: boolean
 
 #### Sidebar.Trigger
 
 Trigger sub-component
 
+Props:
+- `defaultOpen`: boolean
+- `open`: boolean
+
 #### Sidebar.Rail
 
 Rail sub-component
 
+Props:
+- `defaultOpen`: boolean
+- `open`: boolean
+
 #### Sidebar.ResizeHandle
 
 ResizeHandle sub-component
 
+Props:
+- `defaultOpen`: boolean
+- `open`: boolean
+
 #### Sidebar.MenuChevron
 
 MenuChevron sub-component
@@ -6330,20 +6324,46 @@ Props:
 
 Collapsible sub-component
 
+Props:
+- `defaultOpen`: boolean
+- `open`: boolean
+
 #### Sidebar.CollapsibleTrigger
 
 CollapsibleTrigger sub-component
 
+Props:
+- `render`: React.ReactElement (required)
+
 #### Sidebar.CollapsibleContent
 
 CollapsibleContent sub-component
 
+Props:
+- `activeKey`: string (required)
+- `direction`: "left" | "right"
+
+#### Sidebar.SlidingViews
+
+SlidingViews sub-component
+
+Props:
+- `activeKey`: string (required)
+- `direction`: "left" | "right"
+
+#### Sidebar.SlidingView
+
+SlidingView sub-component
+
+Props:
+- `value`: string (required)
+
 
 **Examples:**
 
 ```tsx
 <DemoContainer>
-      <Sidebar.Provider defaultOpen className="min-h-0! h-full">
+      <Sidebar.Provider contained defaultOpen className="min-h-0! h-full">
         <Sidebar>
           <Sidebar.Content>
             <Sidebar.Group>
@@ -6376,9 +6396,31 @@ CollapsibleContent sub-component
                     />
                     <Sidebar.CollapsibleContent>
                       <Sidebar.MenuSub>
-                        <Sidebar.MenuSubButton>
-                          Workers & Pages
-                        </Sidebar.MenuSubButton>
+                        <Sidebar.MenuSubItem>
+                          <Sidebar.Collapsible>
+                            <Sidebar.CollapsibleTrigger
+                              render={
+                                <Sidebar.MenuSubButton>
+                                  Workers & Pages
+                                  <Sidebar.MenuChevron />
+                                </Sidebar.MenuSubButton>
+                              }
+                            />
+                            <Sidebar.CollapsibleContent>
+                              <Sidebar.MenuSub>
+                                <Sidebar.MenuSubButton>
+                                  Overview
+                                </Sidebar.MenuSubButton>
+                                <Sidebar.MenuSubButton>
+                                  Workers
+                                </Sidebar.MenuSubButton>
+                                <Sidebar.MenuSubButton>
+                                  Pages
+                                </Sidebar.MenuSubButton>
+                              </Sidebar.MenuSub>
+                            </Sidebar.CollapsibleContent>
+                          </Sidebar.Collapsible>
+                        </Sidebar.MenuSubItem>
                         <Sidebar.MenuSubButton>
                           Durable Objects
                         </Sidebar.MenuSubButton>
@@ -6400,64 +6442,7 @@ CollapsibleContent sub-component
 
 ```tsx
 <DemoContainer>
-      <Sidebar.Provider defaultOpen className="min-h-0! h-full">
-        <Sidebar>
-          <Sidebar.Content>
-            {/* GroupContent is required for collapsible groups (provides grid-rows animation) */}
-            <Sidebar.Group collapsible defaultOpen>
-              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
-              <Sidebar.GroupContent>
-                <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.GroupContent>
-            </Sidebar.Group>
-
-            <Sidebar.Group collapsible defaultOpen>
-              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
-              <Sidebar.GroupContent>
-                <Sidebar.Menu>
-                  <Sidebar.MenuButton icon={CodeIcon}>
-                    Compute
-                  </Sidebar.MenuButton>
-                  <Sidebar.MenuButton icon={DatabaseIcon}>
-                    Storage
-                  </Sidebar.MenuButton>
-                </Sidebar.Menu>
-              </Sidebar.GroupContent>
-            </Sidebar.Group>
-
-            <Sidebar.Group collapsible defaultOpen={false}>
-              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>
-              <Sidebar.GroupContent>
-                <Sidebar.Menu>
-                  <Sidebar.MenuButton icon={ShieldCheckIcon}>
-                    Security
-                  </Sidebar.MenuButton>
-                  <Sidebar.MenuButton icon={LockIcon}>
-                    Zero Trust
-                  </Sidebar.MenuButton>
-                </Sidebar.Menu>
-              </Sidebar.GroupContent>
-            </Sidebar.Group>
-          </Sidebar.Content>
-        </Sidebar>
-        <DemoMain />
-      </Sidebar.Provider>
-    </DemoContainer>
-```
-
-```tsx
-<DemoContainer>
-      <Sidebar.Provider defaultOpen className="min-h-0! h-full">
+      <Sidebar.Provider contained defaultOpen className="min-h-0! h-full">
         <Sidebar>
           <Sidebar.Header>
             <BrandLogo />
@@ -6486,7 +6471,7 @@ CollapsibleContent sub-component
         </Sidebar>
         <DemoMain>
           <ToggleButton />
-          <p className="text-sm">
+          <p>
             Click the button or the sidebar trigger to toggle
           </p>
         </DemoMain>
@@ -6496,97 +6481,7 @@ CollapsibleContent sub-component
 
 ```tsx
 <DemoContainer>
-      <Sidebar.Provider defaultOpen className="min-h-0! h-full">
-        <Sidebar>
-          <Sidebar.Header>
-            <AccountSwitcher />
-          </Sidebar.Header>
-
-          <Sidebar.Content>
-            <div className="px-1 pb-2">
-              <Sidebar.Input placeholder="Quick search..." shortcut="⌘K" />
-            </div>
-
-            <Sidebar.Group>
-              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
-              <Sidebar.Menu>
-                <Sidebar.MenuButton icon={HouseIcon} active>
-                  Home
-                </Sidebar.MenuButton>
-                <Sidebar.MenuButton icon={ChartBarIcon}>
-                  Analytics & Logs
-                </Sidebar.MenuButton>
-                <Sidebar.MenuButton icon={GlobeIcon}>
-                  Domains
-                </Sidebar.MenuButton>
-              </Sidebar.Menu>
-            </Sidebar.Group>
-
-            <Sidebar.Separator />
-
-            <Sidebar.Group>
-              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
-              <Sidebar.Menu>
-                <Sidebar.MenuItem>
-                  <Sidebar.Collapsible defaultOpen>
-                    <Sidebar.CollapsibleTrigger
-                      render={
-                        <Sidebar.MenuButton icon={CodeIcon}>
-                          Compute
-                          <Sidebar.MenuChevron />
-                        </Sidebar.MenuButton>
-                      }
-                    />
-                    <Sidebar.CollapsibleContent>
-                      <Sidebar.MenuSub>
-                        <Sidebar.MenuSubButton>
-                          Workers & Pages
-                        </Sidebar.MenuSubButton>
-                        <Sidebar.MenuSubButton>
-                          Durable Objects
-                        </Sidebar.MenuSubButton>
-                        <Sidebar.MenuSubButton>
-                          Containers
-                          <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
-                        </Sidebar.MenuSubButton>
-                      </Sidebar.MenuSub>
-                    </Sidebar.CollapsibleContent>
-                  </Sidebar.Collapsible>
-                </Sidebar.MenuItem>
-                <Sidebar.MenuButton icon={DatabaseIcon}>
-                  Storage
-                </Sidebar.MenuButton>
-              </Sidebar.Menu>
-            </Sidebar.Group>
-
-            <Sidebar.Group>
-              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>
-              <Sidebar.Menu>
-                <Sidebar.MenuButton icon={ShieldCheckIcon}>
-                  Security
-                </Sidebar.MenuButton>
-                <Sidebar.MenuButton icon={LockIcon}>
-                  Zero Trust
-                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
-                </Sidebar.MenuButton>
-              </Sidebar.Menu>
-            </Sidebar.Group>
-          </Sidebar.Content>
-
-          <Sidebar.Footer>
-            <Sidebar.MenuButton icon={GearIcon}>
-              Manage account
-            </Sidebar.MenuButton>
-          </Sidebar.Footer>
-        </Sidebar>
-        <DemoMain />
-      </Sidebar.Provider>
-    </DemoContainer>
-```
-
-```tsx
-<DemoContainer>
-      <Sidebar.Provider
+      <Sidebar.Provider contained
         defaultOpen
         resizable
         defaultWidth={240}
@@ -6600,7 +6495,6 @@ CollapsibleContent sub-component
           </Sidebar.Header>
           <Sidebar.Content>
             <Sidebar.Group>
-              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
               <Sidebar.Menu>
                 <Sidebar.MenuButton icon={HouseIcon} active>
                   Home
@@ -6620,7 +6514,7 @@ CollapsibleContent sub-component
           <Sidebar.ResizeHandle />
         </Sidebar>
         <DemoMain>
-          <p className="text-sm">Drag the sidebar edge to resize</p>
+          <p>Drag the sidebar edge to resize</p>
         </DemoMain>
       </Sidebar.Provider>
     </DemoContainer>
@@ -6628,7 +6522,7 @@ CollapsibleContent sub-component
 
 ```tsx
 <DemoContainer>
-      <Sidebar.Provider defaultOpen side="right" className="min-h-0! h-full">
+      <Sidebar.Provider contained defaultOpen side="right" className="min-h-0! h-full">
         <DemoMain />
         <Sidebar>
           <Sidebar.Content>
@@ -6650,6 +6544,246 @@ CollapsibleContent sub-component
     </DemoContainer>
 ```
 
+```tsx
+<DemoContainer>
+      <Sidebar.Provider contained defaultOpen className="min-h-0! h-full">
+        <Sidebar>
+          <Sidebar.Header>
+            <button
+              type="button"
+              onClick={() =>
+                setSurface((s) => (s === "account" ? "zone" : "account"))
+              }
+              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"
+            >
+              <ArrowsLeftRightIcon className="size-4 shrink-0 text-kumo-brand" />
+              <span className="flex-1 text-left font-semibold text-kumo-strong">
+                {surface === "account" ? "Account Nav" : "Zone Nav"}
+              </span>
+            </button>
+          </Sidebar.Header>
+
+          <Sidebar.SlidingViews
+            activeKey={surface}
+            direction={surface === "zone" ? "left" : "right"}
+          >
+            <Sidebar.SlidingView value="account">
+              <Sidebar.Content>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Account</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton icon={HouseIcon} active>
+                      Home
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={UserIcon}>
+                      Members
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={ChartBarIcon}>
+                      Analytics
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={GearIcon}>
+                      Settings
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+              </Sidebar.Content>
+            </Sidebar.SlidingView>
+
+            <Sidebar.SlidingView value="zone">
+              <Sidebar.Content>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Zone</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton icon={GlobeIcon} active>
+                      Overview
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={ShieldCheckIcon}>
+                      Security
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={LockIcon}>
+                      SSL/TLS
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={DatabaseIcon}>
+                      Caching
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+              </Sidebar.Content>
+            </Sidebar.SlidingView>
+          </Sidebar.SlidingViews>
+        </Sidebar>
+        <DemoMain>
+          <div className="flex flex-col items-center gap-2">
+            <p className="font-medium text-kumo-default">
+              Active: {surface === "account" ? "Account" : "Zone"} surface
+            </p>
+            <p>
+              Click the header button to slide between views
+            </p>
+          </div>
+        </DemoMain>
+      </Sidebar.Provider>
+    </DemoContainer>
+```
+
+```tsx
+<DemoContainer>
+      <Sidebar.Provider contained defaultOpen peekable className="min-h-0! h-full">
+        <Sidebar>
+          <Sidebar.Header>
+            <AccountSwitcher />
+          </Sidebar.Header>
+          <Sidebar.SlidingViews
+            activeKey={surface}
+            direction={surface === "domain" ? "left" : "right"}
+          >
+            <Sidebar.SlidingView value="account">
+              <Sidebar.Content>
+                <Sidebar.Group>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton
+                      icon={MagnifyingGlassIcon}
+                      tooltip="Search"
+                      className="ring ring-kumo-line group-data-[state=collapsed]/sidebar:ring-transparent"
+                    >
+                      Quick search&hellip;
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+                <Sidebar.Group>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton icon={HouseIcon} active>
+                      Home
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={ChartBarIcon}>
+                      Analytics & Logs
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton
+                      icon={GlobeIcon}
+                      onClick={() => setSurface("domain")}
+                    >
+                      Domains
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuItem>
+                      <Sidebar.Collapsible defaultOpen>
+                        <Sidebar.CollapsibleTrigger
+                          render={
+                            <Sidebar.MenuButton icon={CodeIcon}>
+                              Compute
+                              <Sidebar.MenuChevron />
+                            </Sidebar.MenuButton>
+                          }
+                        />
+                        <Sidebar.CollapsibleContent>
+                          <Sidebar.MenuSub>
+                            <Sidebar.MenuSubItem>
+                              <Sidebar.Collapsible>
+                                <Sidebar.CollapsibleTrigger
+                                  render={
+                                    <Sidebar.MenuSubButton>
+                                      Workers & Pages
+                                      <Sidebar.MenuChevron />
+                                    </Sidebar.MenuSubButton>
+                                  }
+                                />
+                                <Sidebar.CollapsibleContent>
+                                  <Sidebar.MenuSub>
+                                    <Sidebar.MenuSubButton>
+                                      Overview
+                                    </Sidebar.MenuSubButton>
+                                    <Sidebar.MenuSubButton>
+                                      Workers
+                                    </Sidebar.MenuSubButton>
+                                    <Sidebar.MenuSubButton>
+                                      Pages
+                                    </Sidebar.MenuSubButton>
+                                  </Sidebar.MenuSub>
+                                </Sidebar.CollapsibleContent>
+                              </Sidebar.Collapsible>
+                            </Sidebar.MenuSubItem>
+                            <Sidebar.MenuSubButton>
+                              Durable Objects
+                            </Sidebar.MenuSubButton>
+                            <Sidebar.MenuSubButton>
+                              Containers
+                              <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+                            </Sidebar.MenuSubButton>
+                          </Sidebar.MenuSub>
+                        </Sidebar.CollapsibleContent>
+                      </Sidebar.Collapsible>
+                    </Sidebar.MenuItem>
+                    <Sidebar.MenuButton icon={DatabaseIcon}>
+                      Storage
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton icon={ShieldCheckIcon}>
+                      Security
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={LockIcon}>
+                      Zero Trust
+                      <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+              </Sidebar.Content>
+            </Sidebar.SlidingView>
+
+            <Sidebar.SlidingView value="domain">
+              <Sidebar.Content>
+                <Sidebar.Group>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton
+                      icon={ArrowLeftIcon}
+                      onClick={() => setSurface("account")}
+                    >
+                      Back
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>example.com</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.MenuButton icon={GlobeIcon} active>
+                      Overview
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={ShieldCheckIcon}>
+                      Security
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={LockIcon}>
+                      SSL/TLS
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={ChartBarIcon}>
+                      Analytics
+                    </Sidebar.MenuButton>
+                    <Sidebar.MenuButton icon={DatabaseIcon}>
+                      Caching
+                    </Sidebar.MenuButton>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+              </Sidebar.Content>
+            </Sidebar.SlidingView>
+          </Sidebar.SlidingViews>
+
+          <Sidebar.Footer>
+            <Sidebar.Trigger />
+          </Sidebar.Footer>
+        </Sidebar>
+        <DemoMain />
+      </Sidebar.Provider>
+    </DemoContainer>
+```
+
 
 ---
 
@@ -7825,7 +7959,7 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-fill-hover`, `bg-kumo-info`, `bg-kumo-success`, `bg-kumo-warning`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-line`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger-tint`, `bg-kumo-fill-hover`, `bg-kumo-info-tint`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-line`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
 
 **Styling:**