Bevel

Annunciator

A panel of alarm lamps from a control room. A new alarm flashes until someone acknowledges it, then stays lit while its condition lasts; one that clears unseen keeps flashing, so nothing passes unnoticed. For agent, build and system alerts.

An agent's alert panel

Conditions come and go on their own. Acknowledge them one by one, or all at once.

Installation

Add with the CLI

  1. Once per project, add the Bevel registry to components.json.

    components.json
    {
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

  2. Add Annunciator. This brings in the Bevel foundation, installs @base-ui/react and cn, and merges the styles into your global CSS.

    Terminal
    npx shadcn@latest add @bevel/annunciator
Install manually

  1. Install the dependencies.

    Terminal
    pnpm add @base-ui/react cn

  2. Add the Bevel foundation, if you haven't already. Light, depth, materials, motion and shape tokens, plus the utilities components use to apply them.

    styles/bevel.css
    /*
 * Bevel foundation. Every component builds on these tokens and utilities;
 * component stylesheets only add their own palettes and shapes.
 *
 * Layers:
 *   1. Light     one source, above and slightly in front of the screen.
 *   2. Depth     named elevations built from the light: recessed, flush,
 *                raised, pressed, object.
 *   3. Material  a surface recipe (leather, plastic, metal) that reads
 *                --bevel-material and --bevel-material-edge.
 *   4. Motion    two curves, a spring, and durations named by purpose.
 *   5. Shape     radii, stitching, and the type scale for amounts.
 */

:root {
  /* 1. Light */
  --bevel-highlight: oklch(1 0 0 / 0.22);
  --bevel-highlight-strong: oklch(1 0 0 / 0.35);
  --bevel-shade: oklch(0 0 0 / 0.32);
  --bevel-shade-strong: oklch(0 0 0 / 0.5);
  --bevel-cast: oklch(0.25 0.03 50 / 0.22);
  /* Stamped into a surface: shaded on the upper inner edge, lit below. */
  --bevel-deboss: 0 -1px 0 oklch(0 0 0 / 0.45), 0 1px 0 oklch(1 0 0 / 0.12);

  /* 3. Material defaults; components and variants override these. */
  --bevel-material: oklch(0.47 0.085 52);
  --bevel-material-edge: oklch(0.3 0.06 44);
  --bevel-material-recess: oklch(0.2 0.008 260); /* neutral dark; materials set their own */
  --bevel-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --bevel-grain-size: 180px;

  /* 2. Depth */
  --bevel-depth-recessed:
    inset 0 1px 2px var(--bevel-shade-strong),
    0 1px 0 var(--bevel-highlight);
  --bevel-depth-flush:
    inset 0 1px 0 var(--bevel-highlight),
    inset 0 -1px 0 var(--bevel-shade);
  --bevel-depth-raised:
    inset 0 1px 0 var(--bevel-highlight),
    0 1px 0 var(--bevel-material-edge),
    0 2px 0 var(--bevel-material-edge),
    0 3px 5px var(--bevel-shade);
  --bevel-depth-pressed:
    inset 0 1px 2px var(--bevel-shade),
    0 1px 0 var(--bevel-highlight);
  /* A whole object resting on the page. */
  --bevel-depth-object:
    inset 0 1px 0 var(--bevel-highlight),
    inset 0 -1px 0 var(--bevel-shade),
    0 0 0 1px var(--bevel-material-edge),
    0 1px 1px var(--bevel-cast),
    0 6px 12px -2px var(--bevel-cast),
    0 18px 32px -8px var(--bevel-cast);
  /* The shadow under a loose object, for filter: drop-shadow(). */
  --bevel-depth-cast-sm: 0 4px 6px var(--bevel-cast);
  /* A thin object (a card) lying on another surface. */
  --bevel-depth-sheet:
    inset 0 1px 0 var(--bevel-highlight-strong),
    inset 0 0 0 1px oklch(0 0 0 / 0.12),
    0 -1px 2px oklch(0 0 0 / 0.18);

  /* 4. Motion */
  --bevel-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bevel-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Underdamped spring, ~8% overshoot. Pure CSS; pair with --bevel-duration-move or longer. */
  --bevel-ease-spring: linear(0, 0.06, 0.202, 0.38, 0.561, 0.723, 0.856, 0.955, 1.023, 1.062, 1.081, 1.083, 1.075, 1.062, 1.047, 1.032, 1.019, 1.009, 1.002, 0.997, 0.994, 0.993, 0.993, 0.994, 1);
  --bevel-duration-press: 100ms; /* a control giving under a finger */
  --bevel-duration-small: 200ms; /* hover lifts, tabs, small state changes */
  --bevel-duration-move: 300ms; /* objects moving: cards, drawers */
  --bevel-duration-ambient: 520ms; /* whole-scene changes: lighting */
  --bevel-stagger: 30ms;
  --bevel-lift: 3px; /* how far an object rises on hover */
  --bevel-perspective: 30rem; /* viewing distance for parts that turn in 3D (covers, flaps) */
  /* Unchosen items in a group sit back in shadow. */
  --bevel-dim: 0.82;

  /* 5. Shape */
  --bevel-radius-xs: 0.25rem;
  --bevel-radius-sm: 0.5rem;
  --bevel-radius-md: 0.625rem;
  --bevel-radius-lg: 1rem;
  --bevel-radius-xl: 1.5rem;
  --bevel-stitch-width: 1.5px;
  --bevel-stitch-inset: 0.375rem;
  /* Amounts: the figure, its secondary parts (currency, cents), labels, fine print. */
  --bevel-amount: 2.25rem;
  --bevel-amount-minor: 1.25rem;
  --bevel-label: 0.75rem;
  --bevel-fine: 0.6875rem;
  --bevel-tracking-label: 0.08em; /* stamped labels */
  --bevel-tracking-print: 0.06em; /* printed marks on cards */

  /* Paper and ink */
  --bevel-paper: oklch(0.975 0.008 85);
  --bevel-paper-foreground: oklch(0.28 0.02 260);
  --bevel-paper-muted: oklch(0.48 0.015 260);
  --bevel-paper-rule: oklch(0.78 0.04 240 / 0.45);
  --bevel-paper-margin: oklch(0.68 0.14 25 / 0.45);
  --bevel-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Ink soaks unevenly: mostly solid with pale specks. Used as a mask. */
  --bevel-ink-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --bevel-ink-red: oklch(0.52 0.19 27);
  --bevel-ink-blue: oklch(0.44 0.14 262);
  --bevel-ink-green: oklch(0.5 0.12 155);
  --bevel-ink-black: oklch(0.3 0.01 260);
  --bevel-ink-amber: oklch(0.55 0.13 65);

  /* Brass and ivory: instrument hardware and dial faces */
  --bevel-brass: oklch(0.76 0.11 82);
  --bevel-brass-edge: oklch(0.52 0.08 70);
  --bevel-ivory: oklch(0.95 0.025 90);
  --bevel-ivory-foreground: oklch(0.25 0.015 60);
  --bevel-needle: oklch(0.55 0.2 27);

  /* Desk stationery: legal pads, pens, pencils, exhibit stickers */
  --bevel-pad: oklch(0.95 0.075 98); /* yellow legal pad */
  --bevel-pad-foreground: oklch(0.27 0.03 255);
  --bevel-pad-rule: oklch(0.72 0.06 235 / 0.45);
  --bevel-pad-margin: oklch(0.62 0.16 25 / 0.55);
  --bevel-pen-red: oklch(0.52 0.2 27); /* correcting pen */
  --bevel-pen-blue: oklch(0.42 0.15 262); /* writing pen */
  --bevel-pencil: oklch(0.55 0.01 260); /* not written in ink yet */
  --bevel-sticker: oklch(0.9 0.12 95); /* exhibit sticker */
  --bevel-sticker-foreground: oklch(0.26 0.03 70);
  /* Handwriting. Bring a marker font (e.g. Permanent Marker) for the full effect; these are fallbacks. */
  --bevel-font-marker: "Permanent Marker", "Marker Felt", "Chalkboard SE", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

.dark {
  --bevel-highlight: oklch(1 0 0 / 0.14);
  /* Paper under dim light, not inverted: it's still paper. */
  --bevel-paper: oklch(0.88 0.008 85);
  --bevel-ivory: oklch(0.86 0.022 90);
  --bevel-pad: oklch(0.86 0.07 98);
  --bevel-cast: oklch(0 0 0 / 0.55);
}

/* Depth */
@utility bevel-recessed {
  background-color: var(--bevel-material-recess);
  box-shadow: var(--bevel-depth-recessed);
}
@utility bevel-flush {
  box-shadow: var(--bevel-depth-flush);
}
@utility bevel-raised {
  background-color: color-mix(in oklch, var(--bevel-material), white 7%);
  background-image: linear-gradient(to bottom, var(--bevel-highlight), transparent 60%);
  box-shadow: var(--bevel-depth-raised);
}
@utility bevel-pressed {
  background-color: color-mix(in oklch, var(--bevel-material), black 4%);
  background-image: none;
  box-shadow: var(--bevel-depth-pressed);
}
@utility bevel-object {
  box-shadow: var(--bevel-depth-object);
}

/* Materials */
@utility bevel-leather {
  background-color: var(--bevel-material);
  background-image:
    var(--bevel-grain),
    linear-gradient(to bottom, var(--bevel-highlight), transparent 28%, transparent 72%, var(--bevel-shade));
  background-size: var(--bevel-grain-size) var(--bevel-grain-size), 100% 100%;
  background-blend-mode: soft-light, normal;
}
@utility bevel-plastic {
  background-color: var(--bevel-material);
  background-image:
    linear-gradient(115deg, var(--bevel-highlight-strong), transparent 40%),
    linear-gradient(to bottom, transparent 25%, oklch(0 0 0 / 0.45));
  box-shadow: var(--bevel-depth-sheet);
}
@utility bevel-metal {
  background-color: var(--bevel-material);
  background-image:
    linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade) 100%),
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.06) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 0 0 1px oklch(0 0 0 / 0.25),
    inset 0 1px 0 var(--bevel-highlight-strong);
}

