frontend: shadow-DOM upgrade for hive-dialog/hive-toast, drop global modal.css
Follow-up to the light-DOM custom-elements pilot (mara: 'that one landed and works. i dont really like the css still being shared - id like that to be split by component, with common stuff via @include'). <hive-dialog> and <hive-toast> now attach a shadow root and adopt a component-scoped CSSStyleSheet built from a template-string constant in modal.js (DIALOG_CSS / TOAST_CSS), plus a new shared/src/component- styles.js sheet (currently just .btn) adopted alongside it via adoptedStyleSheets -- the native equivalent of a Sass @include, no preprocessor added. Theme vars keep resolving through the shadow boundary since CSS custom properties inherit across it; only plain class rules needed the explicit move. Deleted the global shared/src/modal.css entirely and dropped its @import from both dashboard/common.css and agent/agent.css -- nothing outside modal.js renders the old .tc-* classes any more. The <hive- dialog> element is now the backdrop itself (:host carries the fixed- position/centering rules that used to be .tc-backdrop on a light-DOM div); box/title/message/content/actions all render inside its shadow root. <hive-toast> similarly styles :host directly instead of a light- DOM div, with the message text placed straight into the shadow root (no <slot> needed since there's no external light-DOM content to project). Public API (openDialog/themedConfirm/themedPrompt/themedToast) unchanged -- no call-site changes needed anywhere in dashboard/agent. Verified with a full frontend build; nix fmt clean.
This commit is contained in:
parent
be27a62fb1
commit
d79df3883d
6 changed files with 246 additions and 170 deletions
|
|
@ -6,10 +6,9 @@
|
|||
agent SUB-pages (stats, screen) the same back-link nav the dashboard's
|
||||
standalone pages use. The live terminal page keeps its own header. */
|
||||
@import "@hive/shared/chrome.css";
|
||||
/* Themed dialog/toast styles for the shared bindAsyncForms handler + any
|
||||
direct themedConfirm/themedToast calls, so the per-agent UI's
|
||||
confirmations and errors render in-theme instead of unstyled. */
|
||||
@import "@hive/shared/modal.css";
|
||||
/* Themed dialog/toast component CSS (modal.js) now lives in each
|
||||
component's own shadow root (adoptedStyleSheets), not a global
|
||||
stylesheet — nothing to @import here any more. */
|
||||
|
||||
/* ─── full-screen layout overrides ─────────────────────────────────
|
||||
The agent page mounts a full-viewport terminal under a fixed
|
||||
|
|
|
|||
Loading…
Reference in a new issue