From 67d419f8393fbe5b1ad5820db1c12426490e44fa Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Mon, 22 Jun 2026 17:54:35 +0200
Subject: [PATCH] fix(command): ghost+neutral close, centered + separated from
 the input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refine the command-dialog close per review:
- Solid primary → `variant="ghost" color="neutral"` — a subtle borderless gray X
  instead of a loud solid purple button.
- The input cleared the close by `--dialog-close-size` (a glyph token that
  under-measured the button) → only a 2px gap. Use `--control-height-md` (the
  close's real IconButton footprint) → 4px to the button + ghost padding.
- The floating close inherited the dialog's top inset (tuned for a title row) →
  5px below the input's center. Override its top to space-2 → centered on the
  input row (1px offset).

Verified by measurement: ghost transparent bg · neutral gray X (chroma 0) · gap
4px · vOffset 1px · no overlap. Screenshot omitted — the modal backdrop-filter
hangs the headless capture (preview infra), the layout computes cleanly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../eidos/components/command/command-dialog.svelte  |  2 +-
 src/uix/eidos/components/command/command.css        | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/uix/eidos/components/command/command-dialog.svelte b/src/uix/eidos/components/command/command-dialog.svelte
index 176eb2ed7..e2da9050f 100644
--- a/src/uix/eidos/components/command/command-dialog.svelte
+++ b/src/uix/eidos/components/command/command-dialog.svelte
@@ -62,7 +62,7 @@
 	<Dialog.Portal>
 		{#if overlay}{@render overlay()}{:else}<Dialog.Overlay />{/if}
 		<Dialog.Content size={dialogSize}>
-			<Dialog.Close position="top-right" />
+			<Dialog.Close position="top-right" variant="ghost" color="neutral" />
 			<CommandRoot
 				{label}
 				bind:value
diff --git a/src/uix/eidos/components/command/command.css b/src/uix/eidos/components/command/command.css
index 0a90d7d14..2c6d99537 100644
--- a/src/uix/eidos/components/command/command.css
+++ b/src/uix/eidos/components/command/command.css
@@ -85,10 +85,17 @@
 }
 
 /* Clear the floating top-right close: the input BOX (not just its text) stops
-   before the close — margin, not padding — so the two never overlap. The close
-   then sits cleanly in the gap at the right of the search row. */
+   before the close — margin, not padding — so the two never overlap, with a
+   comfortable gap. `--control-height-md` is the close's REAL footprint (an md
+   IconButton); the old `--dialog-close-size` token under-measured it → 2px gap. */
 [data-dialog-content] [data-command-input] {
-	margin-inline-end: calc(var(--dialog-close-inset) + var(--dialog-close-size) + var(--space-2));
+	margin-inline-end: calc(var(--dialog-close-inset) + var(--control-height-md) + var(--space-1));
+}
+
+/* Vertically center the floating close on the boxed input row — the dialog's
+   default top inset (for a title row) sits it too low for the command input. */
+[data-dialog-content]:has([data-command]) [data-dialog-close][data-position='top-right'] {
+	top: var(--space-2);
 }
 
 [data-command][data-size='sm'] {