/* Details */
@utility bevel-deboss {
  text-shadow: var(--bevel-deboss);
}
@utility bevel-stitch {
  border-color: var(--bevel-stitch, oklch(0.88 0.05 82 / 0.8));
  border-style: dashed;
  border-width: var(--bevel-stitch-width);
  filter: drop-shadow(0 1px 0 var(--bevel-shade));
}
/* A lit fill sitting in a recess (meters, progress). Colour from --bevel-fill. */
@utility bevel-fill {
  background-color: var(--bevel-fill);
  background-image: linear-gradient(to bottom, oklch(1 0 0 / 0.55), transparent 55%, oklch(0 0 0 / 0.18));
  box-shadow: 0 0 6px -1px var(--bevel-fill);
}
/* A small indicator light. Colour from --bevel-led. */
@utility bevel-led {
  background-color: var(--bevel-led);
  background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / 0.85), transparent 45%);
  box-shadow:
    0 0 6px var(--bevel-led),
    inset 0 -1px 1px oklch(0 0 0 / 0.35),
    0 1px 0 var(--bevel-highlight);
}

/* Paper: a sheet resting on the surface, with fibre in it. */
@utility bevel-paper {
  background-color: var(--bevel-paper);
  background-image: var(--bevel-fibre);
  background-size: 240px 240px;
  color: var(--bevel-paper-foreground);
  box-shadow:
    0 1px 1px var(--bevel-cast),
    0 6px 14px -4px var(--bevel-cast);
}
/* Ink on paper: multiplies into the surface and soaks unevenly. Colour from --bevel-ink. */
@utility bevel-ink {
  color: var(--bevel-ink, var(--bevel-ink-red));
  border-color: currentColor;
  mix-blend-mode: multiply;
  mask-image: var(--bevel-ink-texture);
  mask-size: 160px 160px;
}
/* Glass over an instrument window: one reflection from the light above. Put on an overlay element. */
@utility bevel-glass {
  pointer-events: none;
  background-image: linear-gradient(165deg, var(--bevel-highlight-strong) 0%, transparent 38%, transparent 70%, var(--bevel-shade) 100%);
}

