@happyvertical/smrt-users 0.30.0

package/dist/svelte/components/UserForm.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+import type { Profile } from '@happyvertical/smrt-profiles';
+import { UserStatus } from '@happyvertical/smrt-types';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { User } from '@happyvertical/smrt-users';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  user?: User | null;
+  profile?: Profile | null;
+  onsubmit: (data: { name: string; email: string; status: UserStatus }) => void;
+  oncancel?: () => void;
+  loading?: boolean;
+}
+
+const {
+  user = null,
+  profile = null,
+  onsubmit,
+  oncancel,
+  loading = false,
+}: Props = $props();
+
+function getInitialFormState() {
+  return {
+    name: profile?.name ?? '',
+    email: user?.email ?? '',
+    status: user?.status ?? UserStatus.ACTIVE,
+    user,
+    profile,
+  };
+}
+
+const initialFormState = getInitialFormState();
+let name = $state(initialFormState.name);
+let email = $state(initialFormState.email);
+let status = $state(initialFormState.status);
+let appliedUser: User | null = initialFormState.user;
+let appliedProfile: Profile | null = initialFormState.profile;
+
+$effect(() => {
+  if (appliedUser === user && appliedProfile === profile) {
+    return;
+  }
+
+  appliedUser = user;
+  appliedProfile = profile;
+  name = profile?.name ?? '';
+  email = user?.email ?? '';
+  status = user?.status ?? UserStatus.ACTIVE;
+});
+
+function handleSubmit(e: Event) {
+  e.preventDefault();
+  onsubmit({ name, email, status });
+}
+</script>
+
+<form class="user-form" onsubmit={handleSubmit}>
+  <div class="field">
+    <label for="name">Name</label>
+    <input id="name" type="text" bind:value={name} required disabled={loading} />
+  </div>
+
+  <div class="field">
+    <label for="email">Email</label>
+    <input id="email" type="email" bind:value={email} required disabled={loading || !!user} />
+    {#if user}
+      <span class="hint">{t(M['users.user_form.email_cannot_be_changed'])}</span>
+    {/if}
+  </div>
+
+  <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>
+    </select>
+  </div>
+
+  <div class="actions">
+    {#if oncancel}
+      <button type="button" class="btn-secondary" onclick={oncancel} disabled={loading}>
+        Cancel
+      </button>
+    {/if}
+    <button type="submit" class="btn-primary" disabled={loading}>
+      {#if loading}
+        Saving...
+      {:else}
+        {user ? 'Update User' : 'Create User'}
+      {/if}
+    </button>
+  </div>
+</form>
+
+<style>
+  .user-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  label {
+    font: var(--smrt-typography-body-medium-font, 500 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  input,
+  select {
+    padding: var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-md, 0.75rem);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    transition: border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  input:focus,
+  select:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
+  }
+
+  input:disabled,
+  select:disabled {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    cursor: not-allowed;
+  }
+
+  .hint {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+    margin-top: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  button {
+    padding: var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-md, 1rem);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    cursor: pointer;
+    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-primary {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    border: none;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: var(--smrt-color-primary-container, #005ac1);
+    opacity: 0.9;
+  }
+
+  .btn-secondary {
+    background: var(--smrt-color-surface, white);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    input,
+    select,
+    button {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Profile } from '@happyvertical/smrt-profiles';
+import { UserStatus } from '@happyvertical/smrt-types';
+import type { User } from '@happyvertical/smrt-users';
+export interface Props {
+    user?: User | null;
+    profile?: Profile | null;
+    onsubmit: (data: {
+        name: string;
+        email: string;
+        status: UserStatus;
+    }) => void;
+    oncancel?: () => void;
+    loading?: boolean;
+}
+declare const UserForm: import("svelte").Component<Props, {}, "">;
+type UserForm = ReturnType<typeof UserForm>;
+export default UserForm;
+//# sourceMappingURL=UserForm.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/svelte/components/UserList.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+import type { Profile } from '@happyvertical/smrt-profiles';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { User } from '@happyvertical/smrt-users';
+import type { Snippet } from 'svelte';
+import { M } from '../i18n.js';
+import UserCard from './UserCard.svelte';
+
+const { t } = useI18n();
+
+interface UserWithProfile {
+  user: User;
+  profile: Profile;
+  role?: string;
+}
+
+export interface Props {
+  users: UserWithProfile[];
+  selectedId?: string | null;
+  onselect?: (user: User) => void;
+  emptyMessage?: string;
+  empty?: Snippet;
+  loading?: boolean;
+}
+
+const {
+  users,
+  selectedId = null,
+  onselect,
+  emptyMessage = 'No users found',
+  empty,
+  loading = false,
+}: Props = $props();
+</script>
+
+<div class="user-list">
+  {#if loading}
+    <div class="loading">
+      <div class="spinner"></div>
+      <span>{t(M['users.user_list.loading_users'])}</span>
+    </div>
+  {:else if users.length === 0}
+    {#if empty}
+      {@render empty()}
+    {:else}
+      <div class="empty">{emptyMessage}</div>
+    {/if}
+  {:else}
+    {#each users as { user, profile, role } (user.id)}
+      <UserCard
+        {user}
+        {profile}
+        {role}
+        status={user.status}
+        selected={selectedId === user.id}
+        onclick={onselect ? () => onselect(user) : undefined}
+      />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .user-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-sm, 0.75rem);
+    padding: var(--smrt-spacing-xl, 2rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-top-color: var(--smrt-color-primary, #005ac1);
+    border-radius: var(--smrt-radius-full, 9999px);
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .empty {
+    padding: var(--smrt-spacing-xl, 2rem);
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border: 1px dashed var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { Profile } from '@happyvertical/smrt-profiles';
+import type { User } from '@happyvertical/smrt-users';
+import type { Snippet } from 'svelte';
+interface UserWithProfile {
+    user: User;
+    profile: Profile;
+    role?: string;
+}
+export interface Props {
+    users: UserWithProfile[];
+    selectedId?: string | null;
+    onselect?: (user: User) => void;
+    emptyMessage?: string;
+    empty?: Snippet;
+    loading?: boolean;
+}
+declare const UserList: import("svelte").Component<Props, {}, "">;
+type UserList = ReturnType<typeof UserList>;
+export default UserList;
+//# sourceMappingURL=UserList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UserList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8CD,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

@@ -0,0 +1,326 @@
+<script lang="ts">
+/**
+ * UserMenu - User profile menu dropdown
+ * refactored for Material 3
+ *
+ * Accessibility:
+ * - Proper ARIA attributes for menu state
+ * - Keyboard navigation (Escape to close)
+ * - Click outside to close
+ * - Focus management
+ */
+import type { Profile } from '@happyvertical/smrt-profiles';
+import { ripple } from '@happyvertical/smrt-ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+/** Props for the UserMenu component */
+export interface Props {
+  /** Full SMRT profile object */
+  profile?: Profile;
+  /** Simple user object (used when profile is not available) */
+  user?: { name: string; email?: string };
+  /** URL for sign out */
+  signoutUrl?: string;
+  /** URL for profile page */
+  profileUrl?: string;
+  /** URL for settings page */
+  settingsUrl?: string;
+  /** Accessible label for the menu button */
+  'aria-label'?: string;
+}
+
+const {
+  profile,
+  user,
+  signoutUrl = '/auth/signout',
+  profileUrl = '/profile',
+  settingsUrl = '/settings',
+  'aria-label': ariaLabel = 'User menu',
+}: Props = $props();
+
+const displayName = $derived(profile?.name ?? user?.name ?? 'User');
+const userEmail = $derived(profile?.email ?? user?.email);
+
+let open = $state(false);
+let triggerButton: HTMLButtonElement;
+const instanceId = $props.id();
+const menuId = `user-menu-${instanceId}`;
+
+function toggle() {
+  open = !open;
+  if (!open && triggerButton) {
+    triggerButton.focus();
+  }
+}
+
+function close() {
+  if (open) {
+    open = false;
+    // Return focus to trigger button
+    triggerButton?.focus();
+  }
+}
+
+/**
+ * Handle keyboard navigation
+ */
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && open) {
+    event.preventDefault();
+    close();
+  }
+}
+
+/**
+ * Handle click outside to close menu
+ */
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node;
+  const menu = document.getElementById(menuId);
+  if (menu && !menu.contains(target) && !triggerButton.contains(target)) {
+    close();
+  }
+}
+
+/**
+ * Get initials from name
+ */
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="user-menu" id={menuId}>
+  <button
+    bind:this={triggerButton}
+    id="{menuId}-trigger"
+    class="user-menu-trigger"
+    onclick={toggle}
+    type="button"
+    use:ripple
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={open ? `${menuId}-dropdown` : undefined}
+    aria-label={ariaLabel}
+  >
+    <span class="avatar" aria-hidden="true">
+      {getInitials(displayName)}
+    </span>
+    <span class="user-name">{displayName}</span>
+    <svg class="chevron" class:open viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </button>
+
+  {#if open}
+    <div
+      id="{menuId}-dropdown"
+      class="dropdown"
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="{menuId}-trigger"
+    >
+      {#if userEmail}
+        <div class="user-info" role="none">
+          <span class="user-info-name">{displayName}</span>
+          <span class="user-info-email">{userEmail}</span>
+        </div>
+        <hr class="divider" />
+      {/if}
+      
+      <a 
+        href={profileUrl} 
+        class="dropdown-item" 
+        onclick={close} 
+        use:ripple
+        role="menuitem"
+        tabindex="-1"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+        </svg>
+        Profile
+      </a>
+      <a 
+        href={settingsUrl} 
+        class="dropdown-item" 
+        onclick={close} 
+        use:ripple
+        role="menuitem"
+        tabindex="-1"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+        </svg>
+        Settings
+      </a>
+      <hr class="divider" />
+      <a 
+        href={signoutUrl} 
+        class="dropdown-item danger" 
+        onclick={close} 
+        use:ripple
+        role="menuitem"
+        tabindex="-1"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
+        </svg>
+        {t(M['users.user_menu.sign_out'])}
+      </a>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .user-menu {
+    position: relative;
+    display: inline-block;
+  }
+
+  .user-menu-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    background: transparent;
+    border: none;
+    border-radius: var(--smrt-radius-2xl, 24px);
+    cursor: pointer;
+    transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
+    color: var(--smrt-color-on-surface);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .user-menu-trigger:hover {
+    background-color: var(--smrt-color-surface-container-high);
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--smrt-radius-full, 50%);
+    background-color: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .user-name {
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .chevron {
+    width: 18px;
+    height: 18px;
+    transition: transform var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    opacity: 0.7;
+  }
+
+  .chevron.open {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: var(--smrt-spacing-1, 4px);
+    min-width: 200px;
+    background-color: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-medium, 4px);
+    box-shadow: var(--smrt-elevation-2);
+    z-index: var(--smrt-z-index-dropdown, 1000);
+    padding: var(--smrt-spacing-1, 4px) 0;
+    overflow: hidden;
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface);
+    text-decoration: none;
+    transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .dropdown-item:hover {
+    background-color: var(--smrt-color-surface-container-highest);
+  }
+
+  .dropdown-item svg {
+    width: 18px;
+    height: 18px;
+    opacity: 0.7;
+  }
+
+  .dropdown-item.danger {
+    color: var(--smrt-color-error);
+  }
+
+  .user-info {
+    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .user-info-name {
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .user-info-email {
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .user-menu-trigger:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+
+  .dropdown-item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .divider {
+    margin: var(--smrt-spacing-1, 4px) 0;
+    border: none;
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .user-menu-trigger,
+    .chevron,
+    .dropdown-item {
+      transition: none;
+    }
+    
+    .chevron.open {
+      transform: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,33 @@
+/**
+ * UserMenu - User profile menu dropdown
+ * refactored for Material 3
+ *
+ * Accessibility:
+ * - Proper ARIA attributes for menu state
+ * - Keyboard navigation (Escape to close)
+ * - Click outside to close
+ * - Focus management
+ */
+import type { Profile } from '@happyvertical/smrt-profiles';
+/** Props for the UserMenu component */
+export interface Props {
+    /** Full SMRT profile object */
+    profile?: Profile;
+    /** Simple user object (used when profile is not available) */
+    user?: {
+        name: string;
+        email?: string;
+    };
+    /** URL for sign out */
+    signoutUrl?: string;
+    /** URL for profile page */
+    profileUrl?: string;
+    /** URL for settings page */
+    settingsUrl?: string;
+    /** Accessible label for the menu button */
+    'aria-label'?: string;
+}
+declare const UserMenu: import("svelte").Component<Props, {}, "">;
+type UserMenu = ReturnType<typeof UserMenu>;
+export default UserMenu;
+//# sourceMappingURL=UserMenu.svelte.d.ts.map