fix(focus-states): update cut-off focus states (#439)

Author: najlaskr

.changeset/command-palette-input-group-focus-ring.md

@@ -0,0 +1,13 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Improve focus ring consistency and clipping behavior across inputs and related controls.
+
+- Move the command palette focus ring to the input header container with `focus-within` and remove duplicate input-level ring styles.
+- Update `Select` trigger and option focus styles to use inset focus rings to prevent clipping in rounded/overflow contexts.
+- Fix clipboard copy button focus ring clipping by using inset focus-visible ring, matching border-radius inheritance, and isolated stacking.
+- Align `InputGroup` and `InputGroup.Button` focus ring color to `ring-kumo-focus`, including hybrid container-zone focus ring classes.
+- Update InputGroup tests to match inline focus ring class changes.
+- Set DatePicker (`react-day-picker`) focus ring token to `var(--color-kumo-brand)`.
+- Update InputGroup container and hybrid keyboard outlines in `kumo-binding.css` to use `var(--color-kumo-focus)` at 1px weight.

packages/kumo/src/components/clipboard-text/clipboard-text.tsx

@@ -249,7 +249,11 @@ export const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(
         ref={buttonRef}
         size={sizeConfig.buttonSize}
         variant="ghost"
-        className="rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand"
+        className={cn(
+          "rounded-l-none rounded-r-[inherit] border-l! border-kumo-line! px-3 relative isolate overflow-hidden transition-all duration-200",
+          "focus:ring-inset focus:ring-kumo-focus/50",
+          "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand",
+        )}
         onClick={copyToClipboard}
         aria-label={copyAction}
       >

packages/kumo/src/components/command-palette/command-palette.tsx

@@ -251,7 +251,7 @@ function InputHeader({
   trailing?: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center gap-3 bg-kumo-base px-4 py-3">
+    <div className="flex items-center gap-3 bg-kumo-base px-4 py-3 focus-within:ring-2 focus-within:ring-kumo-brand">
       {leading ?? (
         <MagnifyingGlassIcon
           className="h-4 w-4 text-kumo-subtle"
@@ -767,7 +767,7 @@ function PanelInput({
         placeholder={placeholder}
         className={cn(
           "flex-1 border-none bg-transparent text-base kumo-input-placeholder",
-          "outline-none focus:ring-kumo-focus/50 focus:ring-[1.5px]",
+          "outline-none",
           className,
         )}
         onKeyDown={handleKeyDown}

packages/kumo/src/components/input-group/input-group-button.tsx

@@ -162,7 +162,7 @@ export const Button = forwardRef<
             // Focused element renders above hovered siblings for focus indicator
             "focus:z-[2] focus:border-kumo-line focus:outline focus:-outline-offset-1",
             // Suppress the base Button's focus ring so only our outline shows
-            "focus-visible:ring-0 focus-visible:shadow-none",
+            "focus-visible:ring-2 focus-visible:ring-kumo-focus",
             // Match the group's disabled visual treatment
             "disabled:bg-kumo-overlay disabled:text-kumo-inactive!",
           ],

packages/kumo/src/components/input-group/input-group.test.tsx

@@ -1170,7 +1170,7 @@ describe("InputGroup", () => {
       expect(group.className).toContain("overflow-visible");
       expect(group.className).toContain("ring-0");
       expect(group.className).not.toContain("overflow-hidden");
-      expect(group.className).not.toContain("focus-within:ring-kumo-line");
+      expect(group.className).not.toContain("focus-within:ring-kumo-focus");
     });
 
     it("container mode gets shared focus ring classes", () => {
@@ -1184,7 +1184,7 @@ describe("InputGroup", () => {
         "[data-slot='input-group']",
       ) as HTMLElement;
       expect(group.className).toContain("overflow-hidden");
-      expect(group.className).toContain("focus-within:ring-kumo-line");
+      expect(group.className).toContain("focus-within:ring-kumo-focus");
       expect(group.className).not.toContain("overflow-visible");
     });
 
@@ -1206,7 +1206,7 @@ describe("InputGroup", () => {
       expect(group.className).toContain("overflow-visible");
       expect(group.className).toContain("ring-0");
       expect(group.className).not.toContain("overflow-hidden");
-      expect(group.className).not.toContain("focus-within:ring-kumo-line");
+      expect(group.className).not.toContain("focus-within:ring-kumo-focus");
     });
   });
 
@@ -1305,6 +1305,8 @@ describe("InputGroup", () => {
       expect(containerZone.className).toContain("border-kumo-line");
       expect(containerZone.className).toContain("ring-0");
       expect(containerZone.className).toContain("shadow-none");
+      expect(containerZone.className).toContain("focus-within:ring-1");
+      expect(containerZone.className).toContain("focus-within:ring-kumo-focus");
       // Double-border prevention with adjacent individual-mode buttons
       expect(containerZone.className).toContain("not-first:border-l-0");
       // No focus-within ring — CSS outline in kumo-binding.css handles focus

packages/kumo/src/components/input-group/input-group.tsx

@@ -134,8 +134,7 @@ const Root = forwardRef<
         ? [
             "overflow-hidden",
             // Focus state must come AFTER inputVariants to override ring-kumo-line
-            "focus-within:ring-kumo-line",
-            // The CSS in kumo-binding.css handles the native outline
+            "focus-within:ring-kumo-focus",
           ]
         : // isolate creates a new stacking context so z-index in children doesn't leak out
           "isolate overflow-visible ring-0 shadow-none",
@@ -200,6 +199,7 @@ const Root = forwardRef<
                 // so the zone matches adjacent individual-mode buttons exactly.
                 "ring-0 shadow-none",
                 "border border-kumo-line",
+                "focus-within:ring-1 focus-within:ring-kumo-focus",
                 // Collapse double borders between zone and adjacent individual-mode button
                 "not-first:border-l-0",
                 // Inherit border-radius from the outer container on outer edges only;

packages/kumo/src/components/select/select.tsx

@@ -80,7 +80,7 @@ export function selectVariants({
   return cn(
     buttonVariants({ size }),
     "justify-between font-normal",
-    "focus:opacity-100 focus:ring-kumo-focus/50 *:in-focus:opacity-100",
+    "focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100",
   );
 }
 
@@ -546,7 +546,9 @@ function Option<T>({ children, value, disabled, className }: OptionProps<T>) {
       value={value}
       disabled={disabled}
       className={cn(
-        "group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand data-highlighted:bg-kumo-tint",
+        "group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none",
+        "focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset",
+        "data-highlighted:bg-kumo-tint",
         "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         className,
       )}

packages/kumo/src/styles/kumo-binding.css

@@ -232,8 +232,8 @@
    Uses vanilla CSS because Tailwind focus-visible: targets the focused element itself,
    but we need :has(:focus-visible) to outline the container when a descendant is focused. */
 [data-slot="input-group"][data-focus-mode="container"]:has(:focus-visible) {
-  /* 2px solid matches the browser's default focus ring weight */
-  outline: solid 2px -webkit-focus-ring-color;
+  /* 1px solid matches the browser's default focus ring weight */
+  outline: solid 1px var(--color-kumo-focus);
 }
 
 /* InputGroup hybrid mode — keyboard outline for the container zone wrapper.
@@ -242,6 +242,6 @@
 [data-slot="input-group-container-zone"]:has(:focus-visible) {
   /* 1px to match the individual-mode outline weight (thinner than container's 2px
      because the zone is nested — a thick outline would overwhelm sibling buttons) */
-  outline: solid 1px -webkit-focus-ring-color;
+  outline: solid 1px var(--color-kumo-focus);
   outline-offset: -1px;
 }

packages/kumo/src/styles/kumo.css

@@ -104,7 +104,7 @@
   --rdp-nav-border: oklch(14.5% 0 0 / 0.1);
   --rdp-hover-bg: oklch(90% 0 0);
   --rdp-fill-hover-bg: oklch(87% 0 0);
-  --rdp-focus-ring: oklch(75% 0 0);
+  --rdp-focus-ring: var(--color-kumo-brand);
 
   position: relative;
   box-sizing: border-box;
@@ -127,7 +127,7 @@
   --rdp-nav-border: oklch(26.9% 0 0);
   --rdp-hover-bg: oklch(20% 0 0);
   --rdp-fill-hover-bg: oklch(25% 0 0);
-  --rdp-focus-ring: oklch(45% 0 0);
+  --rdp-focus-ring: var(--color-kumo-brand);
 }
 
 .rdp-root[dir="rtl"] {