@gsa-tts/graymatter-ui 0.6.2 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "static"
   ],
   "devDependencies": {
-    "@astrojs/svelte": "^7.0.13",
+    "@astrojs/svelte": "^8.0.5",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
@@ -53,24 +53,24 @@
     "@types/unist": "^3.0.3",
     "@uswds/compile": "1.2.2",
     "@vitest/coverage-istanbul": "^3.2.4",
-    "astro": "^5.15.9",
-    "astro-purgecss": "^5.2.2",
+    "astro": "6.1.9",
+    "astro-purgecss": "^6.0.1",
     "eslint": "^9.21.0",
     "gulp": "^5.0.0",
     "svelte": "^5.53.5",
     "typescript": "5.7.3",
-    "vite": "^6.4.1",
-    "vitest": "^3.0.7",
+    "vite": "^7.3.2",
+    "vitest": "^3.2.4",
     "@gsa-tts/graymatter-eslint": "0.0.2",
-    "@gsa-tts/graymatter-typescript-config": "0.0.2",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1"
+    "@gsa-tts/graymatter-typescript-config": "0.0.3",
+    "@gsa-tts/graymatter-vitest-config": "0.0.2"
   },
   "dependencies": {
-    "@fontsource-variable/archivo": "^5.2.6",
+    "@fontsource/archivo": "^5.2.8",
     "@fontsource/space-mono": "^5.2.8",
     "@uswds/uswds": "3.12.0",
     "unist-util-visit": "^5.0.0",
-    "@gsa-tts/graymatter-style-tokens": "0.3.17"
+    "@gsa-tts/graymatter-style-tokens": "0.6.3"
   },
   "scripts": {
     "build": "gulp update && vite build",

package/src/astro-config/index.ts

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig, fontProviders } from 'astro/config';
+import { defineConfig } from 'astro/config';
 import type { AstroIntegration } from 'astro';
 import svelte from '@astrojs/svelte';
 import purgecss from 'astro-purgecss';
@@ -31,7 +31,7 @@ export function createAstroConfig({
     svelte(),
     // purgecss should go last
     purgecss({
-      fontFace: true, // Removes unused @font-face rules
+      fontFace: false, // Keep @font-face rules for packaged fonts
       keyframes: true, // Removes unused keyframes
       safelist: {
         standard: [
@@ -116,37 +116,13 @@ export function createAstroConfig({
 
   return defineConfig({
     base: normalizeTrailingSlash(process.env.BASEURL || ''),
+    output: 'static',
     integrations: process.env.VITEST
       ? []
       : overrides.integrations || baseIntegrations,
     // Markdown config with remark plugins (applies to all markdown/MDX processing)
     markdown: mergedMarkdownConfig as typeof baseMarkdownConfig &
       typeof overrides.markdown,
-    experimental: {
-      // Astro Experimental Fonts API for managing custom fonts
-      fonts: [
-        {
-          name: 'Archivo',
-          cssVariable: '--ai-font-family-sans', // Scoped variable name
-          provider: fontProviders.fontsource(),
-          weights: [400, 500, 600],
-          fallbacks: ['sans-serif'],
-          subsets: ['latin'],
-          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: {
       service: {
         entrypoint: 'astro/assets/services/noop',

package/src/components/MobileBottomNav.svelte

@@ -82,6 +82,9 @@
 
             // Set default header from first submenu item after a short delay
             setTimeout(() => {
+              if (typeof document === 'undefined') {
+                return;
+              }
               const mainContent = document.getElementById('main-content');
               if (mainContent) {
                 const firstSection = mainContent.querySelector(

package/src/components/UsaSkipNav.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
   import Button from '@gsa-tts/graymatter-ui/components/Button.svelte';
 
-  let { mainContentId = '#main-content', skipLinkTheme = 'inverted' } =
-    $props();
+  type UsaSkipNavProps = {
+    mainContentId?: string;
+    skipLinkTheme?: 'inverted' | 'default';
+  };
+
+  let {
+    mainContentId = '#main-content',
+    skipLinkTheme = 'inverted',
+  }: UsaSkipNavProps = $props();
 </script>
 
 <Button

package/src/layouts/GlobalAppLayout.astro

@@ -8,7 +8,6 @@ import MobileBottomNav from '../components/MobileBottomNav.svelte';
 import MobileSideMenu from '../components/MobileSideMenu.svelte';
 import Logo from '../components/Logo.svelte';
 import { siteName } from '../constants';
-import { getSecret } from 'astro:env/server';
 
 const {
   componentOptions = {},
@@ -26,13 +25,15 @@ const {
   className = '',
 } = Astro.props;
 
-// Use getSecret directly for better environment variable handling
-const chatUrl = getSecret('CHAT_URL') || getSecret('PUBLIC_CHAT_URL');
-const consoleUrl = getSecret('CONSOLE_URL') || getSecret('PUBLIC_CONSOLE_URL');
+// Read at build time for static output; prefer PUBLIC_* for safe exposure
+const chatUrl =
+  import.meta.env.PUBLIC_CHAT_URL || process.env.CHAT_URL || undefined;
+const consoleUrl =
+  import.meta.env.PUBLIC_CONSOLE_URL || process.env.CONSOLE_URL || undefined;
 const apiDocsUrl =
-  getSecret('API_DOCS_URL') || getSecret('PUBLIC_API_DOCS_URL');
+  import.meta.env.PUBLIC_API_DOCS_URL || process.env.API_DOCS_URL || undefined;
 const discoverUrl =
-  getSecret('DISCOVER_URL') || getSecret('PUBLIC_DISCOVER_URL');
+  import.meta.env.PUBLIC_DISCOVER_URL || process.env.DISCOVER_URL || undefined;
 
 const chat = chatUrl || '#';
 const consoleApp = consoleUrl || '#';

package/src/layouts/Head.astro

@@ -1,9 +1,9 @@
 ---
 import { siteName } from '../constants';
 const { title, description, openGraphImage, gtmID } = Astro.props;
-import { Font } from 'astro:assets';
 import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
 import GoogleTagManager from './GoogleTagManager.astro';
+import { fontPreloads } from './fonts';
 
 // Default values for Open Graph
 const defaultDescription =
@@ -28,11 +28,21 @@ const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
   }
 </script>
 {gtmIDValue && <GoogleTagManager gtmID={gtmIDValue} />}
-<script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
+<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>
+
+{
+  fontPreloads.map(href => (
+    <link rel="preload" href={href} as="font" type="font/woff2" crossorigin />
+  ))
+}
+
+<style is:global>
+  :root {
+    --ai-font-family-sans: 'Archivo', sans-serif;
+    --ai-font-family-monospace: 'Space Mono', monospace;
+  }
+
   body {
     font-family: var(--ai-font-family-sans);
   }

package/src/layouts/fonts.ts

@@ -0,0 +1,17 @@
+// Centralized font imports and preload URLs.
+import '@fontsource/archivo/400.css';
+import '@fontsource/archivo/500.css';
+import '@fontsource/archivo/600.css';
+import '@fontsource/space-mono/400.css';
+
+import archivo400Url from '@fontsource/archivo/files/archivo-latin-400-normal.woff2?url';
+import archivo500Url from '@fontsource/archivo/files/archivo-latin-500-normal.woff2?url';
+import archivo600Url from '@fontsource/archivo/files/archivo-latin-600-normal.woff2?url';
+import spaceMono400Url from '@fontsource/space-mono/files/space-mono-latin-400-normal.woff2?url';
+
+export const fontPreloads = [
+  archivo400Url,
+  archivo500Url,
+  archivo600Url,
+  spaceMono400Url,
+];