fix(emcn): preserve editable combobox overlay text visibility

Author: Bill Leoutsakos

packages/emcn/src/components/combobox/combobox.dom.test.tsx

@@ -10,6 +10,7 @@
  * that it does, in both directions.
  */
 import { act, type ReactNode, useState } from 'react'
+import { ChipCombobox } from '@sim/emcn'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { InsideModalContext } from '../modal/modal'
@@ -92,6 +93,27 @@ describe('Combobox onOpenChange', () => {
     expect(control.classList.contains('pr-10')).toBe(false)
   })
 
+  it.each(['label', 'icon', 'none'] as const)(
+    'preserves editable chip text visibility with %s overlay',
+    (overlay) => {
+      render(
+        <ChipCombobox
+          options={
+            overlay === 'icon' ? [{ label: 'Alpha', value: 'alpha', icon: () => <svg /> }] : OPTIONS
+          }
+          editable
+          value='alpha'
+          overlayContent={overlay === 'label' ? <span>Formatted Alpha</span> : undefined}
+          inputProps={{ className: 'text-[var(--text-primary)]' }}
+        />
+      )
+
+      const control = trigger()
+      expect(control.classList.contains('text-transparent')).toBe(overlay !== 'none')
+      expect(control.classList.contains('text-[var(--text-primary)]')).toBe(overlay === 'none')
+    }
+  )
+
   it.each([false, true])(
     'puts the field name and validation ARIA on the interactive control (editable=%s)',
     (editable) => {

packages/emcn/src/components/combobox/combobox.tsx

@@ -800,11 +800,11 @@ const Combobox = memo(
                       {...inputProps}
                       className={cn(
                         'w-full pr-10 transition-colors',
-                        (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
                         SelectedIcon && !overlayContent && 'pl-7',
                         open && 'focus-visible:border-[var(--border-1)]',
                         className,
-                        inputProps?.className
+                        inputProps?.className,
+                        (overlayContent || SelectedIcon) && 'text-transparent caret-foreground'
                       )}
                       role='combobox'
                       aria-expanded={open}