fix: align InputGroup focus ring with standalone Input (#531)

Author: pedromenezes1

.changeset/fix-input-group-focus-ring.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix InputGroup focus ring thickness and color: container mode uses 1.5px ring (wraps entire group including buttons), hybrid container zone and individual mode use 1px ring (thin to avoid colliding with adjacent buttons), and all modes use `ring-kumo-focus/50` (50% opacity) to match the standalone Input component.

packages/kumo-docs-astro/src/components/demos/InputGroupDemo.tsx

@@ -104,6 +104,7 @@ export function InputGroupButtonsDemo() {
         />
         <InputGroup.Addon align="end">
           <InputGroup.Button
+            shape="square"
             className="text-kumo-subtle"
             icon={show ? EyeSlashIcon : EyeIcon}
             aria-label={show ? "Hide password" : "Show password"}
@@ -125,11 +126,11 @@ export function InputGroupButtonsDemo() {
         {searchValue && (
           <InputGroup.Addon align="end" className="pr-1">
             <InputGroup.Button
+              shape="square"
+              icon={XIcon}
               aria-label="Clear search"
               onClick={() => setSearchValue("")}
-            >
-              <XIcon />
-            </InputGroup.Button>
+            />
           </InputGroup.Addon>
         )}
         <InputGroup.Button variant="secondary" onClick={() => {}}>
@@ -152,8 +153,10 @@ export function InputGroupTooltipButtonDemo() {
       />
       <InputGroup.Addon align="end">
         <InputGroup.Button
+          shape="square"
           className="text-kumo-subtle"
           icon={QuestionIcon}
+          aria-label="Query language help"
           tooltip="Query language help"
           onClick={() => {}}
         />
@@ -322,6 +325,7 @@ export function InputGroupStatesDemo() {
         />
         <InputGroup.Addon align="end">
           <InputGroup.Button
+            shape="square"
             className="text-kumo-subtle"
             icon={show ? EyeSlashIcon : EyeIcon}
             aria-label={show ? "Hide password" : "Show password"}

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

@@ -149,21 +149,24 @@ export const Button = forwardRef<
         className={cn(
           // Ensure clicks register even when parent has pointer-events-none (e.g. disabled overlay)
           "pointer-events-auto",
+          // Suppress the base Button's non-visible focus ring in all modes
+          "focus:ring-0",
+          // Container-zone buttons: use a subtle ring as focus indicator
+          // (outline doesn't work because the base Button's `focus:outline-none`
+          // sets `outline-style: none` which our outline-width/color can't override)
+          !isIndividual &&
+            "focus-visible:ring-[1.5px] focus-visible:ring-kumo-focus/50",
           // Individual mode: each button owns its own border and focus indicator
           isIndividual && [
             // Own border replaces the container's shared ring; force full height
-            "relative h-full! rounded-none ring-0 border border-kumo-line",
-            // Inherit border-radius only on outer edges; inner edges are flat
+            "relative h-full! rounded-none ring-0 focus-visible:ring-0 border border-kumo-line",
             "first:rounded-l-[inherit] last:rounded-r-[inherit]",
-            // Collapse double borders between adjacent elements
-            "not-first:border-l-0",
-            // Hovered element renders above idle siblings to show full border
-            "hover:z-[1]",
-            // 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-2 focus-visible:ring-kumo-focus",
-            // Match the group's disabled visual treatment
+            // Negative margin (not border-l-0) so the border is still paintable on focus
+            "not-first:-ml-px",
+            "hover:z-1",
+            // z-2 lifts above hovered siblings so focus border isn't clipped
+            "focus:z-2",
+            "focus-visible:border-kumo-focus/50",
             "disabled:bg-kumo-overlay disabled:text-kumo-inactive!",
           ],
           className,

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

@@ -63,28 +63,24 @@ export const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(
         className={cn(
           // Base input layout: fill height, allow shrinking, strip native border/radius
           "flex h-full min-w-0 grow items-center rounded-none border-0 bg-transparent font-sans",
-          // Always use full outer padding — the container's has-[] rules reduce
-          // pl/pr to inputSeam on sides that touch an addon.
+          // Always use full outer padding — the container's has-[] rules reduce pl/pr to inputSeam on sides that touch an addon.
           tokens.inputOuter,
           // Truncate overflowing text with "…" instead of expanding the input
           "text-ellipsis",
           // Individual mode: each element owns its own border instead of sharing a container ring
           isIndividual
             ? [
-                // Own border replaces the container's shared ring
-                "relative ring-0 border border-kumo-line",
-                // Inherit border-radius only on outer edges; inner edges are flat
+                // Own border replaces the container's shared ring; suppress the base Input's focus:ring so only the border-swap shows
+                "relative ring-0 focus:ring-0 border border-kumo-line",
                 "first:rounded-l-[inherit] last:rounded-r-[inherit]",
-                // Collapse double borders between adjacent elements
-                "not-first:border-l-0",
-                // Hovered element renders above idle siblings to show full border
-                "hover:z-[1] hover:border-kumo-line",
-                // Focused element renders above hovered siblings for focus indicator
-                "focus:z-[2] focus:border-kumo-line focus:outline focus:-outline-offset-1",
+                // Negative margin (not border-l-0) so the border is still paintable on focus
+                "not-first:-ml-px",
+                "hover:z-1 hover:border-kumo-line",
+                // z-[2] lifts above hovered siblings so focus border isn't clipped
+                "focus:z-2 focus:border-kumo-focus/50",
               ].join(" ")
-            : // Container mode: kill all focus indicators — the container handles them
-              // z-[1] lifts the input above the invisible label overlay so cursor/selection work
-              "relative z-[1] ring-0! shadow-none outline-none focus:ring-0! focus:outline-none",
+            : // Container mode: kill all focus indicators — the container handles them z-1 lifts the input above the invisible label overlay so cursor/selection work
+              "relative z-1 ring-0! shadow-none outline-none focus:ring-0! focus:outline-none",
           props.className,
         )}
       />

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

@@ -1217,7 +1217,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-focus");
+      expect(group.className).not.toContain("focus-within:ring-kumo-focus/50");
     });
 
     it("container mode gets shared focus ring classes", () => {
@@ -1231,7 +1231,8 @@ describe("InputGroup", () => {
         "[data-slot='input-group']",
       ) as HTMLElement;
       expect(group.className).toContain("overflow-hidden");
-      expect(group.className).toContain("focus-within:ring-kumo-focus");
+      expect(group.className).toContain("focus-within:ring-kumo-focus/50");
+      expect(group.className).toContain("focus-within:ring-[1.5px]");
       expect(group.className).not.toContain("overflow-visible");
     });
 
@@ -1253,7 +1254,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-focus");
+      expect(group.className).not.toContain("focus-within:ring-kumo-focus/50");
     });
   });
 
@@ -1352,14 +1353,65 @@ 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
-      expect(containerZone.className).not.toContain(
-        "focus-within:ring-kumo-line",
+      // Focus swaps border color instead of adding a ring (no double-line effect)
+      expect(containerZone.className).toContain(
+        "focus-within:border-kumo-focus/50",
       );
+      expect(containerZone.className).not.toContain("focus-within:ring-1");
+      // Double-border prevention with adjacent individual-mode buttons (negative margin preserves border for focus)
+      expect(containerZone.className).toContain("not-first:-ml-px");
+    });
+
+    it("clear button inside addon works in hybrid mode", async () => {
+      const user = userEvent.setup();
+
+      function SearchDemo() {
+        const [searchValue, setSearchValue] = React.useState("search");
+        return (
+          <InputGroup>
+            <InputGroup.Addon>icon</InputGroup.Addon>
+            <InputGroup.Input
+              value={searchValue}
+              placeholder="Search"
+              aria-label="Search"
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+            {searchValue && (
+              <InputGroup.Addon align="end">
+                <InputGroup.Button
+                  shape="square"
+                  aria-label="Clear search"
+                  onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
+                  onClick={() => setSearchValue("")}
+                >
+                  X
+                </InputGroup.Button>
+              </InputGroup.Addon>
+            )}
+            <InputGroup.Button variant="secondary" onClick={() => {}}>
+              Search
+            </InputGroup.Button>
+          </InputGroup>
+        );
+      }
+
+      render(<SearchDemo />);
+
+      // Verify initial state
+      const input = screen.getByRole("textbox", {
+        name: "Search",
+      }) as HTMLInputElement;
+      expect(input.value).toBe("search");
+      expect(screen.getByRole("button", { name: "Clear search" })).toBeTruthy();
+
+      // Click the clear button
+      await user.click(screen.getByRole("button", { name: "Clear search" }));
+
+      // Value should be cleared
+      expect(input.value).toBe("");
+
+      // Clear button should be gone (conditional rendering)
+      expect(screen.queryByRole("button", { name: "Clear search" })).toBeNull();
     });
   });
 });

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

