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 — <code>solid</code>, <code>outline</code>, <code>ghost</code>. Group
 			coordinates instant re-open across siblings. Honours <code>prefers-reduced-motion</code>.
-			Presence-only — no sema events.
+			Presence-driven — open / close / close-dismiss edges are surfaced as sema events.
 		</p>
 		<div data-uix-page-meta>
 			<span data-uix-meta-pill
@@ -182,7 +185,7 @@
 			>
 			<span data-uix-meta-pill><span data-uix-meta-key>variants</span>3</span>
 			<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>3</span>
-			<span data-uix-meta-pill><span data-uix-meta-key>events</span>0</span>
+			<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
 			<span data-uix-meta-pill>
 				<span data-uix-meta-key>apg</span>
 				<a href={tooltipMorfo.apg} target="_blank" rel="noreferrer">tooltip ↗</a>
@@ -272,7 +275,8 @@
 			<p data-uix-section-desc>
 				Props grouped by layer: <span data-uix-layer-badge="soma">soma</span> headless behavior +
 				Floating layer positioning, <span data-uix-layer-badge="eidos">eidos</span> 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.
 			</p>
 
 			<div data-uix-subsection-head>
@@ -654,8 +658,8 @@
 				<span data-uix-layer-badge="morfo">morfo</span> · declarative contract
 			</h2>
 			<p data-uix-section-desc>
-				Source: <code>src/uix/morfo/components/tooltip.ts</code>. Tooltip declares 0 events —
-				lifecycle is presence-only via Floating + Dismissal layers.
+				Source: <code>src/uix/morfo/components/tooltip.ts</code>. Presence-driven —
+				open / close / close-dismiss edges flow through Floating + Dismissal layers.
 			</p>
 
 			<div data-uix-table-wrap>
@@ -679,7 +683,7 @@
 							><td class="name">parts.length</td><td class="default">{tooltipMorfo.parts.length}</td
 							></tr
 						>
-						<tr><td class="name">events.length</td><td class="default">0</td></tr>
+						<tr><td class="name">events.length</td><td class="default">{events.length}</td></tr>
 					</tbody>
 				</table>
 			</div>
@@ -797,7 +801,7 @@
 							><tr
 								><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th
 									>target</th
-								></tr
+								><th>Play</th></tr
 							></thead
 						>
 						<tbody>
@@ -809,6 +813,22 @@
 									<td>{action.semantic.sequence ?? 'pre'}</td>
 									<td class="default">—</td>
 									<td>{action.target}</td>
+									<td>
+										<button
+											data-uix-play
+											onclick={() => {
+												const target = (stageRef?.querySelector(
+													'[data-tooltip-content]'
+												) ?? stageRef?.querySelector('[data-tooltip-trigger]')) as HTMLElement | null;
+												if (!target) return;
+												void uix.events?.emit({
+													name: action.name,
+													family: action.semantic.family,
+													target
+												});
+											}}>▶ play</button
+										>
+									</td>
 								</tr>
 							{/each}
 						</tbody>
@@ -824,10 +844,52 @@
 				<span data-uix-layer-badge="sema">sema</span> · events
 			</h2>
 			<p data-uix-section-desc>
-				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.
 			</p>
-			<div data-uix-empty-state>No Sema events declared.</div>
+			{#if events.length}
+				<div data-uix-table-wrap>
+					<table data-uix-table>
+						<thead
+							><tr
+								><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>target</th><th
+									>Play</th
+								></tr
+							></thead
+						>
+						<tbody>
+							{#each events as action}
+								<tr>
+									<td class="name">{action.name}</td>
+									<td class="type">{action.semantic.family}</td>
+									<td>{action.semantic.verb ?? '—'}</td>
+									<td>{action.semantic.sequence ?? 'pre'}</td>
+									<td>{action.target}</td>
+									<td>
+										<button
+											data-uix-play
+											onclick={() => {
+												const target = (stageRef?.querySelector(
+													'[data-tooltip-content]'
+												) ?? stageRef?.querySelector('[data-tooltip-trigger]')) as HTMLElement | null;
+												if (!target) return;
+												void uix.events?.emit({
+													name: action.name,
+													family: action.semantic.family,
+													target
+												});
+											}}>▶ play</button
+										>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{:else}
+				<div data-uix-empty-state>No Sema events declared.</div>
+			{/if}
 		</section>
 	{/if}