@gsa-tts/graymatter-ui 0.2.8 → 0.3.1

package/src/components/Head.astro

@@ -1,19 +1,31 @@
 ---
-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 trustworthy adoption of AI across the federal 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" />
-<link rel="icon" sizes="any" href=`${getUrlFromBase('favicon.ico')}` />
-<link rel="icon" type="image/svg+xml" href=`${getUrlFromBase('favicon.svg')}` />
-<meta name="generator" content={Astro.generator} />
-<title>{title}</title>
+<title>{pageTitle}</title>
 <script is:inline>
   if ('performance' in window) {
-    performance.mark('gsa:documenthead:start');
+    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 />
@@ -25,9 +37,52 @@ import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
 <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('/common/assets/images/favicon.ico')}`
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href=`${getUrlFromBase('/common/assets/images/favicon-light.svg')}`
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  sizes="any"
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.ico')}`
+  media="(prefers-color-scheme: dark)"
+/>
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.svg')}`
+  media="(prefers-color-scheme: dark)"
+/>
 <!-- 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/Logo.svelte

@@ -8,56 +8,63 @@
     ...restProps
   } = $props();
 
-  const logoColor = isInverted ? 'var(--ai-color-white)' : 'var(--ai-color-black)';
+  const logoColor = isInverted
+    ? 'var(--ai-color-white)'
+    : 'var(--ai-color-black)';
 </script>
 
 {#if !showServiceMark}
-<svg
-  {width}
-  {height}
-  viewBox="0 0 102 30"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  style="fill: {logoColor};"
-  {...restProps}
->
-  <g>
+  <svg
+    {width}
+    {height}
+    viewBox="0 0 102 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style="fill: {logoColor};"
+    {...restProps}
+  >
+    <g>
+      <path
+        d="M57.5791 20.4177C57.5791 15.5645 53.7309 11.6187 48.9988 11.6187H40.188C38.6688 11.6187 37.4304 10.3567 37.4304 8.80197C37.4304 7.24729 38.6658 5.98522 40.188 5.98522H56.2373V0H38.8757C34.1466 0 30.2983 3.94877 30.2983 8.80197C30.2983 13.6552 34.1466 17.6039 38.8757 17.6039H47.6865C49.2057 17.6039 50.4442 18.866 50.4442 20.4207C50.4442 21.9754 49.2087 23.2374 47.6865 23.2374H31.0284V29.2197H48.9988C53.7309 29.2197 57.5791 25.2709 57.5791 20.4207V20.4177Z"
+      />
+      <path
+        d="M82.1466 24.7153L82.188 24.7685L83.6747 29.2197H90.6914L80.917 0H68.3525L58.5781 29.2167H65.5949L67.0993 24.7153H82.1466ZM69.186 18.4818L73.3653 5.98522H75.9013L75.919 6.03547L80.1161 18.5793H69.1535L69.186 18.4818Z"
+      />
+      <path
+        d="M27.198 0H20.5626V15.8158C20.5626 21.4345 16.9626 23.4355 13.5961 23.4355C9.03842 23.4355 6.62956 20.799 6.62956 15.8158V0H0V17.0069C0 20.6985 1.46305 24.0532 4.11724 26.4532C6.64729 28.7409 10.0138 30 13.599 30C20.3586 30 27.198 25.5369 27.198 17.0039V0Z"
+      />
+      <path d="M101.708 9.78915H93.8662V29.2197H101.708V9.78915Z" />
+      <path d="M101.823 0H93.8662V5.98227H101.823V0Z" />
+    </g>
+  </svg>
+{:else}
+  <svg
+    {width}
+    {height}
+    viewBox="0 0 75 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style="fill: {logoColor};"
+    {...restProps}
+  >
     <path
-      d="M57.5791 20.4177C57.5791 15.5645 53.7309 11.6187 48.9988 11.6187H40.188C38.6688 11.6187 37.4304 10.3567 37.4304 8.80197C37.4304 7.24729 38.6658 5.98522 40.188 5.98522H56.2373V0H38.8757C34.1466 0 30.2983 3.94877 30.2983 8.80197C30.2983 13.6552 34.1466 17.6039 38.8757 17.6039H47.6865C49.2057 17.6039 50.4442 18.866 50.4442 20.4207C50.4442 21.9754 49.2087 23.2374 47.6865 23.2374H31.0284V29.2197H48.9988C53.7309 29.2197 57.5791 25.2709 57.5791 20.4207V20.4177Z"
+      d="M38.1538 13.6118C38.1538 10.3764 35.6038 7.74581 32.4682 7.74581H26.6298C25.6231 7.74581 24.8025 6.90443 24.8025 5.86798C24.8025 4.83153 25.6211 3.99015 26.6298 3.99015H37.2646V0H25.7602C22.6266 0 20.0765 2.63251 20.0765 5.86798C20.0765 9.10345 22.6266 11.736 25.7602 11.736H31.5986C32.6053 11.736 33.4259 12.5773 33.4259 13.6138C33.4259 14.6502 32.6072 15.4916 31.5986 15.4916H20.5603V19.4798H32.4682C35.6038 19.4798 38.1538 16.8473 38.1538 13.6138V13.6118Z"
     />
     <path
-      d="M82.1466 24.7153L82.188 24.7685L83.6747 29.2197H90.6914L80.917 0H68.3525L58.5781 29.2167H65.5949L67.0993 24.7153H82.1466ZM69.186 18.4818L73.3653 5.98522H75.9013L75.919 6.03547L80.1161 18.5793H69.1535L69.186 18.4818Z"
+      d="M54.4317 16.4768L54.4591 16.5123L55.4442 19.4798H60.0938L53.6169 0H45.2912L38.8143 19.4778H43.4639L44.4608 16.4768H54.4317ZM48.6129 3.99015H50.2933L50.305 4.02365L53.0861 12.3862H45.822L48.6129 3.99015Z"
     />
     <path
-      d="M27.198 0H20.5626V15.8158C20.5626 21.4345 16.9626 23.4355 13.5961 23.4355C9.03842 23.4355 6.62956 20.799 6.62956 15.8158V0H0V17.0069C0 20.6985 1.46305 24.0532 4.11724 26.4532C6.64729 28.7409 10.0138 30 13.599 30C20.3586 30 27.198 25.5369 27.198 17.0039V0Z"
+      d="M18.0224 0H13.6255V10.5438C13.6255 14.2897 11.24 15.6236 9.00924 15.6236C5.98918 15.6236 4.39298 13.866 4.39298 10.5438V0H0V11.3379C0 13.799 0.969472 16.0355 2.72823 17.6355C4.40473 19.1606 6.6355 20 9.01119 20C13.4903 20 18.0224 17.0246 18.0224 11.336V0Z"
     />
-    <path d="M101.708 9.78915H93.8662V29.2197H101.708V9.78915Z" />
-    <path d="M101.823 0H93.8662V5.98227H101.823V0Z" />
-  </g>
-</svg>
-{:else}
-<svg 
-  {width}
-  {height}
-  viewBox="0 0 75 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  style="fill: {logoColor};"
-  {...restProps}
->
-  <path
-    d="M38.1538 13.6118C38.1538 10.3764 35.6038 7.74581 32.4682 7.74581H26.6298C25.6231 7.74581 24.8025 6.90443 24.8025 5.86798C24.8025 4.83153 25.6211 3.99015 26.6298 3.99015H37.2646V0H25.7602C22.6266 0 20.0765 2.63251 20.0765 5.86798C20.0765 9.10345 22.6266 11.736 25.7602 11.736H31.5986C32.6053 11.736 33.4259 12.5773 33.4259 13.6138C33.4259 14.6502 32.6072 15.4916 31.5986 15.4916H20.5603V19.4798H32.4682C35.6038 19.4798 38.1538 16.8473 38.1538 13.6138V13.6118Z"/>
-  <path
-    d="M54.4317 16.4768L54.4591 16.5123L55.4442 19.4798H60.0938L53.6169 0H45.2912L38.8143 19.4778H43.4639L44.4608 16.4768H54.4317ZM48.6129 3.99015H50.2933L50.305 4.02365L53.0861 12.3862H45.822L48.6129 3.99015Z"/>
-  <path
-    d="M18.0224 0H13.6255V10.5438C13.6255 14.2897 11.24 15.6236 9.00924 15.6236C5.98918 15.6236 4.39298 13.866 4.39298 10.5438V0H0V11.3379C0 13.799 0.969472 16.0355 2.72823 17.6355C4.40473 19.1606 6.6355 20 9.01119 20C13.4903 20 18.0224 17.0246 18.0224 11.336V0Z"/>
-  <path d="M67.3965 6.52612H62.2005V19.4798H67.3965V6.52612Z"/>
-  <path
-    d="M70.6978 2.72727C70.5495 2.72727 70.4078 2.71191 70.2726 2.68118C70.1374 2.64789 70.0178 2.59795 69.9138 2.53137C69.8097 2.46223 69.7278 2.37772 69.668 2.27785C69.6082 2.17542 69.5783 2.05506 69.5783 1.91677C69.5783 1.90141 69.5783 1.88604 69.5783 1.87068C69.5809 1.85531 69.5822 1.84379 69.5822 1.83611H70.0932C70.0932 1.84123 70.0919 1.85147 70.0893 1.86684C70.0893 1.87964 70.0893 1.89117 70.0893 1.90141C70.0893 1.98592 70.114 2.0589 70.1634 2.12036C70.2128 2.17926 70.2843 2.22535 70.3779 2.25864C70.4715 2.28937 70.582 2.30474 70.7095 2.30474C70.7953 2.30474 70.8707 2.29962 70.9357 2.28937C71.0033 2.27913 71.0605 2.26504 71.1073 2.24712C71.1567 2.22663 71.197 2.20359 71.2282 2.17798C71.2594 2.14981 71.2815 2.11908 71.2945 2.08579C71.3101 2.0525 71.3179 2.01665 71.3179 1.97823C71.3179 1.90397 71.2945 1.84251 71.2477 1.79385C71.2009 1.7452 71.1372 1.70423 71.0566 1.67093C70.9786 1.63764 70.8889 1.60819 70.7875 1.58259C70.6887 1.55442 70.586 1.52625 70.4793 1.49808C70.3753 1.46991 70.2726 1.43662 70.1712 1.39821C70.0724 1.35723 69.9827 1.30858 69.9021 1.25224C69.824 1.1959 69.7616 1.12548 69.7148 1.04097C69.668 0.953905 69.6446 0.850192 69.6446 0.729833C69.6446 0.606914 69.6706 0.49936 69.7226 0.40717C69.7772 0.314981 69.8526 0.239437 69.9489 0.180538C70.0477 0.119078 70.1621 0.0742637 70.2921 0.0460946C70.4221 0.0153649 70.5638 0 70.7173 0C70.8603 0 70.9942 0.0153649 71.119 0.0460946C71.2464 0.0742637 71.3582 0.120358 71.4545 0.184379C71.5507 0.245839 71.6261 0.325224 71.6807 0.422535C71.7353 0.517286 71.7626 0.631242 71.7626 0.764405V0.810499H71.2594V0.772087C71.2594 0.697823 71.236 0.635083 71.1892 0.583867C71.145 0.53265 71.0813 0.492958 70.9981 0.464789C70.9175 0.43662 70.8226 0.422535 70.7134 0.422535C70.5963 0.422535 70.4962 0.434059 70.413 0.457106C70.3298 0.477593 70.2661 0.509603 70.2219 0.553137C70.1777 0.59411 70.1556 0.645326 70.1556 0.706786C70.1556 0.770807 70.179 0.824584 70.2258 0.868118C70.2726 0.911652 70.335 0.948784 70.413 0.979513C70.4936 1.01024 70.5833 1.03841 70.6822 1.06402C70.7836 1.08963 70.8863 1.1178 70.9903 1.14853C71.0969 1.1767 71.1996 1.20999 71.2984 1.2484C71.3999 1.28681 71.4896 1.33547 71.5676 1.39437C71.6482 1.4507 71.7119 1.52113 71.7587 1.60563C71.8055 1.69014 71.8289 1.79129 71.8289 1.90909C71.8289 2.10627 71.7795 2.26504 71.6807 2.3854C71.5845 2.50576 71.4506 2.59283 71.2789 2.64661C71.1099 2.70038 70.9162 2.72727 70.6978 2.72727Z"/>
-  <path
-    d="M72.3008 2.68118V0.0460946H73.1004L73.5217 1.51344C73.5373 1.56466 73.5529 1.62228 73.5685 1.6863C73.5841 1.75032 73.5984 1.81178 73.6114 1.87068C73.627 1.92958 73.6387 1.98079 73.6465 2.02433H73.6777C73.6829 1.98592 73.6907 1.93854 73.7011 1.8822C73.7115 1.82586 73.7232 1.76568 73.7362 1.70166C73.7518 1.63508 73.7687 1.57106 73.7869 1.5096L74.2082 0.0460946H75V2.68118H74.4929V1.34827C74.4929 1.23047 74.4942 1.11268 74.4968 0.994878C74.4994 0.877081 74.502 0.775928 74.5046 0.691421C74.5098 0.606914 74.5124 0.556978 74.5124 0.541613H74.4812C74.476 0.564661 74.463 0.614597 74.4422 0.691421C74.4214 0.768246 74.3993 0.851472 74.3759 0.941101C74.3525 1.03073 74.3317 1.10755 74.3135 1.17157L73.8727 2.68118H73.4047L72.9639 1.17542C72.9483 1.12164 72.9301 1.05762 72.9093 0.983355C72.8911 0.90653 72.8716 0.828425 72.8508 0.74904C72.8326 0.669654 72.8157 0.600512 72.8001 0.541613H72.7689C72.7715 0.610755 72.7741 0.693982 72.7767 0.791293C72.7793 0.886043 72.7819 0.983355 72.7845 1.08323C72.7871 1.18054 72.7884 1.26889 72.7884 1.34827V2.68118H72.3008Z"/>
-  <path d="M67.4728 0H62.2005V3.98818H67.4728V0Z"/>
-</svg>
+    <path d="M67.3965 6.52612H62.2005V19.4798H67.3965V6.52612Z" />
+    <path
+      d="M70.6978 2.72727C70.5495 2.72727 70.4078 2.71191 70.2726 2.68118C70.1374 2.64789 70.0178 2.59795 69.9138 2.53137C69.8097 2.46223 69.7278 2.37772 69.668 2.27785C69.6082 2.17542 69.5783 2.05506 69.5783 1.91677C69.5783 1.90141 69.5783 1.88604 69.5783 1.87068C69.5809 1.85531 69.5822 1.84379 69.5822 1.83611H70.0932C70.0932 1.84123 70.0919 1.85147 70.0893 1.86684C70.0893 1.87964 70.0893 1.89117 70.0893 1.90141C70.0893 1.98592 70.114 2.0589 70.1634 2.12036C70.2128 2.17926 70.2843 2.22535 70.3779 2.25864C70.4715 2.28937 70.582 2.30474 70.7095 2.30474C70.7953 2.30474 70.8707 2.29962 70.9357 2.28937C71.0033 2.27913 71.0605 2.26504 71.1073 2.24712C71.1567 2.22663 71.197 2.20359 71.2282 2.17798C71.2594 2.14981 71.2815 2.11908 71.2945 2.08579C71.3101 2.0525 71.3179 2.01665 71.3179 1.97823C71.3179 1.90397 71.2945 1.84251 71.2477 1.79385C71.2009 1.7452 71.1372 1.70423 71.0566 1.67093C70.9786 1.63764 70.8889 1.60819 70.7875 1.58259C70.6887 1.55442 70.586 1.52625 70.4793 1.49808C70.3753 1.46991 70.2726 1.43662 70.1712 1.39821C70.0724 1.35723 69.9827 1.30858 69.9021 1.25224C69.824 1.1959 69.7616 1.12548 69.7148 1.04097C69.668 0.953905 69.6446 0.850192 69.6446 0.729833C69.6446 0.606914 69.6706 0.49936 69.7226 0.40717C69.7772 0.314981 69.8526 0.239437 69.9489 0.180538C70.0477 0.119078 70.1621 0.0742637 70.2921 0.0460946C70.4221 0.0153649 70.5638 0 70.7173 0C70.8603 0 70.9942 0.0153649 71.119 0.0460946C71.2464 0.0742637 71.3582 0.120358 71.4545 0.184379C71.5507 0.245839 71.6261 0.325224 71.6807 0.422535C71.7353 0.517286 71.7626 0.631242 71.7626 0.764405V0.810499H71.2594V0.772087C71.2594 0.697823 71.236 0.635083 71.1892 0.583867C71.145 0.53265 71.0813 0.492958 70.9981 0.464789C70.9175 0.43662 70.8226 0.422535 70.7134 0.422535C70.5963 0.422535 70.4962 0.434059 70.413 0.457106C70.3298 0.477593 70.2661 0.509603 70.2219 0.553137C70.1777 0.59411 70.1556 0.645326 70.1556 0.706786C70.1556 0.770807 70.179 0.824584 70.2258 0.868118C70.2726 0.911652 70.335 0.948784 70.413 0.979513C70.4936 1.01024 70.5833 1.03841 70.6822 1.06402C70.7836 1.08963 70.8863 1.1178 70.9903 1.14853C71.0969 1.1767 71.1996 1.20999 71.2984 1.2484C71.3999 1.28681 71.4896 1.33547 71.5676 1.39437C71.6482 1.4507 71.7119 1.52113 71.7587 1.60563C71.8055 1.69014 71.8289 1.79129 71.8289 1.90909C71.8289 2.10627 71.7795 2.26504 71.6807 2.3854C71.5845 2.50576 71.4506 2.59283 71.2789 2.64661C71.1099 2.70038 70.9162 2.72727 70.6978 2.72727Z"
+    />
+    <path
+      d="M72.3008 2.68118V0.0460946H73.1004L73.5217 1.51344C73.5373 1.56466 73.5529 1.62228 73.5685 1.6863C73.5841 1.75032 73.5984 1.81178 73.6114 1.87068C73.627 1.92958 73.6387 1.98079 73.6465 2.02433H73.6777C73.6829 1.98592 73.6907 1.93854 73.7011 1.8822C73.7115 1.82586 73.7232 1.76568 73.7362 1.70166C73.7518 1.63508 73.7687 1.57106 73.7869 1.5096L74.2082 0.0460946H75V2.68118H74.4929V1.34827C74.4929 1.23047 74.4942 1.11268 74.4968 0.994878C74.4994 0.877081 74.502 0.775928 74.5046 0.691421C74.5098 0.606914 74.5124 0.556978 74.5124 0.541613H74.4812C74.476 0.564661 74.463 0.614597 74.4422 0.691421C74.4214 0.768246 74.3993 0.851472 74.3759 0.941101C74.3525 1.03073 74.3317 1.10755 74.3135 1.17157L73.8727 2.68118H73.4047L72.9639 1.17542C72.9483 1.12164 72.9301 1.05762 72.9093 0.983355C72.8911 0.90653 72.8716 0.828425 72.8508 0.74904C72.8326 0.669654 72.8157 0.600512 72.8001 0.541613H72.7689C72.7715 0.610755 72.7741 0.693982 72.7767 0.791293C72.7793 0.886043 72.7819 0.983355 72.7845 1.08323C72.7871 1.18054 72.7884 1.26889 72.7884 1.34827V2.68118H72.3008Z"
+    />
+    <path d="M67.4728 0H62.2005V3.98818H67.4728V0Z" />
+  </svg>
 {/if}
 
 <style>

package/src/components/Logo.webcomponent.svelte

@@ -1,12 +1,18 @@
-<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' },
-    showServiceMark: { reflect: true, type: 'Boolean', attribute: 'show-service-mark' },
-  }
-}} />
+<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' },
+      showServiceMark: {
+        reflect: true,
+        type: 'Boolean',
+        attribute: 'show-service-mark',
+      },
+    },
+  }}
+/>
 
 <script lang="ts">
   import Logo from './Logo.svelte';
