@cl-light-ds/ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,130 @@
+---
+/**
+ * @component NotificationsMenuItem
+ * @title Notifications Menu Item
+ * @description One row of a NotificationsMenu: avatar or icon, title, text, a "context · time" line, a blue "new" dot and a ✕ to dismiss it.
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * <NotificationsMenuItem id="n1" title="Anna commented" text="Looks good to me" context="Northwind" time="2 min ago" initials="AL" new />
+ *
+ * <NotificationsMenuItem id="n2" 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>
+ * ```
+ *
+ * Use it inside `NotificationsMenu`'s default slot, or let `NotificationsMenu` render it from its `notifications` prop.
+ * The default slot holds extra content under the text (e.g. an action button); the `media` slot replaces the avatar / icon.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { X } from "@lucide/astro";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Button } from "../button";
+import type { NotificationsMenuItemData } from "./types";
+
+type Props = Omit<HTMLAttributes<"li">, "id" | "title"> &
+  NotificationsMenuItemData & {
+    /** Accessible name of the ✕. `{title}` is replaced by the notification's title. */
+    dismissLabel?: string;
+    /** Screen-reader text after a new notification. */
+    newLabel?: string;
+    class?: string;
+  };
+
+const {
+  id,
+  title,
+  text,
+  context,
+  time,
+  datetime,
+  initials,
+  avatarSrc,
+  icon: Icon,
+  tone = "default",
+  new: isNew = false,
+  dismissLabel = "Dismiss: {title}",
+  newLabel = "(new)",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasMedia = Astro.slots.has("media");
+const hasExtra = Astro.slots.has("default");
+
+const iconChipVariants = cva(
+  "bg-muted flex size-6 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+  {
+    variants: {
+      tone: {
+        default: "text-muted-foreground",
+        success: "text-success",
+        warning: "text-warning",
+        destructive: "text-destructive",
+      },
+    },
+    defaultVariants: { tone: "default" },
+  },
+);
+---
+
+<li
+  {...rest}
+  data-slot="notifications-menu-item"
+  data-notification={id}
+  data-new={isNew ? "true" : "false"}
+  class={cn(
+    "group/note relative flex items-start gap-3 border-b border-border p-3 pe-9 transition-colors last:border-b-0",
+    className,
+  )}
+>
+  {
+    hasMedia ? (
+      <slot name="media" />
+    ) : initials || avatarSrc ? (
+      <Avatar size="sm" variant={avatarSrc ? "image" : "initials"}>
+        {avatarSrc && <AvatarImage src={avatarSrc} alt="" />}
+        <AvatarFallback>{initials}</AvatarFallback>
+      </Avatar>
+    ) : Icon ? (
+      <span class={iconChipVariants({ tone })} aria-hidden="true">
+        <Icon />
+      </span>
+    ) : null
+  }
+  <span class={cn("flex min-w-0 flex-1 flex-col", hasExtra ? "gap-1" : "gap-0.5")}>
+    <span data-slot="notifications-menu-item-title" class="text-foreground text-sm font-medium">{title}</span>
+    {text && <span class="text-muted-foreground text-xs">{text}</span>}
+    {hasExtra && <span data-slot="notifications-menu-item-extra"><slot /></span>}
+    {
+      (context || time) && (
+        <span class="text-muted-foreground/70 text-xs">
+          {context}
+          {context && time && " · "}
+          {time && (datetime ? <time datetime={datetime}>{time}</time> : time)}
+        </span>
+      )
+    }
+  </span>
+  {/* The "new" dot: centred vertically, clear of the ✕ (D154). Never alone: sr-only text too. */}
+  <span
+    data-slot="notifications-menu-item-dot"
+    class="bg-primary absolute top-1/2 right-3.5 hidden size-2 -translate-y-1/2 rounded-full group-focus-within/note:hidden group-hover/note:hidden group-data-[new=true]/note:block"
+    aria-hidden="true"
+  ></span>
+  <span class="sr-only group-data-[new=false]/note:hidden">{newLabel}</span>
+  <Button
+    type="button"
+    variant="ghost"
+    size="icon-xs"
+    class="absolute top-2 right-2 opacity-0 group-focus-within/note:opacity-100 group-hover/note:opacity-100 pointer-coarse:opacity-100"
+    aria-label={dismissLabel.replace("{title}", title)}
+    data-notifications-dismiss
+  >
+    <X />
+  </Button>
+</li>

