@gsa-tts/graymatter-ui 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -52,14 +52,15 @@
     "gulp": "^5.0.0",
     "svelte": "^5.35.4",
     "typescript": "5.7.3",
-    "vitest": "^3.0.7",
     "vite": "^6.3.5",
-    "@gsa-tts/graymatter-eslint": "0.0.1",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1",
+    "vitest": "^3.0.7",
+    "@gsa-tts/graymatter-eslint": "0.0.2",
+    "@gsa-tts/graymatter-typescript-config": "0.0.2",
     "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
+    "@fontsource/space-mono": "^5.2.8",
     "@uswds/uswds": "3.12.0",
     "astro": "^5.12.8",
     "slugify": "^1.6.6",

package/src/astro-config/index.ts

@@ -113,6 +113,16 @@ export function createAstroConfig({
           styles: ['normal'],
           optimizedFallbacks: true,
         },
+        {
+          name: 'Space Mono',
+          cssVariable: '--ai-font-family-monospace', // Scoped variable name
+          provider: fontProviders.fontsource(),
+          weights: [400],
+          fallbacks: ['monospace'],
+          subsets: ['latin'],
+          styles: ['normal'],
+          optimizedFallbacks: true,
+        },
       ],
     },
     image: {

package/src/components/Button.svelte

@@ -173,6 +173,10 @@
     width: fit-content;
   }
 
+  .ai-button--no-gap {
+    gap: 0;
+  }
+
   .ai-button:is(:hover, :focus) {
     background-color: var(--ai-button-background-primary-hover);
     color: var(--ai-button-text-primary-hover);

package/src/components/DesktopSideNav.svelte

@@ -21,7 +21,6 @@
   import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
   // import HelpIcon from './icons/HelpIcon.svelte';
-  const urls = getAppUrls();
 
   const {
     ssrSelectedItem = undefined,
@@ -36,6 +35,12 @@
     discoverUrl,
   } = $props();
 
+  // Only call getAppUrls if not all URLs are provided via props
+  const urls =
+    apiUrl && chatUrl && consoleUrl && discoverUrl
+      ? { api: '#', chat: '#', console: '#', discover: '#' }
+      : getAppUrls();
+
   let hydrated = false;
   let navContainer: HTMLDivElement;
   let hoveredItem = $state<string | null>(null);
@@ -47,6 +52,9 @@
   let consoleNavRef = $state<HTMLAnchorElement | null>(null);
   let apiNavRef = $state<HTMLAnchorElement | null>(null);
 
+  // Event system for external control
+  let eventListenerCleanup: (() => void) | null = null;
+
   function ssrOrHydrated<T>(hydratedValue: T, ssrValue: T): T {
     return hydrated ? hydratedValue : ssrValue;
   }
@@ -134,9 +142,40 @@
       };
       window.addEventListener('keydown', handleEscape);
 
+      // Custom event system for external control
+      const handleDesktopNavControlEvent = (event: CustomEvent) => {
+        const { action, isOpen: eventIsOpen } = event.detail;
+
+        if (action === 'toggle') {
+          navigationStore.toggleExpanded();
+        } else if (action === 'open') {
+          navigationStore.setExpanded(true);
+        } else if (action === 'close') {
+          navigationStore.setExpanded(false);
+        } else if (action === 'set' && typeof eventIsOpen === 'boolean') {
+          navigationStore.setExpanded(eventIsOpen);
+        }
+      };
+
+      // Listen for custom desktop navigation control events
+      window.addEventListener(
+        'graymatter-desktop-nav-control',
+        handleDesktopNavControlEvent
+      );
+
+      eventListenerCleanup = () => {
+        window.removeEventListener(
+          'graymatter-desktop-nav-control',
+          handleDesktopNavControlEvent
+        );
+      };
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
+        if (eventListenerCleanup) {
+          eventListenerCleanup();
+        }
       };
     }
   });
@@ -255,6 +294,7 @@
   class:expanded={sideNavExpanded()}
   bind:this={navContainer}
   part="side-nav-container"
+  data-testid="side-nav-container"
 >
   <div class="nav-content" part="nav-content">
     <div class="nav-main" part="nav-main">

package/src/components/Head.astro

@@ -7,7 +7,7 @@ import GoogleTagManager from './GoogleTagManager.astro';
 
 // Default values for Open Graph
 const defaultDescription =
