@gsa-tts/graymatter-ui 0.1.0 → 0.2.1

package/src/components/DesktopHeader.webcomponent.svelte

@@ -0,0 +1,17 @@
+<svelte:options customElement={{
+  tag: 'graymatter-desktop-header',
+  props: {
+    customHeaderText: { reflect: true, type: 'String', attribute: 'custom-header-text' }
+  }
+}} />
+
+<script lang="ts">
+  import DesktopHeader from './DesktopHeader.svelte';
+
+  // Props for the web component
+  let { customHeaderText = '' } = $props();
+</script>
+
+<DesktopHeader
+  {customHeaderText}
+/>

package/src/components/DesktopSideNav.svelte

@@ -6,7 +6,6 @@
    * - If not provided, the navigation will default to expanded/open on SSR.
    */
   import { onMount } from 'svelte';
-  import Logo from './Logo.svelte';
   import {
     isExpanded,
     selectedItem,
@@ -19,8 +18,10 @@
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
+  import { getAppUrls } from '../utils/getAppUrls';
+  const urls = getAppUrls();
   
-  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children } = $props();
+  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
@@ -75,22 +76,17 @@
       const handleLayoutTransition = (event: Event) => {
         const customEvent = event as CustomEvent;
         const { isMobile } = customEvent.detail;
-        console.log('[DesktopSideNav] Layout transition detected:', { isMobile });
         
         if (isMobile) {
           // Switching to mobile: close navigation
-          console.log('[DesktopSideNav] Closing navigation for mobile');
           navigationStore.setExpanded(false);
         } else {
           // Switching to desktop: open navigation if on non-discover page
           const currentItem = $selectedItem;
-          console.log('[DesktopSideNav] Desktop transition - current item:', currentItem);
           
           if (currentItem && currentItem !== 'discover') {
-            console.log('[DesktopSideNav] Opening navigation for desktop (non-discover page)');
             navigationStore.setExpanded(true);
           } else {
-            console.log('[DesktopSideNav] Keeping navigation closed for desktop (discover page or no selection)');
             navigationStore.setExpanded(false);
           }
         }
@@ -110,13 +106,10 @@
     onNavToggle?.({ expanded: $isExpanded });
   }
 
