@ponchia/ui 0.7.0 → 0.8.0

package/css/disclosure.css

@@ -44,11 +44,11 @@
     border-color var(--duration-fast) var(--ease-standard);
 }
 
-/* Coarse-pointer tap-target floor (~2.9rem ≈ 44px), matching inputs/sitenav —
+/* Coarse-pointer tap-target floor (`--tap-target`), matching inputs/sitenav —
    tabs are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
 @media (pointer: coarse) {
   .ui-tab {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 }
 
@@ -277,8 +277,8 @@
     align-items: center;
     display: inline-flex;
     justify-content: center;
-    min-block-size: max(24px, 1.6rem);
-    min-inline-size: max(24px, 1.6rem);
+    min-block-size: var(--tap-target-min);
+    min-inline-size: var(--tap-target-min);
   }
 }
 
@@ -349,12 +349,12 @@
   }
 }
 
-/* Coarse-pointer tap-target floor, matching inputs/sitenav (~2.9rem ≈ 44px) —
+/* Coarse-pointer tap-target floor (`--tap-target`), matching inputs/sitenav —
    pagination controls are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
 @media (pointer: coarse) {
   .ui-pagination__item {
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 }
 

package/css/feedback.css

@@ -130,9 +130,12 @@
   display: grid;
   gap: 0.5rem;
 
-  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. */
-  inset-block: auto 1.25rem;
-  inset-inline: auto 1.25rem;
+  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. The
+     bottom offset clears the home-indicator gesture area: a toast landing there
+     is both hard to read and hard to dismiss, because the system swallows the
+     swipe. `max()` leaves the desktop offset untouched. */
+  inset-block: auto max(1.25rem, var(--safe-area-bottom));
+  inset-inline: auto max(1.25rem, var(--safe-area-right));
   justify-items: end;
   max-inline-size: min(22rem, calc(100vw - 2rem));
   pointer-events: none;
