@happyvertical/smrt-svelte 0.57.46 → 0.57.48

package/agents/components.md

@@ -108,3 +108,10 @@ and `limit`. `iconOnly` (default false) swaps the text trigger for an
 panel under the trigger) or `'beside'` (panel opens at the trigger's inline
 end, top-aligned, for a collapsed rail; `data-placement` on the root).
 `variant` is passed to the trigger `Button` (default `'ghost'`).
+`open` is bindable (`bind:open`) and `onopenchange(open)` reports the bell's
+own changes, so a host can close the panel itself. The panel light-dismisses
+(#4566): a pointer-down outside the bell (document capture, like `Popover`),
+Escape at the document level wherever focus is (returns focus to the trigger),
+and activating a notice link (closes without refocusing, so navigation keeps
+focus). Notice titles are links styled in `--smrt-color-primary` with an
+underline, not the browser default (#4567).

package/dist/components/notifications/NotificationBell.svelte

@@ -18,6 +18,14 @@ interface Props {
   placement?: 'below' | 'beside';
   /** Trigger button variant. */
   variant?: ComponentProps<typeof Button>['variant'];
+  /**
+   * Whether the panel is open. Bindable, so a host can close it (or open it)
+   * itself; the bell still toggles it from the trigger and closes it on light
+   * dismiss (#4566).
+   */
+  open?: boolean;
+  /** Called after the panel opens or closes, with the new state. */
+  onopenchange?: (open: boolean) => void;
 }
 const { t } = useI18n();
 let {
@@ -27,14 +35,33 @@ let {
   iconOnly = false,
   placement = 'below',
   variant = 'ghost',
+  open = $bindable(false),
+  onopenchange,
 }: Props = $props();
 const heading = $derived(label ?? t(M['ui.notification_bell.label']));
 const instanceId = $props.id();
+let root = $state<HTMLDivElement>();
 let panel = $state<HTMLDivElement>();
-let open = $state(false);
 $effect(() => {
   if (open) panel?.focus();
 });
+function setOpen(next: boolean) {
+  if (open === next) return;
+  open = next;
+  onopenchange?.(next);
+}
+// Light dismiss (#4566): a pointer-down anywhere outside the bell closes the
+// panel, like `Popover`. Captured on the document so a click that lands on a
+// control which stops propagation still counts as "outside".
+$effect(() => {
+  if (!open || typeof document === 'undefined') return;
+  const dismiss = (event: PointerEvent) => {
+    if (event.target instanceof Node && !root?.contains(event.target))
+      setOpen(false);
+  };
+  document.addEventListener('pointerdown', dismiss, true);
+  return () => document.removeEventListener('pointerdown', dismiss, true);
+});
 let loading = $state(true);
 let error = $state<string | null>(null);
 let unread = $state(0);
@@ -79,11 +106,14 @@ function safeHref(value: string | null | undefined): string | null {
   }
 }
 function close() {
-  open = false;
+  setOpen(false);
   document.getElementById(`${instanceId}-trigger`)?.focus();
 }
+// Escape closes the panel wherever focus is (the body after following a
+// notice, a control elsewhere in the shell), not only inside the panel. A
+// dialog or palette that owns Escape already stops it before it gets here.
 function keydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && open) {
+  if (event.key === 'Escape' && open && !event.defaultPrevented) {
     event.preventDefault();
     close();
   }
@@ -123,8 +153,10 @@ $effect(() => {
 });
 </script>
 
-<div class="smrt-notification-bell" data-placement={placement} data-smrt-component="NotificationBell">
-  <Button id={`${instanceId}-trigger`} aria-controls={`${instanceId}-panel`} {variant} aria-haspopup="dialog" aria-expanded={open} aria-label={iconOnly ? (unread > 0 ? `${heading}, ${unreadText}` : heading) : undefined} onclick={() => (open = !open)}>
+<svelte:document onkeydown={keydown} />
+
+<div bind:this={root} class="smrt-notification-bell" data-placement={placement} data-smrt-component="NotificationBell">
+  <Button id={`${instanceId}-trigger`} aria-controls={`${instanceId}-panel`} {variant} aria-haspopup="dialog" aria-expanded={open} aria-label={iconOnly ? (unread > 0 ? `${heading}, ${unreadText}` : heading) : undefined} onclick={() => setOpen(!open)}>
     {#if iconOnly}
       <span class="smrt-notification-bell__icon" aria-hidden="true">
         <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" focusable="false"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2m6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4a1.5 1.5 0 0 0-3 0v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1z" /></svg>
@@ -135,12 +167,12 @@ $effect(() => {
     {/if}
   </Button>
   {#if open}
-    <div bind:this={panel} id={`${instanceId}-panel`} role="dialog" aria-label={heading} tabindex="-1" onkeydown={keydown} class="smrt-notification-bell__panel">
+    <div bind:this={panel} id={`${instanceId}-panel`} role="dialog" aria-label={heading} tabindex="-1" class="smrt-notification-bell__panel">
       <header><strong>{heading}</strong><Button variant="ghost" size="sm" disabled={unread === 0 || loading} onclick={() => mutate()}>{t(M['ui.notification_bell.mark_all'])}</Button></header>
       {#if error}<p role="alert">{t(error)}</p>{/if}
       {#if loading}<p role="status">{t(M['ui.notification_bell.loading'])}</p>{:else if items.length === 0}<p>{t(M['ui.notification_bell.empty'])}</p>{:else}<ol>
         {#each items as item (item.id)}<li data-read={item.readAt ? 'true' : 'false'}>
-          {#if safeHref(item.href)}<a href={safeHref(item.href) ?? undefined}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
+          {#if safeHref(item.href)}<a href={safeHref(item.href) ?? undefined} onclick={() => setOpen(false)}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
           {#if item.body}<p>{item.body}</p>{/if}
           {#if !item.readAt}<Button variant="ghost" size="sm" onclick={() => mutate(item.id)}>{t(M['ui.notification_bell.mark_one'])}</Button>{/if}
         </li>{/each}
@@ -161,6 +193,9 @@ $effect(() => {
   ol { display: grid; gap: var(--smrt-spacing-2); padding: 0; list-style: none; }
   li { padding-block: var(--smrt-spacing-2); border-block-end: var(--smrt-hairline); }
   li[data-read='false'] { border-inline-start: 3px solid var(--smrt-color-primary); padding-inline-start: var(--smrt-spacing-2); }
+  /* Notice titles are links: themed like the panel's other text, not the browser's default link blue (#4567). */
+  li a { color: var(--smrt-color-primary); font-weight: var(--smrt-typography-weight-semibold, 600); text-decoration: underline; text-underline-offset: 0.15em; }
+  li a:hover, li a:focus-visible { color: var(--smrt-color-on-surface); }
   p { overflow-wrap: anywhere; }
 }
 </style>

package/dist/components/notifications/NotificationBell.svelte.d.ts

@@ -14,8 +14,16 @@ interface Props {
     placement?: 'below' | 'beside';
     /** Trigger button variant. */
     variant?: ComponentProps<typeof Button>['variant'];
+    /**
+     * Whether the panel is open. Bindable, so a host can close it (or open it)
+     * itself; the bell still toggles it from the trigger and closes it on light
+     * dismiss (#4566).
+     */
+    open?: boolean;
+    /** Called after the panel opens or closes, with the new state. */
+    onopenchange?: (open: boolean) => void;
 }
-declare const NotificationBell: import("svelte").Component<Props, {}, "">;
+declare const NotificationBell: import("svelte").Component<Props, {}, "open">;
 type NotificationBell = ReturnType<typeof NotificationBell>;
 export default NotificationBell;
 //# sourceMappingURL=NotificationBell.svelte.d.ts.map

package/dist/components/notifications/NotificationBell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationBell.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAGvD,UAAU,KAAK;IACb,wEAAwE;IACxE,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACpD;AA8ID,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NotificationBell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationBell.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAGvD,UAAU,KAAK;IACb,wEAAwE;IACxE,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;IACnD;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAsKD,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-svelte",
-  "version": "0.57.46",
+  "version": "0.57.48",
   "smrtJsdoc": "strict",
   "description": "Svelte 5 components for SMRT user management - auth, users, tenants, roles, permissions, groups",
   "type": "module",
@@ -209,12 +209,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/logger": "^0.111.0",
-    "@happyvertical/smrt-languages": "0.57.46",
-    "@happyvertical/smrt-mcp-apps": "0.57.46",
-    "@happyvertical/smrt-types": "0.57.46",
-    "@happyvertical/smrt-ui": "0.57.46",
-    "@happyvertical/smrt-web": "0.57.46",
+    "@happyvertical/logger": "^0.111.3",
+    "@happyvertical/smrt-languages": "0.57.48",
+    "@happyvertical/smrt-mcp-apps": "0.57.48",
+    "@happyvertical/smrt-types": "0.57.48",
+    "@happyvertical/smrt-ui": "0.57.48",
+    "@happyvertical/smrt-web": "0.57.48",
     "@tanstack/db": "^1.0.0-rc.1",
     "@tanstack/svelte-db": "^1.0.0-rc.1",
     "esm-env": "^1.2.2"
@@ -249,15 +249,15 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-agents": "0.57.46",
-    "@happyvertical/smrt-chat": "0.57.46",
-    "@happyvertical/smrt-content": "0.57.46",
-    "@happyvertical/smrt-core": "0.57.46",
-    "@happyvertical/smrt-reports": "0.57.46",
-    "@happyvertical/smrt-scanner": "0.57.46",
-    "@happyvertical/smrt-tenancy": "0.57.46",
-    "@happyvertical/smrt-users": "0.57.46",
-    "@happyvertical/speech": "^0.111.0",
+    "@happyvertical/smrt-agents": "0.57.48",
+    "@happyvertical/smrt-chat": "0.57.48",
+    "@happyvertical/smrt-content": "0.57.48",
+    "@happyvertical/smrt-core": "0.57.48",
+    "@happyvertical/smrt-reports": "0.57.48",
+    "@happyvertical/smrt-scanner": "0.57.48",
+    "@happyvertical/smrt-tenancy": "0.57.48",
+    "@happyvertical/smrt-users": "0.57.48",
+    "@happyvertical/speech": "^0.111.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/jest-dom": "^7.0.1",