From 91ecf87cd5d4d593c43bffe09eebb71f336e61c8 Mon Sep 17 00:00:00 2001 From: dev Date: Sun, 24 May 2026 22:23:17 +0200 Subject: [PATCH] fix(pendientes): tooltip Play buttons + range view-cell tint differentiation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two items from src/uix/PENDIENTES.md: - Tooltip D-4.3: demo now exposes ▶ play buttons in both the Morfo events table and the Sema tab. Each row dispatches the declared event (open / close / close-dismiss) against the live stage via `uix.events.emit({ name, family, target })`. Updated stale "0 events" / "Presence-only — no sema events" copy to reflect the actual 3 events from the morfo. - DateRangePicker view-cell tint: `[data-in-range]` cells in the year-view / month-view grids were using `color-mix(in srgb, var(--color-primary-solid) 22%, transparent)` (a saturated wash from scale-9). Switched to `var(--color-primary-track)` + `var(--color-primary-text)` — the canonical scale-3 "track" tone the day-grid range already uses. Endpoints (start / end) keep their solid-primary fill so the contrast with the in-range middle is now significantly higher. Test result unchanged: 2391/2397 passing. No regressions. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../date-range-picker/date-range-picker.css | 15 +++- .../uix/components/tooltip/+page.svelte | 82 ++++++++++++++++--- 2 files changed, 84 insertions(+), 13 deletions(-) diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.css b/src/uix/eidos/components/date-range-picker/date-range-picker.css index 97fd38e03..f4adeee2f 100644 --- a/src/uix/eidos/components/date-range-picker/date-range-picker.css +++ b/src/uix/eidos/components/date-range-picker/date-range-picker.css @@ -618,11 +618,20 @@ background: var(--color-surface-overlay); } -/* Range stripe: in-range cells get a tinted background. Start and end - * cells overlay it with the solid primary fill. */ +/* Range stripe: in-range cells get a tinted background matching the + * day-grid pattern (track scale, scale-3). Start and end cells overlay + * it with the solid primary fill — much higher contrast — so the + * endpoints stand out clearly from the in-range middle. + * + * Color choice: `--color-primary-track` is scale-3 of the primary scale + * (the canonical "subtle wash" step). Using it directly — instead of a + * percentage-mixed primary-solid — keeps the tone consistent with the + * day-grid range visual and avoids the over-saturated mid that + * 22% of solid produced. */ [data-date-range-picker-year-view-cell][data-in-range], [data-date-range-picker-month-view-cell][data-in-range] { - background: color-mix(in srgb, var(--color-primary-solid) 22%, transparent); + background: var(--color-primary-track); + color: var(--color-primary-text); border-radius: 0; } diff --git a/web/routes/uix/components/tooltip/+page.svelte b/web/routes/uix/components/tooltip/+page.svelte index 2433e8cbc..bf1414648 100644 --- a/web/routes/uix/components/tooltip/+page.svelte +++ b/web/routes/uix/components/tooltip/+page.svelte @@ -2,9 +2,12 @@ import { Tooltip, type TooltipSize, type TooltipVariant } from '$uix/eidos/components/tooltip'; import { compileMorfo } from '$uix/morfo'; import { tooltipMorfo } from '@/uix/morfo/components/tooltip'; + import { getActiveUix } from '$active-uix'; import type { Side, Align } from '$soma/layers/floating'; import { page } from '$app/state'; + const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; @@ -174,7 +177,7 @@ Short, contextual help anchored to a trigger. Appears on hover or focus, dismisses on blur or Escape. Three variants — solid, outline, ghost. Group coordinates instant re-open across siblings. Honours prefers-reduced-motion. - Presence-only — no sema events. + Presence-driven — open / close / close-dismiss edges are surfaced as sema events.

variants3 sizes3 - events0 + events{events.length} apg tooltip ↗ @@ -272,7 +275,8 @@

Props grouped by layer: soma headless behavior + Floating layer positioning, eidos visual treatment. - Tooltip declares 0 sema events (presence-only via Floating + Dismissal). + Tooltip's presence-driven events (open / close / close-dismiss) live in the morfo; + see the Morfo and Sema tabs for the table + Play buttons.

@@ -654,8 +658,8 @@ morfo · declarative contract

- Source: src/uix/morfo/components/tooltip.ts. Tooltip declares 0 events — - lifecycle is presence-only via Floating + Dismissal layers. + Source: src/uix/morfo/components/tooltip.ts. Presence-driven — + open / close / close-dismiss edges flow through Floating + Dismissal layers.

@@ -679,7 +683,7 @@ >parts.length{tooltipMorfo.parts.length} - events.length0 + events.length{events.length}
@@ -797,7 +801,7 @@ >namefamilyverbsequenceintenttargetPlay @@ -809,6 +813,22 @@ {action.semantic.sequence ?? 'pre'} — {action.target} + + + {/each} @@ -824,10 +844,52 @@ sema · events

- This morfo declares no semantic events. If the component grows user-triggered perceptual - feedback, the event must be declared in Morfo first and surfaced here. + Tooltip is presence-only — the events below describe the open/close edges that the + dismissal + floating layers drive. They do not require any user-triggered action beyond + hover / focus. Use ▶ play to dispatch them against the live stage.

-
No Sema events declared.
+ {#if events.length} +
+ + + + {#each events as action} + + + + + + + + + {/each} + +
namefamilyverbsequencetargetPlay
{action.name}{action.semantic.family}{action.semantic.verb ?? '—'}{action.semantic.sequence ?? 'pre'}{action.target} + +
+
+ {:else} +
No Sema events declared.
+ {/if} {/if}