package/src/components/notifications-menu/all-caught-up.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="104" viewBox="-12 -12 144 104" fill="none" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTo1ZTFjODE4MC05NTYxLTQ3YWYtOGYwMy0zNWJmODU4YjViN2EAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaC+NPxB7N/p9adnc2qsfPxgAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpjYjNhMTNlZS1kN2NlLTQyNGYtODBiYi1mM2E3MjEwNjRhZmZscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNotRHSjZb1m13eqMxg3CrdWwAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggaByci08iEbo8a7fyckB98mnsuZspV6glutU6CRYHq7ikZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaCE4XFoYfQdK2oaIn4KqoaMAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCBwyJmeK42jGvzuOwLqXoDrEDyRkMXdC7jb6T0G7aNtl2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBimZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjVlMWM4MTgwLTk1NjEtNDdhZi04ZjAzLTM1YmY4NThiNWI3YS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjQwNzRmMDY1LWM3ZGEtNDE5My04MmJkLTE5MTI2NjA1M2NkMnJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBoHJyLTyIRujxrt/JyQH3yaey5mylXqCW61ToJFgeruKJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggDoC/w970Rz1Igqx1EVS7RMxcJhZaAy+qJS5QZcSbvbqiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggNp2qc1mvgSvJEClX2ZNnwW8h6YEISoyFzEQlrAgN7hl0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQOsPa7KlN7A+bxSZMbiwEHyIQO5N1z1/LriHBGTnTLVR2U8DysV/pK+fSfYixl2JUMqvt8cAN/cU5VG46RwGmuI=</c2pa:manifest></metadata>
+  <defs>
+    <filter id="sBack" x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id="sFront" x="-40%" y="-40%" width="180%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id="sCheck" x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#3785E0" flood-opacity="0.32"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="60" cy="40" r="35" stroke="#F5F9FE" stroke-width="10"></circle>
+  <circle cx="60" cy="40" r="19" stroke="#EBF3FC" stroke-width="8"></circle>
+  <g filter="url(#sBack)"><rect x="22" y="12" width="76" height="18" rx="6" fill="#FFFFFF"></rect></g>
+  <rect x="22.5" y="12.5" width="75" height="17" rx="5.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <circle cx="31" cy="21" r="4" fill="#F4F4F5"></circle>
+  <rect x="39" y="19" width="30" height="4" rx="2" fill="#F4F4F5"></rect>
+  <g filter="url(#sFront)"><rect x="16" y="34" width="88" height="24" rx="7" fill="#FFFFFF"></rect></g>
+  <rect x="16.5" y="34.5" width="87" height="23" rx="6.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <circle cx="28" cy="46" r="6" fill="#EBF3FC"></circle>
+  <path d="M25.5 45.5 a2.5 2.5 0 0 1 5 0 c0 2.2 1 3 1 3 h-7 s1 -0.8 1 -3 Z M27.2 50.2 a1 1 0 0 0 1.6 0" stroke="#3785E0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
+  <rect x="39" y="41" width="40" height="4" rx="2" fill="#E4E4E7"></rect>
+  <rect x="39" y="48.5" width="26" height="3.5" rx="1.75" fill="#F4F4F5"></rect>
+  <g filter="url(#sCheck)"><circle cx="100" cy="58" r="11" fill="#3785E0"></circle></g>
+  <circle cx="100" cy="58" r="11" stroke="#FFFFFF" stroke-width="2.5"></circle>
+  <path d="M95.5 58.2 l3 3 l6 -6" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

package/src/components/notifications-menu/index.ts

