From bc7d14a09a8c717a0b0e81e0d3a4643fb5dea428 Mon Sep 17 00:00:00 2001
From: Boram Yi <byi@tetrascience.com>
Date: Thu, 18 Jun 2026 13:10:33 -0400
Subject: [PATCH 1/2] fix: align combobox with select and correct keyboard
 focus indicators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Combobox single field now matches the Select trigger: h-10 (40px) +
  bg-card, and items use gap-1.5 — the two controls were visually
  inconsistent in height and background.
- Combobox chips: bg-card background + keyboard-only focus indicator
  (has-[chip-input:focus-visible] instead of focus-within, which fired on
  mouse click too).
- Slider thumb: focus shadow scoped to :focus-visible only (was also
  showing on hover and active drag).
- Accordion trigger: removed the orphan focus-visible:after:border-ring
  (no ::after geometry — a dead no-op).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/accordion.tsx | 2 +-
 src/components/ui/combobox.tsx  | 6 +++---
 src/components/ui/slider.tsx    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 786e2290..da3c7a99 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -41,7 +41,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:shadow-focus focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
index b01db045..87f9bdff 100644
--- a/src/components/ui/combobox.tsx
+++ b/src/components/ui/combobox.tsx
@@ -62,7 +62,7 @@ function ComboboxInput({
   showClear?: boolean
 }) {
   return (
-    <InputGroup className={cn("w-auto", className)}>
+    <InputGroup className={cn("h-10 w-auto bg-card", className)}>
       <ComboboxPrimitive.Input
         render={<InputGroupInput disabled={disabled} />}
         {...props}
@@ -143,7 +143,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -224,7 +224,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "group/chips flex min-h-12 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent bg-clip-padding px-4 py-1 text-sm transition-colors focus-within:border-ring focus-within:shadow-focus has-aria-invalid:border-destructive has-aria-invalid:shadow-focus has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50",
+        "group/chips flex min-h-12 flex-wrap items-center gap-1 rounded-md border border-input bg-card bg-clip-padding px-4 py-1 text-sm transition-colors has-[[data-slot=combobox-chip-input]:focus-visible]:border-ring has-[[data-slot=combobox-chip-input]:focus-visible]:shadow-focus has-aria-invalid:border-destructive has-aria-invalid:shadow-focus has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50",
         className
       )}
       {...props}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 2da8e574..71a047e2 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -47,7 +47,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:shadow-focus focus-visible:shadow-focus focus-visible:outline-hidden active:shadow-focus disabled:pointer-events-none disabled:opacity-50"
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 focus-visible:shadow-focus focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>

From 78ef7e7cc997cf3ac55db37a3ad118cb94253f9f Mon Sep 17 00:00:00 2001
From: Boram Yi <byi@tetrascience.com>
Date: Thu, 18 Jun 2026 13:46:11 -0400
Subject: [PATCH 2/2] fix: normalize combobox and select to the 32px field
 height

Brings Select (default 40px -> 32px; sm -> 28px) and Combobox (was 40px)
down to the standard 32px field height shared by Input, Input Group,
Button, and Toggle. Combobox now inherits the InputGroup base height
rather than overriding it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/combobox.tsx | 2 +-
 src/components/ui/select.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
index 87f9bdff..6ccb50e4 100644
--- a/src/components/ui/combobox.tsx
+++ b/src/components/ui/combobox.tsx
@@ -62,7 +62,7 @@ function ComboboxInput({
   showClear?: boolean
 }) {
   return (
-    <InputGroup className={cn("h-10 w-auto bg-card", className)}>
+    <InputGroup className={cn("w-auto bg-card", className)}>
       <ComboboxPrimitive.Input
         render={<InputGroupInput disabled={disabled} />}
         {...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index ca479d4b..98af97c9 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -45,7 +45,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}