@gsa-tts/graymatter-ui 0.4.17 → 0.5.0

package/src/components/MobileBottomNav.svelte

@@ -14,6 +14,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    controlledSelectedItem = undefined,
   }: {
     onNavItemClick?: (data: {
       item: NavigationItem;
@@ -25,29 +26,37 @@
     chatUrl?: string;
     consoleUrl?: string;
     discoverUrl?: string;
+    controlledSelectedItem?: NavigationItem;
   } = $props();
 
-  const allNavItems = [
-    {
-      id: 'discover',
-      label: 'Discover',
-      icon: DiscoverIcon,
-      href: discoverUrl || '#',
-    },
-    { id: 'chat', label: 'Chat', icon: ChatIcon, href: chatUrl || '#' },
-    {
-      id: 'console',
-      label: 'Console',
-      icon: ConsoleIcon,
-      href: consoleUrl || '#',
-    },
-    { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || '#' },
-  ] as const;
+  const selectedForUi = $derived(() => controlledSelectedItem ?? $selectedItem);
+
+  const allNavItems = $derived(
+    () =>
+      [
+        {
+          id: 'discover',
+          label: 'Discover',
+          icon: DiscoverIcon,
+          href: discoverUrl || '#',
+        },
+        { id: 'chat', label: 'Chat', icon: ChatIcon, href: chatUrl || '#' },
+        {
+          id: 'console',
+          label: 'Console',
+          icon: ConsoleIcon,
+          href: consoleUrl || '#',
+        },
+        { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || '#' },
+      ] as const
+  );
 
   // Filter out discover item if hideDiscover is true
-  const navItems = hideDiscover
-    ? allNavItems.filter(item => item.id !== 'discover')
-    : allNavItems;
+  const navItems = $derived(() =>
+    hideDiscover
+      ? allNavItems().filter(item => item.id !== 'discover')
+      : allNavItems()
+  );
 
   function handleNavItemClick(item: NavigationItem) {
     // Set navigation flag immediately to prevent header restoration
@@ -55,7 +64,9 @@
       sessionStorage.setItem('navigatingToMainNav', 'true');
     }
 
-    navigationStore.setSelectedItem(item);
+    if (controlledSelectedItem === undefined) {
+      navigationStore.setSelectedItem(item);
+    }
 
     // Clear header state for main navigation items (including discover)
     if (item !== 'discover') {
@@ -126,16 +137,16 @@
 
 {#if showAppIcons}
   <nav class="mobile-bottom-nav" part="mobile-bottom-nav">
-    {#each navItems as navItem}
+    {#each navItems() as navItem}
       <a
         href={navItem.href}
         class={`nav-item ${navItem.id}-item`}
-        class:active={$selectedItem === navItem.id}
+        class:active={selectedForUi() === navItem.id}
         onclick={() => handleNavItemClick(navItem.id)}
         part={`${navItem.id}-item`}
       >
         <div class="icon">
-          <navItem.icon isSelected={$selectedItem === navItem.id} />
+          <navItem.icon isSelected={selectedForUi() === navItem.id} />
         </div>
         <span class="label">{navItem.label}</span>
       </a>

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -16,6 +16,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    controlledSelectedItem,
   } = $props();
 </script>
 
@@ -27,4 +28,5 @@
   {chatUrl}
   {consoleUrl}
   {discoverUrl}
+  {controlledSelectedItem}
 />

package/src/components/MobileSideMenu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import {
     selectedItem,
     isExpanded,
@@ -8,10 +7,10 @@
   import Logo from './Logo.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
 
-  let sideMenuElement: HTMLDivElement;
+  let sideMenuElement = $state<HTMLDivElement | null>(null);
   let pendingMobileHash: string | null = null;
 
-  let { logoLinkUrl, logoLinkLabel } = $props();
+  let { logoLinkUrl, logoLinkLabel, children } = $props();
 
   function handleMobileAnchorNavigate(event: Event) {
     const customEvent = event as CustomEvent;
@@ -82,7 +81,8 @@
     }
   }
 
-  onMount(() => {
+  $effect(() => {
+    if (typeof window === 'undefined') return;
     // Listen for the custom event globally
     window.addEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
 
@@ -180,7 +180,7 @@
     <!-- Show submenu items if available and not on discover -->
     {#if $selectedItem && $selectedItem !== 'discover'}
       <div class="subnav-section" part="subnav-section">
-        <slot />
+        {@render children?.()}
       </div>
     {:else}
       <!-- Show message when no submenu is available -->

package/src/components/MobileSideMenu.webcomponent.svelte

@@ -7,9 +7,7 @@
 <script lang="ts">
   import MobileSideMenu from './MobileSideMenu.svelte';
 
-  let { logoLinkUrl, logoLinkLabel } = $props();
+  let { logoLinkUrl, logoLinkLabel, children } = $props();
 </script>
 
-<MobileSideMenu {logoLinkUrl} {logoLinkLabel}>
-  <slot />
-</MobileSideMenu>
+<MobileSideMenu {logoLinkUrl} {logoLinkLabel} {children} />

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 -->