@cl-light-ds/ui 0.4.0 → 0.6.0

package/src/components/input-group/InputGroup.astro

@@ -99,6 +99,8 @@ const {
   data-slot="input-group"
   data-size={size}
   class={cn(
+    // A text prefix ("…lightning.com/"): the input starts right after it, with no left padding.
+    "[&>[data-align=inline-start]:has(>[data-slot=input-group-text])+[data-slot=input-group-control]]:pl-0!",
     "group/input-group border-input bg-card has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 rounded-lg border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto! has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto! has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto!",
     className,
   )}

package/src/components/loading-overlay/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to the `LoadingOverlay` component (and its controller in `@cl-light-ds/ui/lib/loading-overlay`) are documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N14)
+
+New component, replacing the workspace-selection screen's hand-composed `OpeningOverlay.astro` and its `runOverlay` / `revealWorkspace` / `hideOverlay` code.
+
+### `LoadingOverlay`
+
+- The whole screen dimmed and blurred (`bg-foreground/60`, `backdrop-blur-sm`), a 48px `Spinner`, a 30px title (`font-heading text-3xl font-semibold`) and a status line (`text-base`, `background/80`) (D117, D120).
+- Props: `title`, `lines` (status lines), `interval` (ms between lines, default 900, D135), `loop` (cycle instead of stopping on the last line), `open` (render shown).
+- `behind` slot: content shown under the dimming, faded in with `setLoadingOverlayBehind(true)` or `showLoadingOverlay({ behind: true | ms })` (D135, D191). Generalises the screen's workspace iframe.
+- Reveal (D143): `revealLoadingOverlay()` fades the dimming (700ms) and the spinner and text (500ms) away, then hides; returns a Promise.
+- A11y: `aria-busy="true"` while running; the title and status line are a polite live region (`role="status"`); the spinner is hidden from assistive tech (the text says it). On show, focus moves to the overlay (off whatever it covers) and returns on hide.
+- `prefers-reduced-motion`: no fades on reveal or behind.
+
+### Controller (`@cl-light-ds/ui/lib/loading-overlay`)
+
+- `showLoadingOverlay`, `setLoadingOverlayBehind`, `revealLoadingOverlay`, `hideLoadingOverlay`, and the matching `loading-overlay:*` events on the element; fires `loading-overlay:change` (`{ open }`).
+
+### Storybook
+
+- "Loading Overlay" section: run it with changing lines and a reveal, with content behind, and pinned open in a frame.

package/src/components/loading-overlay/LoadingOverlay.astro

