vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: move hive-menu's reachable dropdown/trigger chrome out of the caller stylesheet

Browse source 
Per mara's review on #2881: the dropdown box chrome (background/border/
radius/shadow/min-width/white-space) and the trigger button's base
icon-button treatment are both reachable from hive-menu.css now --
the box chrome lives on hive-menu's own shadow-owned .menu-dropdown
wrapper (no slotting constraint at all), and the trigger button is
styled via ::slotted([slot='trigger']) since it's the top-level slotted
node for that slot. Item-row styling stays in the caller's stylesheet
-- ::slotted() only reaches directly-slotted elements, not their
descendants, so individual dropdown items are architecturally
unreachable from hive-menu's shadow tree. Verified interactively via
headless Chromium/CDP: trigger opacity/hover/border-radius and the
dropdown wrapper's background/border all resolve correctly, hover and
click-to-open still work.
This commit is contained in:
iris 2026-07-31 23:16:17 +02:00 • committed by mara
commit 8ebefeb0d5
2 changed files with 54 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/packages/dashboard/src/dashboard.css
View file

@ -298,41 +298,22 @@ hive-agent-menu {
align-self: flex-start; align-self: flex-start;
margin-top: 0.3em; margin-top: 0.3em;
} }
.agent-menu-btn { /* .agent-menu-btn carries no styling of its own anymore — the trigger is
display: block; a top-level `slot="trigger"` node inside <hive-menu>'s shadow tree, so
background: none; its base icon-button chrome now lives in hive-menu.css's
border: none; `::slotted([slot='trigger'])` rules instead (reachable and genuinely
color: var(--subtext0); generic — any <hive-menu> trigger gets the same treatment). The class
font-size: 1.1em; itself stays, just as an identification hook (aria-label/title
line-height: 1; already carry the real semantics). */
cursor: pointer; /* Box chrome (background/border/radius/shadow/min-width/white-space) now
padding: 0.1em 0.4em; lives on <hive-menu>'s own `.menu-dropdown` wrapper (shadow-DOM-owned
border-radius: 4px; markup, no slotting constraint) — this is just the `<ul>`'s own
opacity: var(--menu-btn-opacity, 0); list-reset + item padding, which only the caller (owning the actual
transition: opacity 120ms, background 120ms, color 120ms; list markup) can set. */
}
.agent-menu-btn:hover,
.agent-menu-btn:focus-visible {
background: color-mix(in srgb, var(--purple) 10%, transparent);
color: var(--purple);
outline: none;
}
.agent-menu-btn:focus-visible {
outline: 1px solid var(--purple);
}
/* Positioning (`position`/`top`/`right`/`z-index`) is generic and lives
on `<hive-menu>`'s own `.menu-dropdown` wrapper instead — this is just
the item list's visual chrome. */
.agent-menu-dropdown { .agent-menu-dropdown {
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0.3em 0; padding: 0.3em 0;
min-width: 10em;
white-space: nowrap;
} }
.agent-menu-item { .agent-menu-item {
display: block; display: block;

58
frontend/packages/shared/src/hive-menu/hive-menu.css
View file

@ -4,22 +4,17 @@
inside the shadow root — see @hive/shared/shadow-css.js's header inside the shadow root — see @hive/shared/shadow-css.js's header
comment for why a plain <style> tag and not adoptedStyleSheets. comment for why a plain <style> tag and not adoptedStyleSheets.
`:host` carries only the one truly generic requirement: it's the Two kinds of rules live here, split by what they can actually reach:
containing block for the shadow tree's absolutely-positioned dropdown `:host`/`.menu-dropdown` style shadow-DOM-owned markup this element
— a shadow host is the containing block for its own shadow tree's builds itself (no slotting constraint at all); `::slotted(...)` rules
positioned descendants, exactly like any other positioned ancestor in reach the caller's *top-level* trigger/content nodes (the ones with a
the flat tree. Any *layout* role the host plays in a particular `slot` attribute) since those are true light-DOM children, just
caller's own flex row (e.g. <hive-agent-menu>'s placement in rendered here. What can NOT live here: anything inside the content
`.container-row`) is caller-specific and lives in the caller's own node (e.g. individual dropdown item rows) — `::slotted()` only
stylesheet instead, not here. matches directly-slotted elements, not their descendants, and no CSS
mechanism pierces further than that. That's a hard Shadow DOM
`.menu-dropdown` is the generic positioning box wrapping the caller's architecture limit, not a scope choice — item-level styling stays in
opaque `content` node (projected in via `<slot name="content">` — see the caller's own stylesheet regardless of how generic it looks. */
hive-menu.js). Only position/z-index/visibility live here; the
button/item-row *visual* styling (colors, fonts, hover states) is
presentational content the caller's own trigger/content nodes carry,
so it lives in the caller's own stylesheet — `<hive-menu>` never sees
those class names, only the opaque nodes handed to it. */
:host { :host {
position: relative; position: relative;
@ -29,4 +24,35 @@
right: 0; right: 0;
top: calc(100% + 2px); top: calc(100% + 2px);
z-index: 50; z-index: 50;
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
min-width: 10em;
white-space: nowrap;
}
/* The trigger is the top-level `slot="trigger"` node — reachable, so its
base icon-button chrome (invisible until hover/open, via
`--menu-btn-opacity`) lives here rather than duplicated per caller. */
::slotted([slot='trigger']) {
display: block;
background: none;
border: none;
color: var(--subtext0);
font-size: 1.1em;
line-height: 1;
cursor: pointer;
padding: 0.1em 0.4em;
border-radius: 4px;
opacity: var(--menu-btn-opacity, 0);
transition: opacity 120ms, background 120ms, color 120ms;
}
::slotted([slot='trigger']:hover),
::slotted([slot='trigger']:focus-visible) {
background: color-mix(in srgb, var(--purple) 10%, transparent);
color: var(--purple);
outline: none;
}
::slotted([slot='trigger']:focus-visible) {
outline: 1px solid var(--purple);
} }