@gsa-tts/graymatter-ui 0.4.19 → 0.5.0

package/src/components/MobileTopNav.svelte

@@ -7,14 +7,13 @@
   import Logo from './Logo.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
   import HelpIcon from './icons/HelpIcon.svelte';
-  import { onMount } from 'svelte';
 
   let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
     $props();
 
   import ProfileMenu from './ProfileMenu.svelte';
 
-  const helpUrl = supplementalMenuData?.help?.url?.trim();
+  const helpUrl = $derived(() => supplementalMenuData?.help?.url?.trim());
 
   // Check if we're on the help page by comparing URLs (help is not a nav/subnav item)
   function getPathname(url: string, baseOrigin: string) {
@@ -26,7 +25,8 @@
   }
 
   function checkIsHelpPage(): boolean {
-    if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+    const url = helpUrl();
+    if (!url || url === '#' || url.startsWith('#')) {
       return false;
     }
     const location = (
@@ -35,33 +35,30 @@
       }
     ).location;
     if (location?.origin && location?.pathname) {
-      const helpPath = getPathname(helpUrl, location.origin);
+      const helpPath = getPathname(url, location.origin);
       return helpPath !== null && location.pathname === helpPath;
     }
     return false;
   }
 
-  const isHelpSelected = $derived(checkIsHelpPage());
+  const isHelpSelected = $derived(() => checkIsHelpPage());
 
-  onMount(() => {
+  $effect(() => {
+    if (typeof window === 'undefined') return;
     // Listen for section visibility changes to update header
     const handleSectionVisible = (event: Event) => {
       const customEvent = event as CustomEvent;
       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)
+        );
       }
     };
 
     // Set default header based on first submenu item
     const setDefaultHeaderFromFirstSubmenu = () => {
-      if (typeof window === 'undefined') return;
-
       const mainContent = document.getElementById('main-content');
       if (!mainContent) return;
 
@@ -75,12 +72,10 @@
         // 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)
+          );
         }
       }
     };
@@ -98,7 +93,7 @@
     // Listen for navigation changes to update help button state
     const handleNavigationChange = () => {
       // Force reactivity update by accessing the derived value
-      void isHelpSelected;
+      void isHelpSelected();
     };
 
     window.addEventListener('popstate', handleNavigationChange);
@@ -115,7 +110,7 @@
 
   function handleHelpClick(event: MouseEvent) {
     // If it's a hash link, prevent default to stay on same page
-    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+    if (helpUrl() === '#' || helpUrl()?.startsWith('#')) {
       event.preventDefault();
     }
   }
@@ -145,18 +140,18 @@
     <span class="brand-text">{$selectedSubNavItemTitle || ''}</span>
   </div>
 