@@ -0,0 +1,179 @@
+---
+/**
+ * @component LoadingOverlay
+ * @title Loading Overlay
+ * @description The global loading pattern: the whole screen dimmed and blurred, a 48px spinner, a 30px title and status lines that change as the work goes on. It can show what comes next behind the dimming, then fade away to reveal it.
+ *
+ * @preview
+ *
+ * <LoadingOverlay
+ *   id="demo-overlay"
+ *   title="Opening workspace…"
+ *   lines={["Loading your recordings…", "Fetching guides and assets…", "Getting your workspace ready…"]}
+ * />
+ * <Button data-demo-overlay>Show for 4 seconds</Button>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { LoadingOverlay } from '@cl-light-ds/ui/components/loading-overlay';
+ * ---
+ *
+ * <LoadingOverlay title="Creating workspace…" lines={["Creating scaffolding…", "Setting up roles and permissions…"]} />
+ *
+ * <script>
+ *   import { showLoadingOverlay, revealLoadingOverlay } from '@cl-light-ds/ui/lib/loading-overlay';
+ *
+ *   showLoadingOverlay();
+ *   await createWorkspace();
+ *   await revealLoadingOverlay();
+ * </script>
+ * ```
+ *
+ * @api
+ *
+ * ### JS (`@cl-light-ds/ui/lib/loading-overlay`)
+ *
+ * | Function | Description |
+ * |----------|-------------|
+ * | `showLoadingOverlay({ title, lines, interval, loop, behind, overlay })` | Show it (or restart with new text) |
+ * | `setLoadingOverlayBehind(show)` | Fade the `behind` slot in or out under the dimming |
+ * | `revealLoadingOverlay({ duration })` | Fade the dimming and text away, then hide; returns a Promise |
+ * | `hideLoadingOverlay()` | Hide at once |
+ *
+ * ### Events (on the overlay)
+ *
+ * Inbound: `loading-overlay:show` (detail: show options), `loading-overlay:hide`, `loading-overlay:reveal` (`{ duration }`), `loading-overlay:behind` (`{ show }`).
+ * Outbound: `loading-overlay:change` (`{ open }`).
+ *
+ * ### Data attributes
+ *
+ * `data-reveal` (`on` | `off`), `data-behind` (`on` | `off`), `aria-busy` while running.
+ */
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import Spinner from "../spinner/Spinner.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  /** The big title, e.g. "Opening workspace…". */
+  title?: string;
+  /** Status lines shown in turn under the title. */
+  lines?: string[];
+  /** ms between status lines (D135: 0.9s). */
+  interval?: number;
+  /** Start again after the last line instead of staying on it. */
+  loop?: boolean;
+  /** Render it shown (static screens, docs). Otherwise hidden until shown from JS. */
+  open?: boolean;
+  class?: string;
+}
+
+const {
+  title = "Loading…",
+  lines = [],
+  interval = 900,
+  loop = false,
+  open = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasBehind = Astro.slots.has("behind");
+---
+
+<div
+  data-slot="loading-overlay"
+  data-lines={JSON.stringify(lines)}
+  data-interval={interval}
+  data-loop={loop ? "true" : "false"}
+  data-reveal="off"
+  data-behind="off"
+  aria-busy={open ? "true" : undefined}
+  tabindex="-1"
+  hidden={!open}
+  class={cn(
+    "group/overlay text-background fixed inset-0 z-50 flex flex-col items-center justify-center gap-5 outline-none",
+    className,
+  )}
+  {...rest}
+>
+  {
+    /* D135, D191 — what comes next, behind the dimming; fades in on `data-behind="on"`. Not interactive. */
+    hasBehind && (
+      <div
+        data-slot="loading-overlay-behind"
+        aria-hidden="true"
+        inert
+        class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 group-data-[behind=on]/overlay:opacity-100 motion-reduce:transition-none"
+      >
+        <slot name="behind" />
+      </div>
+    )
+  }
+  {/* D117 — the dimming; D143 — fades away on reveal. */}
+  <div
+    data-slot="loading-overlay-backdrop"
+    aria-hidden="true"
+    class="bg-foreground/60 absolute inset-0 backdrop-blur-sm transition-opacity duration-700 group-data-[reveal=on]/overlay:opacity-0 motion-reduce:transition-none"
+  >
+  </div>
+  <Spinner
+    aria-hidden="true"
+    role="presentation"
+    class="relative size-12 transition-opacity duration-500 group-data-[reveal=on]/overlay:opacity-0 motion-reduce:transition-none"
+  />
+  <div
+    role="status"
+    aria-live="polite"
+    class="relative flex flex-col items-center gap-1 px-6 text-center transition-opacity duration-500 group-data-[reveal=on]/overlay:opacity-0 motion-reduce:transition-none"
+  >
+    <p data-slot="loading-overlay-title" class="font-heading text-3xl font-semibold tracking-tight">
+      {title}
+    </p>
+    <p
+      data-slot="loading-overlay-status"
+      class="text-background/80 text-base"
+      hidden={lines.length === 0}
+    >
+      {lines[0]}
+    </p>
+  </div>
+</div>
+
+<script>
+  import {
+    hideLoadingOverlay,
+    revealLoadingOverlay,
+    setLoadingOverlayBehind,
+    showLoadingOverlay,
+    type LoadingOverlayShowOptions,
+  } from "@cl-light-ds/ui/lib/loading-overlay";
+
+  document.querySelectorAll<HTMLElement>('[data-slot="loading-overlay"]').forEach((root) => {
+    if (root.dataset.wired === "true") return;
+    root.dataset.wired = "true";
+    root.addEventListener("loading-overlay:show", (event) =>
+      showLoadingOverlay({
+        ...((event as CustomEvent<LoadingOverlayShowOptions>).detail ?? {}),
+        overlay: root,
+      }),
+    );
+    root.addEventListener("loading-overlay:hide", () => hideLoadingOverlay(root));
+    root.addEventListener("loading-overlay:reveal", (event) =>
+      revealLoadingOverlay({
+        ...((event as CustomEvent<{ duration?: number }>).detail ?? {}),
+        overlay: root,
+      }),
+    );
+    root.addEventListener("loading-overlay:behind", (event) =>
+      setLoadingOverlayBehind(
+        (event as CustomEvent<{ show?: boolean }>).detail?.show ?? true,
+        root,
+      ),
+    );
+    // Rendered open: run its status lines.
+    if (!root.hidden) showLoadingOverlay({ overlay: root });
+  });
+</script>

package/src/components/loading-overlay/index.ts

@@ -0,0 +1,8 @@
+export { default as LoadingOverlay } from "./LoadingOverlay.astro";
+export {
+  showLoadingOverlay,
+  hideLoadingOverlay,
+  revealLoadingOverlay,
+  setLoadingOverlayBehind,
+} from "../../lib/loading-overlay";
+export type { LoadingOverlayShowOptions } from "../../lib/loading-overlay";

package/src/components/notifications-menu/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+All notable changes to the `NotificationsMenu` component family (`NotificationsMenu`, `NotificationsMenuItem`) are documented in this file.
+
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **The bell, Clear all and each ✕ have `type="button"`.** The bell is a `PopoverTrigger` (fixed there); Clear all and ✕ are `Button`s, which have no type, so inside a `<form>` they submitted it.
+
+
+## Workspace selection handover (N10)
+
+### Added
+
+- `NotificationsMenu`: a ghost `icon-sm` bell (`PopoverTrigger`) with a red `destructive` dot while any notification is unseen, opening a 360px (`w-90`) `PopoverContent` (`align="end"`, `sideOffset` 6): a header with the title and a link-style **Clear all**, a separator, a scrolling list (max 320px), and an empty state.
+- `NotificationsMenuItem`: avatar (DS `Avatar size="sm"`, initials or image) or a 24px icon chip (`tone`: `default` / `success` / `warning` / `destructive`), title, text, a "context · time" line (`<time>` when `datetime` is given), a blue `primary` "new" dot centred on the right (D154, no tint, D162) with sr-only "(new)", and a ✕ (`Button` ghost `icon-xs`, C25) shown on hover / focus-within (always on coarse pointers). Default slot for extra content (e.g. a Download button); `media` slot to replace the avatar / icon.
+- Items come from the `notifications` prop (JSON-serialisable data) and/or slotted `NotificationsMenuItem`s.
+- Seen logic (D141, D165): an item counts as seen once `seenThreshold` (60%) of it has been in view in the open list, or at once when hovered or keyboard-focused. Hovered / focused items lose their dot immediately; scrolled-to ones when the popover closes. The bell's dot and accessible name ("Notifications — {count} new") stay in sync.
+- Empty state (D203): the designer's `all-caught-up.svg` (144×104) with "You're all caught up". Copy, illustration (`emptyIllustration`, or `false`) and the whole block (`empty` slot) are overridable.
+- Events on the root: `notifications:dismiss` `{ id }` and `notifications:clear` `{ ids }` (both cancelable), `notifications:seen` `{ ids }`, `notifications:change` `{ total, unseen }`. Inbound `notifications:add` `{ item, position }`; any other DOM change to the list is picked up by a `MutationObserver`.
+- After a dismiss, focus moves to the next (or previous) item's ✕, else to the popover.
+
+### Generalised from the reference (cl-design `NotificationsPopover.astro`)
+
+- "workspace · time" → `context` + `time`; all copy (title, labels, empty state) is props, with the reference's English as defaults except the empty description, which is now generic.
+- Screen-specific export/duplicate templates are not part of the component: render a `NotificationsMenuItem` (e.g. in a `<template>`) and add it with `notifications:add`.
+- The bell is the trigger itself (`PopoverTrigger` renders the `Button`), so `aria-expanded` / `aria-controls` land on it, not on a wrapper.

package/src/components/notifications-menu/NotificationsMenu.astro

@@ -0,0 +1,375 @@
+---
+/**
+ * @component NotificationsMenu
+ * @title Notifications Menu
+ * @description A bell button with a red dot while there are unseen notifications, opening a 360px popover: a header with Clear all, the notifications (dismiss one with ✕), and an empty state.
+ *
+ * @preview
+ *
+ * <NotificationsMenu
+ *   notifications={[
+ *     { id: "1", title: "Anna Lee commented", text: "“Step 4 needs a new screenshot.”", context: "Northwind Group", time: "5 min ago", initials: "AL", new: true },
+ *     { id: "2", title: "Your recording got 120 views", text: "“Create a sales order” this week.", context: "Contoso", time: "Yesterday", icon: Eye },
+ *   ]}
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { NotificationsMenu, NotificationsMenuItem } from '@cl-light-ds/ui/components/notifications-menu';
+ * import { CircleCheck, Eye } from '@lucide/astro';
+ * ---
+ *
+ * <!-- From data -->
+ * <NotificationsMenu
+ *   notifications={[
+ *     { id: "1", title: "Anna Lee commented", text: "Step 4 needs a new screenshot.", context: "Northwind Group", time: "5 min ago", initials: "AL", new: true },
+ *     { id: "2", title: "120 new views", context: "Contoso", time: "Yesterday", icon: Eye },
+ *   ]}
+ * />
+ *
+ * <!-- Or composed, e.g. for an item with an action -->
+ * <NotificationsMenu>
+ *   <NotificationsMenuItem id="export-1" title="Your export is ready" icon={CircleCheck} tone="success" time="Just now" new>
+ *     <Button as="a" href="/export.zip" download variant="outline" size="sm">Download</Button>
+ *   </NotificationsMenuItem>
+ * </NotificationsMenu>
+ * ```
+ *
+ * @api
+ *
+ * ### Seen / new
+ *
+ * A notification with `new` shows a blue dot and keeps the bell's red dot on. It counts as **seen** once
+ * at least `seenThreshold` (60%) of it has been in view in the open list, or as soon as it is hovered or
+ * keyboard-focused. Hovered / focused ones lose their dot at once; ones seen by scrolling lose it when the
+ * popover closes. The bell's red dot and accessible name follow the unseen count live.
+ *
+ * ### Events (on the `[data-slot="notifications-menu"]` root, bubbling)
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `notifications:dismiss` | `{ id }` | ✕ pressed. Cancelable: `preventDefault()` keeps the item. |
+ * | `notifications:clear` | `{ ids }` | Clear all pressed. Cancelable. |
+ * | `notifications:seen` | `{ ids }` | These notifications were just seen (in view, hovered or focused). |
+ * | `notifications:change` | `{ total, unseen }` | The count or unseen count changed. |
+ *
+ * Inbound: dispatch `notifications:add` with `{ item: HTMLElement, position?: "start" | "end" }` on the root
+ * to add a rendered `NotificationsMenuItem` (e.g. cloned from a `<template>`); it defaults to the top. Items
+ * added or removed in the list any other way are picked up too.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { Bell } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../popover";
+import { Separator } from "../separator";
+import NotificationsMenuItem from "./NotificationsMenuItem.astro";
+import type { NotificationsMenuItemData } from "./types";
+import allCaughtUp from "./all-caught-up.svg?url";
+
+interface Props extends HTMLAttributes<"div"> {
+  /** Notifications rendered before any slotted `NotificationsMenuItem`s. */
+  notifications?: NotificationsMenuItemData[];
+  /** Popover heading. */
+  title?: string;
+  /** The bell's accessible name with nothing unseen. */
+  label?: string;
+  /** The bell's accessible name with unseen ones; `{count}` is replaced. */
+  unseenLabel?: string;
+  clearLabel?: string;
+  /** Accessible name of each ✕; `{title}` is replaced. */
+  dismissLabel?: string;
+  /** Screen-reader text after a new notification. */
+  newLabel?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  /** Image URL for the empty state; `false` for none. Default: the "all caught up" illustration. */
+  emptyIllustration?: string | false;
+  /** Share of an item that must be in view to count as seen (0–1). */
+  seenThreshold?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  class?: string;
+}
+
+const {
+  notifications = [],
+  title = "Notifications",
+  label = "Notifications",
+  unseenLabel = "Notifications — {count} new",
+  clearLabel = "Clear all",
+  dismissLabel = "Dismiss: {title}",
+  newLabel = "(new)",
+  emptyTitle = "You're all caught up",
+  emptyDescription = "New notifications will show up here.",
+  emptyIllustration = allCaughtUp,
+  seenThreshold = 0.6,
+  side = "bottom",
+  align = "end",
+  sideOffset = 6,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasSlotItems = Astro.slots.has("default");
+const hasEmptySlot = Astro.slots.has("empty");
+const empty = notifications.length === 0 && !hasSlotItems;
+// Server-side guess from the data; the script recounts slotted items on load.
+const unseen = notifications.filter((n) => n.new).length;
+---
+
+<div
+  {...rest}
+  data-slot="notifications-menu"
+  data-label={label}
+  data-unseen-label={unseenLabel}
+  data-seen-threshold={seenThreshold}
+  class={cn("inline-flex", className)}
+>
+  <Popover class="flex">
+    <PopoverTrigger
+      variant="ghost"
+      size="icon-sm"
+      class="group/bell relative"
+      aria-label={unseen ? unseenLabel.replace("{count}", String(unseen)) : label}
+      data-unseen={unseen ? "true" : "false"}
+      data-notifications-bell
+    >
+      <Bell />
+      {/* The red dot, while any notification is unseen (D141). */}
+      <span
+        data-slot="notifications-menu-badge"
+        class="bg-destructive ring-background absolute top-1 right-1 hidden size-2 rounded-full ring-2 group-data-[unseen=true]/bell:block"
+        aria-hidden="true"
+      ></span>
+    </PopoverTrigger>
+
+    <PopoverContent
+      side={side}
+      align={align}
+      sideOffset={sideOffset}
+      class="group/notifications w-90 max-w-[calc(100vw-1rem)] gap-0 p-0"
+      data-empty={empty ? "true" : "false"}
+      data-notifications-content
+    >
+      <PopoverHeader class="flex-row items-center justify-between gap-2 p-3">
+        <PopoverTitle>{title}</PopoverTitle>
+        <Button
+          type="button"
+          variant="link"
+          size="sm"
+          class="group-data-[empty=true]/notifications:hidden"
+          data-notifications-clear
+        >
+          {clearLabel}
+        </Button>
+      </PopoverHeader>
+
+      <Separator />
+
+      <ul
+        data-slot="notifications-menu-list"
+        aria-label={title}
+        class="flex max-h-80 flex-col overflow-y-auto group-data-[empty=true]/notifications:hidden"
+      >
+        {
+          notifications.map((n) => (
+            <NotificationsMenuItem {...n} dismissLabel={dismissLabel} newLabel={newLabel} />
+          ))
+        }
+        <slot />
+      </ul>
+
+      <div
+        data-slot="notifications-menu-empty"
+        class="hidden flex-col items-center gap-2 px-6 py-10 text-center group-data-[empty=true]/notifications:flex"
+      >
+        {
+          hasEmptySlot ? (
+            <slot name="empty" />
+          ) : (
+            <>
+              {emptyIllustration && (
+                <img src={emptyIllustration} alt="" width="144" height="104" class="-my-2" />
+              )}
+              <p class="text-sm font-medium">{emptyTitle}</p>
+              {emptyDescription && <p class="text-muted-foreground text-xs">{emptyDescription}</p>}
+            </>
+          )
+        }
+      </div>
+    </PopoverContent>
+  </Popover>
+</div>
+
+<script>
+  const wired = new WeakSet<Element>();
+
+  function wire(root: HTMLElement) {
+    if (wired.has(root)) return;
+    wired.add(root);
+
+    // Hold references now: the popover portals its content to <body> while open.
+    const popover = root.querySelector<HTMLElement>('[data-slot="popover"]');
+    const bell = root.querySelector<HTMLElement>("[data-notifications-bell]");
+    const content = root.querySelector<HTMLElement>("[data-notifications-content]");
+    const list = root.querySelector<HTMLElement>('[data-slot="notifications-menu-list"]');
+    const clear = root.querySelector<HTMLElement>("[data-notifications-clear]");
+    if (!popover || !bell || !content || !list) return;
+
+    const label = root.dataset.label ?? "Notifications";
+    const unseenLabel = root.dataset.unseenLabel ?? "{count}";
+    const threshold = Number(root.dataset.seenThreshold ?? 0.6);
+    let open = false;
+    let last = "";
+
+    const items = () =>
+      Array.from(list.querySelectorAll<HTMLElement>('[data-slot="notifications-menu-item"]'));
+    const emit = (name: string, detail: unknown, cancelable = false) =>
+      root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, cancelable }));
+
+    const update = () => {
+      const all = items();
+      const unseen = all.filter(
+        (n) => n.dataset.new === "true" && !n.hasAttribute("data-seen"),
+      ).length;
+      bell.dataset.unseen = String(unseen > 0);
+      bell.setAttribute(
+        "aria-label",
+        unseen ? unseenLabel.replace("{count}", String(unseen)) : label,
+      );
+      content.dataset.empty = String(all.length === 0);
+      const key = `${all.length}:${unseen}`;
+      if (key !== last) {
+        last = key;
+        emit("notifications:change", { total: all.length, unseen });
+      }
+    };
+
+    /** Mark as seen. `now` also drops the blue dot (hover / focus); otherwise it goes on close. */
+    const see = (notes: HTMLElement[], now: boolean) => {
+      const fresh = notes.filter(
+        (n) => n.dataset.new === "true" && !n.hasAttribute("data-seen"),
+      );
+      for (const n of notes) {
+        if (n.dataset.new !== "true") continue;
+        if (now) {
+          n.dataset.new = "false";
+          n.removeAttribute("data-seen");
+        } else n.setAttribute("data-seen", "");
+      }
+      if (fresh.length) emit("notifications:seen", { ids: fresh.map((n) => n.dataset.notification) });
+      update();
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!open) return;
+        see(
+          entries.filter((e) => e.isIntersecting).map((e) => e.target as HTMLElement),
+          false,
+        );
+      },
+      { root: list, threshold },
+    );
+    const watch = () => {
+      observer.disconnect();
+      for (const n of items()) observer.observe(n);
+    };
+
+    popover.addEventListener("popover:change", (event) => {
+      open = (event as CustomEvent<{ open: boolean }>).detail.open;
+      if (open) {
+        // Let it lay out before anything counts as in view.
+        requestAnimationFrame(watch);
+      } else {
+        observer.disconnect();
+        for (const n of items()) {
+          if (n.hasAttribute("data-seen")) {
+            n.dataset.new = "false";
+            n.removeAttribute("data-seen");
+          }
+        }
+        update();
+      }
+    });
+
+    // Hovering or keyboard-focusing a notification is seeing it (D165).
+    const noteOf = (event: Event) =>
+      (event.target as HTMLElement).closest<HTMLElement>('[data-slot="notifications-menu-item"]');
+    list.addEventListener("mouseover", (event) => {
+      const note = noteOf(event);
+      if (note) see([note], true);
+    });
+    list.addEventListener("focusin", (event) => {
+      // Only keyboard focus: the popover may focus the first item on open.
+      const note = noteOf(event);
+      if (note && (event.target as HTMLElement).matches(":focus-visible")) see([note], true);
+    });
+
+    const focusAfterRemoval = (next: HTMLElement | null) => {
+      const target = next?.querySelector<HTMLElement>("[data-notifications-dismiss]");
+      if (target) target.focus();
+      else {
+        if (!content.hasAttribute("tabindex")) content.tabIndex = -1;
+        content.focus();
+      }
+    };
+
+    list.addEventListener("click", (event) => {
+      const dismiss = (event.target as HTMLElement).closest("[data-notifications-dismiss]");
+      const note = dismiss?.closest<HTMLElement>('[data-slot="notifications-menu-item"]');
+      if (!note) return;
+      if (!emit("notifications:dismiss", { id: note.dataset.notification }, true)) return;
+      const next =
+        (note.nextElementSibling as HTMLElement | null) ??
+        (note.previousElementSibling as HTMLElement | null);
+      note.remove();
+      update();
+      focusAfterRemoval(next?.matches('[data-slot="notifications-menu-item"]') ? next : null);
+    });
+
+    clear?.addEventListener("click", () => {
+      const all = items();
+      if (!emit("notifications:clear", { ids: all.map((n) => n.dataset.notification) }, true)) return;
+      for (const n of all) n.remove();
+      update();
+      focusAfterRemoval(null);
+    });
+
+    root.addEventListener("notifications:add", (event) => {
+      const { item, position = "start" } =
+        (event as CustomEvent<{ item?: HTMLElement; position?: "start" | "end" }>).detail ?? {};
+      if (!item) return;
+      if (position === "end") list.append(item);
+      else list.prepend(item);
+    });
+
+    // Items added / removed / re-flagged by app code stay in sync.
+    new MutationObserver((records) => {
+      if (open) {
+        for (const r of records)
+          for (const node of r.addedNodes)
+            if (node instanceof HTMLElement && node.matches('[data-slot="notifications-menu-item"]'))
+              observer.observe(node);
+      }
+      update();
+    }).observe(list, { childList: true, subtree: true, attributeFilter: ["data-new"] });
+
+    update();
+  }
+
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="notifications-menu"]')
+    .forEach(wire);
+</script>