@cloudflare/kumo 2.2.2 → 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>
@@ -294,6 +290,9 @@ Small status label for categorizing or highlighting content.
   - `"teal"`: Teal badge
   - `"teal-subtle"`: Subtle teal badge
   - `"blue"`: Blue badge
+- `appearance`: enum [default: filled]
+  - `"filled"`: Filled badge with background color (default)
+  - `"dot"`: Outlined badge with a colored circle dot indicating status
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `children`: ReactNode
@@ -301,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`, `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:**
 
@@ -323,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>
@@ -337,6 +335,15 @@ Small status label for categorizing or highlighting content.
     </p>
 ```
 
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Badge variant="success" appearance="dot">Healthy</Badge>
+      <Badge variant="warning" appearance="dot">Warning</Badge>
+      <Badge variant="error" appearance="dot">Error</Badge>
+      <Badge variant="neutral" appearance="dot">Neutral</Badge>
+    </div>
+```
+
 
 ---
 
@@ -352,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
@@ -366,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:**
 
@@ -394,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>
 ```
 
@@ -3972,7 +3988,7 @@ InputGroup component
 
 **Colors (kumo tokens used):**
 
-`border-kumo-line`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`
+`border-kumo-focus`, `border-kumo-line`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`
 
 **Sub-Components:**
 
@@ -4079,6 +4095,7 @@ Description sub-component
         />
         <InputGroup.Addon align="end">
           <InputGroup.Button
+            shape="square"
             className="text-kumo-subtle"
             icon={show ? EyeSlashIcon : EyeIcon}
             aria-label={show ? "Hide password" : "Show password"}
@@ -4100,11 +4117,11 @@ Description sub-component
         {searchValue && (
           <InputGroup.Addon align="end" className="pr-1">
             <InputGroup.Button
+              shape="square"
+              icon={XIcon}
               aria-label="Clear search"
               onClick={() => setSearchValue("")}
-            >
-              <XIcon />
-            </InputGroup.Button>
+            />
           </InputGroup.Addon>
         )}
         <InputGroup.Button variant="secondary" onClick={() => {}}>
@@ -4125,8 +4142,10 @@ Description sub-component
       />
       <InputGroup.Addon align="end">
         <InputGroup.Button
+          shape="square"
           className="text-kumo-subtle"
           icon={QuestionIcon}
+          aria-label="Query language help"
           tooltip="Query language help"
           onClick={() => {}}
         />
@@ -4283,6 +4302,7 @@ Description sub-component
         />
         <InputGroup.Addon align="end">
           <InputGroup.Button
+            shape="square"
             className="text-kumo-subtle"
             icon={show ? EyeSlashIcon : EyeIcon}
             aria-label={show ? "Hide password" : "Show password"}
@@ -5623,7 +5643,7 @@ Select component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-hairline`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-placeholder`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-hairline`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-brand`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-placeholder`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5710,7 +5730,6 @@ Separator sub-component
 <Select
       label="Issue Type"
       description="Choose the category that best describes your issue"
-      error={!value ? "Please select an issue type" : undefined}
       className="w-[280px]"
       value={value}
       onValueChange={(v) => setValue(v as string | null)}
@@ -5722,6 +5741,20 @@ Separator sub-component
     />
 ```
 
+```tsx
+<Select
+      label="Issue Type"
+      error="Please select an issue type"
+      className="w-[280px]"
+      value={null}
+      items={{
+        bug: "Bug",
+        documentation: "Documentation",
+        feature: "Feature",
+      }}
+    />
+```
+
 ```tsx
 <Select
       label="Category"
@@ -6085,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
 
@@ -6118,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
@@ -6125,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:**
 
@@ -6148,6 +6187,9 @@ Props:
 - `defaultWidth`: number
 - `minWidth`: number
 - `maxWidth`: number
+- `contained`: boolean
+- `peekable`: boolean
+- `animationDuration`: number
 - `children`: ReactNode (required)
 - `className`: string
 
@@ -6156,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
 
@@ -6194,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
@@ -6222,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
@@ -6267,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
@@ -6301,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>
@@ -6347,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>
@@ -6371,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 />
@@ -6457,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>
@@ -6467,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}
@@ -6571,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
@@ -6591,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>
@@ -6599,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>
@@ -6621,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>
+```
+
 
 ---
 
@@ -7796,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:**
 
@@ -7907,6 +8070,34 @@ Usage:
     </TooltipProvider>
 ```
 
+```tsx
+<TooltipProvider>
+      <div className="flex w-full justify-between">
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Near left edge
+        </Tooltip>
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Centered
+        </Tooltip>
+        <Tooltip
+          content={longContent}
+          side="bottom"
+          render={<Button variant="secondary" />}
+        >
+          Near right edge
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+```
+
 ```tsx
 <TooltipProvider>
       <div className="flex gap-4">