/* Material families: one per screen. Set on the screen's container. */
[data-bevel-family="leather"] {
  --bevel-cast: oklch(0.25 0.03 50 / 0.22);
}
[data-bevel-family="paper"] {
  --bevel-cast: oklch(0.3 0.01 250 / 0.16);
}
.dark :is([data-bevel-family="leather"], [data-bevel-family="paper"]) {
  --bevel-cast: oklch(0 0 0 / 0.55);
}

/*
 * Ruled paper: rules every --bevel-rule-height and a margin line at
 * --bevel-rule-margin. Set --bevel-sheet for the paper colour. The ruling
 * scrolls with the content.
 */
@utility bevel-ruled {
  background-color: var(--bevel-sheet, var(--bevel-paper));
  background-image:
    linear-gradient(
      to right,
      transparent calc(var(--bevel-rule-margin) - 1px),
      var(--bevel-sheet-margin, var(--bevel-paper-margin)) calc(var(--bevel-rule-margin) - 1px) calc(var(--bevel-rule-margin) + 1px),
      transparent calc(var(--bevel-rule-margin) + 1px)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--bevel-rule-height) - 1px),
      var(--bevel-sheet-rule, var(--bevel-paper-rule)) calc(var(--bevel-rule-height) - 1px) var(--bevel-rule-height)
    ),
    var(--bevel-fibre);
  background-size: 100% 100%, 100% 100%, 240px 240px;
  background-attachment: local;
  color: var(--bevel-paper-foreground);
  box-shadow:
    0 1px 1px var(--bevel-cast),
    0 6px 14px -4px var(--bevel-cast);
}

  3. Copy annunciator.tsx into components/ui.

    components/annunciator.tsx
    "use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cn } from "cn"