@@ -0,0 +1,3 @@
+export { default as NotificationsMenu } from "./NotificationsMenu.astro";
+export { default as NotificationsMenuItem } from "./NotificationsMenuItem.astro";
+export * from "./types";

package/src/components/notifications-menu/types.ts

@@ -0,0 +1,32 @@
+import type { AstroComponent } from "@lucide/astro";
+
+/** Colour of a notification's icon chip. */
+export type NotificationTone = "default" | "success" | "warning" | "destructive";
+
+/**
+ * One notification. Everything except `icon` is JSON-serialisable, so a page
+ * can pass an API response straight into `<NotificationsMenu notifications={…} />`.
+ */
+export interface NotificationsMenuItemData {
+  /** Stable id. Sent back in `notifications:dismiss` / `notifications:seen`. */
+  id: string;
+  title: string;
+  /** Second line, muted. */
+  text?: string;
+  /** Where it happened (a workspace, project, team…). Shown as "context · time". */
+  context?: string;
+  /** Display time, e.g. "2 min ago". */
+  time?: string;
+  /** Machine-readable time for the `<time>` element (ISO 8601). */
+  datetime?: string;
+  /** Initials for an Avatar. Takes precedence over `icon`. */
+  initials?: string;
+  /** Avatar image (with `initials` as its fallback). */
+  avatarSrc?: string;
+  /** A Lucide icon, shown in a round chip when there is no avatar. */
+  icon?: AstroComponent;
+  /** Colour of the icon chip. Default `"default"` (muted). */
+  tone?: NotificationTone;
+  /** Unseen: shows the blue dot and counts towards the bell's red dot. */
+  new?: boolean;
+}

package/src/components/option-card/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to the `OptionCard` component will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C19)
+
+### Fixed
+
+- Accent badges inside an `OptionCard` (the `badge` slot and the nested content) now get a `chart-1` border from the card itself (`[&_[data-slot=badge][data-variant=accent]]:border-chart-1`). The accent badge is bordered in its own fill, the same pale blue as a chosen card's tint, so "Recommended" and "Linked" disappeared on a chosen card (D109). Consumers no longer add `class="border-chart-1"`; it still works if left in.
+- Not opt-in: it only touches accent badges inside an option card, and only their border colour, to keep them visible. Badges elsewhere, and other badge variants, are unchanged.
+- Always on, not only while the card is chosen: the reference gives these badges the darker edge on every card, and the badge doesn't change as the choice moves between cards.
+- Storybook: the badges in the previews no longer carry the class.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N18)
+
+### Added
+
+- `OptionCard`: a radio choice as a card, for use inside `RadioGroup` (which owns the value, roving focus, arrow keys, `role="radio"`/`aria-checked` and the hidden form input).
+  - Radio, bold title, optional `badge` slot beside it, muted description. `title`/`description` props, or `title`/`description` slots for rich text.
+  - Selected (`data-checked` on its radio): `border-primary` on `badge-accent` at 50%. No JavaScript of its own; the state is read with `has-[]` from the runtime's attributes.
+  - Optional nested content (default slot), shown only while the card is chosen, outside the `<label>` so it can hold its own controls. `content="inset"` (notes under the description after a divider, as Duplicate's link details), `"panel"` (white bordered panel, as Export's checklist) or `"plain"`.
+  - `disabled` dims the card and disables its radio; `id` goes on the radio item.
+- Accent badges on a chosen card blend into its tint; give them `class="border-chart-1"` (C19). Not applied automatically, since `Badge` exposes no variant hook.
+- Storybook: "Option Card" under Forms.

package/src/components/option-card/OptionCard.astro