@@ -144,7 +147,7 @@
    overlaps the polite bottom stack and reads as a distinct, urgent
    channel. */
 .ui-toast-stack--assertive {
-  inset-block: 1.25rem auto;
+  inset-block: max(1.25rem, var(--safe-area-top)) auto;
 }
 
 .ui-toast {
@@ -225,15 +228,15 @@
 }
 
 /* Touch: enlarge the dismiss/close hit areas to the project's coarse-pointer
-   tap-target floor (2.9rem, as in primitives.css / forms.css) without changing
-   the desktop glyph size. The box is centred so the glyph stays put. */
+   tap-target floor (`--tap-target`, as in primitives.css / forms.css) without
+   changing the desktop glyph size. The box is centred so the glyph stays put. */
 @media (pointer: coarse) {
   .ui-alert__close,
   .ui-toast__close {
     display: inline-grid;
     place-items: center;
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 
   .ui-alert__close {

package/css/forms.css

@@ -476,18 +476,18 @@
   .ui-input,
   .ui-select,
   .ui-textarea {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   .ui-search {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   /* The whole label is the toggle target — float it to the ~44px floor so the
      small track/box isn't a sub-target on touch (WCAG 2.5.8 — C24). */
   .ui-switch,
   .ui-check {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
   }
 
   .ui-check input {

package/css/navigation.css

@@ -95,7 +95,7 @@
 
 @media (pointer: coarse) {
   .ui-themetoggle__button {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
     padding-inline: 0.9rem;
   }
 }

package/css/overlay.css

@@ -149,6 +149,15 @@ html:has(.ui-modal.is-open) {
   margin-inline-start: auto;
   max-block-size: 100vh;
   max-inline-size: min(26rem, 100vw);
+
+  /* Full-height by design, so the panel's edges are the screen's edges: its
+     surface should still reach them, but its content must clear the cutout and
+     the home indicator. Add the INSET ONLY — `.ui-modal` is deliberately
+     `padding: 0` (its head/body parts own their spacing), so a `max(space, …)`
+     floor here would silently pad the drawer on every device, not just a
+     notched one. */
+  padding-block: var(--safe-area-top) var(--safe-area-bottom);
+  padding-inline-end: var(--safe-area-right);
   border-radius: 0;
   border-width: 0;
   border-inline-start-width: 1px;
@@ -162,16 +171,16 @@ html:has(.ui-modal.is-open) {
 }
 
 /* Comfortable hit target on coarse pointers — this bespoke close button measured
-   ~26px on touch, below the 2.9rem floor the rest of the button family meets
-   (WCAG 2.5.8). Scoped to coarse so the fine-pointer (mouse) rendering, which
+   ~26px on touch, below the `--tap-target` floor the rest of the button family
+   meets. Scoped to coarse so the fine-pointer (mouse) rendering, which
    already clears 24×24, is unchanged; centre the glyph in the enlarged box. */
 @media (pointer: coarse) {
   .ui-modal__close {
     align-items: center;
     display: inline-flex;
     justify-content: center;
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 }
 
@@ -187,7 +196,12 @@ html:has(.ui-modal.is-open) {
   color: var(--text);
   max-block-size: 100vh;
   max-inline-size: 100vw;
-  padding: 0;
+
+  /* Deliberately full-bleed — the dimmed ground SHOULD cover the whole screen,
+     including the cutout. Only the insets keep the carousel's own controls out
+     from under it. */
+  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom)
+    var(--safe-area-left);
   inline-size: 100vw;
 }
 

package/css/primitives.css

@@ -423,6 +423,53 @@
   padding: 0.85rem 1.4rem;
 }
 
+/* Dense — for bars whose HEIGHT is the constraint: a pane/node title bar, a
+   packed toolbar, a table row's actions. It lowers only the *visual* floor, to
+   the WCAG 2.5.8 minimum, and deliberately declares no coarse-pointer opinion:
+   the `@media (pointer: coarse)` block below matches at equal specificity and
+   later in the file, so it still floats a dense control to the full
+   `--tap-target`. Shrinking a control for a mouse therefore never shrinks it
+   for a finger — which is the reason this is a separate tier and not just a
+   smaller `--sm`. */
+.ui-button--dense {
+  gap: 0.25rem;
+  min-block-size: var(--tap-target-min);
+  min-inline-size: var(--tap-target-min);
+  padding: 0.2rem 0.35rem;
+}
+
+/* Keep the square icon well; padding is safe to raise specificity on because
+   it is not the tap floor. */
+.ui-button--dense.ui-button--icon {
+  padding: 0;
+}
+
+/* The label slot. An icon button still needs its words — for the accessible
+   name, and for the test/automation selector that reads the button by its
+   text — but not the pixels. Wrapping the text in this slot lets ONE markup
+   shape serve both: the button keeps a real text node, and `--icon` is what
+   decides whether it is painted. Without it, an icon-only button has to choose
+   between an empty accessible name and a title-bar-inflating word.
+
+   The hiding technique matches `.ui-visually-hidden` (base.css) rather than
+   `display: none`, which would take the text out of the accessible name too —
+   the exact opposite of the point. */
+.ui-button__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-button--icon .ui-button__label {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
 .ui-button:disabled,
 .ui-button[aria-disabled='true'] {
   cursor: not-allowed;
@@ -539,11 +586,11 @@
 /* Standalone CTA links are tap targets, not inline prose links: on a coarse
    pointer float them to the WCAG 2.5.8 AA 24px floor (the 2.5.8 inline-link
    exception doesn't cover a block-level call-to-action, which is what these
-   are). Buttons already auto-grow to ~44px on coarse pointers. */
+   are). Buttons already float to the full `--tap-target` on coarse pointers. */
 @media (pointer: coarse) {
   .ui-link--arrow,
   .ui-link--cta {
-    min-block-size: max(24px, 1.6rem);
+    min-block-size: var(--tap-target-min);
   }
 }
 
@@ -743,16 +790,23 @@
   }
 }
 
-/* --- Touch: comfortable hit targets on coarse pointers --- */
+/* --- Touch: comfortable hit targets on coarse pointers.
+
+   The floor is `--tap-target`, not a bare rem. Bronto's own base sets
+   `html { font-size: 0.9375rem }`, so the 2.9rem this family used to carry
+   resolved to 43.5px — half a pixel under the 44px WCAG 2.5.5 / platform-HIG
+   target, and under any host that shrinks the root further it drifted further
+   still. The token clamps in px against the rem so the standard holds however
+   the root is re-pointed. --- */
 
 @media (pointer: coarse) {
   .ui-button {
-    min-block-size: 2.9rem;
-    min-inline-size: 2.9rem;
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
   }
 
   .ui-button--icon {
-    min-inline-size: 2.9rem;
+    min-inline-size: var(--tap-target);
   }
 }
 
@@ -774,6 +828,47 @@
   margin: 0.3rem 0 0;
 }
 
+/* Slots. Without them every empty surface in an app re-invents the same three
+   parts under a different name, and they drift: one has a glyph, the next has
+   two sentences in the same weight, a third is a bare <p>. The shape is always
+   mark → one sentence in full ink → a quieter follow-up. */
+.ui-empty-state__glyph {
+  display: block;
+  font-size: 1.5rem;
+  line-height: 1;
+  opacity: 0.5;
+}
+
+/* The one sentence that says what is missing. Full ink — it is the message,
+   not a caption, and the container's --text-dim would bury it. */
+.ui-empty-state__lead {
+  color: var(--text);
+  margin: 0;
+}
+
+.ui-empty-state__hint {
+  font-size: var(--text-2xs);
+  margin: 0;
+  opacity: 0.8;
+}
+
+/* An empty state REPORTS absence; an invite OFFERS the next action. That is a
+   different job, so it gets a different frame: no dashed box (there is nothing
+   to outline — the surface itself is the thing you are being invited into) and
+   it centres in whatever block space it is given rather than sitting as a
+   card. Use it for a surface the user is meant to fill, and keep the plain
+   `.ui-empty-state` for a region that simply has no rows today. */
+.ui-empty-state--invite {
+  align-items: center;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+  justify-content: center;
+  min-block-size: 100%;
+  padding: var(--space-sm);
+}
+
 /* --- Keyboard key — inline glyph for shortcut hints. Wrap a <kbd>. --- */
 
 .ui-kbd {

package/css/site.css

@@ -41,8 +41,10 @@
   z-index: var(--z-toast);
 }
 
+/* The skip link is the FIRST thing a keyboard or screen-reader user reaches, so
+   landing it under a display cutout is the worst place to lose a control. */
 .ui-skiplink:focus {
-  inset-block-start: var(--space-md);
+  inset-block-start: max(var(--space-md), var(--safe-area-top));
 }
 
 /* --- Header — brand · nav · actions --- */
@@ -60,6 +62,10 @@
 /* Structural sticky only — the floating-card skin (radius/shadow/panel
    bg) is consumer identity, not a framework concern; layer it yourself. */
 .ui-siteheader--sticky {
+  /* Only the sticky variant needs this: a header in normal flow already sits
+     below the cutout. Pad rather than offset, so the header's own border and
+     any consumer background still reach the top of the screen. */
+  padding-block-start: max(var(--space-sm), var(--safe-area-top));
   position: sticky;
   inset-block-start: 0;
   z-index: var(--z-sticky);
@@ -184,7 +190,7 @@
 
 @media (pointer: coarse) {
   .ui-sitenav a {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
     padding-inline: 0.9rem;
   }
 }
@@ -256,7 +262,7 @@
 
 @media (pointer: coarse) {
   .ui-sitemenu > summary {
-    min-block-size: 2.9rem;
+    min-block-size: var(--tap-target);
     padding-inline: 0.9rem;
   }
 }
@@ -301,8 +307,8 @@
     align-items: center;
     display: inline-flex;
     justify-content: center;
-    min-block-size: max(24px, 1.6rem);
-    min-inline-size: max(24px, 1.6rem);
+    min-block-size: var(--tap-target-min);
+    min-inline-size: var(--tap-target-min);
   }
 }
 

package/css/skins.css

@@ -4,43 +4,107 @@
  *  Optional display colorways (ADR-0001). OPT-IN: imported on demand via
  *  `@ponchia/ui/css/skins.css`, never part of the default bundle. Apply with
  *  `data-bronto-skin="amber-crt | e-ink | phosphor-green"` on :root / <html> (a
- *  root-level choice like data-theme), re-pointing the one accent. The accent's
- *  derived family recomputes from the live var(--accent); status colours + the
- *  neutral canvas are untouched. Every accent below is gated by check-contrast.mjs. */
+ *  root-level choice like data-theme), re-pointing the one accent and the
+ *  neutral canvas (ADR-0001 step 4, amended in 0.8.0). The accent's derived
+ *  family recomputes from the live var(--accent); STATUS COLOURS ARE UNTOUCHED,
+ *  because a warning must look like a warning in every skin. The canvas keeps
+ *  each core neutral's OKLCH lightness and only moves its hue, so contrast is
+ *  preserved by construction — and check-contrast.mjs re-measures the FULL
+ *  pairing table per skin per theme rather than trusting that. */
 
 /* Amber CRT */
 :root[data-bronto-skin='amber-crt'] {
   --accent: oklch(52% 0.11 67deg);
   --dotmatrix-pulse-min: 0.35;
+  --bg: oklch(96.66% 0.02 67deg);
+  --bg-elevated: oklch(98.781% 0.022 67deg);
+  --panel: oklch(100% 0.024 67deg);
+  --panel-strong: oklch(100% 0.026 67deg);
+  --panel-soft: oklch(94.253% 0.026 67deg);
+  --line: oklch(88.11% 0.035 67deg);
+  --line-strong: oklch(72.983% 0.04 67deg);
+  --text: oklch(14.479% 0.03 67deg);
+  --text-soft: oklch(32.825% 0.03 67deg);
+  --text-dim: oklch(51.571% 0.028 67deg);
 }
 
 :root[data-theme='dark'][data-bronto-skin='amber-crt'] {
   --accent: oklch(82% 0.15 82deg);
   --dotmatrix-glow: 0.4em;
   --dotmatrix-pulse-min: 0.3;
+  --bg: oklch(18.22% 0.02 82deg);
+  --bg-elevated: oklch(20.904% 0.022 82deg);
+  --panel: oklch(22.645% 0.024 82deg);
+  --panel-strong: oklch(25.196% 0.026 82deg);
+  --panel-soft: oklch(26.032% 0.026 82deg);
+  --line: oklch(34.07% 0.035 82deg);
+  --line-strong: oklch(44.953% 0.04 82deg);
+  --text: oklch(92.494% 0.03 82deg);
+  --text-soft: oklch(83.279% 0.03 82deg);
+  --text-dim: oklch(70.576% 0.028 82deg);
 }
 
 /* E-ink */
 :root[data-bronto-skin='e-ink'] {
   --accent: oklch(34% 0.012 250deg);
   --dotmatrix-reveal-step: 0ms;
+  --bg: oklch(96.66% 0.005 250deg);
+  --bg-elevated: oklch(98.781% 0.006 250deg);
+  --panel: oklch(100% 0.006 250deg);
+  --panel-strong: oklch(100% 0.007 250deg);
+  --panel-soft: oklch(94.253% 0.007 250deg);
+  --line: oklch(88.11% 0.009 250deg);
+  --line-strong: oklch(72.983% 0.01 250deg);
+  --text: oklch(14.479% 0.008 250deg);
+  --text-soft: oklch(32.825% 0.008 250deg);
+  --text-dim: oklch(51.571% 0.007 250deg);
 }
 
 :root[data-theme='dark'][data-bronto-skin='e-ink'] {
   --accent: oklch(84% 0.008 250deg);
   --dotmatrix-reveal-step: 0ms;
+  --bg: oklch(18.22% 0.005 250deg);
+  --bg-elevated: oklch(20.904% 0.006 250deg);
+  --panel: oklch(22.645% 0.006 250deg);
+  --panel-strong: oklch(25.196% 0.007 250deg);
+  --panel-soft: oklch(26.032% 0.007 250deg);
+  --line: oklch(34.07% 0.009 250deg);
+  --line-strong: oklch(44.953% 0.01 250deg);
+  --text: oklch(92.494% 0.008 250deg);
+  --text-soft: oklch(83.279% 0.008 250deg);
+  --text-dim: oklch(70.576% 0.007 250deg);
 }
 
 /* Phosphor Green */
 :root[data-bronto-skin='phosphor-green'] {
   --accent: oklch(52% 0.13 150deg);
   --dotmatrix-pulse-min: 0.35;
+  --bg: oklch(96.66% 0.02 150deg);
+  --bg-elevated: oklch(98.781% 0.022 150deg);
+  --panel: oklch(100% 0.024 150deg);
+  --panel-strong: oklch(100% 0.026 150deg);
+  --panel-soft: oklch(94.253% 0.026 150deg);
+  --line: oklch(88.11% 0.035 150deg);
+  --line-strong: oklch(72.983% 0.04 150deg);
+  --text: oklch(14.479% 0.03 150deg);
+  --text-soft: oklch(32.825% 0.03 150deg);
+  --text-dim: oklch(51.571% 0.028 150deg);
 }
 
 :root[data-theme='dark'][data-bronto-skin='phosphor-green'] {
   --accent: oklch(84% 0.19 150deg);
   --dotmatrix-glow: 0.4em;
   --dotmatrix-pulse-min: 0.3;
+  --bg: oklch(18.22% 0.02 150deg);
+  --bg-elevated: oklch(20.904% 0.022 150deg);
+  --panel: oklch(22.645% 0.024 150deg);
+  --panel-strong: oklch(25.196% 0.026 150deg);
+  --panel-soft: oklch(26.032% 0.026 150deg);
+  --line: oklch(34.07% 0.035 150deg);
+  --line-strong: oklch(44.953% 0.04 150deg);
+  --text: oklch(92.494% 0.03 150deg);
+  --text-soft: oklch(83.279% 0.03 150deg);
+  --text-dim: oklch(70.576% 0.028 150deg);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -48,16 +112,46 @@
     --accent: oklch(82% 0.15 82deg);
     --dotmatrix-glow: 0.4em;
     --dotmatrix-pulse-min: 0.3;
+    --bg: oklch(18.22% 0.02 82deg);
+    --bg-elevated: oklch(20.904% 0.022 82deg);
+    --panel: oklch(22.645% 0.024 82deg);
+    --panel-strong: oklch(25.196% 0.026 82deg);
+    --panel-soft: oklch(26.032% 0.026 82deg);
+    --line: oklch(34.07% 0.035 82deg);
+    --line-strong: oklch(44.953% 0.04 82deg);
+    --text: oklch(92.494% 0.03 82deg);
+    --text-soft: oklch(83.279% 0.03 82deg);
+    --text-dim: oklch(70.576% 0.028 82deg);
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='e-ink'] {
     --accent: oklch(84% 0.008 250deg);
     --dotmatrix-reveal-step: 0ms;
+    --bg: oklch(18.22% 0.005 250deg);
+    --bg-elevated: oklch(20.904% 0.006 250deg);
+    --panel: oklch(22.645% 0.006 250deg);
+    --panel-strong: oklch(25.196% 0.007 250deg);
+    --panel-soft: oklch(26.032% 0.007 250deg);
+    --line: oklch(34.07% 0.009 250deg);
+    --line-strong: oklch(44.953% 0.01 250deg);
+    --text: oklch(92.494% 0.008 250deg);
+    --text-soft: oklch(83.279% 0.008 250deg);
+    --text-dim: oklch(70.576% 0.007 250deg);
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='phosphor-green'] {
     --accent: oklch(84% 0.19 150deg);
     --dotmatrix-glow: 0.4em;
     --dotmatrix-pulse-min: 0.3;
+    --bg: oklch(18.22% 0.02 150deg);
+    --bg-elevated: oklch(20.904% 0.022 150deg);
+    --panel: oklch(22.645% 0.024 150deg);
+    --panel-strong: oklch(25.196% 0.026 150deg);
+    --panel-soft: oklch(26.032% 0.026 150deg);
+    --line: oklch(34.07% 0.035 150deg);
+    --line-strong: oklch(44.953% 0.04 150deg);
+    --text: oklch(92.494% 0.03 150deg);
+    --text-soft: oklch(83.279% 0.03 150deg);
+    --text-dim: oklch(70.576% 0.028 150deg);
   }
 }

package/css/state.css

@@ -223,6 +223,153 @@
   }
 }
 
