From 651f31aed02003746bf7d0060e6c35f6c7e39f36 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 12 Jun 2026 18:26:35 +0200 Subject: [PATCH] =?UTF-8?q?fix(uix):=20RadioCards=20=E2=80=94=20hover=20on?= =?UTF-8?q?=20a=20selected=20card=20keeps=20the=20active=20colour?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hover rule out-specified the checked rule, so hovering a selected card reverted it to the neutral (unselected) hover colour — visually undoing the selection. Now the neutral hover excludes `[data-state='checked']`, and a dedicated checked-hover rule keeps the active colour and just deepens it a notch (border → --_radio-group-palette-solid-hover, tint 7% → 12%). Selection state is never affected by hover. Co-Authored-By: Claude Opus 4.8 --- .../eidos/components/radio-cards/radio-cards.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/uix/eidos/components/radio-cards/radio-cards.css b/src/uix/eidos/components/radio-cards/radio-cards.css index df3b035e4..be58ce742 100644 --- a/src/uix/eidos/components/radio-cards/radio-cards.css +++ b/src/uix/eidos/components/radio-cards/radio-cards.css @@ -81,11 +81,23 @@ /* ── Hover / focus ──────────────────────────────────────────────────────── */ -[data-radio-cards] [data-radio-cards-item]:hover:not([data-disabled]):not([data-readonly]) { +/* Hover — UNCHECKED card only: neutral lift. Excludes checked so hovering a + * selected card never reverts it to the unselected hover colour. */ +[data-radio-cards] + [data-radio-cards-item]:hover:not([data-disabled]):not([data-readonly]):not([data-state='checked']) { border-color: var(--radio-cards-border-hover); background: var(--radio-cards-bg-hover); } +/* Hover — SELECTED card: stay in the active colour, just deepen a notch + * (darker tone via the palette hover token + a slightly more opaque tint). + * Selection state is unaffected by hover. */ +[data-radio-cards] + [data-radio-cards-item][data-state='checked']:hover:not([data-disabled]):not([data-readonly]) { + border-color: var(--_radio-group-palette-solid-hover); + background: color-mix(in srgb, var(--_radio-group-palette-solid) 12%, var(--color-surface-default)); +} + [data-radio-cards] [data-radio-cards-item]:focus-visible { box-shadow: var(--radio-cards-focus-ring); }