From b943fa7386c4308bc325de3392bff6df18630f0d Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Tue, 2 Jun 2026 22:12:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(words):=20normalise=20inspector=20inputs=20?=
 =?UTF-8?q?=E2=80=94=20one=20focus=20frame,=20framed=20textarea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two inspector-input issues:
- The image alt field (eidos <TextArea>) used the GLOBAL neutral skin
  (transparent fill, lighter border) while the URL/caption inputs use the
  words palette — so the textarea looked unframed and out of place.
  Retokenise [data-textarea] in the inspector to --words-border / --words-bg
  / radius-2 / words font-size; now it reads identically to the text inputs
  (verified both render border rgb(232,232,232) + fill rgb(249,249,249)).
- Every field drew an accent border AND a box-shadow ring on focus — two
  stacked frames. Drop the border-accent change; the single accent ring is
  the focus signal, the border stays structural. Applied to text inputs,
  NumberField and TextArea so all inspector fields focus identically.

Scoped to the words inspector (not the global eidos input recipe).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/words/words.css | 32 ++++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css
index 1fc29adbc..eb6103bf0 100644
--- a/src/uix/eidos/components/words/words.css
+++ b/src/uix/eidos/components/words/words.css
@@ -612,8 +612,25 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	border-color: var(--words-border-hover);
 }
 [data-words-inspector] [data-number-field][data-size][data-focused] {
-	border-color: var(--_words-accent);
-	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent);
+	/* Single focus frame — one accent ring; the border stays structural so a
+	   focused field shows ONE highlight, not an accent border AND a ring. */
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent);
+}
+/* Eidos TextArea (image alt) shares the inspector input chrome. Retokenise it
+   to the WORDS palette so it reads identically to the plain text inputs —
+   same fill + border + radius + size — instead of the global neutral skin
+   (transparent fill, lighter border) that made it look unframed and odd. */
+[data-words-inspector] [data-textarea] {
+	--_textarea-border: var(--words-border);
+	--_textarea-border-hover: var(--words-border-hover);
+	--_textarea-bg: var(--words-bg);
+	--_textarea-radius: var(--radius-2, 4px);
+	--_textarea-font-size: var(--words-font-size-sm);
+}
+[data-words-inspector] [data-textarea][data-focused] [data-textarea-input] {
+	/* Same single-ring focus as every other inspector field. */
+	border-color: var(--words-border);
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent);
 }
 [data-words-inspector] [data-number-field-input] {
 	inline-size: 100%;
@@ -720,15 +737,14 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 [data-words-inspector-code-language]:hover:not(:focus) {
 	border-color: var(--words-border-hover);
 }
-/* Outer ring (box-shadow), NOT an inset `outline` — the old
-   `outline-offset: -1px` drew the ring on top of the text and made the
-   focused value unreadable. The ring + accent border reads clearly and
-   matches the number-field focus treatment below. */
+/* Single focus frame — ONE accent ring (box-shadow), NOT an inset `outline`
+   and NOT also recolouring the border to accent. A field that drew an accent
+   border AND a ring read as two stacked frames; the ring alone is the focus
+   signal, the border stays structural. Shared by every inspector field. */
 [data-words-inspector-text]:focus-visible,
 [data-words-inspector-code-language]:focus-visible {
 	outline: none;
-	border-color: var(--_words-accent);
-	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent);
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent);
 }
 
 /* Callout intent swatch — small color dot rendered INSIDE the