@@ -20,10 +26,4 @@
   } = $props();
 </script>
 
-<Logo
-  {isInverted}
-  {width}
-  {height}
-  {showServiceMark}
-  {...props}
-/>
+<Logo {isInverted} {width} {height} {showServiceMark} {...props} />

package/src/components/MobileBottomNav.svelte

@@ -6,105 +6,138 @@
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
-  import slugify from "slugify";
+  import slugify from 'slugify';
 
-  let {onNavItemClick, showAppIcons = true, apiUrl, chatUrl, consoleUrl, discoverUrl}: {
-    onNavItemClick?: (data: { item: NavigationItem; expanded: boolean }) => void,
-    showAppIcons: boolean,
-    apiUrl?: string,
-    chatUrl?: string,
-    consoleUrl?: string,
-    discoverUrl?: string,
+  let {
+    onNavItemClick,
+    showAppIcons = true,
+    apiUrl,
+    chatUrl,
+    consoleUrl,
+    discoverUrl,
+  }: {
+    onNavItemClick?: (data: {
+      item: NavigationItem;
+      expanded: boolean;
+    }) => void;
+    showAppIcons: boolean;
+    apiUrl?: string;
+    chatUrl?: string;
+    consoleUrl?: string;
+    discoverUrl?: string;
   } = $props();
 
   const urls = getAppUrls();
 
   const navItems = [
-    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: discoverUrl || urls.discover },
+    {
+      id: 'discover',
+      label: 'Discover',
+      icon: DiscoverIcon,
+      href: discoverUrl || urls.discover,
+    },
     { id: 'chat', label: 'Chat', icon: ChatIcon, href: chatUrl || urls.chat },
-    { id: 'console', label: 'Console', icon: ConsoleIcon, href: consoleUrl || urls.console },
-    { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || urls.api }
+    {
+      id: 'console',
+      label: 'Console',
+      icon: ConsoleIcon,
+      href: consoleUrl || urls.console,
+    },
+    { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || urls.api },
   ] as const;
 
