frontend: hive-warn — replace severity+pulse with info/warning/error levels

mara, PR review: "i dont like that they still have different styling.
if anything, there should be distinction between info,warning,error
(semantics). all warnings should be styled identically."

Replaces the severity ('amber'|'red') + standalone pulse boolean with
a single level ('info'|'warning'|'error') attribute -- a fixed
three-tier ladder instead of an open combination. Colours reuse
theme.css's own already-documented semantics rather than inventing new
ones: --cyan is already "info accents", --amber already "warnings",
--red already "errors, fail state". Pulse is now baked into `error`
specifically rather than a separate opt-in knob, since the one call
site that wanted attention-grabbing (an active incident) is also the
one that's semantically error -- tying the two together removes a
combination that shouldn't exist independently of the tier.

Reclassified the three call sites explicitly (no implicit default
relied on): credentials.html's GitHub PAT advisory and core.js's K3PT
ST4T3 caveat are both `level="warning"` (same as before, and now
identical to each other by construction, not by coincidence);
swarm.js's port-collision banner is `level="error"` (an active
incident needing operator action now, not a standing caveat).

npm run build clean both packages, grepped for leftover
severity/pulse references (only prose mentions describing what this
replaces).
This commit is contained in:
iris 2026-08-03 18:29:08 +02:00 committed by mara
commit 2ff4cddf9d
5 changed files with 39 additions and 31 deletions

View file

@ -7,11 +7,15 @@
// not three genuinely different needs.
//
// Purely presentational — no internal state, no lifecycle beyond
// attaching its shadow root once. `severity` ('amber' | 'red', default
// amber) and `pulse` (boolean) are read directly by hive-warn.css's
// `:host([...])` selectors; 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.
// 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>`/
@ -19,9 +23,9 @@
// rewrite of their message content needed.
//
// Usage:
// `<hive-warn>...</hive-warn>` (amber, static HTML)
// `el('hive-warn', {}, ...)` (amber, JS-built)
// `el('hive-warn', { severity: 'red', pulse: '' }, ...)` (urgent)
// `<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';