-  'Accelerating trustworthy adoption of AI across the federal government. Three powerful AI tools. Industry-leading models. One integrated platform.';
+  'Accelerating trusted AI adoption across government. Three powerful AI tools. Industry-leading models. One integrated platform.';
 const defaultOgImage = getUrlFromBase('/common/assets/images/og-preview.webp');
 
 const pageTitle = `${title} | USAi`;
@@ -29,6 +29,7 @@ const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 <script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
 ></script>
 <Font cssVariable="--ai-font-family-sans" preload />
+<Font cssVariable="--ai-font-family-monospace" />
 <style>
   body {
     font-family: var(--ai-font-family-sans);

package/src/components/MobileBottomNav.svelte

@@ -27,7 +27,11 @@
     discoverUrl?: string;
   } = $props();
 
-  const urls = getAppUrls();
+  // Only call getAppUrls if not all URLs are provided via props
+  const urls =
+    apiUrl && chatUrl && consoleUrl && discoverUrl
+      ? { api: '#', chat: '#', console: '#', discover: '#' }
+      : getAppUrls();
 
   const navItems = [
     {

package/src/components/MobileSideMenu.svelte

@@ -11,7 +11,7 @@
   let sideMenuElement: HTMLDivElement;
   let pendingMobileHash: string | null = null;
 
-  let { logoLinkUrl, logoLinkLabel } = $props();
+  let { logoLinkUrl, logoLinkLabel, children } = $props();
 
   function handleMobileAnchorNavigate(event: Event) {
     const customEvent = event as CustomEvent;
@@ -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

@@ -8,7 +8,7 @@
   import MenuIcon from './icons/MenuIcon.svelte';
   import { onMount } from 'svelte';
 
-  let { profileMenuData } = $props();
+  let { profileMenuData, logoLinkUrl, logoLinkLabel } = $props();
 
   import ProfileMenu from './ProfileMenu.svelte';
 
@@ -90,7 +90,14 @@
   </button>
 
   <div class="brand">
-    <Logo width={75} height={22} />
+    {#if logoLinkUrl}
+      <a class="display-flex" href={logoLinkUrl} aria-label={logoLinkLabel}>
+        <Logo width={75} height={22} />
+      </a>
+    {:else}
+      <Logo width={75} height={22} />
+    {/if}
+
     <span class="brand-text">{$selectedSubNavItemTitle || ''}</span>
   </div>
 

package/src/components/MobileTopNav.webcomponent.svelte

@@ -8,7 +8,7 @@
   import MobileTopNav from './MobileTopNav.svelte';
 
   // Props for the web component
-  let { profileMenuData } = $props();
+  let { profileMenuData, logoLinkUrl, logoLinkLabel } = $props();
 </script>
 
-<MobileTopNav {profileMenuData} />
+<MobileTopNav {profileMenuData} {logoLinkUrl} {logoLinkLabel} />

package/src/components/{UsaBanner.astro → UsaBanner.svelte}

@@ -1,20 +1,24 @@
----
-import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
-const { isInverted = false, maxWidth = 'none' } = Astro.props as {
-  isInverted?: boolean;
-  maxWidth?: 'none' | 'widescreen';
-};
+<script lang="ts">
+  import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
 
-const sizeMap: Record<'widescreen' | 'none', string> = {
-  none: 'ai-maxw-none',
-  widescreen: 'ai-maxw-widescreen',
-};
+  interface Props {
+    isInverted?: boolean;
+    maxWidth?: 'none' | 'widescreen';
+  }
+
+  let { isInverted = false, maxWidth = 'none' }: Props = $props();
+
+  const sizeMap: Record<'widescreen' | 'none', string> = {
+    none: 'ai-maxw-none',
+    widescreen: 'ai-maxw-widescreen',
+  };
 
-const mappedSize = sizeMap[maxWidth] || sizeMap.none;
----
+  const mappedSize = sizeMap[maxWidth] || sizeMap.none;
+</script>
 
 <section
-  class={`usa-banner site-banner ${isInverted ? 'inverted' : ''}`}
+  class="usa-banner site-banner"
+  class:inverted={isInverted}
   aria-label="Official website of the United States government"
 >
   <div class="usa-accordion">
@@ -22,43 +26,42 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
       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"
             class="usa-banner__header-flag"
-            src=`${getUrlFromBase('uswds/img/us_flag_small.png')}`
+            src={getUrlFromBase('uswds/img/us_flag_small.png')}
             alt=""
           />
         </div>
         <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
-          <p class={'usa-banner__header-text ai-banner__header-text'}>
+          <p class="usa-banner__header-text ai-banner__header-text">
             An official website of the United States government
           </p>
-          <p class={'usa-banner__header-action ai-banner__header-action'}>
-            Here’s how you know
+          <p class="usa-banner__header-action ai-banner__header-action">
+            Here's how you know
           </p>
         </div>
         <button
           type="button"
-          class={'usa-accordion__button usa-banner__button ai-banner__button'}
+          class="usa-accordion__button usa-banner__button ai-banner__button"
           aria-expanded="false"
           aria-controls="gov-banner-default"
         >
-          <span class="usa-banner__button-text">Here’s how you know</span>
+          <span class="usa-banner__button-text">Here's how you know</span>
         </button>
       </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">
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img
             class="usa-banner__icon ai-banner__icon usa-media-block__img"
-            src=`${getUrlFromBase('uswds/img/icon-dot-gov.svg')}`
-            role="img"
+            src={getUrlFromBase('uswds/img/icon-dot-gov.svg')}
             alt=""
             aria-hidden="true"
           />
@@ -73,8 +76,7 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img
             class="usa-banner__icon ai-banner__icon usa-media-block__img"
-            src=`${getUrlFromBase('uswds/img/icon-https.svg')}`
-            role="img"
+            src={getUrlFromBase('uswds/img/icon-https.svg')}
             alt=""
             aria-hidden="true"
           />
@@ -82,8 +84,8 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
             <p>
               <strong>Secure .gov websites use HTTPS</strong><br />A
               <strong>lock</strong> (
-              <span class="icon-lock"
-                ><svg
+              <span class="icon-lock">
+                <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="52"
                   height="64"
@@ -94,16 +96,16 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
                   focusable="false"
                 >
                   <title id="banner-lock-title-default">Lock</title>
-                  <desc id="banner-lock-description-default"
-                    >Locked padlock icon</desc
-                  >
+                  <desc id="banner-lock-description-default">
+                    Locked padlock icon
+                  </desc>
                   <path
                     fill="#000000"
                     fill-rule="evenodd"
                     d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                   ></path>
                 </svg>
-              </span>) or <strong>https://</strong> means you’ve safely connected
+              </span>) or <strong>https://</strong> means you've safely connected
               to the .gov website. Share sensitive information only on official,
               secure websites.
             </p>

package/src/components/index.ts

@@ -1,8 +1,8 @@
 // Astro Components
 export { default as Head } from './Head.astro';
-export { default as UsaBanner } from './UsaBanner.astro';
 
 // Svelte Components
+export { default as UsaBanner } from './UsaBanner.svelte';
 export { default as Logo } from './Logo.svelte';
 export { default as Button } from './Button.svelte';
 export { default as DesktopSideNav } from './DesktopSideNav.svelte';

package/src/index.ts

@@ -5,6 +5,9 @@ import Logo from './components/Logo.webcomponent.svelte';
 import MobileBottomNav from './components/MobileBottomNav.webcomponent.svelte';
 import MobileSideMenu from './components/MobileSideMenu.webcomponent.svelte';
 import MobileTopNav from './components/MobileTopNav.webcomponent.svelte';
+
+export * from './utils/navigationControl';
+
 export {
   Button,
   DesktopHeader,

package/src/layouts/GlobalAppLayout.astro

@@ -50,7 +50,12 @@ const {
 
     <!-- Mobile Navigation -->
     <nav aria-label="Mobile navigation">
-      <MobileTopNav client:load {profileMenuData} />
+      <MobileTopNav
+        client:load
+        {profileMenuData}
+        {logoLinkUrl}
+        {logoLinkLabel}
+      />
       <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
         <slot name="sub-nav" />
       </MobileSideMenu>
@@ -104,10 +109,6 @@ const {
               const mobileRect = mobileContent.getBoundingClientRect();
               const scrollTop =
                 mobileContent.scrollTop + rect.top - mobileRect.top;
-              console.log(
-                '[GlobalAppLayout] Immediate mobile scroll to:',
-                scrollTop
-              );
               mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
 
               setTimeout(() => {
@@ -140,11 +141,6 @@ const {
           if (mainContent) {
             const desktopAnchor = mainContent.querySelector(`[id="${anchor}"]`);
             if (desktopAnchor) {
-              console.log(
-                '[GlobalAppLayout] Immediate desktop scroll for:',
-                anchor
-              );
-
               try {
                 // Add temporary scroll margin to account for header
                 const originalScrollMargin =
@@ -202,27 +198,16 @@ const {
       // Check navigation flag first, before any components mount
       const isMainNavNavigation =
         sessionStorage.getItem('navigatingToMainNav') === 'true';
-      console.log(
-        '[GlobalAppLayout] DOMContentLoaded - navigation flag:',
-        isMainNavNavigation
-      );
 
       if (isMainNavNavigation) {
         // Clear the flag immediately
         sessionStorage.removeItem('navigatingToMainNav');
-        console.log(
-          '[GlobalAppLayout] Cleared navigation flag for main nav navigation'
-        );
         // Don't clear header state here - let navigation components handle it
       }
 
       // Handle URL hash scrolling (fallback for cases where immediate scroll didn't work)
       if (window.location.hash) {
         const anchor = window.location.hash.substring(1);
-        console.log(
-          '[GlobalAppLayout] DOMContentLoaded fallback hash scroll for:',
-          anchor
-        );
 
         // Only proceed if we haven't already scrolled
         if (sessionStorage.getItem('globalLayoutScrolling') !== 'true') {
@@ -243,10 +228,6 @@ const {
                   const mobileRect = mobileContent.getBoundingClientRect();
                   const scrollTop =
                     mobileContent.scrollTop + rect.top - mobileRect.top;
-                  console.log(
-                    '[GlobalAppLayout] Fallback mobile scroll to:',
-                    scrollTop
-                  );
                   mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
 
                   setTimeout(() => {
@@ -287,11 +268,6 @@ const {
               );
               if (desktopAnchor) {
                 setTimeout(() => {
-                  console.log(
-                    '[GlobalAppLayout] Fallback desktop scroll for:',
-                    anchor
-                  );
-
                   // Try scrollIntoView first with a temporary offset
                   try {
                     // Add temporary scroll margin to account for header
@@ -305,43 +281,18 @@ const {
                       inline: 'nearest',
                     });
 
-                    console.log(
-                      '[GlobalAppLayout] Used fallback scrollIntoView for desktop'
-                    );
-
                     // Restore original scroll margin after a delay
                     setTimeout(() => {
                       desktopAnchor.style.scrollMarginTop =
                         originalScrollMargin;
                     }, 1000);
                   } catch (e) {
-                    console.log(
-                      '[GlobalAppLayout] Fallback scrollIntoView failed, using manual calculation:',
-                      e
-                    );
-
                     // Fallback to manual calculation
                     const headerHeight = 56;
                     const rect = desktopAnchor.getBoundingClientRect();
                     const scrollTop = window.scrollY + rect.top - headerHeight;
-                    console.log(
-                      '[GlobalAppLayout] Fallback desktop scroll calculation:',
-                      {
-                        anchor,
-                        rectTop: rect.top,
-                        windowScrollY: window.scrollY,
-                        headerHeight,
-                        scrollTop,
-                        elementText: desktopAnchor.textContent?.trim(),
-                      }
-                    );
-
                     // Ensure scrollTop is not negative
                     const finalScrollTop = Math.max(0, scrollTop);
-                    console.log(
-                      '[GlobalAppLayout] Fallback final scroll position:',
-                      finalScrollTop
-                    );
 
                     window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
                   }
@@ -374,25 +325,14 @@ const {
                   }, 100);
                 }, 100);
               } else {
-                console.log(
-                  '[GlobalAppLayout] Fallback desktop anchor not found in main-content container:',
-                  anchor
-                );
                 // Log all available anchors for debugging
                 const allAnchors = mainContent.querySelectorAll('[id]');
-                console.log(
-                  '[GlobalAppLayout] Available anchors in main-content:',
-                  Array.from(allAnchors).map(el => el.id)
-                );
                 // Clear the flag if anchor not found
                 if (typeof window !== 'undefined') {
                   sessionStorage.removeItem('globalLayoutScrolling');
                 }
               }
             } else {
-              console.log(
-                '[GlobalAppLayout] Fallback desktop main-content container not found'
-              );
               // Clear the flag if container not found
               if (typeof window !== 'undefined') {
                 sessionStorage.removeItem('globalLayoutScrolling');
@@ -420,29 +360,10 @@ const {
         const wasMobile = lastWidth <= 640;
         const isMobile = currentWidth <= 640;
 
-        console.log('[GlobalAppLayout] Resize detected:', {
-          lastWidth,
-          currentWidth,
-          wasMobile,
-          isMobile,
-          changed: wasMobile !== isMobile,
-        });
-
         if (wasMobile !== isMobile) {
-          console.log(
-            '[GlobalAppLayout] Layout changed from',
-            wasMobile ? 'mobile' : 'desktop',
-            'to',
-            isMobile ? 'mobile' : 'desktop'
-          );
-
           // Handle anchor scrolling for layout changes
           if (window.location.hash) {
             const anchor = window.location.hash.substring(1);
-            console.log(
-              '[GlobalAppLayout] Layout change with URL hash:',
-              anchor
-            );
 
             // Wait for navigation state to update, then scroll
             setTimeout(() => {
@@ -460,10 +381,6 @@ const {
                     const mobileRect = mobileContent.getBoundingClientRect();
                     const scrollTop =
                       mobileContent.scrollTop + rect.top - mobileRect.top;
-                    console.log(
-                      '[GlobalAppLayout] Scrolling mobile to anchor:',
-                      scrollTop
-                    );
                     mobileContent.scrollTo({
                       top: scrollTop,
                       behavior: 'auto',
@@ -501,15 +418,6 @@ const {
                     `[id="${anchor}"]`
                   );
                   if (desktopAnchor) {
-                    console.log(
-                      '[GlobalAppLayout] Desktop anchor found for layout change:',
-                      {
-                        anchor,
-                        elementText: desktopAnchor.textContent?.trim(),
-                        elementId: desktopAnchor.id,
-                      }
-                    );
-
                     // Try scrollIntoView first with a temporary offset
                     try {
                       // Add temporary scroll margin to account for header
@@ -523,44 +431,20 @@ const {
                         inline: 'nearest',
                       });
 
-                      console.log(
-                        '[GlobalAppLayout] Used scrollIntoView for desktop layout change with scroll margin'
-                      );
-
                       // Restore original scroll margin after a delay
                       setTimeout(() => {
                         desktopAnchor.style.scrollMarginTop =
                           originalScrollMargin;
                       }, 1000);
                     } catch (e) {
-                      console.log(
-                        '[GlobalAppLayout] scrollIntoView failed for layout change, using manual calculation:',
-                        e
-                      );
-
                       // Fallback to manual calculation
                       const headerHeight = 56;
                       const rect = desktopAnchor.getBoundingClientRect();
                       const scrollTop =
                         window.scrollY + rect.top - headerHeight;
-                      console.log(
-                        '[GlobalAppLayout] Desktop scroll calculation for layout change:',
-                        {
-                          anchor,
-                          rectTop: rect.top,
-                          windowScrollY: window.scrollY,
-                          headerHeight,
-                          scrollTop,
-                          elementText: desktopAnchor.textContent?.trim(),
-                        }
-                      );
 
                       // Ensure scrollTop is not negative
                       const finalScrollTop = Math.max(0, scrollTop);
-                      console.log(
-                        '[GlobalAppLayout] Final scroll position for layout change:',
-                        finalScrollTop
-                      );
 
                       window.scrollTo({
                         top: finalScrollTop,
@@ -603,11 +487,6 @@ const {
               detail: { isMobile },
             })
           );
-          console.log(
-            '[GlobalAppLayout] Dispatched layoutTransition event for',
-            isMobile ? 'mobile' : 'desktop',
-            'layout'
-          );
         }
 
         lastWidth = currentWidth;

package/src/styles/base/typography.css

@@ -50,7 +50,14 @@ h6,
 }
 
 pre {
-  padding: var(--ai-size-8);
+  padding: var(--ai-size-16);
+  border-radius: var(--ai-size-4);
+}
+
+code {
+  font-family: var(--ai-font-family-monospace);
+  font-weight: var(--ai-font-weight-normal);
+  font-size: var(--ai-size-14);
 }
 
 a {