@@ -0,0 +1,143 @@
+---
+/**
+ * @component OptionCard
+ * @title Option Card
+ * @description A radio choice drawn as a card: radio, bold title (with an optional badge), description. The chosen card has a primary border on the accent tint, and can open more content inside it. Goes inside a `RadioGroup`, which owns selection, keyboard and ARIA.
+ *
+ * @preview
+ *
+ * <RadioGroup name="mode" defaultValue="copy" aria-label="How content is brought across" class="gap-3">
+ *   <OptionCard value="copy" title="Make independent copies" description="The new workspace gets its own copies.">
+ *     <Badge slot="badge" variant="accent" size="sm">Recommended</Badge>
+ *   </OptionCard>
+ *   <OptionCard value="link" title="Link to the original" description="Any change made in either workspace appears in both." />
+ * </RadioGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RadioGroup } from '@cl-light-ds/ui/components/radio-group';
+ * import { OptionCard } from '@cl-light-ds/ui/components/option-card';
+ * ---
+ *
+ * <RadioGroup name="export" defaultValue="full" aria-label="What to export" class="gap-3">
+ *   <OptionCard value="full" title="Full workspace" description="Recordings, settings and team members." />
+ *   <OptionCard value="choose" title="Choose what to include" description="Pick exactly which parts to export." content="panel">
+ *     <!-- shown only while this option is chosen -->
+ *   </OptionCard>
+ * </RadioGroup>
+ * ```
+ *
+ * The title, badge and description are the radio's `<label>`, so the whole
+ * top of the card selects it. The default slot is outside the label (it may
+ * hold its own controls, e.g. checkboxes) and is shown only while the card is
+ * chosen:
+ *
+ * - `content="inset"`: lined up under the description, after a divider, small muted text (notes).
+ * - `content="panel"`: a white bordered panel inset in the card (a checklist).
+ * - `content="plain"`: no styling, only the show/hide.
+ *
+ * Accent badges anywhere in the card (the `badge` slot, nested notes) get a
+ * `chart-1` edge, so they don't disappear on the chosen card's accent tint
+ * (C19, D109). No class needed on the badge.
+ *
+ * Listen for `radio-group:change` on the `RadioGroup` for the value.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { RadioGroupItem } from "../radio-group";
+
+type OptionCardContent = "inset" | "panel" | "plain";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class" | "title"> {
+  /** The radio value. */
+  value: string;
+  /** Bold title. Or use the `title` slot. */
+  title?: string;
+  /** Muted text under the title. Or use the `description` slot. */
+  description?: string;
+  /** How the nested (default slot) content is framed while chosen. */
+  content?: OptionCardContent;
+  disabled?: boolean;
+  /** id for the radio item. */
+  id?: string;
+  class?: string;
+}
+
+const {
+  value,
+  title,
+  description,
+  content = "inset",
+  disabled = false,
+  id,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasBadge = Astro.slots.has("badge");
+const hasTitleSlot = Astro.slots.has("title");
+const hasDescriptionSlot = Astro.slots.has("description");
+const hasContent = Astro.slots.has("default");
+
+const optionCardContentVariants = cva(
+  // Hidden until this card's own radio (not one nested in the content) is checked.
+  "hidden group-has-[>[data-slot=option-card-label]>[data-checked]]/option-card:block",
+  {
+    variants: {
+      content: {
+        inset: "-mt-2 mr-4 mb-4 ml-11 border-t pt-3 text-xs text-muted-foreground",
+        panel: "mx-3 mb-3 rounded-lg border bg-background",
+        plain: "",
+      },
+    },
+    defaultVariants: { content: "inset" },
+  },
+);
+---
+
+<div
+  {...rest}
+  data-slot="option-card"
+  data-value={value}
+  class={cn(
+    "group/option-card flex flex-col rounded-lg border bg-card transition-colors",
+    "has-[>[data-slot=option-card-label]>[data-checked]]:border-primary has-[>[data-slot=option-card-label]>[data-checked]]:bg-badge-accent/50",
+    "has-[>[data-slot=option-card-label]>[data-disabled]]:opacity-50",
+    // C19, D109 — an accent badge is bordered in its own fill, the same pale
+    // blue as the chosen tint; a chart-1 edge keeps it visible. Always on (not
+    // only while chosen), so the badge doesn't change as the choice moves.
+    "[&_[data-slot=badge][data-variant=accent]]:border-chart-1",
+    className,
+  )}
+>
+  <label
+    data-slot="option-card-label"
+    class="flex cursor-pointer items-start gap-3 p-4 text-sm text-foreground has-[>[data-disabled]]:cursor-not-allowed"
+  >
+    <RadioGroupItem value={value} id={id} disabled={disabled} class="mt-0.5" />
+    <span class="flex min-w-0 flex-col gap-1">
+      <span data-slot="option-card-title" class="flex flex-wrap items-center gap-2 font-semibold">
+        {hasTitleSlot ? <slot name="title" /> : title}
+        {hasBadge && <slot name="badge" />}
+      </span>
+      {
+        (hasDescriptionSlot || description) && (
+          <span data-slot="option-card-description" class="text-muted-foreground">
+            {hasDescriptionSlot ? <slot name="description" /> : description}
+          </span>
+        )
+      }
+    </span>
+  </label>
+  {
+    hasContent && (
+      <div data-slot="option-card-content" class={optionCardContentVariants({ content })}>
+        <slot />
+      </div>
+    )
+  }
+</div>

package/src/components/option-card/index.ts

@@ -0,0 +1 @@
+export { default as OptionCard } from "./OptionCard.astro";

package/src/components/organisms/top-bar/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to the top bar organism (`organisms/top-bar`) will be documented in this file.
+
+## Date 15th Oct 2026
+## Normal breadcrumb (C1 reverted)
+
+- The bar uses the generic `Breadcrumb` as it is (36px crumbs, the normal spacing) instead of the compact 32px crumbs. To stay 41px with its border, the bar's vertical padding is 2px (was 4px); the 32px controls stay centred.
+
+
+## Date 15th Oct 2026
+## Workspace selection handover (N12, C1)
+
+### Added
+
+- `TopBar` (N12): the organisation-level application bar, 41px including its bottom border (D23): 4px above and below the 32px controls. Sticky by default (`StickySurface`; `sticky={false}` for a plain bar).
+  - Left: a breadcrumb from `crumbs` (`{ label, href? }[]`, the last one current, crumbs without `href` as plain text), or the `breadcrumb` slot. It doesn't wrap; the current crumb truncates.
+  - Right, in order: the `search` slot (e.g. `CommandSearch`), the New workspace split button, the `notifications` slot (e.g. `NotificationsMenu`), the `profile` slot (e.g. `ProfileMenu`).
+  - Split button: primary `primaryLabel` ("New workspace", `primaryShortLabel` "New" on phones) + separator + chevron `DropdownMenu` with `menuItems` (default Import workspace, `id: "import"`). `splitButton={false}` hides it, the `actions` slot replaces it, `menuItems={[]}` drops the chevron. Uses the C2 split-button styles already in `ButtonGroup`.
+  - Event `top-bar:action` (`{ action }`, bubbles, cancelable) on the primary button (`primaryAction`, default `"new-workspace"`) or a row (its `id`); a row with `href` navigates unless cancelled. The button and rows also carry `data-action`.
+  - Holds the toast stack (N9): a `Toaster` with `top` = `TOP_BAR_HEIGHT` (41px), right-aligned with the bar's padding. The bar's surface is the containing block of the stack, so it hangs from the bar's right end and follows it. `toaster={false}` leaves it out; `toasterId`, `toasterOffset`.
+- `types.ts`: `TopBarCrumb`, `TopBarMenuItem`, `TopBarActionDetail`, `TOP_BAR_HEIGHT`.
+- Storybook: "Top Bar" under Organisms.
+
+### Breadcrumb inside the bar (C1)
+
+- Crumbs are 32px tall (`py-1.5`, was the pill's `py-2`, 36px) with 6px either side of the chevron (`px-1.5`, was `px-3`), so the bar stays 41px (D23, D97). The first crumb is pulled back by its padding so its text lines up with the bar's edge. Applied inside the organism; the generic `Breadcrumb` is unchanged.