TudorandClaude Opus 5
d88e77f459
Presentational only — it fetches nothing and owns no state, so the fetching rules and the ARIA rules can be read separately. onMouseDown, not onClick. The input's blur handler closes the list and blur fires before click, so a click handler never runs: the classic bug where a dropdown works perfectly by keyboard and is dead to the mouse. The plan's CSS guessed at token names like --color-surface. The real tokens are --bg-card, --border, --text-muted, --bg-secondary and --shadow-soft, and all five are redefined in the dark theme — invented names would have silently fallen back to hardcoded light values and broken dark mode. Local authority is rendered because there are many schools called 'St Mary's'; a list without it is unusable for exactly the query autosuggest exists to serve, which is what the test asserts. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj
54 lines
1.2 KiB
CSS
54 lines
1.2 KiB
CSS
/*
|
||
* Anchored to .omniBoxContainer, which is position: relative for this reason.
|
||
*
|
||
* Every colour is a token, so the dropdown follows the theme. The dark theme
|
||
* redefines --bg-card, --border, --text-muted and --shadow-soft, and this
|
||
* inherits all four without a second rule.
|
||
*/
|
||
.list {
|
||
position: absolute;
|
||
top: calc(100% + 4px);
|
||
left: 0;
|
||
right: 0;
|
||
/* Above the sticky filter bar (10) and the hero layers (0–2), below the
|
||
skip-link (10000) and the modal overlay (1000). */
|
||
z-index: 40;
|
||
margin: 0;
|
||
padding: 4px;
|
||
list-style: none;
|
||
max-height: 320px;
|
||
overflow-y: auto;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-soft);
|
||
}
|
||
|
||
.option {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Hover and keyboard share one style: the active option is the active option
|
||
however it became active. Two rules would drift. */
|
||
.option:hover,
|
||
.active {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.meta {
|
||
font-size: 0.85em;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|