-  function handleNavItemClick(item: NavigationItem) {    
+  function handleNavItemClick(item: NavigationItem) {
     // Set navigation flag immediately to prevent header restoration
     if (item !== 'discover' && typeof window !== 'undefined') {
       sessionStorage.setItem('navigatingToMainNav', 'true');
     }
-    
+
     navigationStore.setSelectedItem(item);
-    
+
     // Clear header state for main navigation items (including discover)
     if (item !== 'discover') {
       try {
-        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
-          // Clear the store value immediately
-          selectedSubNavItemTitle.set('');
-          if (typeof window !== 'undefined') {
-            sessionStorage.removeItem('subNav-selectedTitle');
-            sessionStorage.removeItem('subNav-selectedId');
-          }
-          
-          // Set default header from first submenu item after a short delay
-          setTimeout(() => {
-            const mainContent = document.getElementById('main-content');
-            if (mainContent) {
-              const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
-              if (firstSection && firstSection.textContent) {
-                const firstSectionTitle = firstSection.textContent.trim();
-                selectedSubNavItemTitle.set(firstSectionTitle);
-                if (typeof window !== 'undefined') {
-                  sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+        import('@gsa-tts/graymatter-ui/stores/navigationStore')
+          .then(({ selectedSubNavItemTitle }) => {
+            // Clear the store value immediately
+            selectedSubNavItemTitle.set('');
+            if (typeof window !== 'undefined') {
+              sessionStorage.removeItem('subNav-selectedTitle');
+              sessionStorage.removeItem('subNav-selectedId');
+            }
+
+            // Set default header from first submenu item after a short delay
+            setTimeout(() => {
+              const mainContent = document.getElementById('main-content');
+              if (mainContent) {
+                const firstSection = mainContent.querySelector(
+                  'h2[id], h3[id], h4[id], h5[id], h6[id]'
+                );
+                if (firstSection && firstSection.textContent) {
+                  const firstSectionTitle = firstSection.textContent.trim();
+                  selectedSubNavItemTitle.set(firstSectionTitle);
+                  if (typeof window !== 'undefined') {
+                    sessionStorage.setItem(
+                      'subNav-selectedTitle',
+                      JSON.stringify(firstSectionTitle)
+                    );
+                  }
                 }
               }
-            }
-          }, 200); // Delay to ensure page content is loaded
-        }).catch((err) => {
-          console.log('[MobileBottomNav] Error clearing header state:', err);
-        });
+            }, 200); // Delay to ensure page content is loaded
+          })
+          .catch(err => {
+            console.log('[MobileBottomNav] Error clearing header state:', err);
+          });
       } catch (err) {
         console.log('[MobileBottomNav] Import failed for clearing state:', err);
       }
     } else {
       // Clear header state for Discover page
       try {
-        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
-          selectedSubNavItemTitle.set('');
-          if (typeof window !== 'undefined') {
-            sessionStorage.removeItem('subNav-selectedTitle');
-            sessionStorage.removeItem('subNav-selectedId');
-          }
-        }).catch((err) => {
-          console.log('[MobileBottomNav] Error clearing header state for Discover:', err);
-        });
+        import('@gsa-tts/graymatter-ui/stores/navigationStore')
+          .then(({ selectedSubNavItemTitle }) => {
+            selectedSubNavItemTitle.set('');
+            if (typeof window !== 'undefined') {
+              sessionStorage.removeItem('subNav-selectedTitle');
+              sessionStorage.removeItem('subNav-selectedId');
+            }
+          })
+          .catch(err => {
+            console.log(
+              '[MobileBottomNav] Error clearing header state for Discover:',
+              err
+            );
+          });
       } catch (err) {
-        console.log('[MobileBottomNav] Import failed for clearing Discover state:', err);
+        console.log(
+          '[MobileBottomNav] Import failed for clearing Discover state:',
+          err
+        );
       }
     }
