@cosxai/ui 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Combobox.tsx

@@ -67,6 +67,12 @@ export interface ComboboxProps {
   // Async search. Called after `debounceMs` of quiet with a non-empty
   // trimmed query; the AbortSignal cancels superseded requests.
   search: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;
+  // Select-with-search mode: run `search("")` the moment the input
+  // focuses, so clicking the field presents the option list before
+  // any typing — the picker pattern for small, known sets. Off by
+  // default (async person/document searches would fire on every
+  // focus for no gain).
+  searchOnFocus?: boolean | undefined;
   debounceMs?: number | undefined;
   // Free-entry gate: return true when the raw text is committable on
   // its own (e.g. a syntactically valid email). Omit to disable free
@@ -109,6 +115,7 @@ export function Combobox({
   autoFocus,
   disabled,
   search,
+  searchOnFocus,
   debounceMs = DEFAULT_DEBOUNCE_MS,
   allowFreeEntry,
   freeEntryLabel,
@@ -138,7 +145,9 @@ export function Combobox({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     // Search is suspended while a commit is displayed — the input
     // still holds the committed text but shouldn't re-open the list.
-    if (!query.trim() || isCommitted) {
+    // searchOnFocus lifts the non-empty-query requirement while the
+    // field is focused: clicking presents the list, typing narrows.
+    if (isCommitted || (!query.trim() && !(searchOnFocus && focused))) {
       setResults([]);
       setLoading(false);
       return;
@@ -168,7 +177,7 @@ export function Combobox({
       if (debounceRef.current) clearTimeout(debounceRef.current);
       abortRef.current?.abort();
     };
-  }, [query, isCommitted, search, debounceMs]);
+  }, [query, isCommitted, search, debounceMs, searchOnFocus, focused]);
 
   const trimmed = query.trim();
   const freeEntryOk = !!allowFreeEntry && trimmed.length > 0 && allowFreeEntry(trimmed);

package/src/primitives/SegmentedControl.tsx

@@ -67,6 +67,12 @@ export function SegmentedControl<V extends string = string>({
       aria-label={ariaLabel}
       className={cn("ck-segmented", className)}
       data-testid={testId}
+      // The track is deliberately unfilled (owner feedback,
+      // 2026-08-19): a muted-filled track reads as a heavy block on
+      // warm canvases — the hairline border delimits the group and
+      // the raised selected segment carries ALL the contrast. This
+      // also makes the control look right on any surface (canvas,
+      // card, modal) without per-context tuning.
       style={{
         display: fit === "full" ? "flex" : "inline-flex",
         alignItems: "stretch",
@@ -74,7 +80,7 @@ export function SegmentedControl<V extends string = string>({
         padding: 2,
         borderRadius: 8,
         border: "1px solid var(--ck-border-subtle)",
-        background: "var(--ck-bg-muted)",
+        background: "transparent",
         opacity: disabled ? 0.5 : 1,
       }}
     >
@@ -112,7 +118,7 @@ export function SegmentedControl<V extends string = string>({
                 ? "var(--ck-text-primary)"
                 : "var(--ck-text-secondary)",
               background: selected ? "var(--ck-bg-surface)" : "transparent",
-              boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
+              boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
               borderColor: selected ? "var(--ck-border-subtle)" : "transparent",
               cursor: optDisabled ? "not-allowed" : "pointer",
               opacity: opt.disabled && !disabled ? 0.45 : 1,