<ui-statusbar>
A persistent display of the highest-priority active notification. The host defines no width or position, so the page can place it in a fixed footer or inline in the document flow. When
more than one item is active — and there is a
<ui-notifications> on
the page to display the full list — the host shows a caret button that opens
that popover, so the dropdown list isn't duplicated here.
.ui-statusbar-inline region carries
role="status". That role implies aria-live="polite"
and aria-atomic="true", so screen readers announce a new top
notification politely without stealing focus. MDN names "status bars" as
the canonical use case for this role.aria-atomic; isolating the live region keeps the announcement
to the message itself.alert when severity escalates
to error) are unreliable across screen readers and explicitly avoided
here.toast() — the toast system owns the
aria-live="assertive" region. The statusbar stays polite.<button> with an
aria-label that defaults to "Status" (overridable via
the label attribute). The caret <ui-icon>
inside the button is aria-hidden.label is observed, so setting it after the
element has connected still updates the rendered aria-label.
This allows the app to translate the name: the declarative form
<ui-statusbar data-i18n-attr="label:some.key"> is written
by apply_static_i18n(), which waits for
the message catalog and therefore updates the label after this element has created its button. The component supplies an English default; the app supplies its translation.aria-hidden — the count is part
of the visual UI only; the panel that opens (a
<ui-notifications>) carries its own count in its
accessible name.role="status".| Element | Attributes | CSS custom properties |
|---|---|---|
<ui-statusbar> |
label (default "Status", observed) — accessible name for the
expand button; changes after connection update the button.for — id of the <ui-notifications> the
expand button targets. Falls back to the first one in the document; if neither is found, the expand button stays hidden.data-severity — set by the component to the top active item's
type, and removed when there is no active item. Use it in external CSS selectors; let the component set its value.
|
--_severity-color — picked from data-severity.--_count-fg — count badge foreground (overridden for warning so it stays readable on yellow).Both are internal props: overridable from outside, but component internals rather than a stable API. |
The store comes from public/ui/lib/notifications.mjs:
call notify({id, render, action_callback, …}) to add or update
an item; clear(id) removes it. See
<ui-notifications> for
the lifecycle in detail, and Notifications store
for the full module API and per-method demos.
notifications.mjs)| Export | Signature | Description |
|---|---|---|
notify | (opts) => string | Add an item or update an existing item by id. |
clear | (id) => void | Remove an item entirely (no archive call). |
refresh | () => void | Re-evaluate every active item's render(). |
get_all | () => NotificationItem[] | All items, active first by severity, historical items by recency. |
get_active_count | () => number | How many items are currently active — what the statusbar's count badge shows. |
get_top_active | () => NotificationItem|null | The single highest-priority active item — shown in the statusbar. |
get_by_id | (id) => NotificationItem|null | Look up by id (used by projections to resolve action callbacks). |
events | EventTarget | Dispatches 'change' on every store mutation. |
Full per-method demos are at notifications.html.
With no active notifications the host is hidden. Add an item
via notifications.notify() to show it.
The host exposes data-severity matching the top active item's
type. CSS picks --_severity-color from the
matching token (--info / --warning /
--error). The expand button (when visible) and the count
badge inherit that color.
With two or more active items, and a <ui-notifications>
on the page to open, the caret button appears with a count badge.
Clicking it opens that popover — the dropdown list isn't duplicated
inside the statusbar. The button is a native popover invoker
(popovertarget), so a second click closes it again. The expand
button is hidden again when only one item remains, since that one is
already visible inline.
for= — targeting a specific bell
When the page has more than one <ui-notifications>, the
statusbar's for attribute names which one the expand button
opens. Without for, the first <ui-notifications> in the document is used.
action_callback
When a notification is registered with an action_label and an
action_callback, the statusbar displays the action button on
the inline row. Click delegation in the statusbar looks up the original item by id and invokes its callback. The displayed copy does not contain the callback function.