-    
+
     onNavItemClick?.({ item, expanded: false });
   }
 </script>
 
 {#if showAppIcons}
-<nav class="mobile-bottom-nav" part="mobile-bottom-nav">
-  {#each navItems as navItem}
-    <a
-      href={navItem.href}
-      class={`nav-item ${slugify(navItem.id)}-item`}
-      class:active={$selectedItem === navItem.id}
-      onclick={() => handleNavItemClick(navItem.id)}
-      part={`${slugify(navItem.id)}-item`}
-    >
-      <div class="icon">
-        <navItem.icon
-          isSelected={$selectedItem === navItem.id}
-        />
-      </div>
-      <span class="label">{navItem.label}</span>
-    </a>
-  {/each}
-</nav>
+  <nav class="mobile-bottom-nav" part="mobile-bottom-nav">
+    {#each navItems as navItem}
+      <a
+        href={navItem.href}
+        class={`nav-item ${slugify(navItem.id)}-item`}
+        class:active={$selectedItem === navItem.id}
+        onclick={() => handleNavItemClick(navItem.id)}
+        part={`${slugify(navItem.id)}-item`}
+      >
+        <div class="icon">
+          <navItem.icon isSelected={$selectedItem === navItem.id} />
+        </div>
+        <span class="label">{navItem.label}</span>
+      </a>
+    {/each}
+  </nav>
 {/if}
 
 <style>
@@ -117,7 +150,7 @@
     padding: var(--ai-size-4);
     text-decoration: none;
     color: var(--ai-color-neutral-600);
-    transition: color 0.2s ease;
+    transition: color var(--ai-transition-ease-fast);
     height: 100%;
   }
 
@@ -133,7 +166,7 @@
   .nav-item:hover {
     color: var(--ai-color-neutral-700);
   }
-  
+
   .icon {
     width: var(--ai-size-24);
     height: var(--ai-size-24);
@@ -142,7 +175,7 @@
     align-items: center;
     justify-content: center;
     padding: var(--ai-size-2);
-    transition: background-color 0.2s ease;
+    transition: background-color var(--ai-transition-ease-fast);
   }
 
   .label {

package/src/components/MobileBottomNav.webcomponent.svelte

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