-  {#if helpUrl}
+  {#if helpUrl()}
     <a
       class="help-button"
-      class:selected={isHelpSelected}
-      aria-current={isHelpSelected ? 'page' : undefined}
-      href={helpUrl}
+      class:selected={isHelpSelected()}
+      aria-current={isHelpSelected() ? 'page' : undefined}
+      href={helpUrl()}
       title="Help"
       aria-label="Help"
       onclick={handleHelpClick}
     >
       <span class="icon-container">
-        <HelpIcon isSelected={isHelpSelected} />
+        <HelpIcon isSelected={isHelpSelected()} />
       </span>
     </a>
   {/if}

package/src/components/NavigationInitializer.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import {
     navigationStore,
     type NavigationItem,
   } from '../stores/navigationStore.js';
 
-  export let item: NavigationItem;
-  export let autoExpand: boolean = false;
+  interface Props {
+    item: NavigationItem;
+    autoExpand?: boolean;
+  }
 
-  onMount(() => {
+  let { item, autoExpand = false }: Props = $props();
+
+  $effect(() => {
     if (item) {
       navigationStore.setSelectedItem(item);
       // Auto-expand for non-discover pages on desktop

package/src/components/ProfileMenu.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   /**
    * ProfileMenu Component - Event-Driven Architecture with Shadow DOM Support
    *
@@ -71,14 +69,22 @@
    * Array of menu items to render in the profile menu.
    * Each item: { label: string, icon: string, action: 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';
+  interface Props {
+    menuItems?: Array<{ label: string; icon: string; action: string }>;
+    userMeta: { initials: string };
+    ariaLabel?: string;
+    menuAlign?: 'desktop' | 'mobile';
+  }
 
-  let menuId = `profile-menu-${Math.random().toString(36).slice(2, 10)}`;
-  let menuOpen = false;
+  let {
+    menuItems = [],
+    userMeta,
+    ariaLabel = 'Open profile menu',
+    menuAlign = 'desktop',
+  }: Props = $props();
+
+  const menuId = `profile-menu-${Math.random().toString(36).slice(2, 10)}`;
+  let menuOpen = $state(false);
   function toggleMenu() {
     menuOpen = !menuOpen;
   }
@@ -118,12 +124,14 @@
     }
   }
 
-  let profileButton: HTMLButtonElement;
+  let profileButton = $state<HTMLButtonElement | null>(null);
 
   // For keyboard navigation, keep refs to all menu item buttons
-  let menuItemButtons: HTMLButtonElement[] = [];
-  let btns: (HTMLButtonElement | null)[] = [];
-  $: menuItemButtons = btns.filter(Boolean) as HTMLButtonElement[];
+  let menuItemButtons = $state<HTMLButtonElement[]>([]);
+  let btns = $state<(HTMLButtonElement | null)[]>([]);
+  $effect(() => {
+    menuItemButtons = btns.filter(Boolean) as HTMLButtonElement[];
+  });
 
   function handleMenuKeydown(e: KeyboardEvent, idx: number) {
     if (e.key === 'ArrowDown') {
@@ -149,7 +157,8 @@
     }
   }
 
-  onMount(() => {
+  $effect(() => {
+    if (typeof window === 'undefined') return;
     window.addEventListener('keydown', handleGlobalEscape, true);
     return () => {
       window.removeEventListener('keydown', handleGlobalEscape, true);
@@ -165,8 +174,8 @@
     aria-haspopup="menu"
     aria-expanded={menuOpen}
     aria-controls={menuId}
-    on:click={toggleMenu}
-    on:blur={handleBlur}
+    onclick={toggleMenu}
+    onblur={handleBlur}
     bind:this={profileButton}
   >
     <div class="user-profile-container">
@@ -189,12 +198,12 @@
         <button
           type="button"
           class="menu-item"
-          on:click={() => {
+          onclick={() => {
             executeMenuAction(item.action);
             closeMenu();
           }}
           bind:this={btns[idx]}
-          on:keydown={e => handleMenuKeydown(e, idx)}
+          onkeydown={e => handleMenuKeydown(e, idx)}
           role="menuitem"
         >
           {#if item.icon}

package/src/components/UsaBanner.svelte

@@ -13,7 +13,7 @@
     widescreen: 'ai-maxw-widescreen',
   };
 
-  const mappedSize = sizeMap[maxWidth] || sizeMap.none;
+  const mappedSize = $derived(() => sizeMap[maxWidth] || sizeMap.none);
 </script>
 
 <section
@@ -26,7 +26,7 @@
       class="usa-banner__header ai-banner__header"
       aria-label="USA banner"
     >
-      <div class="usa-banner__inner {mappedSize}">
+      <div class="usa-banner__inner {mappedSize()}">
         <div class="grid-col-auto">
           <img
             aria-hidden="true"
@@ -54,7 +54,7 @@
       </div>
     </header>
     <div
-      class="usa-banner__content usa-accordion__content ai-banner__content {mappedSize}"
+      class="usa-banner__content usa-accordion__content ai-banner__content {mappedSize()}"
       id="gov-banner-default"
     >
       <div class="grid-row grid-gap-lg">

package/src/components/icons/ApiIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isSelected = false;
+  let { isSelected = false } = $props();
 </script>
 
 <svg

package/src/components/icons/ChatIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isSelected = false;
+  let { isSelected = false } = $props();
 </script>
 
 <svg

package/src/components/icons/ConsoleIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isSelected = false;
+  let { isSelected = false } = $props();
 </script>
 
 <svg

package/src/components/icons/DiscoverIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isSelected = false;
+  let { isSelected = false } = $props();
 </script>
 
 <svg

package/src/components/icons/HelpIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isSelected = false;
+  let { isSelected = false } = $props();
 </script>
 
 <svg

package/src/components/icons/MenuIcon.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
-  export let isDisabled: boolean = false;
-  export let isHovered: boolean = false;
-  export let isOpen: boolean = false;
+  interface Props {
+    isDisabled?: boolean;
+    isHovered?: boolean;
+    isOpen?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    isDisabled = false,
+    isHovered = false,
+    isOpen = false,
+    // eslint-disable-next-line svelte/valid-compile -- allow passthrough svg props.
+    ...restProps
+  }: Props = $props();
 </script>
 
 <svg
@@ -10,7 +21,7 @@
   height="24"
   viewBox="0 0 24 24"
   fill="none"
-  {...$$restProps}
+  {...restProps}
 >
   {#if isDisabled}
     <!-- Disabled state -->