@gsa-tts/graymatter-ui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

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

@@ -55,7 +55,7 @@ To reach chat completions the documented endpoint is `<base url>/api/v1/chat/com
 
 **Request Body**
 
-* **model**: The model ID (e.g: gemini-2.0-flash, claude_3_haiku)
+* **model**: The model ID (e.g: gemini-2.0-flash, claude_4_5_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-1.0, optional)
@@ -130,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

@@ -19,7 +19,6 @@ USAi API is organized around [REST](http://en.wikipedia.org/wiki/Representationa
 - 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
@@ -48,7 +47,7 @@ Each model we draw on has unique capabilities. Models may also respond different
 
 #### Content types
 
-The models USAi API draws on support multiple types of inputs; text, image, and file content types. However, each model has different input capabilities: for example, Claude Sonnet supports Optical Character Recognition (OCR) and recognizes image-only PDFs, while Claude Haiku and Llama currently do not. For additional detail about how we handle these content types, reference [OpenAI’s API documentation](https://platform.openai.com/docs/api-reference/chat/create). 
+The models USAi API draws on support multiple types of inputs; text, image, and file content types. However, each model has different input capabilities: for example, Claude Sonnet supports Optical Character Recognition (OCR) and recognizes image-only PDFs, while Llama currently does not. For additional detail about how we handle these content types, reference [OpenAI’s API documentation](https://platform.openai.com/docs/api-reference/chat/create). 
 
 ### Authentication
 

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">