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: hive-btn — drop the is= customized-built-in, use an autonomous element instead

Browse source 
Per review: don't use is=, it reads as a hack (and it is one — is=-upgraded
built-ins can never host a shadow root, which is what caused the crash this PR
fixes in the first place). <hive-btn> is now a normal autonomous custom element
wrapping a real <button> inside its own shadow root, so it gets its shadow
encapsulation back (matching hive-dialog/hive-toast) instead of the document-
level stylesheet workaround from the previous commit.

delegatesFocus: true on the shadow root means .focus() on the host (what
modal.js calls for autofocus) reaches the inner button directly. The inner
button's native click is a composed event, so host-level click listeners
(what modal.js/themedPrompt already use) keep working unchanged.

modal.js: el('button', { is: 'hive-btn', ... }) -> el('hive-btn', { ... }) at
the one call site. dom.js: removed the is= special case from el() entirely —
it existed only to support this one now-gone usage. Build clean.
This commit is contained in:
iris 2026-07-29 23:17:19 +02:00
commit e5b307df1b
4 changed files with 84 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,24 @@
/* hive-btn.css — 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 adopted once on `document` (see hive-btn.js) — NOT
scoped to a shadow root. A customized built-in (`<button is="hive-btn">`)
can't host one: `Element.attachShadow()` only accepts autonomous custom
elements or a fixed list of native tags that doesn't include `button`,
and explicitly excludes `is=`-upgraded built-ins regardless of tag —
so this styles via the `[is="hive-btn"]` attribute selector instead of
`:host`, same light-DOM-scoping approach the rest of the app's `.btn`
consumers already use, just keyed off the attribute instead of a class.
`:hover`/`:disabled` below are still genuine native pseudo-classes on a
real `<button>`, not hand-rolled state tracking — that part of the
original design goal survives even without shadow encapsulation.
`variant` is an attribute (not a class) since it's a semantic property
of the component, not an arbitrary styling hook. */
/* hive-btn.css — shadow-DOM stylesheet for the <hive-btn> autonomous
custom element (hive-btn.js). Loaded as raw text at build time
(esbuild's `text` loader) and adopted into each instance's own shadow
root. `:host` is an invisible wrapper (`display: contents`) — the
real box is the plain `button` selector below, targeting the actual
`<button>` the shadow root wraps (scope-isolated by the shadow
boundary already, no clash risk with anything outside). `variant` is
an attribute on the HOST (how callers set it, and where hive-dialog's
own selectors read it back); `:host([variant="…"])` sets `color`,
which then inherits down into the shadow tree the normal way. */
[is="hive-btn"] {
:host {
display: contents;
}
:host([variant="cancel"]) { color: var(--subtext0); }
:host([variant="confirm"]) { color: var(--green); }
:host([variant="danger"]) { color: var(--red); }
button {
font-family: inherit;
font-size: inherit;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
@ -30,17 +33,14 @@
box-shadow: 0 0 0 0 currentColor;
transition: box-shadow 0.15s ease;
}
[is="hive-btn"]:hover {
button:hover {
background: color-mix(in srgb, var(--fg) 6%, transparent);
text-shadow: 0 0 10px currentColor;
box-shadow: 0 0 10px -2px currentColor;
}
[is="hive-btn"]:disabled {
button:disabled {
opacity: 0.32;
cursor: not-allowed;
text-shadow: none;
box-shadow: none;
}
[is="hive-btn"][variant="cancel"] { color: var(--subtext0); }
[is="hive-btn"][variant="confirm"] { color: var(--green); }
[is="hive-btn"][variant="danger"] { color: var(--red); }