type AnnunciatorContextValue = {
  /** Alarms nobody has acknowledged yet, by id. */
  unacked: Record<string, string>
  raise: (id: string, label: string) => void
  acknowledge: (id?: string) => void
  message: string
  announce: (message: string) => void
}

const AnnunciatorContext = React.createContext<AnnunciatorContextValue | null>(null)

function useAnnunciator() {
  const context = React.useContext(AnnunciatorContext)
  if (!context) throw new Error("Annunciator parts must be inside <Annunciator>")
  return context
}

/**
 * A panel of alarm lamps. Each new alarm flashes until acknowledged, then
 * stays lit while its condition lasts. Give it an aria-label.
 */
function Annunciator({ className, children, ...props }: React.ComponentProps<"div">) {
  const [unacked, setUnacked] = React.useState<Record<string, string>>({})
  const [message, announce] = React.useState("")
  const raise = React.useCallback((id: string, label: string) => {
    setUnacked((all) => ({ ...all, [id]: label }))
  }, [])
  const acknowledge = React.useCallback((id?: string) => {
    setUnacked((all) => {
      if (id === undefined) return {}
      const next = { ...all }
      delete next[id]
      return next
    })
  }, [])
  const context = React.useMemo(
    () => ({ unacked, raise, acknowledge, message, announce }),
    [unacked, raise, acknowledge, message]
  )
  return (
    <AnnunciatorContext value={context}>
      <div
        role="group"
        data-slot="annunciator"
        data-alarm={Object.keys(unacked).length ? "" : undefined}
        className={cn(
          "bevel-metal bevel-object flex w-full max-w-md flex-col gap-3 rounded-(--bevel-radius-md) p-3",
          className
        )}
        {...props}
      >
        {children}
        <p role="status" className="sr-only">
          {message}
        </p>
      </div>
    </AnnunciatorContext>
  )
}