@@ -133,7 +133,7 @@ const Root = forwardRef<
         ? [
             "overflow-hidden",
             // Focus state must come AFTER inputVariants to override ring-kumo-line
-            "focus-within:ring-kumo-focus",
+            "focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]",
           ]
         : // isolate creates a new stacking context so z-index in children doesn't leak out
           "isolate overflow-visible ring-0 shadow-none",
@@ -200,29 +200,30 @@ 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;
-                // inner edges are flat so they butt cleanly against sibling buttons
+                "focus-within:border-kumo-focus/50",
+                // z-[2] lifts above adjacent button's -ml-px overlap so focus border shows
+                "focus-within:z-2",
+                // Negative margin (not border-l-0) so the border is still paintable on focus
+                "not-first:-ml-px",
+                // Outer edges inherit radius; inner edges are flat against sibling buttons
                 "first:rounded-l-[inherit] last:rounded-r-[inherit] rounded-none",
                 // Size-specific padding adjustments when addons or suffixes are present
                 INPUT_GROUP_HAS_CLASSES[size],
                 // When a suffix is present, let the input shrink to its content width
-                "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]",
-                "has-[[data-slot=input-group-suffix]]:[&_input]:max-w-full",
-                "has-[[data-slot=input-group-suffix]]:[&_input]:grow-0",
-                "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0",
+                "has-data-[slot=input-group-suffix]:[&_input]:field-sizing-content",
+                "has-data-[slot=input-group-suffix]:[&_input]:max-w-full",
+                "has-data-[slot=input-group-suffix]:[&_input]:grow-0",
+                "has-data-[slot=input-group-suffix]:[&_input]:pr-0",
               )}
             >
