@gsa-tts/graymatter-ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -46,7 +46,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.0",
     "@uswds/compile": "1.2.2",
-    "@vitest/coverage-istanbul": "^3.0.7",
+    "@vitest/coverage-istanbul": "^3.2.4",
+    "astro": "^5.13.7",
     "astro-purgecss": "^5.2.2",
     "eslint": "^9.21.0",
     "gulp": "^5.0.0",
@@ -62,7 +63,6 @@
     "@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",
     "@gsa-tts/graymatter-style-tokens": "0.3.0"
   },

package/src/components/DesktopSideNav.svelte

@@ -143,8 +143,9 @@
       window.addEventListener('keydown', handleEscape);
 
       // Custom event system for external control
-      const handleDesktopNavControlEvent = (event: CustomEvent) => {
-        const { action, isOpen: eventIsOpen } = event.detail;
+      const handleDesktopNavControlEvent = (event: Event) => {
+        const customEvent = event as CustomEvent;
+        const { action, isOpen: eventIsOpen } = customEvent.detail;
 
         if (action === 'toggle') {
           navigationStore.toggleExpanded();
@@ -208,19 +209,21 @@
 
             // Set default header from first submenu item after a short delay
             setTimeout(() => {
-              const mainContent = document.getElementById('main-content');
-              if (mainContent) {
-                const firstSection = mainContent.querySelector(
-                  'h2[id], h3[id], h4[id], h5[id], h6[id]'
-                );
-                if (firstSection && firstSection.textContent) {
-                  const firstSectionTitle = firstSection.textContent.trim();
-                  selectedSubNavItemTitle.set(firstSectionTitle);
-                  if (typeof window !== 'undefined') {
-                    sessionStorage.setItem(
-                      'subNav-selectedTitle',
-                      JSON.stringify(firstSectionTitle)
-                    );
+              if (typeof document !== 'undefined') {
+                const mainContent = document.getElementById('main-content');
+                if (mainContent) {
+                  const firstSection = mainContent.querySelector(
+                    'h2[id], h3[id], h4[id], h5[id], h6[id]'
+                  );
+                  if (firstSection && firstSection.textContent) {
+                    const firstSectionTitle = firstSection.textContent.trim();
+                    selectedSubNavItemTitle.set(firstSectionTitle);
+                    if (typeof window !== 'undefined') {
+                      sessionStorage.setItem(
+                        'subNav-selectedTitle',
+                        JSON.stringify(firstSectionTitle)
+                      );
+                    }
                   }
                 }
               }

package/src/components/Head.astro

@@ -10,7 +10,6 @@ const defaultDescription =
   '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`;
 const ogTitle = title || siteName;
 const ogDescription = description || defaultDescription;
 const ogImage = openGraphImage || defaultOgImage;
@@ -19,7 +18,7 @@ const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
 <meta name="viewport" content="width=device-width" />
-<title>{pageTitle}</title>
+<title>{title}</title>
 <script is:inline>
   if ('performance' in window) {
     performance.mark('usai:documenthead:start');

package/src/components/MobileSideMenu.svelte

@@ -6,7 +6,7 @@
     navigationStore,
   } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
-  import CloseIcon from './icons/CloseIcon.svelte';
+  import MenuIcon from './icons/MenuIcon.svelte';
 
   let sideMenuElement: HTMLDivElement;
   let pendingMobileHash: string | null = null;
@@ -152,6 +152,14 @@
   part="mobile-side-menu"
 >
   <div class="menu-header" part="menu-header">
+    <button
+      class="close-button"
+      onclick={closeMobileMenu}
+      aria-label="Close navigation menu"
+      part="close-button"
+    >
+      <MenuIcon isOpen={true} />
+    </button>
     <div class="logo-container" part="logo-container">
       {#if logoLinkUrl}
         <a
@@ -166,14 +174,6 @@
         <Logo width={75} height={22} />
       {/if}
     </div>
-    <button
-      class="close-button"
-      onclick={closeMobileMenu}
-      aria-label="Close navigation menu"
-      part="close-button"
-    >
-      <CloseIcon />
-    </button>
   </div>
 
   <div class="menu-content" part="menu-content">
@@ -208,9 +208,9 @@
     top: 0;
     left: 0;
     bottom: 0;
-    width: 15rem;
+    width: 80%;
     max-width: 85vw;
-    background: var(--ai-color-white);
+    background: var(--ai-color-steel-50);
     transform: translateX(-100%);
     transition: transform var(--ai-transition-ease-medium);
     z-index: var(--ai-layer-50);
@@ -225,9 +225,8 @@
   .menu-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: var(--ai-size-16) var(--ai-size-20);
-    border-bottom: 0.0625rem solid var(--ai-color-neutral-200);
+    padding: var(--ai-size-16);
+    gap: var(--ai-size-16);
   }
 
   .mobile-side-menu .logo-container {
@@ -242,13 +241,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--ai-size-32);
-    height: var(--ai-size-32);
+    padding: 0;
     border: none;
     background: none;
     color: var(--ai-color-neutral-700);
     cursor: pointer;
-    border-radius: var(--ai-size-6);
+    border-radius: var(--ai-size-2);
     transition: background-color var(--ai-transition-ease-fast);
   }
 
@@ -263,7 +261,6 @@
   }
 
   .subnav-section {
-    padding: var(--ai-size-16) 0;
     overflow-y: auto;
     max-height: calc(100vh - 4rem); /* leave space for header/close */
   }

package/src/components/MobileTopNav.svelte

@@ -131,7 +131,7 @@
   }
 
   .mobile-top-nav .menu-button {
-    width: var(--ai-size-40);
+    padding: 0;
     height: var(--ai-size-40);
     color: var(--ai-color-neutral-700);
   }

package/src/components/icons/CloseIcon.svelte

@@ -3,14 +3,14 @@
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
   fill="none"
 >
   <path
-    d="M6 18L18 6M6 6L18 18"
-    stroke="#585C63"
+    d="M2 18L18 2M2 2L18 18"
+    stroke="black"
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"

package/src/helpers/meta.ts

@@ -1,6 +1,5 @@
 import type { AstroGlobal } from 'astro';
-import { siteName } from '@gsa-tts/graymatter-ui/constants';
 
 export const getPageTitle = (astro: Pick<AstroGlobal, 'props'>): string => {
-  return astro.props?.title || siteName;
+  return astro.props?.title ? `${astro.props?.title} | USAi` : 'USAi';
 };

package/src/styles/components/globalAppLayout.css

@@ -56,7 +56,7 @@
     z-index: var(--ai-layer-1);
   }
   .app main {
-    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+    padding: var(--ai-size-40) var(--ai-size-16) var(--ai-size-8) 1rem;
   }
 
   :global(.side-nav-container.expanded) ~ .main-container main {
@@ -71,3 +71,9 @@
     height: 100%;
   }
 }
+
+@media (--ai-size-breakpoint-desktop) {
+  .app main {
+    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+  }
+}