@gsa-tts/graymatter-ui 0.1.0 → 0.2.0

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,6 +18,8 @@
   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();
 
@@ -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"
@@ -211,9 +204,9 @@
         </button>
       </div>
 
-      <div class="nav-items">
+      <div class="nav-items" part="nav-items">
         <a
-          href="/discover"
+          href={urls.discover}
           class="nav-item discover-item"
           class:selected={isNavSelected('discover')}
           class:hovered={isNavHovered('discover')}
@@ -232,7 +225,7 @@
           <span class="nav-text">Discover</span>
         </a>
         <a
-          href="/#chat"
+          href={urls.chat}
           class="nav-item chat-item"
           class:selected={isNavSelected('chat')}
           class:hovered={isNavHovered('chat')}
@@ -252,7 +245,7 @@
         </a>
 
         <a
-          href="/"
+          href={urls.console}
           class="nav-item console-item"
           class:selected={isNavSelected('console')}
           class:hovered={isNavHovered('console')}
@@ -272,7 +265,7 @@
         </a>
 
         <a
-          href="/api"
+          href={urls.api}
           class="nav-item api-item"
           class:selected={isNavSelected('api')}
           class:hovered={isNavHovered('api')}
@@ -293,7 +286,7 @@
       </div>
     </div>
 
-    <div class="nav-footer">
+    <div class="nav-footer" part="nav-footer">
       <button
         class="user-profile-button"
         tabindex="0"
@@ -306,7 +299,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 +307,339 @@
     </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);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    white-space: nowrap;
+  }
+
+  .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);
   }
-  .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);
+
+  .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;
+  }
+
+  .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,19 @@
+<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 } = $props();
+</script>
+
+<DesktopSideNav
+  {ssrSelectedItem}
+  {onNavToggle}
+  {onNavItemClick}
+  {onProfileClick}
+>
+  <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}
+/>

package/src/components/MobileBottomNav.svelte

@@ -5,23 +5,23 @@
   import ChatIcon from './icons/ChatIcon.svelte';
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
+  import { getAppUrls } from '../utils/getAppUrls';
 
   export let onNavItemClick: ((data: { item: NavigationItem; expanded: boolean }) => void) | undefined = undefined;
 
+  const urls = getAppUrls();
+
   const navItems = [
-    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: '/discover' },
-    { id: 'chat', label: 'Chat', icon: ChatIcon, href: '/' },
-    { id: 'console', label: 'Console', icon: ConsoleIcon, href: '/' },
-    { id: 'api', label: 'API', icon: ApiIcon, href: '/api' }
+    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: urls.discover },
+    { id: 'chat', label: 'Chat', icon: ChatIcon, href: urls.chat },
+    { id: 'console', label: 'Console', icon: ConsoleIcon, href: urls.console },
+    { id: 'api', label: 'API', icon: ApiIcon, href: urls.api }
   ] as const;
 
-  function handleNavItemClick(item: NavigationItem) {
-    console.log('[MobileBottomNav] 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('[MobileBottomNav] Set navigation flag for:', item, 'at:', Date.now());
     }
     
     navigationStore.setSelectedItem(item);
@@ -44,7 +44,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('[MobileBottomNav] Setting default header for', item, ':', firstSectionTitle);
                 selectedSubNavItemTitle.set(firstSectionTitle);
                 if (typeof window !== 'undefined') {
                   sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
@@ -79,21 +78,68 @@
   }
 </script>
 
-<nav class="mobile-bottom-nav">
+<nav class="mobile-bottom-nav" part="mobile-bottom-nav">
   {#each navItems as navItem}
     <a
       href={navItem.href}
       class="nav-item"
       class:active={$selectedItem === navItem.id}
       on:click={() => handleNavItemClick(navItem.id)}
+      part="nav-item"
     >
       <div class="icon">
         <svelte:component 
           this={navItem.icon} 
-          isActive={$selectedItem === navItem.id}
+          isSelected={$selectedItem === navItem.id}
         />
       </div>
       <span class="label">{navItem.label}</span>
     </a>
   {/each}
 </nav>
+
+<style>
+  .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.active {
+    color: var(--ai-color-neutral-900);
+  }
+
+  .nav-item.active .icon {
+    background-color: var(--ai-color-neutral-200);
+    border-radius: var(--ai-size-8);
+  }
+
+  .nav-item:hover {
+    color: var(--ai-color-neutral-700);
+  }
+  
+  .icon {
+    width: var(--ai-size-24);
+    height: var(--ai-size-24);
+    margin-bottom: var(--ai-size-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-2);
+    transition: background-color 0.2s ease;
+  }
+
+  .label {
+    font-size: 0.6875rem; /* 11px */
+    font-weight: 500;
+    line-height: 1;
+    text-align: center;
+  }
+</style>

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -0,0 +1,14 @@
+<svelte:options customElement={{
+  tag: 'graymatter-mobile-bottom-nav'
+}} />
+
+<script lang="ts">
+  import MobileBottomNav from './MobileBottomNav.svelte';
+
+  // Props for the web component
+  let { onNavItemClick } = $props();
+</script>
+
+<MobileBottomNav
+  {onNavItemClick}
+/>