Live Region
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add utility/live-regionPlain-CSS theme — no build step
npx astrocraft-ui add utility/live-region --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add utility/live-region --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/live-region --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/live-region --theme tailwind --bridge lumosLive demo
VisuallyHidden & LiveRegion
Neither one has anything to look at, which is the point. The button below is labelled Delete invoice 4021 for a screen reader and shows only an icon; the announcer is a LiveRegion wrapped in a VisuallyHidden, rendered once and left empty, because aria-live is only honoured on a region that was already in the document when its contents changed.
Press Announce twice. A live region only speaks when its contents CHANGE, so the second press would be silence — the primitive empties the region first, in a later task, which is what makes the repeat a change.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `LiveRegion.astro` | `live-region` | `data-politeness`: `polite` · `assertive` | — | — |
Source
What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
politeness?: "polite" | "assertive";
atomic?: boolean;
};
const { politeness = "polite", atomic = true, class: className, ...rest } = Astro.props;
---
<div
role={politeness === "assertive" ? "alert" : "status"}
aria-live={politeness}
aria-atomic={atomic}
data-slot="live-region"
data-politeness={politeness}
class={className}
{...rest}
>
</div>
<script>
function read(detail: unknown): { message: string; politeness: string } {
if (typeof detail === "string") return { message: detail, politeness: "polite" };
if (detail && typeof detail === "object") {
const { message, politeness } = detail as { message?: unknown; politeness?: unknown };
return {
message: typeof message === "string" ? message : "",
politeness: politeness === "assertive" ? "assertive" : "polite",
};
}
return { message: "", politeness: "polite" };
}
document.addEventListener("live-region:announce", (event) => {
const { message, politeness } = read((event as CustomEvent).detail);
const region = document.querySelector<HTMLElement>(
`[data-slot="live-region"][data-politeness="${politeness}"]`,
);
if (!region) return;
region.textContent = "";
setTimeout(() => {
region.textContent = message;
});
});
</script>
import LiveRegion from "./LiveRegion.astro";
export { LiveRegion };
export default LiveRegion;
What you get
The component source, copied into your project by npx astrocraft-ui add utility/live-region — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.