@gsa-tts/graymatter-ui 1.0.4 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -61,9 +61,9 @@
     "typescript": "5.7.3",
     "vite": "^7.3.2",
     "vitest": "^3.2.4",
-    "@gsa-tts/graymatter-vitest-config": "0.0.2",
+    "@gsa-tts/graymatter-eslint": "0.0.2",
     "@gsa-tts/graymatter-typescript-config": "0.0.3",
-    "@gsa-tts/graymatter-eslint": "0.0.2"
+    "@gsa-tts/graymatter-vitest-config": "0.0.2"
   },
   "dependencies": {
     "@fontsource/archivo": "^5.2.8",

package/src/components/DesktopSideNav.svelte

@@ -94,6 +94,22 @@
   const ssrSelected = $derived(() => ssrSelectedForUi());
   const ssrIsDiscover = $derived(() => ssrSelected() === 'discover');
   const isMenuDisabledForUi = $derived(() => selectedForUi() === 'discover');
+  const subNavLabel = $derived(() => {
+    const selected = ssrOrHydrated(selectedForUi(), ssrSelectedForUi());
+
+    switch (selected) {
+      case 'chat':
+        return 'Chats';
+      case 'console':
+        return 'Console menu';
+      case 'api':
+        return 'API documentation menu';
+      case 'discover':
+        return 'Discover menu';
+      default:
+        return 'Page menu';
+    }
+  });
 
   function isNavSelected(key: NavigationItem) {
     return ssrOrHydrated(selectedForUi() === key, ssrSelectedForUi() === key);
@@ -404,104 +420,106 @@
       </div>
 
       {#if showAppIcons}
-        <div class="nav-items" part="nav-items">
-          {#if !hideDiscover}
+        <nav aria-label="USAi application" part="app-navigation">
+          <div class="nav-items" part="nav-items">
+            {#if !hideDiscover}
+              <a
+                href={discoverUrl || '#'}
+                class="nav-item discover-item"
+                class:selected={isNavSelected('discover')}
+                class:hovered={isNavHovered('discover')}
+                onclick={() => handleNavItemClick('discover')}
+                onkeydown={e => {
+                  handleKeyDown(e, 'discover');
+                  handleNavKeyDown(e, 0);
+                }}
+                onmouseenter={() => (hoveredItem = 'discover')}
+                onmouseleave={() => (hoveredItem = null)}
+                aria-current={isNavSelected('discover') ? 'page' : undefined}
+                part="discover-item"
+                bind:this={discoverNavRef}
+              >
+                <div class="icon-container" part="discover-icon-container">
+                  <div class="icon-wrapper">
+                    <DiscoverIcon isSelected={isNavSelected('discover')} />
+                  </div>
+                </div>
+                <span class="nav-text">Discover</span>
+              </a>
+            {/if}
             <a
-              href={discoverUrl || '#'}
-              class="nav-item discover-item"
-              class:selected={isNavSelected('discover')}
-              class:hovered={isNavHovered('discover')}
-              onclick={() => handleNavItemClick('discover')}
+              href={chatUrl || '#'}
+              class="nav-item chat-item"
+              class:selected={isNavSelected('chat')}
+              class:hovered={isNavHovered('chat')}
+              onclick={() => handleNavItemClick('chat')}
               onkeydown={e => {
-                handleKeyDown(e, 'discover');
-                handleNavKeyDown(e, 0);
+                handleKeyDown(e, 'chat');
+                handleNavKeyDown(e, 1);
               }}
-              onmouseenter={() => (hoveredItem = 'discover')}
+              onmouseenter={() => (hoveredItem = 'chat')}
               onmouseleave={() => (hoveredItem = null)}
-              aria-current={isNavSelected('discover') ? 'page' : undefined}
-              part="discover-item"
-              bind:this={discoverNavRef}
+              aria-current={isNavSelected('chat') ? 'page' : undefined}
+              part="chat-item"
+              bind:this={chatNavRef}
             >
-              <div class="icon-container" part="discover-icon-container">
+              <div class="icon-container" part="chat-icon-container">
                 <div class="icon-wrapper">
-                  <DiscoverIcon isSelected={isNavSelected('discover')} />
+                  <ChatIcon isSelected={isNavSelected('chat')} />
                 </div>
               </div>
-              <span class="nav-text">Discover</span>
+              <span class="nav-text">Chat</span>
             </a>
-          {/if}
-          <a
-            href={chatUrl || '#'}
-            class="nav-item chat-item"
-            class:selected={isNavSelected('chat')}
-            class:hovered={isNavHovered('chat')}
-            onclick={() => handleNavItemClick('chat')}
-            onkeydown={e => {
-              handleKeyDown(e, 'chat');
-              handleNavKeyDown(e, 1);
-            }}
-            onmouseenter={() => (hoveredItem = 'chat')}
-            onmouseleave={() => (hoveredItem = null)}
-            aria-current={isNavSelected('chat') ? 'page' : undefined}
-            part="chat-item"
-            bind:this={chatNavRef}
-          >
-            <div class="icon-container" part="chat-icon-container">
-              <div class="icon-wrapper">
-                <ChatIcon isSelected={isNavSelected('chat')} />
-              </div>
-            </div>
-            <span class="nav-text">Chat</span>
-          </a>
-
-          <a
-            href={consoleUrl || '#'}
-            class="nav-item console-item"
-            class:selected={isNavSelected('console')}
-            class:hovered={isNavHovered('console')}
-            onclick={() => handleNavItemClick('console')}
-            onkeydown={e => {
-              handleKeyDown(e, 'console');
-              handleNavKeyDown(e, 2);
-            }}
-            onmouseenter={() => (hoveredItem = 'console')}
-            onmouseleave={() => (hoveredItem = null)}
-            aria-current={isNavSelected('console') ? 'page' : undefined}
-            part="console-item"
-            bind:this={consoleNavRef}
-          >
-            <div class="icon-container" part="console-icon-container">
-              <div class="icon-wrapper">
-                <ConsoleIcon isSelected={isNavSelected('console')} />
+
+            <a
+              href={consoleUrl || '#'}
+              class="nav-item console-item"
+              class:selected={isNavSelected('console')}
+              class:hovered={isNavHovered('console')}
+              onclick={() => handleNavItemClick('console')}
+              onkeydown={e => {
+                handleKeyDown(e, 'console');
+                handleNavKeyDown(e, 2);
+              }}
+              onmouseenter={() => (hoveredItem = 'console')}
+              onmouseleave={() => (hoveredItem = null)}
+              aria-current={isNavSelected('console') ? 'page' : undefined}
+              part="console-item"
+              bind:this={consoleNavRef}
+            >
+              <div class="icon-container" part="console-icon-container">
+                <div class="icon-wrapper">
+                  <ConsoleIcon isSelected={isNavSelected('console')} />
+                </div>
               </div>
-            </div>
-            <span class="nav-text">Console</span>
-          </a>
-
-          <a
-            href={apiUrl || '#'}
-            class="nav-item api-item"
-            class:selected={isNavSelected('api')}
-            class:hovered={isNavHovered('api')}
-            onclick={() => handleNavItemClick('api')}
-            onkeydown={e => {
-              handleKeyDown(e, 'api');
-              handleNavKeyDown(e, 3);
-            }}
-            onmouseenter={() => (hoveredItem = 'api')}
-            onmouseleave={() => (hoveredItem = null)}
-            aria-current={isNavSelected('api') ? 'page' : undefined}
-            part="api-item"
-            bind:this={apiNavRef}
-          >
-            <div class="icon-container" part="api-icon-container">
-              <div class="icon-wrapper">
-                <ApiIcon isSelected={isNavSelected('api')} />
+              <span class="nav-text">Console</span>
+            </a>
+
+            <a
+              href={apiUrl || '#'}
+              class="nav-item api-item"
+              class:selected={isNavSelected('api')}
+              class:hovered={isNavHovered('api')}
+              onclick={() => handleNavItemClick('api')}
+              onkeydown={e => {
+                handleKeyDown(e, 'api');
+                handleNavKeyDown(e, 3);
+              }}
+              onmouseenter={() => (hoveredItem = 'api')}
+              onmouseleave={() => (hoveredItem = null)}
+              aria-current={isNavSelected('api') ? 'page' : undefined}
+              part="api-item"
+              bind:this={apiNavRef}
+            >
+              <div class="icon-container" part="api-icon-container">
+                <div class="icon-wrapper">
+                  <ApiIcon isSelected={isNavSelected('api')} />
+                </div>
               </div>
-            </div>
-            <span class="nav-text">API</span>
-          </a>
-        </div>
+              <span class="nav-text">API</span>
+            </a>
+          </div>
+        </nav>
       {/if}
     </div>
 
@@ -546,14 +564,13 @@
     class="expanded-content drawer-anim"
     class:open={sideNavExpanded()}
     part="expanded-content"
+    aria-hidden={!sideNavExpanded()}
   >
-    {#if sideNavExpanded()}
-      <div class="drawer-content" part="drawer-content">
-        <nav aria-label="Sub navigation" part="sub-navigation">
-          {@render children?.()}
-        </nav>
-      </div>
-    {/if}
+    <div class="drawer-content" part="drawer-content">
+      <nav aria-label={subNavLabel()} part="sub-navigation">
+        {@render children?.()}
+      </nav>
+    </div>
   </div>
 </div>
 

package/src/content/api/endpoints.mdx

@@ -58,14 +58,7 @@ To reach chat completions the documented endpoint is `<base url>/api/v1/chat/com
 * **model**: The model ID (e.g: gemini-2.0-flash, claude_3_haiku)
 * **messages**: An array of of message items consisting of User message, Image Content, Document Content, Assistant Message
 * **max_tokens**: Maximum response length (optional)
-* **temperature**: Response creativity (0.0-2.0, optional)
-
-| **Models** | **Range** | **Default value** |
-| :------- | :------: | -------: |
-| Google models | 0.0 - 2.0 | 1.0 |
-| Anthropic models | 0.0 - 1.0 | 0.5 |
-| Meta models | 0.0 - 1.0 | 0.5 |
-
+* **temperature**: Response creativity (0.0-1.0, optional)
 * **top_p**: An alternative to sampling with temperature, called nucleus sampling (optional)
 * **stream**: a boolean indicating whether to send partials responses as available (optional)
 
@@ -137,7 +130,7 @@ dimensions: The number of dimensions the resulting output embeddings should have
 curl -X 'POST' \
 '<base url>/api/v1/embeddings' \
 -H 'accept: application/json' \
--H 'Authorization: Bearer <Your API Key>\
+-H 'Authorization: Bearer <Your API Key>' \
 -H 'Content-Type: application/json' \
 -d '{
     "encodingFormat": "float",

package/src/content/api/getting-started.mdx

@@ -14,25 +14,29 @@ Our API has resource-oriented URLs, accepts JSON request bodies, returns JSON re
 
 USAi API is organized around [REST](http://en.wikipedia.org/wiki/Representational_State_Transfer) and provides access to the large language models (LLMs):
 
-**Google AI models**
-- [Gemini 2.5 Flash](https://ai.google.dev/gemini-api/docs/models#gemini-2.5-flash)
-- [Gemini 2.5 Pro](https://ai.google.dev/gemini-api/docs/models#gemini-2.5-pro)
-
-**Anthropic models**
-- [Claude Haiku 3.5](https://docs.claude.com/en/docs/overview)
-- [Claude Sonnet 4.5](https://docs.claude.com/en/docs/overview)
-- [Claude Opus 4.5](https://docs.claude.com/en/docs/overview)
-
-**Meta models**
-- [Llama 3.2 11B](https://www.llama.com/docs/model-cards-and-prompt-formats/llama3_2/)
-- [Llama 4 Maverick](https://www.llama.com/docs/model-cards-and-prompt-formats/llama4/)
-
-**OpenAI models**
-- [GPT 5.2](https://developers.openai.com/api/docs/models/gpt-5.2)
-- [GPT 5.4](https://developers.openai.com/api/docs/models/gpt-5.4)
-
-**xAI models**
-- [Grok 4](https://docs.x.ai/developers/models/grok-4.20)
+**[Google AI models](https://ai.google.dev/gemini-api/docs/)**
+- Gemini 2.5 Flash
+- Gemini 2.5 Pro
+
+**[Anthropic models](https://docs.claude.com/en/docs/overview)**
+- Claude Haiku 3.5
+- Claude Haiku 4.5
+- Claude Sonnet 4.5
+- Claude Sonnet 4.6
+- Claude Opus 4.5
+- Claude Opus 4.7
+- Claude Opus 4.8
+
+**[Meta models](https://www.llama.com/docs/model-cards-and-prompt-formats/)**
+- Llama 4 Maverick
+
+**[OpenAI models](https://developers.openai.com/api/docs/models/)**
+- GPT 5.2
+- GPT 5.4
+- GPT 5.5
+
+**[xAI models](https://docs.x.ai/developers/models/)**
+- Grok 4
 
 The interface is modeled after the [OpenAI Chat Completion API](https://platform.openai.com/docs/guides/text?api-mode=responses). We will continue to add more models over time; we may also remove models if they are found to not meet our standards. You will be notified if a model is removed. 
 
@@ -54,7 +58,12 @@ All API requests require an API key. Upon authentication, your agency-specific i
 
 #### Rate limitations
 
-We currently have a rate limit of 3 calls / second / API key. If you hit a rate limit, you should expect a 429 error code. If you need additional capacity, please contact us at [support@usai.gov](mailto:support@usai.gov). We can work with our infrastructure providers to secure higher model limits.
+We currently have the following rate limits:
+- Models – 3 calls / second / API key
+- Chat completions – 3 calls / second / API key
+- Embeddings – 100 calls / second / API key
+
+If you hit a rate limit, you should expect a 429 error code. If you need additional capacity, please contact us at [partnerships@usai.gov](mailto:partnerships@usai.gov). We can work with our infrastructure providers to secure higher model limits.
 
 #### Feature limitations
 

package/src/content/api/support.mdx

@@ -4,7 +4,7 @@ description: ''
 sortOrder: 30
 ---
 
-You may encounter issues while working with the USAi API, as it is under active development. We may not be able to fix all issues immediately, but will add them to our backlog for future releases. If you have any questions, hit rate limits, or otherwise need assistance, please contact us at [support@usai.gov](mailto:support@usai.gov).
+If you have any questions, hit rate limits, or otherwise need assistance, please contact us at [support@usai.gov](mailto:support@usai.gov).
 
 
 

package/src/layouts/GlobalAppLayout.astro

@@ -101,21 +101,23 @@ const discover = discoverUrl || '#';
     </nav>
 
     <!-- Fixed Logo (Desktop only) -->
-    <div
-      class="logo-fixed-container display-none tablet:display-flex"
-      aria-label={siteName}
-      role="region"
-    >
-      {
-        logoLinkUrl ? (
-          <a class="display-flex" href={logoLinkUrl} aria-label={logoLinkLabel}>
+    <nav aria-label="Site logo">
+      <div class="logo-fixed-container display-none tablet:display-flex">
+        {
+          logoLinkUrl ? (
+            <a
+              class="display-flex"
+              href={logoLinkUrl}
+              aria-label={logoLinkLabel}
+            >
+              <Logo width={75} height={22} />
+            </a>
+          ) : (
             <Logo width={75} height={22} />
-          </a>
-        ) : (
-          <Logo width={75} height={22} />
-        )
-      }
-    </div>
+          )
+        }
+      </div>
+    </nav>
 
     <!-- Mobile Main Content -->
     <main id="main-content-mobile" class="main-content-mobile">