@gsa-tts/graymatter-ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@turbo/gen": "^2.4.0",
     "@types/node": "^22.13.0",
     "@uswds/compile": "1.2.2",
     "@vitest/coverage-istanbul": "^3.0.7",
@@ -53,16 +52,17 @@
     "gulp": "^5.0.0",
     "svelte": "^5.35.4",
     "typescript": "5.7.3",
-    "vitest": "^3.0.7",
     "vite": "^6.3.5",
+    "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",
-    "@gsa-tts/graymatter-typescript-config": "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.11.0",
+    "astro": "^5.12.8",
     "slugify": "^1.6.6",
     "@gsa-tts/graymatter-style-tokens": "0.3.0"
   },

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/component-options/componentOptions.ts

@@ -2,38 +2,52 @@ interface WebsiteComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
-  agencyHeader?: {
+  header?: {
     theme?: 'inverse' | 'default';
   };
 }
 
-interface ApiComponentOptions {
-  usaBanner?: {
-    theme?: 'inverse' | 'default';
-  };
-}
-
-interface ConsoleComponentOptions {
+interface AppComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
 }
 
 export interface ComponentOptions {
+  api?: AppComponentOptions;
+  apiSubpage?: WebsiteComponentOptions;
+  chatSubpage?: WebsiteComponentOptions;
+  console?: AppComponentOptions;
+  consoleSubpage?: WebsiteComponentOptions;
+  partnershipsSubpage?: WebsiteComponentOptions;
   website?: WebsiteComponentOptions;
-  api?: ApiComponentOptions;
-  console?: ConsoleComponentOptions;
 }
 
 export const componentOptions: ComponentOptions = {
-  website: {
+  api: {
+    usaBanner: { theme: 'default' },
+  },
+  apiSubpage: {
     usaBanner: { theme: 'inverse' },
-    agencyHeader: { theme: 'inverse' },
+    header: { theme: 'inverse' },
   },
-  api: {
+  chatSubpage: {
     usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
   },
   console: {
     usaBanner: { theme: 'default' },
   },
+  consoleSubpage: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
+  partnershipsSubpage: {
+    usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
+  },
+  website: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
 };

package/src/components/Button.svelte

@@ -1,13 +1,33 @@
 <script lang="ts">
+  /**
+   * Button Component
+   *
+   * Props:
+   * - variant: 'primary' | 'secondary' | 'unstyled' (default: 'primary')
+   * - theme: 'default' | 'inverted' (default: 'default')
+   * - shape: 'round' | 'square' (default: 'round')
+   * - size: 'small' | 'medium' | 'large' (default: 'medium')
+   * - href?: string (optional - renders as <a> if provided)
+   * - disabled?: boolean (default: false)
+   * - type?: 'button' | 'submit' | 'reset' (default: 'button')
+   *
+   * Examples:
+   * - Round primary button: <Button>Click me</Button>
+   * - Square secondary button: <Button variant="secondary" shape="square">Square</Button>
+   * - Small button (any shape): <Button size="small">Small Button</Button>
+   * - Small square button: <Button variant="secondary" shape="square" size="small">Small Square</Button>
+   * - Inverted square button: <Button theme="inverted" shape="square">Inverted Square</Button>
+   */
   interface Props {
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'unstyled';
     theme?: 'default' | 'inverted';
+    shape?: 'round' | 'square';
     href?: string;
     disabled?: boolean;
     size: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
-    children?: string | null;
+    children?: import('svelte').Snippet | null;
     class?: string;
     [key: `data-${string}`]: string;
     [key: `aria-${string}`]: string;
@@ -16,7 +36,8 @@
   let {
     variant = 'primary',
     theme = 'default',
-    href = null,
+    shape = 'round',
+    href = undefined,
     disabled = false,
     onclick,
     children = null,
@@ -41,6 +62,7 @@
       variant === 'primary' ? 'usa-button--primary' : '',
       variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
       variant === 'unstyled' ? 'ai-button--unstyled' : '',
+      shape === 'square' ? 'ai-button--square' : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -60,6 +82,7 @@
 {/if}
 
 <style>
+  /*! purgecss start ignore */
   :root,
   :host {
     /* global button */
@@ -106,6 +129,37 @@
     --ai-button-border-outline-inverted-hover: var(
       --ai-button-border-outline-inverted-rest
     );
+
+    /* square button specific tokens */
+    --ai-button-radius-square: var(--ai-size-4);
+    --ai-button-padding-x-square: var(--ai-size-12);
+    --ai-button-padding-y-square: var(--ai-size-6);
+    --ai-button-height-square: var(--ai-size-40);
+    --ai-button-width-square: 100%;
+
+    /* small square button tokens */
+    --ai-button-padding-x-square-small: var(--ai-size-8);
+    --ai-button-padding-y-square-small: var(--ai-size-4);
+    --ai-button-height-square-small: var(--ai-size-24);
+
+    /* square button color tokens */
+    --ai-button-background-square-primary-rest: var(--ai-color-black);
+    --ai-button-background-square-primary-hover: var(--ai-color-neutral-900);
+    --ai-button-background-square-primary-disabled: var(--ai-color-neutral-200);
+    --ai-button-text-square-primary-rest: var(--ai-color-white);
+    --ai-button-text-square-primary-hover: var(--ai-color-white);
+    --ai-button-text-square-primary-disabled: var(--ai-color-neutral-800);
+
+    --ai-button-background-square-secondary-rest: var(--ai-color-white);
+    --ai-button-background-square-secondary-hover: var(--ai-color-neutral-200);
+    --ai-button-background-square-secondary-disabled: var(
+      --ai-color-neutral-500
+    );
+    --ai-button-text-square-secondary-rest: var(--ai-color-black);
+    --ai-button-text-square-secondary-hover: var(--ai-color-black);
+    --ai-button-text-square-secondary-disabled: var(--ai-color-neutral-900);
+    --ai-button-border-square-secondary-rest: var(--ai-color-black);
+    --ai-button-border-square-secondary-hover: var(--ai-color-black);
   }
 
   .ai-button {
@@ -116,6 +170,11 @@
     padding-inline: var(--ai-button-padding-x);
     padding-block: var(--ai-button-padding-y);
     margin: 0;
+    width: fit-content;
+  }
+
+  .ai-button--no-gap {
+    gap: 0;
   }
 
   .ai-button:is(:hover, :focus) {
@@ -169,6 +228,108 @@
     border: var(--ai-button-border-inverted-hover);
   }
 
+  /* Square button styles */
+  .ai-button--square {
+    border-radius: var(--ai-button-radius-square);
+    padding-inline: var(--ai-button-padding-x-square);
+    padding-block: var(--ai-button-padding-y-square);
+    height: var(--ai-button-height-square);
+    width: var(--ai-button-width-square);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.0625rem solid var(--ai-color-neutral-300);
+    box-shadow: 0 0.0625rem var(--ai-size-2) 0 rgba(0, 0, 0, 0.1);
+    transition: all var(--ai-transition-ease-fast);
+  }
+
+  /* Small square button specific adjustments */
+  .ai-button--small.ai-button--square {
+    padding-inline: var(--ai-button-padding-x-square-small);
+    padding-block: var(--ai-button-padding-y-square-small);
+    height: var(--ai-button-height-square-small);
+  }
+
+  .ai-button--square:is(:hover, :focus) {
+    border-color: var(--ai-color-neutral-400);
+    box-shadow: 0 var(--ai-size-2) var(--ai-size-4) 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .ai-button--square:focus {
+    outline-offset: var(--ai-size-2);
+  }
+
+  /* Square button variants */
+  .ai-button--square.ai-button--primary {
+    background-color: var(--ai-button-background-square-primary-rest);
+    color: var(--ai-button-text-square-primary-rest);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--primary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-primary-hover);
+    color: var(--ai-button-text-square-primary-hover);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--secondary {
+    background-color: var(--ai-button-background-square-secondary-rest);
+    color: var(--ai-button-text-square-secondary-rest);
+    border-color: var(--ai-button-border-square-secondary-rest);
+  }
+
+  .ai-button--square.ai-button--secondary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-secondary-hover);
+    color: var(--ai-button-text-square-secondary-hover);
+    border-color: var(--ai-button-border-square-secondary-hover);
+  }
+
+  .ai-button--square.ai-button--outline {
+    background-color: var(--ai-color-white);
+    color: var(--ai-color-neutral-800);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-50);
+    color: var(--ai-color-black);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  /* Square button inverted themes */
+  .ai-button--square.ai-button--inverted {
+    background-color: var(--ai-button-background-inverted-rest);
+    color: var(--ai-button-text-inverted-rest);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--inverted:is(:hover, :focus) {
+    background-color: var(--ai-button-background-inverted-hover);
+    color: var(--ai-button-text-inverted-hover);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--outline-inverted {
+    background-color: transparent;
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline-inverted:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-900);
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  .ai-menu-buttons {
+    display: flex;
+    gap: var(--ai-size-16);
+  }
+
+  /* Unstyled button styles */
   .ai-button--unstyled {
     background: none;
     color: inherit;
@@ -189,9 +350,9 @@
     text-decoration: underline;
   }
 
-  .ai-menu-buttons {
-    display: flex;
-    gap: var(--ai-size-16);
+  /* Unstyled square button - just center the text, reuse existing unstyled styles */
+  .ai-button--unstyled.ai-button--square {
+    text-align: center;
   }
 
   /* disabled button styles */
@@ -226,4 +387,5 @@
     color: inherit;
     opacity: 0.75;
   }
+  /*! purgecss end ignore */
 </style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -18,6 +18,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    children,
   } = $props();
 </script>
 
@@ -31,6 +32,7 @@
   {chatUrl}
   {consoleUrl}
   {discoverUrl}
+  {children}
 >
   <slot />
 </DesktopSideNav>

package/src/components/GoogleTagManager.astro

@@ -10,7 +10,7 @@ if (Astro.props.gtmID) {
     gtag('js', new Date());
     gtag('config', '${Astro.props.gtmID}');
   </script>
-  <script id="_fed_an_ua_tag" async type="text/javascript" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>`;
+  <script id="_fed_an_ua_tag" async src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>`;
 }
 ---
 

package/src/components/Head.astro

@@ -1,55 +1,89 @@
 ---
-const { title } = Astro.props;
+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';
+
+// Default values for Open Graph
+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;
+const siteUrl = Astro.site || Astro.url.origin;
+const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
 <meta name="viewport" content="width=device-width" />
+<title>{pageTitle}</title>
+<script is:inline>
+  if ('performance' in window) {
+    performance.mark('usai:documenthead:start');
+  }
+</script>
+{gtmID && <GoogleTagManager {gtmID} />}
+<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);
+  }
+</style>
+<script>
+  import '../../static/uswds/js/uswds.js';
+</script>
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:title" content={ogTitle} />
+<meta property="og:description" content={ogDescription} />
+<meta property="og:image" content={ogImage} />
+<meta property="og:site_name" content={ogTitle} />
+
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={canonicalUrl} />
+<meta property="twitter:title" content={ogTitle} />
+<meta property="twitter:description" content={ogDescription} />
+<meta property="twitter:image" content={ogImage} />
+
+<!-- Additional meta tags -->
+<meta name="description" content={ogDescription} />
+<link rel="canonical" href={canonicalUrl} />
+
 <link
   rel="icon"
   sizes="any"
-  href=`${getUrlFromBase('/assets/images/favicon-light.ico')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon.ico')}`
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="icon"
   type="image/svg+xml"
-  href=`${getUrlFromBase('/assets/images/favicon-light.svg')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-light.svg')}`
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="icon"
   sizes="any"
-  href=`${getUrlFromBase('/assets/images/favicon-dark.ico')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.ico')}`
   media="(prefers-color-scheme: dark)"
 />
 <link
   rel="icon"
   type="image/svg+xml"
-  href=`${getUrlFromBase('/assets/images/favicon-dark.svg')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.svg')}`
   media="(prefers-color-scheme: dark)"
 />
-<meta name="generator" content={Astro.generator} />
-<title>{title}</title>
-<script is:inline>
-  if ('performance' in window) {
-    performance.mark('gsa:documenthead:start');
-  }
-</script>
-<script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
-></script>
-<Font cssVariable="--ai-font-family-sans" preload />
-<style>
-  body {
-    font-family: var(--ai-font-family-sans);
-  }
-</style>
-<script>
-  import '../../static/uswds/js/uswds.js';
-</script>
 <!-- This belongs at the very bottom of the head -->
 <script is:inline>
   if ('performance' in window) {
-    performance.mark('gsa:documenthead:end');
+    performance.mark('usai:documenthead:end');
   }
 </script>

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/icons/ExclamationIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    size?: number;
+  }
+
+  let { class: className = '', size = 32 }: Props = $props();
+</script>
+
+<svg
+  class={className}
+  width={size}
+  height={size}
+  viewBox="0 0 32 33"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 16.5028C3 9.32311 8.8203 3.50281 16 3.50281C23.1797 3.50281 29 9.32311 29 16.5028C29 23.6825 23.1797 29.5028 16 29.5028C8.8203 29.5028 3 23.6825 3 16.5028ZM16 11.5028C16.5523 11.5028 17 11.9505 17 12.5028V17.5028C17 18.0551 16.5523 18.5028 16 18.5028C15.4477 18.5028 15 18.0551 15 17.5028V12.5028C15 11.9505 15.4477 11.5028 16 11.5028ZM16 22.5028C16.5523 22.5028 17 22.0551 17 21.5028C17 20.9505 16.5523 20.5028 16 20.5028C15.4477 20.5028 15 20.9505 15 21.5028C15 22.0551 15.4477 22.5028 16 22.5028Z"
+    fill="currentColor"
+  />
+</svg>

package/src/components/icons/index.ts

@@ -4,3 +4,4 @@ export { default as ConsoleIcon } from './ConsoleIcon.svelte';
 export { default as ApiIcon } from './ApiIcon.svelte';
 export { default as MenuIcon } from './MenuIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
+export { default as ExclamationIcon } from './ExclamationIcon.svelte';

package/src/helpers/url.ts

@@ -1,13 +1,22 @@
 import { normalizeTrailingSlash } from './string-formatters.js';
 
 export const getBaseUrl = () => {
-  const { BASEURL } = process.env;
-
-  if (!BASEURL) {
+  // Check if we're in a browser environment
+  if (typeof window !== 'undefined') {
     return '/';
   }
 
-  return normalizeTrailingSlash(BASEURL);
+  // Node.js environment
+  if (typeof process !== 'undefined' && process.env) {
+    const { BASEURL } = process.env;
+    if (!BASEURL) {
+      return '/';
+    }
+    return normalizeTrailingSlash(BASEURL);
+  }
+
+  // Fallback
+  return '/';
 };
 
 export const getUrlFromBase = (assetPath?: string) => {

package/src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
 import UsaSkipNav from '../components/UsaSkipNav.svelte';
 import { getPageTitle } from '../helpers/meta';
 import GoogleTagManager from '../components/GoogleTagManager.astro';
+const { description, openGraphImage, gtmID } = Astro.props;
 
 const title = getPageTitle(Astro);
 ---
@@ -12,10 +13,7 @@ const title = getPageTitle(Astro);
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Head title={title} />
-    <slot name="analytics">
-      <GoogleTagManager gtmID={Astro.props.gtmID} />
-    </slot>
+    <Head {title} {gtmID} {openGraphImage} {description} />
   </head>
   <body>
     <slot name="skip-nav">