+/* ==========================================================================
+   Severity — the second axis of system state.
+
+   `.ui-state` answers "what is this thing doing". This answers "how bad is
+   it". Bronto already shipped the TONES (`--danger`, `--warning`, `--info`,
+   `--success`) as per-component modifiers, but never the SCALE: the tier names,
+   their order, and the attribute that carries them. So every consumer invents
+   the ladder, and inside a single app it drifts — one surface saying
+   `critical|error|warning|note`, the next `bad|warn`, a third
+   `critical|warning|info|ok`, under two different attribute names. Findings
+   then do not sort against alerts, and a filter written for one list silently
+   misses the other.
+
+   THE LADDER, worst to best:
+
+     critical  broken now, and still losing something
+     error     something failed; it is not currently getting worse
+     warning   a threshold was crossed; nothing has failed yet
+     notice    worth reading, no action implied
+     ok        checked and healthy — an ASSERTION, not the absence of news
+     unknown   not measured, stale, or the check itself failed
+
+   `unknown` sits OUTSIDE the ordering deliberately. It is not "slightly worse
+   than ok", it is "we do not know", and collapsing it into `ok` is how a dead
+   collector reads as a healthy system.
+
+   The level is carried by `data-level` — one attribute name, so the same
+   selector works on a chip, a row, a dot, or the host's own element:
+
+     <span class="ui-severity" data-level="critical">Critical</span>
+     <li class="ui-severity-row" data-level="warning">…</li>
+
+   BOUNDARY: the host owns thresholds, ranking, filtering, and the wording of
+   every label. Colour is never the only channel (WCAG 1.4.1) — `.ui-severity`
+   carries an author-written label, and `.ui-severity-dot` is only for rows that
+   ALSO name their level in text.
+   ========================================================================== */
+
+/* Declared once so a host putting the level on its own element gets the same
+   mapping from `data-level` + `var(--severity-tone)`, without copying a table. */
+.ui-severity,
+.ui-severity-row,
+.ui-severity-dot {
+  --severity-tone: var(--text-dim);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot):is(
+  [data-level='critical'],
+  [data-level='error']
+) {
+  --severity-tone: var(--danger);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='warning'] {
+  --severity-tone: var(--warning);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='notice'] {
+  --severity-tone: var(--info);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='ok'] {
+  --severity-tone: var(--success);
+}
+
+/* `unknown` keeps the neutral default tone — it must not read as a verdict. */
+
+/* The chip — a short uppercase tier label, tinted rather than filled, because
+   a list of findings is mostly chips and filled ones turn it into stripes.
+   `critical` is the exception and fills: in a scrolling list the worst tier has
+   to survive peripheral vision. */
+.ui-severity {
+  background: color-mix(in oklch, var(--severity-tone) 16%, transparent);
+  border-radius: var(--radius-pill);
+  color: var(--severity-tone);
+  display: inline-block;
+  flex: none;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1.2;
+  padding: 0.1rem 0.4rem;
+  text-transform: uppercase;
+}
+
+.ui-severity[data-level='critical'] {
+  background: var(--danger);
+  color: var(--button-text);
+}
+
+/* A tint over an unknown host surface cannot be contrast-gated, so the neutral
+   tier keeps a border instead and stays legible anywhere. */
+.ui-severity[data-level='unknown'] {
+  background: none;
+  border: 1px solid var(--line-strong);
+  padding-block: calc(0.1rem - 1px);
+}
+
+/* The dot — for dense rows where a chip costs more width than the level is
+   worth. An accelerator for scanning, not the label. */
+.ui-severity-dot {
+  background: var(--severity-tone);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  display: inline-block;
+  flex: none;
+  inline-size: 0.5rem;
+  print-color-adjust: exact;
+}
+
+.ui-severity-dot[data-level='unknown'] {
+  background: none;
+  box-shadow: inset 0 0 0 1px var(--line-strong);
+}
+
+/* The row — a list item that carries a level. The inline-start gutter is what
+   makes a long list readable without reading it. */
+.ui-severity-row {
+  align-items: baseline;
+  border-block-end: 1px solid var(--line);
+  border-inline-start: 2px solid var(--severity-tone);
+  display: flex;
+  gap: var(--space-xs);
+  padding: var(--space-2xs) var(--space-xs);
+}
+
+.ui-severity-row:last-child {
+  border-block-end: 0;
+}
+
+/* Gives up space first, so the level and any trailing metadata stay put. */
+.ui-severity-row__title {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-severity-row__meta {
+  color: var(--text-dim);
+  flex: none;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
 /* Forced colours: the tone dot collapses to a system colour, so the
    author-written label remains the state channel (it already must be). */
 @media (forced-colors: active) {
@@ -237,4 +384,18 @@
   .ui-job__bar {
     background: CanvasText;
   }
+
+  /* Same contract for severity: the tint and the gutter both vanish under a
+     replaced palette, so keep the structure and let the label carry meaning. */
+  .ui-severity {
+    border: 1px solid currentColor;
+  }
+
+  .ui-severity-row {
+    border-inline-start-color: CanvasText;
+  }
+
+  .ui-severity-dot {
+    background: CanvasText;
+  }
 }