@gsa-tts/graymatter-ui 0.2.7 → 0.3.0

package/src/components/MobileSideMenu.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { selectedItem, isExpanded, navigationStore } from '../stores/navigationStore.js';
+  import {
+    selectedItem,
+    isExpanded,
+    navigationStore,
+  } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
   import CloseIcon from './icons/CloseIcon.svelte';
 
   let sideMenuElement: HTMLDivElement;
   let pendingMobileHash: string | null = null;
-  
+
   let { logoLinkUrl, logoLinkLabel } = $props();
 
   function handleMobileAnchorNavigate(event: Event) {
@@ -19,23 +23,27 @@
       if (el) {
         // Check if the anchor exists in mobile content
         const mobileContent = document.getElementById('main-content-mobile');
-        const mobileAnchor = mobileContent ? mobileContent.querySelector(`[id="${pendingMobileHash}"]`) : null;
-        
+        const mobileAnchor = mobileContent
+          ? mobileContent.querySelector(`[id="${pendingMobileHash}"]`)
+          : null;
+
         if (mobileAnchor && mobileContent) {
           // For mobile: show section title in both header and content
           const rect = mobileAnchor.getBoundingClientRect();
           const mobileRect = mobileContent.getBoundingClientRect();
           const scrollTop = mobileContent.scrollTop + rect.top - mobileRect.top;
           mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
-          
+
           // Update header after scroll completes
           setTimeout(() => {
-            window.dispatchEvent(new CustomEvent('sectionVisible', { 
-              detail: { 
-                title: mobileAnchor.textContent?.trim(),
-                id: mobileAnchor.id 
-              } 
-            }));
+            window.dispatchEvent(
+              new CustomEvent('sectionVisible', {
+                detail: {
+                  title: mobileAnchor.textContent?.trim(),
+                  id: mobileAnchor.id,
+                },
+              })
+            );
           }, 100);
         } else {
           // Fallback to desktop content
@@ -47,18 +55,20 @@
             }
             scrollableParent = scrollableParent.parentElement;
           }
-          
+
           if (scrollableParent && scrollableParent !== document.body) {
             const desktopMain = document.getElementById('main-content');
             if (desktopMain) {
               el.scrollIntoView({ behavior: 'auto', block: 'start' });
               setTimeout(() => {
-                window.dispatchEvent(new CustomEvent('sectionVisible', { 
-                  detail: { 
-                    title: el.textContent?.trim(),
-                    id: el.id 
-                  } 
-                }));
+                window.dispatchEvent(
+                  new CustomEvent('sectionVisible', {
+                    detail: {
+                      title: el.textContent?.trim(),
+                      id: el.id,
+                    },
+                  })
+                );
               }, 100);
             } else {
               el.scrollIntoView({ behavior: 'auto', block: 'start' });
@@ -75,16 +85,16 @@
   onMount(() => {
     // Listen for the custom event globally
     window.addEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
-    
+
     const handleCloseMobileMenu = () => {
       closeMobileMenu();
     };
     window.addEventListener('closeMobileMenu', handleCloseMobileMenu);
-    
+
     const handleLayoutTransition = (event: Event) => {
       const customEvent = event as CustomEvent;
       const { isMobile } = customEvent.detail;
-      
+
       if (isMobile) {
         navigationStore.setExpanded(false);
       }
@@ -102,9 +112,12 @@
       }
     };
     window.addEventListener('keydown', handleEscape);
-    
+
     return () => {
-      window.removeEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
+      window.removeEventListener(
+        'mobileAnchorNavigate',
+        handleMobileAnchorNavigate
+      );
       window.removeEventListener('closeMobileMenu', handleCloseMobileMenu);
       window.removeEventListener('layoutTransition', handleLayoutTransition);
       window.removeEventListener('keydown', handleEscape);
@@ -118,36 +131,51 @@
 
 <!-- Mobile overlay -->
 {#if $isExpanded}
-  <div 
-    class="mobile-overlay" 
+  <div
+    class="mobile-overlay"
     role="button"
     tabindex="0"
     aria-label="Close navigation menu (Escape key supported)"
     part="mobile-overlay"
     onclick={closeMobileMenu}
-    onkeydown={(e) => {
+    onkeydown={e => {
       if (e.key === 'Enter' || e.key === ' ') closeMobileMenu();
     }}
   ></div>
 {/if}
 
 <!-- Mobile side menu -->
-<div class="mobile-side-menu" class:open={$isExpanded} bind:this={sideMenuElement} part="mobile-side-menu">
+<div
+  class="mobile-side-menu"
+  class:open={$isExpanded}
+  bind:this={sideMenuElement}
+  part="mobile-side-menu"
+>
   <div class="menu-header" part="menu-header">
     <div class="logo-container" part="logo-container">
       {#if logoLinkUrl}
-        <a href={logoLinkUrl} part="logo-link" class="logo-link" aria-label={logoLinkLabel}>
-          <Logo width={75} height={22}/>
+        <a
+          href={logoLinkUrl}
+          part="logo-link"
+          class="logo-link"
+          aria-label={logoLinkLabel}
+        >
+          <Logo width={75} height={22} />
         </a>
       {:else}
-        <Logo width={75} height={22}/>
+        <Logo width={75} height={22} />
       {/if}
     </div>
-    <button class="close-button" onclick={closeMobileMenu} aria-label="Close navigation menu" part="close-button">
+    <button
+      class="close-button"
+      onclick={closeMobileMenu}
+      aria-label="Close navigation menu"
+      part="close-button"
+    >
       <CloseIcon />
     </button>
   </div>
-  
+
   <div class="menu-content" part="menu-content">
     <!-- Show submenu items if available and not on discover -->
     {#if $selectedItem && $selectedItem !== 'discover'}
@@ -170,11 +198,11 @@
     color: var(--ai-color-steel-600);
     font-size: var(--ai-size-14);
   }
-  
+
   .no-subnav-message p {
     margin: 0;
   }
-  
+
   .mobile-side-menu {
     position: fixed;
     top: 0;
@@ -184,16 +212,16 @@
     max-width: 85vw;
     background: var(--ai-color-white);
     transform: translateX(-100%);
-    transition: transform 0.3s ease;
+    transition: transform var(--ai-transition-ease-medium);
     z-index: var(--ai-layer-50);
     flex-direction: column;
     box-shadow: var(--ai-size-2) 0 var(--ai-size-10) #0000001a;
   }
-  
+
   .mobile-side-menu.open {
     transform: translateX(0);
   }
-  
+
   .menu-header {
     display: flex;
     align-items: center;
@@ -201,11 +229,11 @@
     padding: var(--ai-size-16) var(--ai-size-20);
     border-bottom: 0.0625rem solid var(--ai-color-neutral-200);
   }
-  
+
   .mobile-side-menu .logo-container {
     display: flex;
   }
-  
+
   .logo-link {
     display: flex;
   }
@@ -221,19 +249,19 @@
     color: var(--ai-color-neutral-700);
     cursor: pointer;
     border-radius: var(--ai-size-6);
-    transition: background-color 0.2s ease;
+    transition: background-color var(--ai-transition-ease-fast);
   }
 
   .close-button:hover {
     background-color: var(--ai-color-neutral-100);
   }
-  
+
   .menu-content {
     flex: 1;
     overflow-y: auto;
     padding: 0;
   }
-  
+
   .subnav-section {
     padding: var(--ai-size-16) 0;
     overflow-y: auto;

package/src/components/MobileSideMenu.webcomponent.svelte

@@ -1,10 +1,12 @@
-<svelte:options customElement={{
-  tag: 'graymatter-mobile-side-menu'
-}} />
+<svelte:options
+  customElement={{
+    tag: 'graymatter-mobile-side-menu',
+  }}
+/>
 
 <script lang="ts">
   import MobileSideMenu from './MobileSideMenu.svelte';
-  
+
   let { logoLinkUrl, logoLinkLabel } = $props();
 </script>
 

package/src/components/MobileTopNav.svelte

@@ -22,7 +22,10 @@
       if (customEvent.detail && customEvent.detail.title) {
         selectedSubNavItemTitle.set(customEvent.detail.title);
         if (typeof window !== 'undefined') {
-          sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(customEvent.detail.title));
+          sessionStorage.setItem(
+            'subNav-selectedTitle',
+            JSON.stringify(customEvent.detail.title)
+          );
         }
       }
     };
@@ -30,27 +33,32 @@
     // Set default header based on first submenu item
     const setDefaultHeaderFromFirstSubmenu = () => {
       if (typeof window === 'undefined') return;
-      
+
       const mainContent = document.getElementById('main-content');
       if (!mainContent) return;
-      
+
       // Find the first heading with an ID (first submenu item)
-      const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
+      const firstSection = mainContent.querySelector(
+        'h2[id], h3[id], h4[id], h5[id], h6[id]'
+      );
       if (firstSection && firstSection.textContent) {
         const firstSectionTitle = firstSection.textContent.trim();
-        
+
         // Only set if no header is currently set
         if (!$selectedSubNavItemTitle) {
           selectedSubNavItemTitle.set(firstSectionTitle);
           if (typeof window !== 'undefined') {
-            sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+            sessionStorage.setItem(
+              'subNav-selectedTitle',
+              JSON.stringify(firstSectionTitle)
+            );
           }
         }
       }
     };
 
     window.addEventListener('sectionVisible', handleSectionVisible);
-    
+
     // Set default header on mount only if no stored title exists
     const storedTitle = sessionStorage.getItem('subNav-selectedTitle');
     if (!storedTitle || storedTitle === '""' || storedTitle === 'null') {
@@ -58,7 +66,7 @@
         setDefaultHeaderFromFirstSubmenu();
       }, 100);
     }
-    
+
     return () => {
       window.removeEventListener('sectionVisible', handleSectionVisible);
     };
@@ -67,7 +75,6 @@
   function toggleMobileNav() {
     navigationStore.toggleExpanded();
   }
-
 </script>
 
 <nav class="mobile-top-nav" part="mobile-top-nav">
@@ -88,17 +95,16 @@
   </div>
 
   {#if profileMenuData}
-  <ProfileMenu
-    userMeta={profileMenuData?.userMeta}
-    menuItems={profileMenuData?.menuItems}
-    ariaLabel="Open profile menu"
-    menuAlign="mobile"
-  />
+    <ProfileMenu
+      userMeta={profileMenuData?.userMeta}
+      menuItems={profileMenuData?.menuItems}
+      ariaLabel="Open profile menu"
+      menuAlign="mobile"
+    />
   {/if}
 </nav>
 
 <style>
-
   .menu-button {
     display: flex;
     align-items: center;
@@ -107,7 +113,7 @@
     background: none;
     cursor: pointer;
     border-radius: var(--ai-size-8);
-    transition: background-color 0.2s ease;
+    transition: background-color var(--ai-transition-ease-fast);
   }
 
   .menu-button:disabled,
@@ -158,7 +164,7 @@
     border: none;
     cursor: pointer;
     opacity: 1;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--ai-transition-ease-fast);
     will-change: opacity;
   }
 
@@ -171,5 +177,4 @@
   .menu-button:focus {
     outline: none;
   }
-
 </style>

package/src/components/MobileTopNav.webcomponent.svelte

@@ -1,6 +1,8 @@
-<svelte:options customElement={{
-  tag: 'graymatter-mobile-top-nav'
-}} />
+<svelte:options
+  customElement={{
+    tag: 'graymatter-mobile-top-nav',
+  }}
+/>
 
 <script lang="ts">
   import MobileTopNav from './MobileTopNav.svelte';
@@ -9,6 +11,4 @@
   let { profileMenuData } = $props();
 </script>
 
-<MobileTopNav
-  {profileMenuData}
-/>
+<MobileTopNav {profileMenuData} />

package/src/components/NavigationInitializer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { navigationStore, type NavigationItem } from '../stores/navigationStore.js';
+  import {
+    navigationStore,
+    type NavigationItem,
+  } from '../stores/navigationStore.js';
 
   export let item: NavigationItem;
   export let autoExpand: boolean = false;
@@ -9,7 +12,12 @@
     if (item) {
       navigationStore.setSelectedItem(item);
       // Auto-expand for non-discover pages on desktop
-      if (autoExpand && item !== 'discover' && typeof window !== 'undefined' && window.innerWidth > 640) {
+      if (
+        autoExpand &&
+        item !== 'discover' &&
+        typeof window !== 'undefined' &&
+        window.innerWidth > 640
+      ) {
         navigationStore.setExpanded(true);
       }
     }

package/src/components/ProfileMenu.svelte

@@ -1,34 +1,112 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+
+  /**
+   * ProfileMenu Component - Event-Driven Architecture with Shadow DOM Support
+   *
+   * This component uses a custom event system to handle menu item actions.
+   * It dispatches 'profileMenuAction' events that consumers can listen to,
+   * providing a clean separation between the UI component and business logic.
+   *
+   * SHADOW DOM COMPATIBILITY:
+   * - Events are configured with bubbles: true and composed: true
+   * - Works in both regular DOM and Shadow DOM contexts
+   * - Compatible with web components and Astro apps
+   *
+   * USAGE:
+   * 1. Pass menu items with 'action' strings instead of functions
+   * 2. Listen for 'profileMenuAction' events in your app
+   * 3. Handle actions based on the 'action' property in event.detail
+   *
+   * Examples:
+   *
+   * // Astro App (Regular DOM)
+   * // In your Astro layout or component
+   * window.addEventListener('profileMenuAction', (event) => {
+   *   const { action, userMeta, timestamp } = event.detail;
+   *   switch (action) {
+   *     case 'settings':
+   *       // Handle settings action
+   *       console.log('Settings clicked for user:', userMeta.initials);
+   *       break;
+   *     case 'logout':
+   *       // Handle logout action
+   *       console.log('Logout clicked for user:', userMeta.initials);
+   *       break;
+   *   }
+   * });
+   *
+   * // Web Component App (Shadow DOM)
+   * // In your Svelte app using web components
+   * document.addEventListener('profileMenuAction', (event) => {
+   *   const { action, userMeta, timestamp } = event.detail;
+   *   // Same handling as above - events bubble through Shadow DOM
+   * });
+   *
+   * MENU ITEMS FORMAT:
+   * ```
+   * menuItems: [
+   *   {
+   *     label: 'Settings',
+   *     icon: '/path/to/icon.svg',
+   *     action: 'settings' // String identifier for the action
+   *   },
+   *   {
+   *     label: 'Log out',
+   *     icon: '/path/to/logout.svg',
+   *     action: 'logout' // String identifier for the action
+   *   }
+   * ]
+   * ```
+   *
+   * EVENT DETAILS:
+   * - action: String identifier for the menu item action
+   * - userMeta: User metadata object
+   * - timestamp: When the action was triggered
+   * - bubbles: true (allows event to bubble through DOM)
+   * - composed: true (allows event to cross Shadow DOM boundaries)
+   */
+
   /**
    * Array of menu items to render in the profile menu.
-   * Each item: { label: string, icon: string, onClick: string | (() => void) }
+   * Each item: { label: string, icon: string, action: string }
    */
-  export let menuItems: Array<{ label: string; icon: string; onClick: string | (() => void) }> = [];
-  export let userMeta: { initials: string};
+  export let menuItems: Array<{ label: string; icon: string; action: string }> =
+    [];
+  export let userMeta: { initials: string };
   export let ariaLabel: string = 'Open profile menu';
   export let menuAlign: 'desktop' | 'mobile' = 'desktop';
 
   let menuId = `profile-menu-${Math.random().toString(36).slice(2, 10)}`;
   let menuOpen = false;
-  function toggleMenu() { menuOpen = !menuOpen; }
-  function closeMenu() { menuOpen = false; }
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+  function closeMenu() {
+    menuOpen = false;
+  }
 
-  // Execute the onClick function - handles both string and function types
-  function executeOnClick(onClick: string | (() => void)) {
+  function executeMenuAction(action: string) {
     try {
-      if (typeof onClick === 'string') {
-        // Handle string-based function (for Astro apps)
-        const onClickFunction = new Function('return ' + onClick)();
-        onClickFunction();
-      } else if (typeof onClick === 'function') {
-        // Handle actual function (for Svelte apps)
-        onClick();
-      } else {
-        console.error('Invalid onClick type:', typeof onClick);
-      }
+      const event = new CustomEvent('profileMenuAction', {
+        detail: {
+          action,
+          timestamp: Date.now(),
+          userMeta,
+        },
+        bubbles: true, // Allow event to bubble up through DOM
+        composed: true, // Allow event to cross Shadow DOM boundaries
+      });
+
+      // Try to dispatch from the component element first (for web components)
+      // Fall back to window if component element is not available
+      const target =
+        document
+          .querySelector('.profile-context-menu')
+          ?.closest('[data-profile-menu]') || window;
+      target.dispatchEvent(event);
     } catch (error) {
-      console.error('Error executing onClick function:', error);
+      console.error('Error dispatching profile menu action:', error);
     }
   }
 
@@ -79,7 +157,7 @@
   });
 </script>
 
-<div style="position: relative; display: inline-block;">
+<div style="position: relative; display: inline-block;" data-profile-menu>
   <button
     class="user-profile-button"
     tabindex="0"
@@ -100,7 +178,9 @@
 
   {#if menuOpen}
     <div
-      class="profile-context-menu {menuAlign === 'desktop' ? 'desktop-align' : 'mobile-align'}"
+      class="profile-context-menu {menuAlign === 'desktop'
+        ? 'desktop-align'
+        : 'mobile-align'}"
       tabindex="-1"
       id={menuId}
       role="menu"
@@ -109,15 +189,24 @@
         <button
           type="button"
           class="menu-item"
-          on:click={() => { executeOnClick(item.onClick); closeMenu(); }}
+          on:click={() => {
+            executeMenuAction(item.action);
+            closeMenu();
+          }}
           bind:this={btns[idx]}
-          on:keydown={(e) => handleMenuKeydown(e, idx)}
+          on:keydown={e => handleMenuKeydown(e, idx)}
           role="menuitem"
         >
           {#if item.icon}
-          <span class="icon">
-            <img src={item.icon} alt="" aria-hidden="true" width="20" height="20" />
-          </span>
+            <span class="icon">
+              <img
+                src={item.icon}
+                alt=""
+                aria-hidden="true"
+                width="20"
+                height="20"
+              />
+            </span>
           {/if}
           <div class="menu-text">{item.label}</div>
         </button>
@@ -198,7 +287,7 @@
     border-radius: var(--ai-size-8);
     border: 0.0625rem solid var(--ai-color-steel-200);
     background: var(--ai-color-white);
-    box-shadow: 0 0.1875rem var(--ai-size-6) 0 rgba(50, 54, 61, 0.20);
+    box-shadow: 0 0.1875rem var(--ai-size-6) 0 rgba(50, 54, 61, 0.2);
     position: absolute;
     z-index: var(--ai-layer-50);
   }
@@ -259,4 +348,4 @@
     font-weight: 400;
     line-height: 130%;
   }
-</style> 
+</style>

package/src/components/UsaSkipNav.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Button from '@gsa-tts/graymatter-ui/components/Button.svelte';
+
+  let { mainContentId = '#main-content', skipLinkTheme = 'inverted' } =
+    $props();
+</script>
+
+<Button
+  href={mainContentId}
+  theme={skipLinkTheme}
+  size="small"
+  class="usa-skipnav ai-skipnav"
+>
+  Skip to main content
+</Button>
+
+<style>
+  :global(.ai-skipnav:focus) {
+    margin-block-start: var(--ai-size-12);
+    margin-inline-start: var(--ai-size-12);
+    text-decoration: none;
+  }
+</style>