40 lines
1.9 KiB
JavaScript
40 lines
1.9 KiB
JavaScript
// hive-warn.js — <hive-warn>, the shared inline warning-banner
|
|
// component. Consolidates what were independently-written instances of
|
|
// the same thing, among them `.tombstone-warn` (kept.js, JS-built) and
|
|
// `.port-conflict` (agents.js, JS-built) — some differed only by an
|
|
// undeliberate 10% vs 8% tint, the strongest evidence this was drift,
|
|
// not genuinely different needs.
|
|
//
|
|
// Purely presentational — no internal state, no lifecycle beyond
|
|
// attaching its shadow root once. `level` ('info' | 'warning' | 'error',
|
|
// default 'warning') is read directly by hive-warn.css's
|
|
// `:host([level="…"])` selectors — a fixed three-tier semantic ladder,
|
|
// not an open severity+modifier combination (mara, on review: "there
|
|
// should be distinction between info, warning, error — all warnings
|
|
// should be styled identically"). Unlike `<hive-btn>`'s
|
|
// `variant`/`disabled` there's no inner native element that needs the
|
|
// attribute mirrored onto it, so no `attributeChangedCallback` is
|
|
// needed at all — the CSS reads the host attribute directly.
|
|
//
|
|
// Content is arbitrary light-DOM children through the shadow tree's
|
|
// single default `<slot>` — same reuse of the existing `<strong>`/
|
|
// `<code>` markup every call site already writes, no caller-side
|
|
// rewrite of their message content needed.
|
|
//
|
|
// Usage:
|
|
// `<hive-warn level="warning">...</hive-warn>` (static HTML)
|
|
// `el('hive-warn', { level: 'warning' }, ...)` (JS-built)
|
|
// `el('hive-warn', { level: 'error' }, ...)` (active incident, pulses)
|
|
|
|
import { attachShadowCss } from "../shadow-css.js";
|
|
import hiveWarnCss from "./hive-warn.css";
|
|
|
|
class HiveWarn extends HTMLElement {
|
|
connectedCallback() {
|
|
if (this._built) return; // re-parenting re-fires connectedCallback
|
|
const root = attachShadowCss(this, hiveWarnCss);
|
|
root.append(document.createElement("slot"));
|
|
this._built = true;
|
|
}
|
|
}
|
|
customElements.define("hive-warn", HiveWarn);
|