@cloudflare/kumo 2.2.2 → 2.4.0

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>"
@@ -236,6 +236,23 @@
           },
           "default": "primary"
         },
+        "appearance": {
+          "type": "enum",
+          "optional": true,
+          "description": "Visual appearance of the badge.\n- `\"filled\"` — Filled background using the variant color (default)\n- `\"dot\"` — Outlined badge with a colored circle dot. Only `success`,   `warning`, `error`, and `neutral` variants show a dot; other variants   render the badge without a dot.",
+          "values": [
+            "filled",
+            "dot"
+          ],
+          "descriptions": {
+            "filled": "Filled badge with background color (default)",
+            "dot": "Outlined badge with a colored circle dot indicating status"
+          },
+          "classes": {
+            "dot": "gap-1.5 bg-transparent text-kumo-default ring ring-kumo-hairline"
+          },
+          "default": "filled"
+        },
         "className": {
           "type": "string",
           "optional": true,
@@ -249,12 +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>",
-        "<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=\"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",
@@ -265,10 +282,12 @@
         "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",
@@ -288,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,
@@ -319,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    />",
@@ -356,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",
@@ -3662,15 +3692,16 @@
         "<div className=\"w-full max-w-2xs\">\n      <InputGroup>\n        <InputGroup.Input\n          maxLength={20}\n          onChange={handleChange}\n          value={value}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        {status !== \"idle\" && (\n          <InputGroup.Addon align=\"end\">\n            {status === \"loading\" ? (\n              <Loader />\n            ) : (\n              <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n            )}\n          </InputGroup.Addon>\n        )}\n      </InputGroup>\n    </div>",
         "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <LinkIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Paste a link...\" aria-label=\"Link\" />\n    </InputGroup>",
         "<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>@</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"username\" aria-label=\"Username\" />\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input placeholder=\"email\" aria-label=\"Email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>/api/</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"endpoint\" aria-label=\"API path\" />\n        <InputGroup.Addon align=\"end\">.json</InputGroup.Addon>\n      </InputGroup>\n    </div>",
-        "<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          defaultValue=\"password\"\n          aria-label=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input\n          value={searchValue}\n          placeholder=\"Search\"\n          aria-label=\"Search\"\n          onChange={(e) => setSearchValue(e.target.value)}\n        />\n        {searchValue && (\n          <InputGroup.Addon align=\"end\" className=\"pr-1\">\n            <InputGroup.Button\n              aria-label=\"Clear search\"\n              onClick={() => setSearchValue(\"\")}\n            >\n              <XIcon />\n            </InputGroup.Button>\n          </InputGroup.Addon>\n        )}\n        <InputGroup.Button variant=\"secondary\" onClick={() => {}}>\n          Search\n        </InputGroup.Button>\n      </InputGroup>\n    </div>",
-        "<InputGroup className=\"w-full max-w-2xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input\n        placeholder=\"Search with query language...\"\n        aria-label=\"Search\"\n      />\n      <InputGroup.Addon align=\"end\">\n        <InputGroup.Button\n          className=\"text-kumo-subtle\"\n          icon={QuestionIcon}\n          tooltip=\"Query language help\"\n          onClick={() => {}}\n        />\n      </InputGroup.Addon>\n    </InputGroup>",
+        "<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          defaultValue=\"password\"\n          aria-label=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input\n          value={searchValue}\n          placeholder=\"Search\"\n          aria-label=\"Search\"\n          onChange={(e) => setSearchValue(e.target.value)}\n        />\n        {searchValue && (\n          <InputGroup.Addon align=\"end\" className=\"pr-1\">\n            <InputGroup.Button\n              shape=\"square\"\n              icon={XIcon}\n              aria-label=\"Clear search\"\n              onClick={() => setSearchValue(\"\")}\n            />\n          </InputGroup.Addon>\n        )}\n        <InputGroup.Button variant=\"secondary\" onClick={() => {}}>\n          Search\n        </InputGroup.Button>\n      </InputGroup>\n    </div>",
+        "<InputGroup className=\"w-full max-w-2xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input\n        placeholder=\"Search with query language...\"\n        aria-label=\"Search\"\n      />\n      <InputGroup.Addon align=\"end\">\n        <InputGroup.Button\n          shape=\"square\"\n          className=\"text-kumo-subtle\"\n          icon={QuestionIcon}\n          aria-label=\"Query language help\"\n          tooltip=\"Query language help\"\n          onClick={() => {}}\n        />\n      </InputGroup.Addon>\n    </InputGroup>",
         "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Search...\" aria-label=\"Search\" />\n      <InputGroup.Addon align=\"end\">\n        <kbd className=\"bg-none! border-none!\">⌘K</kbd>\n      </InputGroup.Addon>\n    </InputGroup>",
         "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Input defaultValue=\"kumo\" aria-label=\"kumo\" />\n      <InputGroup.Addon align=\"end\">\n        <Loader />\n      </InputGroup.Addon>\n    </InputGroup>",
         "<div className=\"flex w-full max-w-2xs flex-col gap-4\">\n      <InputGroup label=\"Subdomain\">\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup\n        label=\"Subdomain\"\n        error={{ message: \"This subdomain is unavailable\", match: true }}\n      >\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <XCircleIcon weight=\"duotone\" className=\"text-kumo-danger\" />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>",
         "<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup size=\"xs\" label=\"Extra Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Extra small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"sm\" label=\"Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Base (default)\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Base input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"lg\" label=\"Large\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Large input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>",
-        "<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup\n        label=\"Error State\"\n        error={{ message: \"Please enter a valid email address\", match: true }}\n      >\n        <InputGroup.Input type=\"email\" defaultValue=\"invalid-email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Disabled\" disabled>\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search...\" />\n      </InputGroup>\n\n      <InputGroup label=\"Optional Field\" required={false}>\n        <InputGroup.Addon>$</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"0.00\" />\n      </InputGroup>\n\n      <InputGroup\n        label=\"With Description\"\n        description=\"Must be at least 8 characters\"\n        labelTooltip=\"Your password is stored securely\"\n      >\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          placeholder=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>"
+        "<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup\n        label=\"Error State\"\n        error={{ message: \"Please enter a valid email address\", match: true }}\n      >\n        <InputGroup.Input type=\"email\" defaultValue=\"invalid-email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Disabled\" disabled>\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search...\" />\n      </InputGroup>\n\n      <InputGroup label=\"Optional Field\" required={false}>\n        <InputGroup.Addon>$</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"0.00\" />\n      </InputGroup>\n\n      <InputGroup\n        label=\"With Description\"\n        description=\"Must be at least 8 characters\"\n        labelTooltip=\"Your password is stored securely\"\n      >\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          placeholder=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>"
       ],
       "colors": [
+        "border-kumo-focus",
         "border-kumo-line",
         "ring-kumo-danger",
         "ring-kumo-focus",
@@ -4688,7 +4719,8 @@
         "<Select\n      label=\"Favorite Fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
         "<div className=\"grid gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">xs</span>\n        <Select\n          aria-label=\"Select size xs\"\n          size=\"xs\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">sm</span>\n        <Select\n          aria-label=\"Select size sm\"\n          size=\"sm\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">base</span>\n        <Select\n          aria-label=\"Select size base\"\n          size=\"base\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">lg</span>\n        <Select\n          aria-label=\"Select size lg\"\n          size=\"lg\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n    </div>",
         "<Select\n      aria-label=\"Select a fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
-        "<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      error={!value ? \"Please select an issue type\" : undefined}\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
+        "<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
+        "<Select\n      label=\"Issue Type\"\n      error=\"Please select an issue type\"\n      className=\"w-[280px]\"\n      value={null}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
         "<Select\n      label=\"Category\"\n      placeholder=\"Choose a category...\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
         "<Select\n      label=\"Priority\"\n      labelTooltip=\"Higher priority issues are addressed first\"\n      placeholder=\"Select priority\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        low: \"Low\",\n        medium: \"Medium\",\n        high: \"High\",\n        critical: \"Critical\",\n      }}\n    />",
         "<Select\n      label=\"Language\"\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
@@ -4711,6 +4743,7 @@
         "bg-kumo-tint",
         "border-kumo-line",
         "ring-kumo-brand",
+        "ring-kumo-danger",
         "ring-kumo-focus",
         "ring-kumo-line",
         "text-kumo-danger",
@@ -4922,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": {
@@ -5001,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,
@@ -5013,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": {
@@ -5074,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
@@ -5088,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
             }
           }
@@ -5106,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
             }
           }
@@ -5124,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
             }
           }
@@ -5142,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
             }
           }
@@ -5166,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",
@@ -5206,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",
@@ -5280,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",
@@ -5332,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
@@ -6124,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",
@@ -6216,6 +6281,7 @@
         "<TooltipProvider>\n      <Tooltip\n        content=\"Add\"\n        render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n      />\n    </TooltipProvider>",
         "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip\n          content=\"Add\"\n          render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n        />\n        <Tooltip\n          content=\"Change language\"\n          render={\n            <Button\n              shape=\"square\"\n              icon={TranslateIcon}\n              aria-label=\"Change language\"\n            />\n          }\n        />\n      </div>\n    </TooltipProvider>",
         "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex w-full justify-between\">\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Near left edge\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Centered\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Near right edge\n        </Tooltip>\n      </div>\n    </TooltipProvider>",
         "<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip\n          content=\"Opens after 1 second\"\n          delay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          1s open delay\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          render={<Button variant=\"secondary\" />}\n        >\n          500ms close delay\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          Instant + 1s close\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [