@cloudflare/kumo 1.16.0 → 1.18.0

package/dist/styles/theme-kumo.css

@@ -48,13 +48,18 @@
     var(--color-blue-400, oklch(70.7% 0.165 254.624))
   );
 
+  --text-color-kumo-info: light-dark(
+    var(--color-blue-800, oklch(42.4% 0.199 265.638)),
+    var(--color-blue-400, oklch(70.7% 0.165 254.624))
+  );
+
   --text-color-kumo-success: light-dark(
-    var(--color-green-500, oklch(72.3% 0.219 149.579)),
-    var(--color-green-400, oklch(79.2% 0.209 151.711))
+    var(--color-emerald-800, oklch(43.2% 0.095 166.913)),
+    var(--color-emerald-200, oklch(90.5% 0.093 164.15))
   );
 
   --text-color-kumo-danger: light-dark(
-    var(--color-red-500, oklch(63.7% 0.237 25.331)),
+    var(--color-red-700, oklch(50.5% 0.213 27.518)),
     var(--color-red-400, oklch(70.4% 0.191 22.216))
   );
 
@@ -63,37 +68,57 @@
     var(--color-yellow-400, oklch(85.2% 0.199 91.936))
   );
 
+  --text-color-kumo-badge-orange-subtle: light-dark(
+    var(--color-orange-800, oklch(47% 0.157 37.304)),
+    var(--color-orange-200, oklch(90.1% 0.076 70.697))
+  );
+
+  --text-color-kumo-badge-teal-subtle: light-dark(
+    var(--color-teal-800, oklch(43.7% 0.078 188.216)),
+    var(--color-teal-200, oklch(91% 0.096 180.426))
+  );
+
+  --text-color-kumo-badge-neutral-subtle: light-dark(
+    var(--color-neutral-800, oklch(26.9% 0 0)),
+    var(--color-neutral-200, oklch(92.2% 0 0))
+  );
+
+  --text-color-kumo-badge-inverted: light-dark(
+    var(--color-white, #fff),
+    var(--color-black, #000)
+  );
+
 }
 
 @theme {
-  --color-kumo-surface: light-dark(
-    var(--color-kumo-neutral-25, oklch(99% 0 0)),
-    var(--color-kumo-neutral-975, oklch(8.5% 0 0))
+  --color-kumo-canvas: light-dark(
+    var(--color-kumo-neutral-25, oklch(98.75% 0 0)),
+    var(--color-kumo-neutral-1000, oklch(10% 0 0))
+  );
+
+  --color-kumo-elevated: light-dark(
+    var(--color-kumo-neutral-75, oklch(98% 0 0)),
+    var(--color-kumo-neutral-975, oklch(12% 0 0))
   );
 
   --color-kumo-recessed: light-dark(
-    var(--color-kumo-neutral-50, oklch(97.5% 0 0)),
-    var(--color-kumo-neutral-925, oklch(18% 0 0))
+    var(--color-kumo-neutral-125, oklch(96% 0 0)),
+    var(--color-kumo-neutral-950, oklch(15% 0 0))
   );
 
   --color-kumo-base: light-dark(
     var(--color-white, #fff),
-    var(--color-kumo-neutral-850, oklch(22.4% 0 0))
+    var(--color-kumo-neutral-925, oklch(17% 0 0))
   );
 
   --color-kumo-tint: light-dark(
-    var(--color-kumo-neutral-75, oklch(96.7% 0 0)),
+    var(--color-neutral-100, oklch(97% 0 0)),
     var(--color-kumo-neutral-800, oklch(26.9% 0 0))
   );
 
   --color-kumo-contrast: light-dark(
     var(--color-kumo-neutral-975, oklch(8.5% 0 0)),
-    var(--color-kumo-neutral-25, oklch(99% 0 0))
-  );
-
-  --color-kumo-elevated: light-dark(
-    var(--color-kumo-neutral-25, oklch(98.5% 0 0)),
-    var(--color-neutral-950, oklch(14.5% 0 0))
+    var(--color-kumo-neutral-25, oklch(98.5% 0 0))
   );
 
   --color-kumo-overlay: light-dark(
@@ -117,8 +142,8 @@
   );
 
   --color-kumo-fill-hover: light-dark(
-    var(--color-neutral-200, oklch(92.2% 0 0)),
-    var(--color-neutral-700, oklch(37.1% 0 0))
+    var(--color-kumo-neutral-125, oklch(96.5% 0 0)),
+    var(--color-neutral-800, oklch(37.1% 0 0))
   );
 
   --color-kumo-brand: light-dark(
@@ -136,11 +161,21 @@
     var(--color-neutral-800, oklch(26.9% 0 0))
   );
 
-  --color-kumo-ring: light-dark(
+  --color-kumo-hairline: light-dark(
     var(--color-kumo-neutral-150, oklch(93.5% 0 0)),
     var(--color-neutral-700, oklch(37.1% 0 0))
   );
 
+  --color-kumo-shadow-edge: light-dark(
+    oklch(0% 0 0 / 0.12),
+    oklch(100% 0 0 / 0.1)
+  );
+
+  --color-kumo-shadow-drop: light-dark(
+    oklch(0% 0 0 / 0.08),
+    oklch(0% 0 0 / 0.3)
+  );
+
   --color-kumo-tip-shadow: light-dark(
     var(--color-gray-200, oklch(92.8% 0.006 264.531)),
     transparent
@@ -151,46 +186,96 @@
     var(--color-neutral-800, oklch(26.9% 0 0))
   );
 
-  --color-kumo-info: light-dark(
-    var(--color-blue-500, oklch(62.3% 0.214 259.815)),
-    var(--color-blue-400, oklch(70.7% 0.165 254.624))
+  --color-kumo-info-tint: light-dark(
+    var(--color-blue-100, oklch(93.2% 0.032 255.585)),
+    var(--color-blue-900, oklch(37.9% 0.146 265.522))
   );
 
-  --color-kumo-info-tint: light-dark(
+  --color-kumo-info: light-dark(
     var(--color-blue-300, oklch(80.9% 0.105 251.813)),
     var(--color-blue-900, oklch(37.9% 0.146 265.522))
   );
 
-  --color-kumo-warning: light-dark(
-    var(--color-yellow-500, oklch(79.5% 0.184 86.047)),
+  --color-kumo-warning-tint: light-dark(
+    var(--color-yellow-100, oklch(97.3% 0.071 103.193)),
     var(--color-yellow-700, oklch(55.4% 0.135 66.442))
   );
 
-  --color-kumo-warning-tint: light-dark(
+  --color-kumo-warning: light-dark(
     var(--color-yellow-300, oklch(90.5% 0.182 98.111)),
     var(--color-yellow-900, oklch(42.1% 0.095 57.708))
   );
 
-  --color-kumo-danger: light-dark(
-    var(--color-red-500, oklch(63.7% 0.237 25.331)),
-    var(--color-red-700, oklch(50.5% 0.213 27.518))
-  );
-
   --color-kumo-danger-tint: light-dark(
-    var(--color-red-300, oklch(80.8% 0.114 19.571)),
+    var(--color-red-100, oklch(93.6% 0.032 17.717)),
     var(--color-red-900, oklch(39.6% 0.141 25.723))
   );
 
-  --color-kumo-success: light-dark(
-    var(--color-green-500, oklch(72.3% 0.219 149.579)),
-    var(--color-green-700, oklch(52.7% 0.154 150.069))
+  --color-kumo-danger: light-dark(
+    var(--color-red-500, oklch(63.7% 0.237 25.331)),
+    var(--color-red-900, oklch(39.6% 0.141 25.723))
   );
 
   --color-kumo-success-tint: light-dark(
+    var(--color-emerald-100, oklch(95% 0.052 163.051)),
+    var(--color-emerald-900, oklch(37.8% 0.077 168.94))
+  );
+
+  --color-kumo-success: light-dark(
     var(--color-green-300, oklch(87.1% 0.15 154.449)),
     var(--color-green-900, oklch(39.3% 0.095 152.535))
   );
 
+  --color-kumo-badge-red: light-dark(
+    var(--color-red-600, oklch(57.7% 0.245 27.325)),
+    var(--color-red-700, oklch(50.5% 0.213 27.518))
+  );
+
+  --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))
+  );
+
+  --color-kumo-badge-orange-subtle: light-dark(
+    var(--color-orange-100, oklch(95.4% 0.038 75.164)),
+    var(--color-orange-900, oklch(40.8% 0.123 38.172))
+  );
+
+  --color-kumo-badge-purple: light-dark(
+    var(--color-purple-600, oklch(60% 0.118 184.704)),
+    var(--color-purple-700, oklch(50.8% 0.118 165.612))
+  );
+
+  --color-kumo-badge-green: light-dark(
+    var(--color-emerald-700, oklch(50.8% 0.118 165.612)),
+    var(--color-emerald-700, oklch(50.8% 0.118 165.612))
+  );
+
+  --color-kumo-badge-teal: light-dark(
+    var(--color-teal-650, oklch(54.9% 0.096 184.565)),
+    var(--color-teal-700, oklch(51.1% 0.096 186.391))
+  );
+
+  --color-kumo-badge-teal-subtle: light-dark(
+    var(--color-teal-100, oklch(95.3% 0.051 180.801)),
+    var(--color-teal-900, oklch(38.6% 0.063 188.416))
+  );
+
+  --color-kumo-badge-blue: light-dark(
+    var(--color-blue-600, oklch(54.6% 0.245 262.881)),
+    var(--color-blue-700, oklch(48.8% 0.243 264.376))
+  );
+
+  --color-kumo-badge-neutral: light-dark(
+    var(--color-neutral-600, oklch(43.9% 0 0)),
+    var(--color-neutral-600, oklch(43.9% 0 0))
+  );
+
+  --color-kumo-badge-inverted: light-dark(
+    var(--color-neutral-950, oklch(14.5% 0 0)),
+    var(--color-white, #fff)
+  );
+
 }
 
 @theme {
@@ -215,34 +300,51 @@
     --text-color-kumo-placeholder: var(--color-neutral-400, oklch(70.8% 0 0));
     --text-color-kumo-brand: #f6821f;
     --text-color-kumo-link: var(--color-blue-800, oklch(42.4% 0.199 265.638));
-    --text-color-kumo-success: var(--color-green-500, oklch(72.3% 0.219 149.579));
-    --text-color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
+    --text-color-kumo-info: var(--color-blue-800, oklch(42.4% 0.199 265.638));
+    --text-color-kumo-success: var(--color-emerald-800, oklch(43.2% 0.095 166.913));
+    --text-color-kumo-danger: var(--color-red-700, oklch(50.5% 0.213 27.518));
     --text-color-kumo-warning: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
-    --color-kumo-surface: var(--color-kumo-neutral-25, oklch(99% 0 0));
-    --color-kumo-recessed: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-800, oklch(47% 0.157 37.304));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-800, oklch(43.7% 0.078 188.216));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-800, oklch(26.9% 0 0));
+    --text-color-kumo-badge-inverted: var(--color-white, #fff);
+    --color-kumo-canvas: var(--color-kumo-neutral-25, oklch(98.75% 0 0));
+    --color-kumo-elevated: var(--color-kumo-neutral-75, oklch(98% 0 0));
+    --color-kumo-recessed: var(--color-kumo-neutral-125, oklch(96% 0 0));
     --color-kumo-base: var(--color-white, #fff);
-    --color-kumo-tint: var(--color-kumo-neutral-75, oklch(96.7% 0 0));
+    --color-kumo-tint: var(--color-neutral-100, oklch(97% 0 0));
     --color-kumo-contrast: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
-    --color-kumo-elevated: var(--color-kumo-neutral-25, oklch(98.5% 0 0));
     --color-kumo-overlay: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
     --color-kumo-control: var(--color-white, #fff);
     --color-kumo-interact: var(--color-neutral-300, oklch(87% 0 0));
     --color-kumo-fill: var(--color-neutral-200, oklch(92.2% 0 0));
-    --color-kumo-fill-hover: var(--color-neutral-200, oklch(92.2% 0 0));
+    --color-kumo-fill-hover: var(--color-kumo-neutral-125, oklch(96.5% 0 0));
     --color-kumo-brand: oklch(0.5772 0.2324 260);
     --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
     --color-kumo-line: oklch(14.5% 0 0 / 0.1);
-    --color-kumo-ring: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
+    --color-kumo-hairline: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
+    --color-kumo-shadow-edge: oklch(0% 0 0 / 0.12);
+    --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08);
     --color-kumo-tip-shadow: var(--color-gray-200, oklch(92.8% 0.006 264.531));
     --color-kumo-tip-stroke: transparent;
-    --color-kumo-info: var(--color-blue-500, oklch(62.3% 0.214 259.815));
-    --color-kumo-info-tint: var(--color-blue-300, oklch(80.9% 0.105 251.813));
-    --color-kumo-warning: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
-    --color-kumo-warning-tint: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
+    --color-kumo-info-tint: var(--color-blue-100, oklch(93.2% 0.032 255.585));
+    --color-kumo-info: var(--color-blue-300, oklch(80.9% 0.105 251.813));
+    --color-kumo-warning-tint: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
+    --color-kumo-warning: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
+    --color-kumo-danger-tint: var(--color-red-100, oklch(93.6% 0.032 17.717));
     --color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
-    --color-kumo-danger-tint: var(--color-red-300, oklch(80.8% 0.114 19.571));
-    --color-kumo-success: var(--color-green-500, oklch(72.3% 0.219 149.579));
-    --color-kumo-success-tint: var(--color-green-300, oklch(87.1% 0.15 154.449));
+    --color-kumo-success-tint: var(--color-emerald-100, oklch(95% 0.052 163.051));
+    --color-kumo-success: var(--color-green-300, oklch(87.1% 0.15 154.449));
+    --color-kumo-badge-red: var(--color-red-600, oklch(57.7% 0.245 27.325));
+    --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
+    --color-kumo-badge-orange-subtle: var(--color-orange-100, oklch(95.4% 0.038 75.164));
+    --color-kumo-badge-purple: var(--color-purple-600, oklch(60% 0.118 184.704));
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565));
+    --color-kumo-badge-teal-subtle: var(--color-teal-100, oklch(95.3% 0.051 180.801));
+    --color-kumo-badge-blue: var(--color-blue-600, oklch(54.6% 0.245 262.881));
+    --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
+    --color-kumo-badge-inverted: var(--color-neutral-950, oklch(14.5% 0 0));
   }
   
   :root[data-mode="dark"], [data-mode="dark"]:not([data-theme]), [data-mode="dark"] [data-theme="kumo"], [data-theme="kumo"][data-mode="dark"], [data-theme="kumo"] [data-mode="dark"] {
@@ -254,33 +356,50 @@
     --text-color-kumo-placeholder: var(--color-neutral-500, oklch(55.6% 0 0));
     --text-color-kumo-brand: #f6821f;
     --text-color-kumo-link: var(--color-blue-400, oklch(70.7% 0.165 254.624));
-    --text-color-kumo-success: var(--color-green-400, oklch(79.2% 0.209 151.711));
+    --text-color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));
+    --text-color-kumo-success: var(--color-emerald-200, oklch(90.5% 0.093 164.15));
     --text-color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
     --text-color-kumo-warning: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
-    --color-kumo-surface: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
-    --color-kumo-recessed: var(--color-kumo-neutral-925, oklch(18% 0 0));
-    --color-kumo-base: var(--color-kumo-neutral-850, oklch(22.4% 0 0));
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-200, oklch(90.1% 0.076 70.697));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-200, oklch(91% 0.096 180.426));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-200, oklch(92.2% 0 0));
+    --text-color-kumo-badge-inverted: var(--color-black, #000);
+    --color-kumo-canvas: var(--color-kumo-neutral-1000, oklch(10% 0 0));
+    --color-kumo-elevated: var(--color-kumo-neutral-975, oklch(12% 0 0));
+    --color-kumo-recessed: var(--color-kumo-neutral-950, oklch(15% 0 0));
+    --color-kumo-base: var(--color-kumo-neutral-925, oklch(17% 0 0));
     --color-kumo-tint: var(--color-kumo-neutral-800, oklch(26.9% 0 0));
-    --color-kumo-contrast: var(--color-kumo-neutral-25, oklch(99% 0 0));
-    --color-kumo-elevated: var(--color-neutral-950, oklch(14.5% 0 0));
+    --color-kumo-contrast: var(--color-kumo-neutral-25, oklch(98.5% 0 0));
     --color-kumo-overlay: var(--color-neutral-800, oklch(26.9% 0 0));
     --color-kumo-control: var(--color-neutral-900, oklch(21% 0.006 285.885));
     --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-700, oklch(37.1% 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-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
     --color-kumo-line: var(--color-neutral-800, oklch(26.9% 0 0));
-    --color-kumo-ring: var(--color-neutral-700, oklch(37.1% 0 0));
+    --color-kumo-hairline: var(--color-neutral-700, oklch(37.1% 0 0));
+    --color-kumo-shadow-edge: oklch(100% 0 0 / 0.1);
+    --color-kumo-shadow-drop: oklch(0% 0 0 / 0.3);
     --color-kumo-tip-shadow: transparent;
     --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
-    --color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));
     --color-kumo-info-tint: var(--color-blue-900, oklch(37.9% 0.146 265.522));
-    --color-kumo-warning: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
-    --color-kumo-warning-tint: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
-    --color-kumo-danger: var(--color-red-700, oklch(50.5% 0.213 27.518));
+    --color-kumo-info: var(--color-blue-900, oklch(37.9% 0.146 265.522));
+    --color-kumo-warning-tint: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
+    --color-kumo-warning: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
     --color-kumo-danger-tint: var(--color-red-900, oklch(39.6% 0.141 25.723));
-    --color-kumo-success: var(--color-green-700, oklch(52.7% 0.154 150.069));
-    --color-kumo-success-tint: var(--color-green-900, oklch(39.3% 0.095 152.535));
+    --color-kumo-danger: var(--color-red-900, oklch(39.6% 0.141 25.723));
+    --color-kumo-success-tint: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
+    --color-kumo-success: var(--color-green-900, oklch(39.3% 0.095 152.535));
+    --color-kumo-badge-red: var(--color-red-700, oklch(50.5% 0.213 27.518));
+    --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
+    --color-kumo-badge-orange-subtle: var(--color-orange-900, oklch(40.8% 0.123 38.172));
+    --color-kumo-badge-purple: var(--color-purple-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
+    --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391));
+    --color-kumo-badge-teal-subtle: var(--color-teal-900, oklch(38.6% 0.063 188.416));
+    --color-kumo-badge-blue: var(--color-blue-700, oklch(48.8% 0.243 264.376));
+    --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
+    --color-kumo-badge-inverted: var(--color-white, #fff);
   }
 }

package/dist/utils.js

@@ -1,10 +1,12 @@
 "use client";
-import { c as s, s as n } from "./chunks/cn-ct4n7r74mh8y0f48.js";
-import { L as r, u as i } from "./chunks/link-provider-mn2voeohon7cj9o4.js";
+import { c as e, s } from "./chunks/cn-ct4n7r74mh8y0f48.js";
+import { L as n, u as m } from "./chunks/link-provider-mn2voeohon7cj9o4.js";
+import { K as i } from "./chunks/portal-provider-hwmkdmkpvct0cb76.js";
 export {
-  r as LinkProvider,
-  s as cn,
-  n as safeRandomId,
-  i as useLinkComponent
+  i as KumoPortalProvider,
+  n as LinkProvider,
+  e as cn,
+  s as safeRandomId,
+  m as useLinkComponent
 };
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",
@@ -446,7 +446,7 @@
     "esbuild": "0.27.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "glob": "13.0.0",
-    "happy-dom": "^20.0.2",
+    "happy-dom": "^20.8.8",
     "oxlint": "1.42.0",
     "oxlint-tsgolint": "0.11.3",
     "playwright": "^1.57.0",

package/scripts/component-registry/index.test.ts

@@ -216,18 +216,18 @@ describe("extractStateClasses", () => {
   });
 
   it("extracts focus state", () => {
-    const classes = "ring-kumo-line focus:ring-kumo-ring";
+    const classes = "ring-kumo-line focus:ring-kumo-hairline";
     expect(extractStateClasses(classes)).toEqual({
-      focus: "focus:ring-kumo-ring",
+      focus: "focus:ring-kumo-hairline",
     });
   });
 
   it("extracts multiple states", () => {
     const classes =
-      "bg-kumo-base hover:bg-kumo-elevated focus:ring-kumo-ring disabled:opacity-50";
+      "bg-kumo-base hover:bg-kumo-elevated focus:ring-kumo-hairline disabled:opacity-50";
     expect(extractStateClasses(classes)).toEqual({
       hover: "hover:bg-kumo-elevated",
-      focus: "focus:ring-kumo-ring",
+      focus: "focus:ring-kumo-hairline",
       disabled: "disabled:opacity-50",
     });
   });

package/scripts/component-registry/metadata.ts

@@ -300,8 +300,8 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
       checked: ["bg-kumo-contrast", "text-kumo-inverse"],
       indeterminate: ["bg-kumo-contrast", "text-kumo-inverse"],
       error: ["ring-kumo-danger"],
-      hover: ["ring-kumo-ring"],
-      focus: ["ring-kumo-ring"],
+      hover: ["ring-kumo-hairline"],
+      focus: ["ring-kumo-hairline"],
       disabled: ["opacity-50", "cursor-not-allowed"],
     },
     icons: [
@@ -444,7 +444,7 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     },
     states: {
       base: ["bg-kumo-control", "text-kumo-default", "ring-kumo-line"],
-      focus: ["ring-kumo-ring"],
+      focus: ["ring-kumo-hairline"],
       error: ["ring-kumo-danger"],
       disabled: ["opacity-50", "text-kumo-subtle"],
     },