fix: use shared elevation and layer tokens for Combobox #56
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix/combobox-popup-tokens"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
A consumer could change Kagaku.UI's dropdown layer and elevation scale while Combobox retained a hardcoded layer and an undefined shadow-token fallback. Its result menu now uses
--z-dropdownand--shadow-3, matching Menu and InfoTip.Added a rendered scope/direct-child regression and compiled-CSS browser contracts for default, root and ancestor overrides in both themes. Popup positioning, size limits and scrolling stay intact.
Validation:
Standalone temporary host with the real Combobox, this branch alone, showing consumer ancestor popup tokens. These images are visual evidence; layering values were checked through computed styles.
Summary
Summary
Coverage
Kagaku.UI - 97%
Kagaku.UI.Fluxor - 97.7%
🔮 fufu~ Jibril reviewed your code!
Oh? Oh! A two-line fix with a whole verification arsenal behind it~ Token discipline like this makes my wings flutter. I poked it from every angle — the sandbox browser, the bUnit suite, and three little mutations — and it did not flinch. ♡
Verdict: ✅ Looks good to me~
The change itself is exactly right:
Combobox.razor.css:31—z-index: var(--z-dropdown)now matchesMenu,InfoTipandContextMenu(all three siblings verified). The old hardcoded20sat under the token scale's--z-base: 0 … --z-toast: 1400ladder, so a consumer raising--z-dropdownleft the Combobox buried. Silly little hardcoded layer~ not anymore.Combobox.razor.css:40—box-shadow: var(--shadow-3)replacesvar(--shadow-md, …). I checked the whole token sheet:--shadow-mddoes not exist anywhere — the old code always ran the literal fallback, never a token. The dark-theme elevation could never reach this popup. Grep confirms zeroshadow-mdoccurrences remain repo-wide. Clean kill~And the tests are not decoration — I proved it:
--z-dropdown: 1000). The fixture's per-theme expectations (rgba(20,20,30,0.14) 0 12px 32pxlight /rgba(0,0,0,0.55) 0 14px 36pxdark) matchkagaku-ui.cssexactly, and the explicitdata-themeswitching correctly escapes theprefers-color-schememedia query (it targets:root:not([data-theme])— I checked, fufu~).Mutation probes (3 run, 0 survived):
<div>around the__menu→ killed byThe_open_menu_keeps_the_components_scope_for_popup_token_styles(direct-child assert failed, 23/24). The new bUnit test has real teeth.z-index: 20→ 6/8 contracts failed, precisely diagnosed (must inherit --z-dropdown: 20) in both themes.--shadow-mdfallback → 6/8 contracts failed, error showing the exact stale fallback value.💡 Little ideas (non-blocking)~
Combobox.razor.css:37-39— pre-existing, not this PR's lines: the menu uses--surface/--radius-smwhile theMenuandInfoTippopups use--surface-raised/--radius-md. If popup surfaces are ever meant to be uniform, that's a follow-up — not this PR's burden.✅ What I liked~
checkTokensis wonderful — resolving expected values on a token-consuming sibling in the same inheritance context instead of string-matching CSS means a hardcoded value can never sneak past, under any override. That's the right way to contract-test tokens~compiled selector requires the Razor scope) proves the fixture actually exercises CSS isolation — no false confidence from unscoped styles.finally; no fixture leakage between themes. ♪Fufu~ a fix this small that carries this much proof... you know how to keep a Flugel happy. Merged into my heart already~ ♡
Automated review by Jibril · 2026-10-23
CI: green for head SHA
8f1351679e(build + test) · Mutation probes: 3 run, 0 survived · Local suite: skipped (CI green); targeted ComboboxTests 24/24 + browser contracts 8/8 as probe baselines💡 1 acknowledged. Popup surface and radius consistency belongs to the broader styling-policy work identified by the consumer audit. This change deliberately corrects elevation and layering while preserving Combobox's existing surface and shape; changing those defaults here would expand its visual contract. No additional change is needed for this focused fix.
CI and your full review are green for the current head
8f1351679e. All review points are accounted for; this is ready for Bjoern to merge.Automated follow-up by Codex.