@cloudflare/kumo 2.3.1 → 2.4.1

package/ai/component-registry.json

@@ -61,8 +61,8 @@
       },
       "examples": [
         "<Autocomplete items={fruits}>\n      <Autocomplete.InputGroup placeholder=\"Search fruits…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(item: string) => (\n            <Autocomplete.Item key={item} value={item}>\n              {item}\n            </Autocomplete.Item>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>",
-        "<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        description=\"Start typing to filter countries\"\n        filter={(item: Country, query: string) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        }\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
-        "<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        error={{ message: \"Please enter a valid country\", match: true }}\n        filter={(item: Country, query: string) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        }\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
+        "<div className=\"w-80\">\n      <Autocomplete\n        items={languages}\n        label=\"Language\"\n        description=\"Start typing to filter languages\"\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"Search a language…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Language) => (\n              <Autocomplete.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
+        "<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        error={{ message: \"Please enter a valid country\", match: true }}\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
         "<Autocomplete items={servers}>\n      <Autocomplete.InputGroup placeholder=\"Select region…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(group: ServerGroup) => (\n            <Autocomplete.Group key={group.value} items={group.items}>\n              <Autocomplete.GroupLabel>{group.value}</Autocomplete.GroupLabel>\n              <Autocomplete.Collection>\n                {(item: ServerLocation) => (\n                  <Autocomplete.Item key={item.value} value={item}>\n                    {item.label}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.Collection>\n            </Autocomplete.Group>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"xs\" placeholder=\"xs\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"sm\" placeholder=\"sm\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"base\" placeholder=\"base (default)\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"lg\" placeholder=\"lg\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
         "<div className=\"flex flex-col gap-3 w-80\">\n      <Autocomplete\n        items={fruits}\n        value={value}\n        onValueChange={(v) => setValue(v)}\n      >\n        <Autocomplete.InputGroup placeholder=\"Type a fruit…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      {value && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Value: <span className=\"text-kumo-default font-medium\">{value}</span>\n        </p>\n      )}\n    </div>"
@@ -266,13 +266,12 @@
       },
       "examples": [
         "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"error\">Error</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
         "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">New</Badge>\n    </p>",
         "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"success\" appearance=\"dot\">Healthy</Badge>\n      <Badge variant=\"warning\" appearance=\"dot\">Warning</Badge>\n      <Badge variant=\"error\" appearance=\"dot\">Error</Badge>\n      <Badge variant=\"neutral\" appearance=\"dot\">Neutral</Badge>\n    </div>"
       ],
       "colors": [
         "bg-kumo-badge-blue",
-        "bg-kumo-badge-green",
         "bg-kumo-badge-inverted",
         "bg-kumo-badge-neutral",
         "bg-kumo-badge-orange",
@@ -283,6 +282,7 @@
         "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",
@@ -307,6 +307,19 @@
       "importPath": "@cloudflare/kumo",
       "category": "Feedback",
       "props": {
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`."
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
         "icon": {
           "type": "ReactNode",
           "optional": true,
@@ -338,35 +351,34 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Visual style of the banner.\n- `\"default\"` — Informational blue banner for general messages\n- `\"alert\"` — Warning yellow banner for cautionary messages\n- `\"error\"` — Error red banner for critical issues",
+          "description": "Visual style of the banner.\n- `\"default\"` — Informational blue banner for general messages\n- `\"alert\"` — Warning yellow banner for cautionary messages\n- `\"error\"` — Error red banner for critical issues\n- `\"secondary\"` — Neutral banner for secondary messages",
           "values": [
             "default",
             "alert",
-            "error"
+            "error",
+            "secondary"
           ],
           "descriptions": {
             "default": "Informational banner for general messages",
             "alert": "Warning banner for cautionary messages",
-            "error": "Error banner for critical issues"
+            "error": "Error banner for critical issues",
+            "secondary": "Neutral banner for secondary messages"
           },
           "classes": {
-            "default": "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info",
-            "alert": "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning",
-            "error": "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger"
+            "default": "bg-kumo-banner-info text-kumo-info",
+            "alert": "bg-kumo-banner-warning text-kumo-warning",
+            "error": "bg-kumo-danger-tint/60 text-kumo-danger",
+            "secondary": "bg-kumo-contrast/5 text-kumo-subtle"
           },
           "default": "default"
-        },
-        "className": {
-          "type": "string",
-          "optional": true,
-          "description": "Additional CSS classes merged via `cn()`."
         }
       },
       "examples": [
-        "<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n      />\n    </div>",
+        "<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n      />\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        variant=\"secondary\"\n        title=\"Maintenance scheduled\"\n        description=\"This service will be unavailable for 10 minutes.\"\n      />\n    </div>",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Update available\"\n      description=\"A new version is ready to install.\"\n    />",
         "<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Session expiring\"\n      description=\"Your session will expire in 5 minutes.\"\n    />",
         "<Banner\n      icon={<WarningCircle weight=\"fill\" />}\n      variant=\"error\"\n      title=\"Save failed\"\n      description=\"We couldn't save your changes. Please try again.\"\n    />",
+        "<Banner\n      icon={<Info weight=\"fill\" />}\n      variant=\"secondary\"\n      title=\"Maintenance scheduled\"\n      description=\"This service will be unavailable for 10 minutes.\"\n    />",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Your changes have been saved.\"\n    />",
         "<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Review required\"\n      description=\"Please review your billing information before proceeding.\"\n    />",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Custom content supported\"\n      description={\n        <Text DANGEROUS_className=\"text-inherit\">\n          This banner supports <strong>custom content</strong> with Text.\n        </Text>\n      }\n    />",
@@ -375,17 +387,16 @@
         "<Banner icon={<Info />}>This is a simple banner using children.</Banner>"
       ],
       "colors": [
+        "bg-kumo-banner-info",
+        "bg-kumo-banner-warning",
+        "bg-kumo-contrast",
         "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-subtle",
         "text-kumo-warning"
       ],
