@gsa-tts/graymatter-ui 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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",
+    "vitest": "^3.0.7",
     "@gsa-tts/graymatter-typescript-config": "0.0.1",
+    "@gsa-tts/graymatter-eslint": "0.0.1",
     "@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/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/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/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 {