NotificationDot

import ui/theme.qwe use theme_cssuse ui/notification_dot.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view NotificationDotDemo() =    <div.demo-stack>        <div.demo-row style="gap: 28px">            <NotificationDot count={3} label="unread messages"><IconButton icon="menu" label="Inbox" variant="outline"/></NotificationDot>            <NotificationDot count={1284} label="notifications"><IconButton icon="settings" label="Settings" variant="outline"/></NotificationDot>            <NotificationDot tone="success" position="bottom-right" label="Online" pulse={true}><Avatar name="Ada Lovelace"/></NotificationDot>            <NotificationDot tone="accent" size="sm"><Button variant="outline" size="sm">Updates</Button></NotificationDot>            <NotificationDot show={false} count={0}><IconButton icon="search" label="Search" variant="outline"/></NotificationDot>        </div>        <div.demo-row style="gap: 28px">            <NotificationDot count={7} tone="info" position="top-left" size="lg"><Button variant="soft">Reports</Button></NotificationDot>            <NotificationDot tone="warning" position="bottom-left" outline={false}><Button variant="outline">Review</Button></NotificationDot>        </div>    </div>

// NotificationDot: a small dot, or a count, on the corner of anything: a bell// with unread messages, an avatar that is online, a tab with new items.////   <NotificationDot count={3} label="unread messages"><IconButton icon="menu" label="Inbox"/></NotificationDot>//   <NotificationDot><Avatar name="Ada"/></NotificationDot>//   <NotificationDot count={0} show={unread > 0} tone="accent" position="bottom-right">...</NotificationDot>//// children: what it sits on. count: a number shown in the dot; without one it// is a plain dot. limit: above it the count shows as "99+" (99). show: false// hides it (true). label: what the count is, for screen readers ("3 unread// messages"); a plain dot with a label is announced with it. tone: "danger"// (default), "accent", "success", "warning", "info" or "neutral". position:// "top-right" (default), "top-left", "bottom-right" or "bottom-left".// size: "sm", "md" (default) or "lg". pulse: a ring spreading from a plain dot.// outline: a ring in the page's colour around it, to stand off a picture (true).import ui/theme.qwe use ui_clslet notification_dot_css = css`.ui-ndot { position: relative; display: inline-flex; vertical-align: middle; }.ui-ndot-mark { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;  min-width: var(--d); height: var(--d); padding: 0; border-radius: 999px; background: var(--t); color: #fff;  font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums; --t: var(--ui-danger); --d: 10px; }.ui-ndot-count { --d: 18px; padding: 0 5px; }.ui-ndot-outline .ui-ndot-mark { box-shadow: 0 0 0 2px var(--ui-bg); }.ui-ndot-sm .ui-ndot-mark { --d: 8px; font-size: 10px; }.ui-ndot-sm .ui-ndot-count { --d: 16px; padding: 0 4px; }.ui-ndot-lg .ui-ndot-mark { --d: 12px; font-size: 12px; }.ui-ndot-lg .ui-ndot-count { --d: 20px; padding: 0 6px; }.ui-ndot-accent .ui-ndot-mark { --t: var(--ui-accent); color: var(--ui-accent-fg); }.ui-ndot-success .ui-ndot-mark { --t: var(--ui-success); }.ui-ndot-warning .ui-ndot-mark { --t: var(--ui-warning); }.ui-ndot-info .ui-ndot-mark { --t: var(--ui-info); }.ui-ndot-neutral .ui-ndot-mark { --t: var(--ui-muted); }.ui-ndot-top-right .ui-ndot-mark { top: 0; right: 0; transform: translate(40%, -40%); }.ui-ndot-top-left .ui-ndot-mark { top: 0; left: 0; transform: translate(-40%, -40%); }.ui-ndot-bottom-right .ui-ndot-mark { bottom: 0; right: 0; transform: translate(40%, 40%); }.ui-ndot-bottom-left .ui-ndot-mark { bottom: 0; left: 0; transform: translate(-40%, 40%); }.ui-ndot-pulse .ui-ndot-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--t);  animation: ui-ndot-pulse 1.6s ease-out infinite; }@keyframes ui-ndot-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.4); opacity: 0; } }@media (prefers-reduced-motion: reduce) { .ui-ndot-pulse .ui-ndot-mark::after { animation: none; transform: scale(1.8); opacity: .25; } }`view NotificationDot(count: int? = null, limit: int = 99, show: bool = true, label: str? = null, tone: str = "danger",                     position: str = "top-right", size: str = "md", pulse: bool = false, outline: bool = true,                     class: str? = null, children) {    style global notification_dot_css    let shown = count == null ? null : (count > limit ? `${limit}+` : str(count))    <span class={ui_cls(["ui-ndot", `ui-ndot-${position}`, tone != "danger" && `ui-ndot-${tone}`, size != "md" && `ui-ndot-${size}`,                         pulse && count == null && "ui-ndot-pulse", outline && "ui-ndot-outline", class])}>        {children}        {show && <span class={ui_cls(["ui-ndot-mark", shown != null && "ui-ndot-count"])}                       role={label != null ? "img" : null} aria-label={label != null ? (count != null ? `${count} ${label}` : label) : null}                       aria-hidden={label == null ? "true" : null}>{shown}</span>}    </span>}