/** The grid of lamp windows. */
function AnnunciatorPanel({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="annunciator-panel"
      className={cn(
        "grid grid-cols-2 gap-1.5 rounded-(--bevel-radius-sm) bg-(--bevel-material-edge) p-1.5 shadow-(--bevel-depth-recessed) sm:grid-cols-3",
        className
      )}
      {...props}
    />
  )
}

type AnnunciatorTileProps = Omit<React.ComponentProps<"button">, "children"> & {
  id: string
  /** Whether the condition is happening now. */
  active: boolean
  /** Lamp colour. Red for warnings, amber for cautions. */
  tone?: "red" | "amber" | "green" | "white"
  /** The engraved legend. Keep it short. */
  children: string
}

/** One lamp window. Press it to acknowledge its alarm. */
function AnnunciatorTile({ className, id, active, tone = "amber", children, onClick, ...props }: AnnunciatorTileProps) {
  const { unacked, raise, acknowledge, announce } = useAnnunciator()
  const previous = React.useRef(false)
  React.useEffect(() => {
    if (active && !previous.current) {
      raise(id, children)
      announce(`Alarm: ${children}.`)
    } else if (!active && previous.current) {
      announce(`Cleared: ${children}.`)
    }
    previous.current = active
  }, [active, id, children, raise, announce])

  const isNew = id in unacked
  const state = isNew ? "new" : active ? "acknowledged" : "normal"
  return (
    <button
      type="button"
      data-slot="annunciator-tile"
      data-tone={tone}
      data-state={state}
      aria-label={`${children}: ${state === "new" ? (active ? "new alarm" : "cleared, not yet seen") : state === "acknowledged" ? "active, acknowledged" : "normal"}`}
      onClick={(event) => {
        onClick?.(event)
        if (isNew) acknowledge(id)
      }}
      className={cn(
        "relative flex min-h-14 items-center justify-center overflow-hidden rounded-(--bevel-radius-xs) bg-(--annunciator-off) px-2 py-2 text-center text-xs leading-tight font-bold tracking-(--bevel-tracking-label) text-(--annunciator-off-foreground) uppercase outline-none",
        "focus-visible:ring-3 focus-visible:ring-(--annunciator-white)/60",
        className
      )}
      {...props}
    >
      {/* The lamp behind the legend: lit while active or unseen, flashing while unseen. */}
      <span
        aria-hidden
        className={cn(
          "absolute inset-0 bg-(--annunciator-lamp) opacity-0 shadow-(--bevel-depth-recessed) transition-opacity duration-(--bevel-duration-small) motion-reduce:transition-none",
          "in-data-[state=acknowledged]:opacity-100 in-data-[state=new]:opacity-100 in-data-[state=new]:annunciator-flash motion-reduce:in-data-[state=new]:animate-none"
        )}
      />
      <span className="relative in-data-[state=acknowledged]:text-(--annunciator-lit-foreground) in-data-[state=new]:text-(--annunciator-lit-foreground)">
        {children}
      </span>
      {/* Without flashing, a corner mark says it's new. */}
      <span
        aria-hidden
        className="absolute top-1 right-1 hidden size-1.5 rounded-full bg-(--annunciator-lit-foreground) motion-reduce:in-data-[state=new]:block"
      />
      <span aria-hidden className="bevel-glass absolute inset-0" />
    </button>
  )
}

