@happyvertical/smrt-users 0.30.0 → 0.31.1

package/dist/svelte/components/InviteUserModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RoleSelector } from '@happyvertical/smrt-ui';
+import { Modal } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import type { Role, Tenant } from '@happyvertical/smrt-users';
 import { M } from '../i18n.js';
@@ -28,6 +29,8 @@ const {
   loading = false,
 }: Props = $props();
 
+const formId = $props.id();
+
 let email = $state('');
 let roleId = $state('');
 let sendEmail = $state(true);
@@ -65,171 +68,81 @@ function handleClose() {
   error = '';
   onclose();
 }
-
-function handleBackdrop(e: MouseEvent) {
-  if (e.target === e.currentTarget) {
-    handleClose();
-  }
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && open) {
-    handleClose();
-  }
-}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <div class="modal-backdrop">
-    <button
-      type="button"
-      class="modal-overlay"
-      aria-label={t(M['users.invite_user_modal.close_invite_dialog'])}
-      onclick={handleClose}
-    ></button>
-    <div class="modal" role="dialog" aria-modal="true" tabindex="-1">
-      <div class="header">
-        <h2>{t(M['users.invite_user_modal.title'], { tenantName: tenant.name })}</h2>
-        <button type="button" class="close-btn" onclick={handleClose} aria-label={t(M['users.invite_user_modal.close'])}>
-          <svg viewBox="0 0 20 20" fill="currentColor">
-            <path
-              d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-            />
-          </svg>
-        </button>
-      </div>
-
-      <form onsubmit={handleSubmit}>
-        <div class="body">
-          {#if error}
-            <div class="error">{error}</div>
-          {/if}
-
-          <div class="field">
-            <label for="invite-email">{t(M['users.invite_user_modal.email_address'])}</label>
-            <input
-              id="invite-email"
-              type="email"
-              bind:value={email}
-              placeholder={t(M['users.invite_user_modal.email_placeholder'])}
-              disabled={loading}
-              required
-            />
-          </div>
-
-          <div class="field">
-            <label for="invite-role">Role</label>
-            <RoleSelector
-              {roles}
-              value={roleId}
-              onchange={(id: string) => (roleId = id)}
-              disabled={loading}
-              showDescription
-            />
-          </div>
-
-          <div class="checkbox-field">
-            <input id="send-email" type="checkbox" bind:checked={sendEmail} disabled={loading} />
-            <label for="send-email">{t(M['users.invite_user_modal.send_invitation_email'])}</label>
-          </div>
-
-          {#if !sendEmail}
-            <div class="hint">
-              {t(M['users.invite_user_modal.pending_hint'])}
-            </div>
-          {/if}
-        </div>
-
-        <div class="footer">
-          <button type="button" class="btn-secondary" onclick={handleClose} disabled={loading}>
-            Cancel
-          </button>
-          <button type="submit" class="btn-primary" disabled={loading}>
-            {#if loading}
-              {t(M['users.invite_user_modal.sending'])}
-            {:else}
-              {t(M['users.invite_user_modal.send_invite'])}
-            {/if}
-          </button>
-        </div>
-      </form>
+<!--
+  Adopts the smrt-ui Modal (native <dialog>.showModal()) for the focus trap,
+  focus restore, top-layer rendering, and Escape handling that the previous
+  hand-rolled dialog lacked (#1399 a11y blocker).
+-->
+<Modal
+  {open}
+  onClose={handleClose}
+  size="sm"
+  title={t(M['users.invite_user_modal.title'], { tenantName: tenant.name })}
+  ariaLabel={t(M['users.invite_user_modal.title'], { tenantName: tenant.name })}
+  closeOnBackdrop={!loading}
+  closeOnEscape={!loading}
+>
+  <form id={formId} onsubmit={handleSubmit}>
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+
+    <div class="field">
+      <label for="invite-email">{t(M['users.invite_user_modal.email_address'])}</label>
+      <input
+        id="invite-email"
+        type="email"
+        bind:value={email}
+        placeholder={t(M['users.invite_user_modal.email_placeholder'])}
+        disabled={loading}
+        required
+      />
     </div>
-  </div>
-{/if}
 
-<style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    z-index: var(--smrt-z-index-dialog, 1300);
-  }
-
-  .modal-overlay {
-    position: absolute;
-    inset: 0;
-    border: none;
-    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
-    cursor: pointer;
-  }
-
-  .modal {
-    position: relative;
-    background: var(--smrt-color-surface, white);
-    border-radius: var(--smrt-radius-large, 0.5rem);
-    box-shadow: var(--smrt-elevation-3, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
-    width: 100%;
-    max-width: 28rem;
-    max-height: 90vh;
-    overflow: hidden;
-    z-index: 1;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--smrt-spacing-md, 1rem) var(--smrt-spacing-lg, 1.5rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-  }
-
-  h2 {
-    margin: 0;
-    font: var(--smrt-typography-title-large-font, 600 1.125rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    background: none;
-    border: none;
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    cursor: pointer;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
-  }
+    <div class="field">
+      <label for="invite-role">Role</label>
+      <RoleSelector
+        {roles}
+        value={roleId}
+        onchange={(id: string) => (roleId = id)}
+        disabled={loading}
+        showDescription
+      />
+    </div>
 
-  .close-btn:hover {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-  }
+    <div class="checkbox-field">
+      <input id="send-email" type="checkbox" bind:checked={sendEmail} disabled={loading} />
+      <label for="send-email">{t(M['users.invite_user_modal.send_invitation_email'])}</label>
+    </div>
 
-  .close-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
+    {#if !sendEmail}
+      <div class="hint">
+        {t(M['users.invite_user_modal.pending_hint'])}
+      </div>
+    {/if}
+  </form>
+
+  {#snippet footer()}
+    <button type="button" class="btn-secondary" onclick={handleClose} disabled={loading}>
+      Cancel
+    </button>
+    <button type="submit" form={formId} class="btn-primary" disabled={loading}>
+      {#if loading}
+        {t(M['users.invite_user_modal.sending'])}
+      {:else}
+        {t(M['users.invite_user_modal.send_invite'])}
+      {/if}
+    </button>
+  {/snippet}
+</Modal>
 
-  .body {
-    padding: var(--smrt-spacing-lg, 1.5rem);
+<style>
+  /* The dialog chrome (backdrop, surface, header, footer bar, close button) is
+     supplied by the smrt-ui Modal. Only the form-content + footer-button styles
+     live here. */
+  form {
     display: flex;
     flex-direction: column;
     gap: var(--smrt-spacing-md, 1rem);
@@ -298,15 +211,6 @@ function handleKeydown(e: KeyboardEvent) {
     border-radius: var(--smrt-radius-small, 0.25rem);
   }
 
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--smrt-spacing-sm, 0.75rem);
-    padding: var(--smrt-spacing-md, 1rem) var(--smrt-spacing-lg, 1.5rem);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-  }
-
   button {
     padding: var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-md, 1rem);
     border-radius: var(--smrt-radius-medium, 0.5rem);
@@ -343,8 +247,7 @@ function handleKeydown(e: KeyboardEvent) {
 
   @media (prefers-reduced-motion: reduce) {
     button,
-    input[type='email'],
-    .close-btn {
+    input[type='email'] {
       transition: none;
     }
   }

package/dist/svelte/components/InviteUserModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InviteUserModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InviteUserModal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsID,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"InviteUserModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InviteUserModal.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4GD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/UserCard.svelte

@@ -34,7 +34,8 @@ const statusClass = $derived.by(() => {
       return 'status-pending';
     case 'suspended':
       return 'status-error';
-    case 'deactivated':
+    case 'inactive':
+      // `inactive` is the real UserStatus value (there is no `deactivated`).
       return 'status-disabled';
     default:
       return '';

package/dist/svelte/components/UserCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserCard.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuDD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"UserCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserCard.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwDD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/UserForm.svelte

@@ -40,6 +40,14 @@ let status = $state(initialFormState.status);
 let appliedUser: User | null = initialFormState.user;
 let appliedProfile: Profile | null = initialFormState.profile;
 
+// Drive the options from the enum so the form can never offer a value that
+// isn't a real UserStatus (previously offered `deactivated`, which is not an
+// enum member, and omitted `inactive`).
+const statusOptions = Object.values(UserStatus).map((value) => ({
+  value,
+  label: value.charAt(0).toUpperCase() + value.slice(1),
+}));
+
 $effect(() => {
   if (appliedUser === user && appliedProfile === profile) {
     return;
@@ -75,10 +83,9 @@ function handleSubmit(e: Event) {
   <div class="field">
     <label for="status">Status</label>
     <select id="status" bind:value={status} disabled={loading}>
-      <option value="active">Active</option>
-      <option value="pending">Pending</option>
-      <option value="suspended">Suspended</option>
-      <option value="deactivated">Deactivated</option>
+      {#each statusOptions as option (option.value)}
+        <option value={option.value}>{option.label}</option>
+      {/each}
     </select>
   </div>
 

package/dist/svelte/components/UserForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgGD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"UserForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAuGD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/UserMenu.svelte

@@ -3,15 +3,18 @@
  * UserMenu - User profile menu dropdown
  * refactored for Material 3
  *
- * Accessibility:
+ * Accessibility (WAI-ARIA menu-button pattern):
  * - Proper ARIA attributes for menu state
- * - Keyboard navigation (Escape to close)
- * - Click outside to close
- * - Focus management
+ * - Roving tabindex over the menu items
+ * - Arrow Up/Down, Home/End to move between items; Escape closes + refocuses
+ *   the trigger; Tab closes; click-outside dismisses
+ * - Focus management (first item focused on open, trigger refocused on close)
  */
+
 import type { Profile } from '@happyvertical/smrt-profiles';
 import { ripple } from '@happyvertical/smrt-ui';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { tick } from 'svelte';
 import { M } from '../i18n.js';
 
 const { t } = useI18n();
@@ -46,26 +49,92 @@ const userEmail = $derived(profile?.email ?? user?.email);
 
 let open = $state(false);
 let triggerButton: HTMLButtonElement;
+let itemEls = $state<Array<HTMLAnchorElement | null>>([]);
 const instanceId = $props.id();
 const menuId = `user-menu-${instanceId}`;
 
+/** Focus a menu item by index, wrapping out-of-range values. */
+function focusItem(index: number) {
+  const items = itemEls.filter((el): el is HTMLAnchorElement => el != null);
+  if (items.length === 0) return;
+  const wrapped = (index + items.length) % items.length;
+  items[wrapped]?.focus();
+}
+
+async function openMenu(focusLast = false) {
+  open = true;
+  await tick();
+  focusItem(focusLast ? -1 : 0);
+}
+
 function toggle() {
-  open = !open;
-  if (!open && triggerButton) {
-    triggerButton.focus();
+  if (open) {
+    close();
+  } else {
+    void openMenu();
   }
 }
 
-function close() {
+function close(refocusTrigger = true) {
   if (open) {
     open = false;
-    // Return focus to trigger button
-    triggerButton?.focus();
+    if (refocusTrigger) {
+      // Return focus to trigger button
+      triggerButton?.focus();
+    }
+  }
+}
+
+/** Roving-focus navigation inside the open menu. */
+function handleMenuKeydown(event: KeyboardEvent) {
+  const items = itemEls.filter((el): el is HTMLAnchorElement => el != null);
+  // `document.activeElement` is `Element | null`; the cast satisfies indexOf's
+  // arg type (reference comparison is null-safe — a null active element yields
+  // -1). Kept as indexOf (not findIndex) so the biome formatter can't rewrite it.
+  const current = items.indexOf(document.activeElement as HTMLAnchorElement);
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      focusItem(current + 1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      focusItem(current - 1);
+      break;
+    case 'Home':
+      event.preventDefault();
+      focusItem(0);
+      break;
+    case 'End':
+      event.preventDefault();
+      focusItem(-1);
+      break;
+    case 'Escape':
+      event.preventDefault();
+      close();
+      break;
+    case 'Tab':
+      // Let focus leave naturally but collapse the menu.
+      close(false);
+      break;
+  }
+}
+
+/** Open the menu from the trigger via keyboard (ArrowDown/Up/Enter/Space). */
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (open) return;
+  if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    void openMenu();
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    void openMenu(true);
   }
 }
 
 /**
- * Handle keyboard navigation
+ * Handle window-level Escape so it works even if focus has left the menu.
  */
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape' && open) {
@@ -81,7 +150,7 @@ function handleClickOutside(event: MouseEvent) {
   const target = event.target as Node;
   const menu = document.getElementById(menuId);
   if (menu && !menu.contains(target) && !triggerButton.contains(target)) {
-    close();
+    close(false);
   }
 }
 
@@ -107,6 +176,7 @@ function getInitials(name: string): string {
     id="{menuId}-trigger"
     class="user-menu-trigger"
     onclick={toggle}
+    onkeydown={handleTriggerKeydown}
     type="button"
     use:ripple
     aria-haspopup="menu"
@@ -128,8 +198,10 @@ function getInitials(name: string): string {
       id="{menuId}-dropdown"
       class="dropdown"
       role="menu"
+      tabindex={-1}
       aria-orientation="vertical"
       aria-labelledby="{menuId}-trigger"
+      onkeydown={handleMenuKeydown}
     >
       {#if userEmail}
         <div class="user-info" role="none">
@@ -138,11 +210,12 @@ function getInitials(name: string): string {
         </div>
         <hr class="divider" />
       {/if}
-      
-      <a 
-        href={profileUrl} 
-        class="dropdown-item" 
-        onclick={close} 
+
+      <a
+        bind:this={itemEls[0]}
+        href={profileUrl}
+        class="dropdown-item"
+        onclick={() => close(false)}
         use:ripple
         role="menuitem"
         tabindex="-1"
@@ -152,10 +225,11 @@ function getInitials(name: string): string {
         </svg>
         Profile
       </a>
-      <a 
-        href={settingsUrl} 
-        class="dropdown-item" 
-        onclick={close} 
+      <a
+        bind:this={itemEls[1]}
+        href={settingsUrl}
+        class="dropdown-item"
+        onclick={() => close(false)}
         use:ripple
         role="menuitem"
         tabindex="-1"
@@ -166,10 +240,11 @@ function getInitials(name: string): string {
         Settings
       </a>
       <hr class="divider" />
-      <a 
-        href={signoutUrl} 
-        class="dropdown-item danger" 
-        onclick={close} 
+      <a
+        bind:this={itemEls[2]}
+        href={signoutUrl}
+        class="dropdown-item danger"
+        onclick={() => close(false)}
         use:ripple
         role="menuitem"
         tabindex="-1"

package/dist/svelte/components/UserMenu.svelte.d.ts

@@ -2,11 +2,12 @@
  * UserMenu - User profile menu dropdown
  * refactored for Material 3
  *
- * Accessibility:
+ * Accessibility (WAI-ARIA menu-button pattern):
  * - Proper ARIA attributes for menu state
- * - Keyboard navigation (Escape to close)
- * - Click outside to close
- * - Focus management
+ * - Roving tabindex over the menu items
+ * - Arrow Up/Down, Home/End to move between items; Escape closes + refocuses
+ *   the trigger; Tab closes; click-outside dismisses
+ * - Focus management (first item focused on open, trigger refocused on close)
  */
 import type { Profile } from '@happyvertical/smrt-profiles';
 /** Props for the UserMenu component */

package/dist/svelte/components/UserMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserMenu.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAM5D,uCAAuC;AACvC,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+HD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"UserMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserMenu.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAO5D,uCAAuC;AACvC,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmMD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/__tests__/InviteUserModal.test.js

@@ -51,4 +51,15 @@ describe('InviteUserModal', () => {
         await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
         expect(onclose).toHaveBeenCalledTimes(1);
     });
+    // Regression for #1399 blocker #2: the hand-rolled dialog had no focus
+    // trap/restore. Adopting the smrt-ui Modal renders a native <dialog> (top
+    // layer + trap + inert), which supplies the trap and Escape handling the
+    // previous markup lacked.
+    it('renders inside a native <dialog> for the focus trap', () => {
+        const { container } = render(InviteUserModal, { props: baseProps() });
+        const dialog = container.querySelector('dialog');
+        expect(dialog).not.toBeNull();
+        // The form lives inside the dialog, so focus is trapped within it.
+        expect(dialog?.querySelector('form')).not.toBeNull();
+    });
 });

package/dist/svelte/components/__tests__/UserMenu.test.js

@@ -35,4 +35,49 @@ describe('UserMenu', () => {
         expect(screen.getByRole('menu')).toBeInTheDocument();
         await expectNoA11yViolations(container);
     });
+    // Regression for #1399 blocker #1: the menu items were keyboard-unreachable
+    // (role="menu" with no roving tabindex / arrow navigation). These assert the
+    // WAI-ARIA menu-button keyboard contract end to end.
+    const kbProps = {
+        user: { name: 'Ada Lovelace', email: 'ada@example.com' },
+    };
+    it('opens from the trigger and focuses the first item on ArrowDown', async () => {
+        render(UserMenu, { props: kbProps });
+        screen.getByRole('button', { name: 'User menu' }).focus();
+        await userEvent.keyboard('{ArrowDown}');
+        const items = screen.getAllByRole('menuitem');
+        expect(items).toHaveLength(3);
+        expect(document.activeElement).toBe(items[0]);
+    });
+    it('moves roving focus with ArrowDown/ArrowUp and wraps at the ends', async () => {
+        render(UserMenu, { props: kbProps });
+        screen.getByRole('button', { name: 'User menu' }).focus();
+        await userEvent.keyboard('{ArrowDown}');
+        const items = screen.getAllByRole('menuitem');
+        await userEvent.keyboard('{ArrowDown}');
+        expect(document.activeElement).toBe(items[1]);
+        // From the first item, ArrowUp wraps to the last.
+        await userEvent.keyboard('{ArrowUp}{ArrowUp}');
+        expect(document.activeElement).toBe(items[items.length - 1]);
+    });
+    it('jumps to the last item with End and the first with Home', async () => {
+        render(UserMenu, { props: kbProps });
+        screen.getByRole('button', { name: 'User menu' }).focus();
+        await userEvent.keyboard('{ArrowDown}');
+        const items = screen.getAllByRole('menuitem');
+        await userEvent.keyboard('{End}');
+        expect(document.activeElement).toBe(items[items.length - 1]);
+        await userEvent.keyboard('{Home}');
+        expect(document.activeElement).toBe(items[0]);
+    });
+    it('closes on Escape and restores focus to the trigger', async () => {
+        render(UserMenu, { props: kbProps });
+        const trigger = screen.getByRole('button', { name: 'User menu' });
+        trigger.focus();
+        await userEvent.keyboard('{ArrowDown}');
+        expect(screen.queryByRole('menu')).not.toBeNull();
+        await userEvent.keyboard('{Escape}');
+        expect(screen.queryByRole('menu')).toBeNull();
+        expect(document.activeElement).toBe(trigger);
+    });
 });

package/dist/svelte/components/__tests__/UserStatus.test.js

@@ -0,0 +1,36 @@
+import { UserStatus } from '@happyvertical/smrt-types';
+import { render, screen } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import UserCard from '../UserCard.svelte';
+import UserForm from '../UserForm.svelte';
+const profile = { name: 'Ada Lovelace', email: 'ada@example.com' };
+const user = { email: 'ada@example.com', status: UserStatus.INACTIVE };
+describe('UserForm status options', () => {
+    it('offers exactly the UserStatus values — including inactive, never deactivated', () => {
+        render(UserForm, { props: { onsubmit: vi.fn() } });
+        const select = screen.getByLabelText('Status', {
+            hidden: true,
+        });
+        const optionValues = Array.from(select.options).map((o) => o.value);
+        expect(optionValues).toEqual(Object.values(UserStatus));
+        expect(optionValues).toContain('inactive');
+        expect(optionValues).not.toContain('deactivated');
+    });
+});
+describe('UserCard status styling', () => {
+    it('styles an inactive user instead of leaving it unstyled', () => {
+        render(UserCard, {
+            props: { user, profile, status: 'inactive' },
+        });
+        const badge = screen.getByText('inactive', { hidden: true });
+        expect(badge.className).toContain('status-disabled');
+    });
+    it('does not recognise the bogus deactivated value', () => {
+        render(UserCard, {
+            props: { user, profile, status: 'deactivated' },
+        });
+        const badge = screen.getByText('deactivated', { hidden: true });
+        // No status-* style class is applied for a non-enum value.
+        expect(badge.className).not.toContain('status-disabled');
+    });
+});