-  function handleNavItemClick(item: NavigationItem) {
-    console.log('[DesktopSideNav] handleNavItemClick called for:', item, 'at:', Date.now());
-    
+  function handleNavItemClick(item: NavigationItem) {    
     // Set navigation flag immediately to prevent header restoration
     if (item !== 'discover' && typeof window !== 'undefined') {
       sessionStorage.setItem('navigatingToMainNav', 'true');
-      console.log('[DesktopSideNav] Set navigation flag for:', item, 'at:', Date.now());
     }
     
     navigationStore.setSelectedItem(item);
@@ -139,7 +132,6 @@
               const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
               if (firstSection && firstSection.textContent) {
                 const firstSectionTitle = firstSection.textContent.trim();
-                console.log('[DesktopSideNav] Setting default header for', item, ':', firstSectionTitle);
                 selectedSubNavItemTitle.set(firstSectionTitle);
                 if (typeof window !== 'undefined') {
                   sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
@@ -185,9 +177,10 @@
   class="side-nav-container"
   class:expanded={sideNavExpanded()}
   bind:this={navContainer}
+  part="side-nav-container"
 >
   <div class="nav-content">
-    <div class="nav-main">
+    <div class="nav-main" part="nav-main">
       <div class="menu-section">
         <button
           class="menu-button"
@@ -196,33 +189,35 @@
           onclick={toggleNav}
           onmouseenter={() => (menuButtonHovered = true)}
           onmouseleave={() => (menuButtonHovered = false)}
-          aria-label="Open navigation menu"
+          onfocus={() => (menuButtonHovered = true)}
+          onblur={() => (menuButtonHovered = false)}
+          aria-label={sideNavExpanded() ? 'Close navigation menu' : 'Open navigation menu'}
+          aria-expanded={sideNavExpanded() ? 'true' : 'false'}
         >
-          <span class="sr-only">Open navigation menu</span>
           <div class="icon-container">
             <div class="icon-wrapper">
               <MenuIcon
-              isHovered={menuBtnHovered()}
-              isDisabled={menuBtnDisabled()}
-              isOpen={menuBtnOpen()}
-            />
+                isHovered={menuBtnHovered()}
+                isDisabled={menuBtnDisabled()}
+                isOpen={menuBtnOpen()}
+              />
             </div>
           </div>
         </button>
       </div>
 
-      <div class="nav-items">
+      <div class="nav-items" part="nav-items">
         <a
-          href="/discover"
+          href={discoverUrl || urls.discover}
           class="nav-item discover-item"
           class:selected={isNavSelected('discover')}
           class:hovered={isNavHovered('discover')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('discover')}
           onkeydown={e => handleKeyDown(e, 'discover')}
           onmouseenter={() => (hoveredItem = 'discover')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('discover') ? 'page' : undefined}
+          part="discover-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -232,16 +227,16 @@
           <span class="nav-text">Discover</span>
         </a>
         <a
-          href="/#chat"
+          href={chatUrl || urls.chat}
           class="nav-item chat-item"
           class:selected={isNavSelected('chat')}
           class:hovered={isNavHovered('chat')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('chat')}
           onkeydown={e => handleKeyDown(e, 'chat')}
           onmouseenter={() => (hoveredItem = 'chat')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('chat') ? 'page' : undefined}
+          part="chat-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -252,16 +247,16 @@
         </a>
 
         <a
-          href="/"
+          href={consoleUrl || urls.console}
           class="nav-item console-item"
           class:selected={isNavSelected('console')}
           class:hovered={isNavHovered('console')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('console')}
           onkeydown={e => handleKeyDown(e, 'console')}
           onmouseenter={() => (hoveredItem = 'console')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('console') ? 'page' : undefined}
+          part="console-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -272,16 +267,16 @@
         </a>
 
         <a
-          href="/api"
+          href={apiUrl || urls.api}
           class="nav-item api-item"
           class:selected={isNavSelected('api')}
           class:hovered={isNavHovered('api')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('api')}
           onkeydown={e => handleKeyDown(e, 'api')}
           onmouseenter={() => (hoveredItem = 'api')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('api') ? 'page' : undefined}
+          part="api-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -293,7 +288,7 @@
       </div>
     </div>
 
-    <div class="nav-footer">
+    <div class="nav-footer" part="nav-footer">
       <button
         class="user-profile-button"
         tabindex="0"
@@ -306,7 +301,7 @@
         }}
       >
         <div class="user-profile-container">
-          <div class="user-profile-icon">
+          <div class="user-profile-icon" part="user-profile-icon">
             <span class="user-initials">ZW</span>
           </div>
         </div>
@@ -314,62 +309,327 @@
     </div>
   </div>
 
-  <div class="expanded-content drawer-anim" class:open={sideNavExpanded()}>
-    <div class="drawer-content" class:visible={sideNavExpanded()}>
-      <div class="logo-container">
-        <div class="logo-wrapper">
-          <div class="logo-inner">
-            <div class="logo-component padding-left-2">
-              <Logo width={75} height={22} />
-            </div>
-          </div>
-        </div>
+  <div class="expanded-content drawer-anim" class:open={sideNavExpanded()} part="expanded-content">
+    {#if sideNavExpanded()}
+      <div class="drawer-content" part="drawer-content">
+        <div class="logo-placeholder"></div>
+        <nav aria-label="Sub navigation">
+          {@render children?.()}
+        </nav>
       </div>
-      <nav aria-label="Sub navigation">
-        {@render children?.()}
-      </nav>
-    </div>
+    {/if}
   </div>
 </div>
 
 <style>
   .expanded-content.drawer-anim {
-    width: 0;
-    min-width: 0;
     max-width: 0;
     overflow: hidden;
-    opacity: 0.7;
     pointer-events: none;
-    transition:
-      width 0.4s cubic-bezier(.4,0,.2,1),
-      min-width 0.4s cubic-bezier(.4,0,.2,1),
-      max-width 0.4s cubic-bezier(.4,0,.2,1),
-      opacity 0.2s;
+    transition: 
+    max-width 0.2s cubic-bezier(.4, 0, .2, 1);
   }
+
   .expanded-content.drawer-anim.open {
-    width: 12.5rem;
-    min-width: 12.5rem;
     max-width: 12.5rem;
-    opacity: 1;
     pointer-events: auto;
   }
+
   .drawer-content {
+    width: 12.5rem;
+    height: 100%;
+  }
+
+  .logo-placeholder {
+    height: var(--ai-size-72);
+  }
+
+  .user-profile-container,
+  .user-profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--ai-size-8);
+    transition: background-color 0.2s ease;
+  }
+
+  .menu-button:disabled,
+  .menu-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: transparent;
+  }
+
+  .user-profile-icon {
+    border-radius: var(--ai-size-6);
+    background: var(--ai-color-steel-700);
+  }
+
+  .user-initials {
+    color: var(--ai-color-white);
+    text-align: center;
+    font-weight: 400;
+    line-height: 1.3;
+  }
+  
+  .side-nav-container {
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    z-index: var(--ai-layer-2);
+    height: 100%;
+  }
+
+  .side-nav-container.expanded {
+    width: 16.875rem;
+    min-width: 12.5rem;
+    max-width: 16.875rem;
+    height: 100%;
+  }
+
+  .expanded-content {
+    display: flex;
+    width: 12.5rem;
+    opacity: 1;
+    flex: none;
+    height: 100%;
+    background: var(--ai-color-steel-100);
+    border-right: 0.0625rem solid var(--ai-color-steel-100);
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .side-nav-container.expanded .expanded-content {
+    width: 12.5rem;
+    opacity: 1;
+    overflow-y: auto;
+  }
+
+  .side-nav-container:not(.expanded) .expanded-content {
+    width: 0;
     opacity: 0;
-    transform: translateX(-10px);
-    transition:
-      opacity 0.4s 0.20s cubic-bezier(.4,0,.2,1),
-      transform 0.4s 0.20s cubic-bezier(.4,0,.2,1);
   }
-  .drawer-content.visible {
+
+  .nav-content {
+    display: flex;
+    width: var(--ai-size-72);
+    height: 100%;
+    padding-bottom: var(--ai-size-16);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+    flex: none;
+    background: var(--ai-color-steel-200);
+    border-right: 0.0625rem solid var(--ai-color-steel-200);
+  }
+
+  .nav-main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  .nav-footer {
+    display: flex;
+    padding: var(--ai-size-8) var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-4);
+    align-self: stretch;
+    margin-top: auto;
+  }
+
+  .user-profile-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .user-profile-button:focus {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+    border-radius: var(--ai-size-4);
+  }
+
+  .user-profile-container {
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    aspect-ratio: 1/1;
+  }
+
+  .user-profile-icon {
+    padding: 0.5556rem 0.4931rem 0.5694rem 0.3819rem;
+  }
+
+  .user-initials {
+    font-size: var(--ai-size-16);
+    font-style: normal;
+  }
+
+  .menu-section {
+    display: flex;
+    padding: var(--ai-size-4);
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .menu-button {
+    display: flex;
+    padding: var(--ai-size-4);
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
     opacity: 1;
-    transform: translateX(0);
-    transition:
-      opacity 0.4s 0.20s cubic-bezier(.4,0,.2,1),
-      transform 0.4s 0.20s cubic-bezier(.4,0,.2,1);
+    transition: opacity 0.2s ease;
+    will-change: opacity;
+  }
+
+  .menu-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    will-change: opacity;
+  }
+
+  .menu-button:focus,
+  .nav-item:focus {
+    outline: none;
+  }
+
+  .menu-button:focus .icon-container,
+  .nav-item:focus .icon-container {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+    border-radius: var(--ai-size-4);
+  }
+
+  .nav-items {
+    display: flex;
+    width: var(--ai-size-72);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+  }
+
+  .nav-item {
+    display: flex;
+    height: 4.125rem;
+    padding: var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-2);
+    align-self: stretch;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .icon-container {
+    display: flex;
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    padding: var(--ai-size-8);
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    position: relative;
+    contain: layout style;
+    transition: background-color 0.3s ease,
+    border-radius 0.3s ease;
+  }
+
+  .icon-wrapper {
+    display: flex;
+    width: var(--ai-size-28);
+    height: var(--ai-size-28);
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    aspect-ratio: 1/1;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+  }
+
+  .icon-wrapper :global(svg) {
+    width: var(--ai-size-24);
+    height: var(--ai-size-24);
+    flex-shrink: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease;
+  }
+
+  .icon-wrapper :global(svg path) {
+    stroke-width: 1.5;
+    vector-effect: non-scaling-stroke;
+    transition: stroke 0.3s ease,
+    fill 0.3s ease,
+    stroke-width 0.3s ease;
+  }
+
+  .nav-text {
+    font-size: var(--ai-size-12);
+    text-align: center;
+    color: var(--ai-color-neutral-900);
+    line-height: 1.3;
   }
-  .expanded-content.drawer-anim:not(.open) .drawer-content {
-    transition:
-      opacity 0.20s cubic-bezier(.4,0,.2,1),
-      transform 0.20s cubic-bezier(.4,0,.2,1);
+
+  .menu-button.disabled:hover .icon-container,
+  .menu-button:disabled:hover .icon-container {
+    background: none !important;
+    border-radius: var(--ai-size-4);
+  }
+
+  .nav-item.hovered .icon-container,
+  .nav-item:active .icon-container,
+  .nav-item.selected .icon-container,
+  .nav-item.selected.hovered .icon-container,
+  .menu-button:hover .icon-container,
+  .menu-button:active .icon-container {
+    background-color: var(--ai-color-steel-300);
+    border-radius: var(--ai-size-4);
   }
+
+  .nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-4);
+    text-decoration: none;
+    color: var(--ai-color-neutral-600);
+    transition: color 0.2s ease;
+    height: 100%;
+  }
+
+  .nav-item:hover {
+    color: var(--ai-color-neutral-700);
+  }
+
 </style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -0,0 +1,32 @@
