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

frontend: add <hive-btn> component, use it for dialog buttons

Browse source 
mara: 'wait the common styles is literally just the button stuff? pls
make a button component now as part of this pr and replace the usage
in the modal. replacing all usages and finally removing the btn styles
from common css is a follow up then.'

<hive-btn> (hive-btn.js) is a customized built-in <button is="hive-btn">
with its own shadow root -- extending HTMLButtonElement keeps every
native button behaviour (click/keyboard activation, :disabled, form
participation) instead of re-implementing it on a generic wrapper.
Shadow root holds only an adopted stylesheet + a <slot>, so the
button's light-DOM content (label, or asyncBtn's swapped-in spinner
span) renders through unchanged -- slotted content stays styled by the
light-DOM cascade, so the global .spinner class still applies.
Variants (cancel/confirm/danger) are a 'variant' attribute, not a CSS
class, since they're a semantic prop of the component.

Customized built-ins aren't supported in Safari/WebKit -- fine here,
the project targets recent Firefox only (same reasoning as the
original custom-elements pilot).

Wired into modal.js: HiveDialog's buttons now render as
<button is="hive-btn" variant="...">, replacing the old
component-common.css .btn copy -- deleted that file + component-
styles.js entirely (their sole purpose was giving dialog buttons a
.btn look, which hive-btn now owns properly). dom.js's el() gained
 support so it can create customized built-ins the same way it
creates everything else. hive-dialog.css dropped the now-dead
.cancel/.confirm/.confirm.danger rules.

Per mara's scoping: NOT touching the other .btn consumers across the
app (dashboard/agent submit buttons, form() helper, etc.) or removing
.btn from dashboard/common.css / agent/agent.css in this PR -- that
migration + cleanup is an explicit follow-up.

Verified with a full frontend build (grepped bundled JS for hive-btn/
variant to confirm it inlines); nix fmt clean.
This commit is contained in:
iris 2026-07-28 00:45:41 +02:00 • committed by mara
commit a588ed42ce
9 changed files with 123 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/packages/shared/src/hive-btn.css Normal file
View file

@ -0,0 +1,40 @@
/* hive-btn.css — scoped stylesheet for the <hive-btn> customized built-in
button element (hive-btn.js). Loaded as raw text at build time
(esbuild's `text` loader) and turned into a `CSSStyleSheet` adopted by
the element's own shadow root. `:host` styles the button itself (the
element *is* a real `<button is="hive-btn">`, so `:host(:hover)` /
`:host(:disabled)` select genuine native pseudo-classes, not
hand-rolled state tracking) — this is the base look every `<hive-btn>`
gets; `variant` is an attribute (not a class) since it's a semantic
property of the component, not an arbitrary styling hook. */
:host {
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
background: transparent;
-webkit-appearance: none;
appearance: none;
border: 1px solid;
padding: 0.25em 0.8em;
cursor: pointer;
color: inherit;
text-shadow: 0 0 4px currentColor;
box-shadow: 0 0 0 0 currentColor;
transition: box-shadow 0.15s ease;
}
:host(:hover) {
background: color-mix(in srgb, var(--fg) 6%, transparent);
text-shadow: 0 0 10px currentColor;
box-shadow: 0 0 10px -2px currentColor;
}
:host(:disabled) {
opacity: 0.32;
cursor: not-allowed;
text-shadow: none;
box-shadow: none;
}
:host([variant="cancel"]) { color: var(--subtext0); }
:host([variant="confirm"]) { color: var(--green); }
:host([variant="danger"]) { color: var(--red); }