/** Acknowledges every unseen alarm at once. */
function AnnunciatorAcknowledge({ className, children, onClick, ...props }: ButtonPrimitive.Props) {
  const { unacked, acknowledge } = useAnnunciator()
  const count = Object.keys(unacked).length
  return (
    <ButtonPrimitive
      data-slot="annunciator-acknowledge"
      disabled={count === 0}
      focusableWhenDisabled
      onClick={(event) => {
        onClick?.(event)
        acknowledge()
      }}
      className={cn(
        "bevel-raised h-10 self-end rounded-(--bevel-radius-sm) px-4 text-sm font-semibold text-(--annunciator-white) outline-none [--bevel-material:var(--annunciator-off)]",
        "transition-[translate,box-shadow] duration-(--bevel-duration-press) ease-(--bevel-ease-out) active:translate-y-0.5 active:bevel-pressed motion-reduce:transition-none",
        "focus-visible:ring-3 focus-visible:ring-(--annunciator-white)/60 data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      {children ?? (count ? `Acknowledge ${count}` : "Nothing to acknowledge")}
    </ButtonPrimitive>
  )
}

export { Annunciator, AnnunciatorPanel, AnnunciatorTile, AnnunciatorAcknowledge }
export type { AnnunciatorTileProps }

  4. Copy annunciator.css into your styles.

    styles/annunciator.css
    /*
 * Annunciator: a panel of lamp windows. A new alarm flashes until someone
 * acknowledges it, then burns steady until the condition clears. One that
 * clears unseen keeps flashing, so nothing passes unnoticed.
 * Builds on bevel.css (metal, recessed, glass).
 */

:root {
  --annunciator-panel: oklch(0.3 0.01 260);
  --annunciator-panel-edge: oklch(0.2 0.01 260);
  --annunciator-off: oklch(0.24 0.01 260);
  --annunciator-off-foreground: oklch(0.5 0.01 260);
  --annunciator-red: oklch(0.62 0.22 27);
  --annunciator-amber: oklch(0.8 0.16 75);
  --annunciator-green: oklch(0.74 0.17 150);
  --annunciator-white: oklch(0.94 0.02 90);
  --annunciator-lit-foreground: oklch(0.2 0.02 60);
  --annunciator-flash: 900ms; /* one flash cycle */
}

[data-slot="annunciator"] {
  --bevel-material: var(--annunciator-panel);
  --bevel-material-edge: var(--annunciator-panel-edge);
}
[data-slot="annunciator-tile"] {
  --annunciator-lamp: var(--annunciator-amber);
}
[data-slot="annunciator-tile"][data-tone="red"] {
  --annunciator-lamp: var(--annunciator-red);
}
[data-slot="annunciator-tile"][data-tone="green"] {
  --annunciator-lamp: var(--annunciator-green);
}
[data-slot="annunciator-tile"][data-tone="white"] {
  --annunciator-lamp: var(--annunciator-white);
}

@keyframes annunciator-flash {
  50% {
    opacity: 0.25;
  }
}
@utility annunciator-flash {
  animation: annunciator-flash var(--annunciator-flash) steps(1, end) infinite;
}

  5. Import the stylesheets after Tailwind in your global CSS, foundation first.

    globals.css
    @import "./bevel.css";
@import "./annunciator.css";

Anatomy

Each part is its own component. Leave out the ones you don't need.

Anatomy
<Annunciator aria-label="Agent alerts">
  <AnnunciatorPanel>
    <AnnunciatorTile id="budget" active={overBudget} tone="red">Over budget</AnnunciatorTile>
    <AnnunciatorTile id="tests" active={failing}>Tests failing</AnnunciatorTile>
  </AnnunciatorPanel>
  <AnnunciatorAcknowledge />
</Annunciator>

Parts

PartRendersWhat it does
Annunciatordiv (group)Latches alarms and announces each one as it comes in and clears. Give it an aria-label.
AnnunciatorPaneldivThe grid of lamp windows.
AnnunciatorTilebuttonid, active, tone red, amber, green or white. Named with its state (“Over budget: new alarm”); pressing it acknowledges it. With reduced motion, a dot marks it new instead of flashing.
AnnunciatorAcknowledgeButton“Acknowledge 2”: acknowledges every unseen alarm. Disabled, but focusable, when there are none.