+<svelte:options customElement={{
+  tag: 'graymatter-desktop-side-nav'
+}} />
+
+<script lang="ts">
+  import DesktopSideNav from './DesktopSideNav.svelte';
+
+  // Props for the web component
+  let {
+    ssrSelectedItem,
+    onNavToggle,
+    onNavItemClick,
+    onProfileClick,
+    apiUrl,
+    chatUrl,
+    consoleUrl,
+    discoverUrl
+  } = $props();
+</script>
+
+<DesktopSideNav
+  {ssrSelectedItem}
+  {onNavToggle}
+  {onNavItemClick}
+  {onProfileClick}
+  {apiUrl}
+  {chatUrl}
+  {consoleUrl}
+  {discoverUrl}
+>
+  <slot />
+</DesktopSideNav>

package/src/components/Logo.webcomponent.svelte

@@ -0,0 +1,26 @@
+<svelte:options customElement={{
+  tag: 'graymatter-logo',
+  props: {
+    isInverted: { reflect: true, type: 'Boolean', attribute: 'is-inverted' },
+    width: { reflect: true, type: 'Number', attribute: 'width' },
+    height: { reflect: true, type: 'Number', attribute: 'height' }
+  }
+}} />
+
+<script lang="ts">
+  import Logo from './Logo.svelte';
+
+  let {
+    isInverted = false,
+    width = undefined,
+    height = undefined,
+    ...props
+  } = $props();
+</script>
+
+<Logo
+  {isInverted}
+  {width}
+  {height}
+  {...props}
+/>