-              {/* When label exists, an invisible <label> overlay enables click-to-focus
-                  inside the container zone without nesting visible <label> elements */}
+              {/* When label exists, an invisible <label> overlay enables click-to-focus inside the container zone without nesting visible <label> elements */}
               {label && (
-                // eslint-disable-next-line jsx-a11y/label-has-associated-control -- invisible overlay for click-to-focus; the visible Field label handles a11y
+                // Invisible overlay for click-to-focus; the visible Field label handles a11y
+                // eslint-disable-next-line jsx-a11y/label-has-associated-control
                 <label
                   htmlFor={inputId}
                   // Positioned behind children (z-0) so it catches clicks on empty space
-                  className="absolute inset-0 z-0 cursor-text !mb-0"
+                  className="absolute inset-0 z-0 cursor-text mb-0!"
                   aria-hidden="true"
                 />
               )}
@@ -234,9 +235,7 @@ const Root = forwardRef<
         </>
       );
 
-      // Hybrid always uses a <div> container (never <label>) because
-      // individual-zone buttons are siblings — wrapping them in a <label>
-      // would be semantically incorrect.
+      // Hybrid always uses a <div> container (never <label>) because individual-zone buttons are siblings — wrapping them in a <label> would be semantically incorrect.
       const hybridContainer = (
         <InputGroupContext.Provider value={contextValue}>
           <div
@@ -272,8 +271,7 @@ const Root = forwardRef<
     const useLabelContainer = !label && focusMode === "container";
     const container = (
       <InputGroupContext.Provider value={contextValue}>
-        {/* When label is set, use <div> to avoid nested <label> (Field provides one).
-            An invisible <label> overlay handles click-to-focus on empty space. */}
+        {/* When label is set, use <div> to avoid nested <label> (Field provides one). An invisible <label> overlay handles click-to-focus on empty space. */}
         {label ? (
           <div
             ref={forwardedRef as React.Ref<HTMLDivElement>}
@@ -285,7 +283,7 @@ const Root = forwardRef<
             <label
               htmlFor={inputId}
               // Positioned behind children (z-0) so it catches clicks on empty space
-              className="absolute inset-0 z-0 !mb-0"
+              className="absolute inset-0 z-0 mb-0!"
               aria-hidden="true"
             />
             {children}
@@ -295,7 +293,7 @@ const Root = forwardRef<
           <label
             ref={forwardedRef as React.Ref<HTMLLabelElement>}
             {...dataProps}
-            className={cn(containerClassName, "!mb-0")}
+            className={cn(containerClassName, "mb-0!")}
             {...rest}
           >
             {children}

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

@@ -292,21 +292,3 @@
 .kumo-input-placeholder::placeholder {
   color: var(--text-color-kumo-placeholder);
 }
-
-/* InputGroup container mode — native browser outline on keyboard focus.
-   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) {
-  /* 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.
-   Uses outline-offset: -1px to sit on top of the 1px border (same as individual mode)
-   so there's no double visual indicator between the outline and the border. */
-[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 var(--color-kumo-focus);
-  outline-offset: -1px;
-}