@cloudflare/kumo 2.5.2 → 2.6.0

package/dist/styles/theme-kumo.css

@@ -148,7 +148,7 @@
 
   --color-kumo-brand: light-dark(
     oklch(0.5772 0.2324 260),
-    oklch(0.5772 0.2324 260)
+    color-mix(in oklch, oklch(0.5772 0.2324 260), black 10%)
   );
 
   --color-kumo-brand-hover: light-dark(
@@ -218,7 +218,7 @@
 
   --color-kumo-danger: light-dark(
     var(--color-red-500, oklch(63.7% 0.237 25.331)),
-    var(--color-red-400, oklch(70.4% 0.191 22.216))
+    var(--color-red-600, oklch(57.7% 0.245 27.325))
   );
 
   --color-kumo-success-tint: light-dark(
@@ -246,6 +246,11 @@
     var(--color-red-700, oklch(50.5% 0.213 27.518))
   );
 
+  --color-kumo-badge-green: light-dark(
+    var(--color-emerald-600, oklch(59.6% 0.145 163.225)),
+    var(--color-emerald-700, oklch(50.8% 0.118 165.612))
+  );
+
   --color-kumo-badge-orange: light-dark(
     var(--color-orange-650, oklch(81.5% 0.197 76)),
     var(--color-orange-650, oklch(81.5% 0.197 76))
@@ -339,6 +344,7 @@
     --color-kumo-banner-info: oklch(93.2% 0.032 255.585 / 0.7);
     --color-kumo-banner-warning: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
     --color-kumo-badge-red: var(--color-red-600, oklch(57.7% 0.245 27.325));
+    --color-kumo-badge-green: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
     --color-kumo-badge-purple: var(--color-purple-600, oklch(60% 0.118 184.704));
     --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565));
@@ -375,7 +381,7 @@
     --color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0));
     --color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0));
     --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0));
-    --color-kumo-brand: oklch(0.5772 0.2324 260);
+    --color-kumo-brand: color-mix(in oklch, oklch(0.5772 0.2324 260), black 10%);
     --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
     --color-kumo-line: var(--color-kumo-neutral-750, oklch(32% 0 0));
     --color-kumo-hairline: var(--color-neutral-800, oklch(26.9% 0 0));
@@ -389,12 +395,13 @@
     --color-kumo-warning-tint: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
     --color-kumo-warning: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
     --color-kumo-danger-tint: var(--color-red-900, oklch(39.6% 0.141 25.723));
-    --color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
+    --color-kumo-danger: var(--color-red-600, oklch(57.7% 0.245 27.325));
     --color-kumo-success-tint: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
     --color-kumo-success: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
     --color-kumo-banner-info: oklch(37.9% 0.146 265.522 / 0.5);
     --color-kumo-banner-warning: oklch(55.4% 0.135 66.442 / 0.5);
     --color-kumo-badge-red: var(--color-red-700, oklch(50.5% 0.213 27.518));
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
     --color-kumo-badge-purple: var(--color-purple-700, oklch(50.8% 0.118 165.612));
     --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",
@@ -72,6 +72,10 @@
       "types": "./dist/src/components/combobox/index.d.ts",
       "import": "./dist/components/combobox.js"
     },
+    "./components/toolbar": {
+      "types": "./dist/src/components/toolbar/index.d.ts",
+      "import": "./dist/components/toolbar.js"
+    },
     "./components/dialog": {
       "types": "./dist/src/components/dialog/index.d.ts",
       "import": "./dist/components/dialog.js"

package/scripts/component-registry/discovery.ts

@@ -237,7 +237,7 @@ export function detectPropsTypeFromFile(
 
 /**
  * Extract description text from JSDoc content.
- * Stops at first @tag (like @example, @see, @param, etc.)
+ * Stops at first @tag, markdown heading, or fenced code block.
  */
 function extractDescriptionFromJSDoc(jsdocContent: string): string | null {
   const lines: string[] = [];
@@ -245,24 +245,29 @@ function extractDescriptionFromJSDoc(jsdocContent: string): string | null {
   for (const rawLine of jsdocContent.split("\n")) {
     const line = rawLine.replace(/^\s*\*\s?/, "").trim();
 
-    // Stop at any @tag
-    if (line.startsWith("@")) {
+    // Stop before structured documentation that should not become the summary.
+    if (
+      line.startsWith("@") ||
+      /^#{1,6}\s/.test(line) ||
+      line.startsWith("```") ||
+      line.startsWith("~~~")
+    ) {
       break;
     }
 
-    // Skip empty lines at the start, but allow them in the middle
-    if (line.length > 0 || lines.length > 0) {
-      lines.push(line);
+    // Keep the summary to the first paragraph.
+    if (line.length === 0) {
+      if (lines.length > 0) {
+        break;
+      }
+      continue;
     }
-  }
 
-  // Trim trailing empty lines and join
-  while (lines.length > 0 && lines[lines.length - 1] === "") {
-    lines.pop();
+    lines.push(line);
   }
 
   if (lines.length > 0) {
-    return lines.join(" ").trim();
+    return lines.join(" ").replace(/\s+/g, " ").trim();
   }
 
   return null;

package/scripts/component-registry/metadata.ts

@@ -328,6 +328,36 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
       description: "Callback when active tab changes",
     },
   },
+  Radio: {
+    value: {
+      type: "T",
+      description: "The controlled value of the selected radio item.",
+    },
+    defaultValue: {
+      type: "T",
+      description: "The uncontrolled initial value of the selected radio item.",
+    },
+    onValueChange: {
+      type: "(value: T, eventDetails: RadioGroupChangeEventDetails) => void",
+      description:
+        "Callback fired when the selected value changes. The second argument carries native event details about the interaction.",
+    },
+  },
+  "Radio.Group": {
+    value: {
+      type: "T",
+      description: "The controlled value of the selected radio item.",
+    },
+    defaultValue: {
+      type: "T",
+      description: "The uncontrolled initial value of the selected radio item.",
+    },
+    onValueChange: {
+      type: "(value: T, eventDetails: RadioGroupChangeEventDetails) => void",
+      description:
+        "Callback fired when the selected value changes. The second argument carries native event details about the interaction.",
+    },
+  },
   Collapsible: {
     onOpenChange: {
       type: "(open: boolean) => void",

package/scripts/theme-generator/config.ts

@@ -295,7 +295,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "oklch(0.5772 0.2324 260)",
-          dark: "oklch(0.5772 0.2324 260)",
+          dark: "color-mix(in oklch, oklch(0.5772 0.2324 260), black 10%)",
         },
       },
     },
@@ -431,7 +431,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "var(--color-red-500, oklch(63.7% 0.237 25.331))",
-          dark: "var(--color-red-400, oklch(70.4% 0.191 22.216))",
+          dark: "var(--color-red-600, oklch(57.7% 0.245 27.325))",
         },
       },
     },
@@ -498,6 +498,18 @@ export const THEME_CONFIG: ThemeConfig = {
       },
     },
 
+    // Green
+    "kumo-badge-green": {
+      newName: "",
+      description: "Green badge background",
+      theme: {
+        kumo: {
+          light: "var(--color-emerald-600, oklch(59.6% 0.145 163.225))",
+          dark: "var(--color-emerald-700, oklch(50.8% 0.118 165.612))",
+        },
+      },
+    },
+
     // Orange
     "kumo-badge-orange": {
       newName: "",