-      "baseStyles": "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base"
+      "baseStyles": "flex w-full items-start gap-3 rounded-lg px-4 py-3 text-base"
     },
     "Breadcrumbs": {
       "name": "Breadcrumbs",
@@ -4944,7 +4955,7 @@
     "Sidebar": {
       "name": "Sidebar",
       "type": "component",
-      "description": "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`.",
+      "description": "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`.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -5023,6 +5034,21 @@
           "optional": true,
           "description": "Maximum width in pixels when resizing."
         },
+        "contained": {
+          "type": "boolean",
+          "optional": true,
+          "description": "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": {
+          "type": "boolean",
+          "optional": true,
+          "description": "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": {
+          "type": "number",
+          "optional": true,
+          "description": "Duration of sidebar expand/collapse animation in milliseconds."
+        },
         "children": {
           "type": "ReactNode",
           "optional": true,
@@ -5035,24 +5061,25 @@
         }
       },
       "examples": [
-        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\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.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.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\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          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            {/* GroupContent is required for collapsible groups (provides grid-rows animation) */}\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\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.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\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.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen={false}>\n              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                    Security\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={LockIcon}>\n                    Zero Trust\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider 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.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          <ToggleButton />\n          <p className=\"text-sm\">\n            Click the button or the sidebar trigger to toggle\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n\n          <Sidebar.Content>\n            <div className=\"px-1 pb-2\">\n              <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" />\n            </div>\n\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 & Logs\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Separator />\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.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\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\n          <Sidebar.Footer>\n            <Sidebar.MenuButton icon={GearIcon}>\n              Manage account\n            </Sidebar.MenuButton>\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider\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.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={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 className=\"text-sm\">Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
-        "<DemoContainer>\n      <Sidebar.Provider 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 className=\"min-h-0! h-full\">\n        <Sidebar>\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.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.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          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\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.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          <ToggleButton />\n          <p>\n            Click the button or the sidebar trigger to toggle\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<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>",
+        "<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>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-brand",
         "bg-kumo-hairline",
-        "bg-kumo-overlay",
+        "bg-kumo-line",
         "bg-kumo-recessed",
         "bg-kumo-tint",
-        "border-kumo-hairline",
+        "border-kumo-line",
         "ring-kumo-brand",
-        "ring-kumo-hairline",
         "text-kumo-default",
+        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -5096,6 +5123,18 @@
               "type": "number",
               "optional": true
             },
+            "contained": {
+              "type": "boolean",
+              "optional": true
+            },
+            "peekable": {
+              "type": "boolean",
+              "optional": true
+            },
+            "animationDuration": {
+              "type": "number",
+              "optional": true
+            },
             "children": {
               "type": "ReactNode",
               "required": true
@@ -5110,16 +5149,8 @@
           "name": "Header",
           "description": "Header sub-component",
           "props": {
-            "collapsible": {
-              "type": "boolean",
-              "optional": true
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "optional": true
-            },
-            "open": {
-              "type": "boolean",
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
               "optional": true
             }
           }
@@ -5128,16 +5159,8 @@
           "name": "Content",
           "description": "Content sub-component",
           "props": {
-            "collapsible": {
-              "type": "boolean",
-              "optional": true
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "optional": true
-            },
-            "open": {
-              "type": "boolean",
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
               "optional": true
             }
           }
@@ -5146,16 +5169,8 @@
           "name": "Footer",
           "description": "Footer sub-component",
           "props": {
-            "collapsible": {
-              "type": "boolean",
-              "optional": true
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "optional": true
-            },
-            "open": {
-              "type": "boolean",
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
               "optional": true
             }
           }
@@ -5164,16 +5179,8 @@
           "name": "Group",
           "description": "Group sub-component",
           "props": {
-            "collapsible": {
-              "type": "boolean",
-              "optional": true
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "optional": true
-            },
-            "open": {
-              "type": "boolean",
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
               "optional": true
             }
           }
@@ -5188,16 +5195,6 @@
             }
           }
         },
-        "GroupContent": {
-          "name": "GroupContent",
-          "description": "GroupContent sub-component",
-          "props": {
-            "icon": {
-              "type": "React.ComponentType<{ className?: string",
-              "optional": true
-            }
-          }
-        },
         "Menu": {
           "name": "Menu",
           "description": "Menu sub-component",
@@ -5228,20 +5225,6 @@
             }
           }
         },
-        "MenuAction": {
-          "name": "MenuAction",
-          "description": "MenuAction sub-component",
-          "props": {
-            "active": {
-              "type": "boolean",
-              "optional": true
-            },
-            "href": {
-              "type": "string",
-              "optional": true
-            }
-          }
-        },
         "MenuBadge": {
           "name": "MenuBadge",
           "description": "MenuBadge sub-component",
@@ -5302,44 +5285,57 @@
           "name": "Separator",
           "description": "Separator sub-component",
           "props": {
-            "placeholder": {
-              "type": "string",
+            "defaultOpen": {
+              "type": "boolean",
               "optional": true
             },
-            "shortcut": {
-              "type": "string",
+            "open": {
+              "type": "boolean",
               "optional": true
             }
           }
         },
-        "Input": {
-          "name": "Input",
-          "description": "Input sub-component",
+        "Trigger": {
+          "name": "Trigger",
+          "description": "Trigger sub-component",
           "props": {
-            "placeholder": {
-              "type": "string",
+            "defaultOpen": {
+              "type": "boolean",
               "optional": true
             },
-            "shortcut": {
-              "type": "string",
+            "open": {
+              "type": "boolean",
               "optional": true
             }
           }
         },
-        "Trigger": {
-          "name": "Trigger",
-          "description": "Trigger sub-component",
-          "props": {}
-        },
         "Rail": {
           "name": "Rail",
           "description": "Rail sub-component",
-          "props": {}
+          "props": {
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "ResizeHandle": {
           "name": "ResizeHandle",
           "description": "ResizeHandle sub-component",
-          "props": {}
+          "props": {
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "MenuChevron": {
           "name": "MenuChevron",
@@ -5354,23 +5350,70 @@
         "Collapsible": {
           "name": "Collapsible",
           "description": "Collapsible sub-component",
-          "props": {}
+          "props": {
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "CollapsibleTrigger": {
           "name": "CollapsibleTrigger",
           "description": "CollapsibleTrigger sub-component",
-          "props": {}
+          "props": {
+            "render": {
+              "type": "React.ReactElement",
+              "required": true
+            }
+          }
         },
         "CollapsibleContent": {
           "name": "CollapsibleContent",
           "description": "CollapsibleContent sub-component",
-          "props": {}
+          "props": {
+            "activeKey": {
+              "type": "string",
+              "required": true
+            },
+            "direction": {
+              "type": "\"left\" | \"right\"",
+              "optional": true
+            }
+          }
+        },
+        "SlidingViews": {
+          "name": "SlidingViews",
+          "description": "SlidingViews sub-component",
+          "props": {
+            "activeKey": {
+              "type": "string",
+              "required": true
+            },
+            "direction": {
+              "type": "\"left\" | \"right\"",
+              "optional": true
+            }
+          }
+        },
+        "SlidingView": {
+          "name": "SlidingView",
+          "description": "SlidingView sub-component",
+          "props": {
+            "value": {
+              "type": "string",
+              "required": true
+            }
+          }
         }
       },
       "styling": {
         "width": {
-          "expanded": "16rem",
-          "icon": "3rem"
+          "expanded": "16.25rem",
+          "icon": "57px"
         },
         "mobile": {
           "breakpoint": 768
@@ -6146,11 +6189,11 @@
         "bg-kumo-base",
         "bg-kumo-contrast",
         "bg-kumo-control",
-        "bg-kumo-danger",
+        "bg-kumo-danger-tint",
         "bg-kumo-fill-hover",
-        "bg-kumo-info",
-        "bg-kumo-success",
-        "bg-kumo-warning",
+        "bg-kumo-info-tint",
+        "bg-kumo-success-tint",
+        "bg-kumo-warning-tint",
         "border-kumo-fill",
         "ring-kumo-danger",
         "ring-kumo-hairline",