@gsa-tts/graymatter-ui 0.2.8 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@turbo/gen": "^2.4.0",
     "@types/node": "^22.13.0",
     "@uswds/compile": "1.2.2",
     "@vitest/coverage-istanbul": "^3.0.7",
@@ -62,9 +61,9 @@
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
     "@uswds/uswds": "3.12.0",
-    "astro": "^5.11.0",
+    "astro": "^5.12.8",
     "slugify": "^1.6.6",
-    "@gsa-tts/graymatter-style-tokens": "0.2.3"
+    "@gsa-tts/graymatter-style-tokens": "0.3.0"
   },
   "scripts": {
     "build": "gulp update && vite build",

package/src/component-options/componentOptions.ts

@@ -2,38 +2,52 @@ interface WebsiteComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
-  agencyHeader?: {
+  header?: {
     theme?: 'inverse' | 'default';
   };
 }
 
-interface ApiComponentOptions {
-  usaBanner?: {
-    theme?: 'inverse' | 'default';
-  };
-}
-
-interface ConsoleComponentOptions {
+interface AppComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
 }
 
 export interface ComponentOptions {
+  api?: AppComponentOptions;
+  apiSubpage?: WebsiteComponentOptions;
+  chatSubpage?: WebsiteComponentOptions;
+  console?: AppComponentOptions;
+  consoleSubpage?: WebsiteComponentOptions;
+  partnershipsSubpage?: WebsiteComponentOptions;
   website?: WebsiteComponentOptions;
-  api?: ApiComponentOptions;
-  console?: ConsoleComponentOptions;
 }
 
 export const componentOptions: ComponentOptions = {
-  website: {
+  api: {
+    usaBanner: { theme: 'default' },
+  },
+  apiSubpage: {
     usaBanner: { theme: 'inverse' },
-    agencyHeader: { theme: 'inverse' },
+    header: { theme: 'inverse' },
   },
-  api: {
+  chatSubpage: {
     usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
   },
   console: {
     usaBanner: { theme: 'default' },
   },
+  consoleSubpage: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
+  partnershipsSubpage: {
+    usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
+  },
+  website: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
 };

package/src/components/Button.svelte

@@ -1,13 +1,33 @@
 <script lang="ts">
+  /**
+   * Button Component
+   *
+   * Props:
+   * - variant: 'primary' | 'secondary' | 'unstyled' (default: 'primary')
+   * - theme: 'default' | 'inverted' (default: 'default')
+   * - shape: 'round' | 'square' (default: 'round')
+   * - size: 'small' | 'medium' | 'large' (default: 'medium')
+   * - href?: string (optional - renders as <a> if provided)
+   * - disabled?: boolean (default: false)
+   * - type?: 'button' | 'submit' | 'reset' (default: 'button')
+   *
+   * Examples:
+   * - Round primary button: <Button>Click me</Button>
+   * - Square secondary button: <Button variant="secondary" shape="square">Square</Button>
+   * - Small button (any shape): <Button size="small">Small Button</Button>
+   * - Small square button: <Button variant="secondary" shape="square" size="small">Small Square</Button>
+   * - Inverted square button: <Button theme="inverted" shape="square">Inverted Square</Button>
+   */
   interface Props {
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'unstyled';
     theme?: 'default' | 'inverted';
+    shape?: 'round' | 'square';
     href?: string;
     disabled?: boolean;
     size: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
-    children?: string | null;
+    children?: import('svelte').Snippet | null;
     class?: string;
     [key: `data-${string}`]: string;
     [key: `aria-${string}`]: string;
@@ -16,7 +36,8 @@
   let {
     variant = 'primary',
     theme = 'default',
-    href = null,
+    shape = 'round',
+    href = undefined,
     disabled = false,
     onclick,
     children = null,
@@ -32,11 +53,16 @@
       'usa-button',
       'ai-button',
       size === 'small' ? 'ai-button--small' : '',
-      theme === 'inverted' && variant === 'primary' ? 'ai-button--inverted' : '',
-      theme === 'inverted' && variant === 'secondary' ? 'ai-button--outline-inverted' : '',
+      theme === 'inverted' && variant === 'primary'
+        ? 'ai-button--inverted'
+        : '',
+      theme === 'inverted' && variant === 'secondary'
+        ? 'ai-button--outline-inverted'
+        : '',
       variant === 'primary' ? 'usa-button--primary' : '',
       variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
       variant === 'unstyled' ? 'ai-button--unstyled' : '',
+      shape === 'square' ? 'ai-button--square' : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -46,29 +72,19 @@
 </script>
 
 {#if href}
-  <a
-    class={mergedClasses()}
-    {href}
-    class:disabled
-    {onclick}
-    {...props}
-  >
+  <a class={mergedClasses()} {href} class:disabled {onclick} {...props}>
     {@render children?.()}
   </a>
 {:else}
-  <button
-    class={mergedClasses()}
-    {type}
-    {disabled}
-    {onclick}
-    {...props}
-  >
+  <button class={mergedClasses()} {type} {disabled} {onclick} {...props}>
     {@render children?.()}
   </button>
 {/if}
 
 <style>
-  :root, :host {
+  /*! purgecss start ignore */
+  :root,
+  :host {
     /* global button */
     --ai-button-radius: var(--ai-radius-round);
     --ai-button-padding-x: 2rem;
@@ -78,12 +94,8 @@
 
     /* primary button */
     --ai-button-background-primary-rest: var(--ai-color-black);
-    --ai-button-background-primary-hover: var(
-      --ai-color-neutral-900
-    );
-    --ai-button-background-primary-disabled: var(
-      --ai-color-neutral-200
-    );
+    --ai-button-background-primary-hover: var(--ai-color-neutral-900);
+    --ai-button-background-primary-disabled: var(--ai-color-neutral-200);
     --ai-button-text-primary-rest: var(--ai-color-white);
     --ai-button-text-primary-hover: var(--ai-button-text-primary-rest);
     --ai-button-text-primary-disabled: var(--ai-color-neutral-800);
@@ -117,6 +129,37 @@
     --ai-button-border-outline-inverted-hover: var(
       --ai-button-border-outline-inverted-rest
     );
+
+    /* square button specific tokens */
+    --ai-button-radius-square: var(--ai-size-4);
+    --ai-button-padding-x-square: var(--ai-size-12);
+    --ai-button-padding-y-square: var(--ai-size-6);
+    --ai-button-height-square: var(--ai-size-40);
+    --ai-button-width-square: 100%;
+
+    /* small square button tokens */
+    --ai-button-padding-x-square-small: var(--ai-size-8);
+    --ai-button-padding-y-square-small: var(--ai-size-4);
+    --ai-button-height-square-small: var(--ai-size-24);
+
+    /* square button color tokens */
+    --ai-button-background-square-primary-rest: var(--ai-color-black);
+    --ai-button-background-square-primary-hover: var(--ai-color-neutral-900);
+    --ai-button-background-square-primary-disabled: var(--ai-color-neutral-200);
+    --ai-button-text-square-primary-rest: var(--ai-color-white);
+    --ai-button-text-square-primary-hover: var(--ai-color-white);
+    --ai-button-text-square-primary-disabled: var(--ai-color-neutral-800);
+
+    --ai-button-background-square-secondary-rest: var(--ai-color-white);
+    --ai-button-background-square-secondary-hover: var(--ai-color-neutral-200);
+    --ai-button-background-square-secondary-disabled: var(
+      --ai-color-neutral-500
+    );
+    --ai-button-text-square-secondary-rest: var(--ai-color-black);
+    --ai-button-text-square-secondary-hover: var(--ai-color-black);
+    --ai-button-text-square-secondary-disabled: var(--ai-color-neutral-900);
+    --ai-button-border-square-secondary-rest: var(--ai-color-black);
+    --ai-button-border-square-secondary-hover: var(--ai-color-black);
   }
 
   .ai-button {
@@ -127,6 +170,7 @@
     padding-inline: var(--ai-button-padding-x);
     padding-block: var(--ai-button-padding-y);
     margin: 0;
+    width: fit-content;
   }
 
   .ai-button:is(:hover, :focus) {
@@ -148,19 +192,22 @@
 
   .ai-button--outline:is(:hover, :focus) {
     background-color: var(--ai-button-background-outline-hover);
-    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-hover);
+    box-shadow: var(--ai-button-box-shadow)
+      var(--ai-button-border-outline-hover);
     color: var(--ai-button-text-outline-hover);
   }
 
   .ai-button--outline-inverted {
     background-color: transparent;
-    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-inverted-rest);
+    box-shadow: var(--ai-button-box-shadow)
+      var(--ai-button-border-outline-inverted-rest);
     color: var(--ai-button-text-outline-inverted-rest);
   }
 
   .ai-button--outline-inverted:is(:hover, :focus) {
     background-color: var(--ai-button-background-outline-inverted-hover);
-    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-inverted-hover);
+    box-shadow: var(--ai-button-box-shadow)
+      var(--ai-button-border-outline-inverted-hover);
     color: var(--ai-button-text-outline-inverted-hover);
   }
 
@@ -177,6 +224,108 @@
     border: var(--ai-button-border-inverted-hover);
   }
 
+  /* Square button styles */
+  .ai-button--square {
+    border-radius: var(--ai-button-radius-square);
+    padding-inline: var(--ai-button-padding-x-square);
+    padding-block: var(--ai-button-padding-y-square);
+    height: var(--ai-button-height-square);
+    width: var(--ai-button-width-square);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.0625rem solid var(--ai-color-neutral-300);
+    box-shadow: 0 0.0625rem var(--ai-size-2) 0 rgba(0, 0, 0, 0.1);
+    transition: all var(--ai-transition-ease-fast);
+  }
+
+  /* Small square button specific adjustments */
+  .ai-button--small.ai-button--square {
+    padding-inline: var(--ai-button-padding-x-square-small);
+    padding-block: var(--ai-button-padding-y-square-small);
+    height: var(--ai-button-height-square-small);
+  }
+
+  .ai-button--square:is(:hover, :focus) {
+    border-color: var(--ai-color-neutral-400);
+    box-shadow: 0 var(--ai-size-2) var(--ai-size-4) 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .ai-button--square:focus {
+    outline-offset: var(--ai-size-2);
+  }
+
+  /* Square button variants */
+  .ai-button--square.ai-button--primary {
+    background-color: var(--ai-button-background-square-primary-rest);
+    color: var(--ai-button-text-square-primary-rest);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--primary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-primary-hover);
+    color: var(--ai-button-text-square-primary-hover);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--secondary {
+    background-color: var(--ai-button-background-square-secondary-rest);
+    color: var(--ai-button-text-square-secondary-rest);
+    border-color: var(--ai-button-border-square-secondary-rest);
+  }
+
+  .ai-button--square.ai-button--secondary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-secondary-hover);
+    color: var(--ai-button-text-square-secondary-hover);
+    border-color: var(--ai-button-border-square-secondary-hover);
+  }
+
+  .ai-button--square.ai-button--outline {
+    background-color: var(--ai-color-white);
+    color: var(--ai-color-neutral-800);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-50);
+    color: var(--ai-color-black);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  /* Square button inverted themes */
+  .ai-button--square.ai-button--inverted {
+    background-color: var(--ai-button-background-inverted-rest);
+    color: var(--ai-button-text-inverted-rest);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--inverted:is(:hover, :focus) {
+    background-color: var(--ai-button-background-inverted-hover);
+    color: var(--ai-button-text-inverted-hover);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--outline-inverted {
+    background-color: transparent;
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline-inverted:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-900);
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  .ai-menu-buttons {
+    display: flex;
+    gap: var(--ai-size-16);
+  }
+
+  /* Unstyled button styles */
   .ai-button--unstyled {
     background: none;
     color: inherit;
@@ -197,37 +346,42 @@
     text-decoration: underline;
   }
 
-  .ai-menu-buttons {
-    display: flex;
-    gap: var(--ai-size-16);
+  /* Unstyled square button - just center the text, reuse existing unstyled styles */
+  .ai-button--unstyled.ai-button--square {
+    text-align: center;
   }
 
   /* disabled button styles */
-  :is(.disabled, [disabled], [aria-disabled=true]) {
+  :is(.disabled, [disabled], [aria-disabled='true']) {
     background: var(--ai-button-background-primary-disabled);
     color: var(--ai-button-text-primary-disabled);
     cursor: not-allowed;
   }
 
-  .ai-button--inverted:is(.disabled, [disabled], [aria-disabled=true]) {
+  .ai-button--inverted:is(.disabled, [disabled], [aria-disabled='true']) {
     background: var(--ai-button-background-inverted-disabled);
     color: var(--ai-button-text-inverted-disabled);
   }
 
-  .ai-button--outline:is(.disabled, [disabled], [aria-disabled=true]) {
+  .ai-button--outline:is(.disabled, [disabled], [aria-disabled='true']) {
     background: transparent;
     box-shadow: var(--ai-button-box-shadow) var(--ai-color-neutral-700);
     color: var(--ai-color-neutral-700);
   }
 
-  .ai-button--outline-inverted:is(.disabled, [disabled], [aria-disabled=true]) {
+  .ai-button--outline-inverted:is(
+    .disabled,
+    [disabled],
+    [aria-disabled='true']
+  ) {
     box-shadow: var(--ai-button-box-shadow) var(--ai-color-neutral-200);
     color: var(--ai-color-neutral-600);
   }
 
-  .ai-button--unstyled:is(.disabled, [disabled], [aria-disabled=true]) {
+  .ai-button--unstyled:is(.disabled, [disabled], [aria-disabled='true']) {
     background: none;
     color: inherit;
     opacity: 0.75;
   }
+  /*! purgecss end ignore */
 </style>

package/src/components/Button.webcomponent.svelte

@@ -1,14 +1,16 @@
-<svelte:options customElement={{
-  tag: 'graymatter-button',
-  props: {
-    variant: { reflect: true, type: 'String', attribute: 'variant' },
-    theme: { reflect: true, type: 'String', attribute: 'theme' },
-    href: { reflect: true, type: 'String', attribute: 'href' },
-    disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
-    size: { reflect: true, type: 'String', attribute: 'size' },
-    type: { reflect: true, type: 'String', attribute: 'type' }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: 'graymatter-button',
+    props: {
+      variant: { reflect: true, type: 'String', attribute: 'variant' },
+      theme: { reflect: true, type: 'String', attribute: 'theme' },
+      href: { reflect: true, type: 'String', attribute: 'href' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      size: { reflect: true, type: 'String', attribute: 'size' },
+      type: { reflect: true, type: 'String', attribute: 'type' },
+    },
+  }}
+/>
 
 <script lang="ts">
   import Button from './Button.svelte';

package/src/components/DesktopHeader.svelte

@@ -1,64 +1,81 @@
 <script lang="ts">
-import { selectedItem, isExpanded, selectedSubNavItemTitle } from '../stores/navigationStore.js';
-import { onMount } from 'svelte';
-import { subNavReady } from '../stores/subNavReadyStore';
+  import {
+    selectedItem,
+    isExpanded,
+    selectedSubNavItemTitle,
+  } from '../stores/navigationStore.js';
+  import { onMount } from 'svelte';
+  import { subNavReady } from '../stores/subNavReadyStore';
 
-const { customHeaderText = '' } = $props();
+  const { customHeaderText = '' } = $props();
 
-let isLayoutTransitioning = false;
+  let isLayoutTransitioning = false;
 
-const showHeader = $derived(() =>
-  $selectedItem && $selectedItem !== 'discover' && !$isExpanded && !isLayoutTransitioning && $subNavReady
-);
-const headerText = $derived(() =>
-  customHeaderText || $selectedSubNavItemTitle
-);
+  const showHeader = $derived(
+    () =>
+      $selectedItem &&
+      $selectedItem !== 'discover' &&
+      !$isExpanded &&
+      !isLayoutTransitioning &&
+      $subNavReady
+  );
+  const headerText = $derived(
+    () => customHeaderText || $selectedSubNavItemTitle
+  );
 
-onMount(() => {
-  const handleSectionVisible = (event: Event) => {
-    if (typeof window !== 'undefined' && window.innerWidth <= 640) {
-      return;
-    }
-    let topLevelTitle = null;
-    if (typeof window !== 'undefined') {
-      topLevelTitle = sessionStorage.getItem('subNav-topLevelTitle');
-      if (topLevelTitle) {
-        try {
-          topLevelTitle = JSON.parse(topLevelTitle);
-        } catch {/* ignore parse error */}
+  onMount(() => {
+    const handleSectionVisible = (event: Event) => {
+      if (typeof window !== 'undefined' && window.innerWidth <= 640) {
+        return;
       }
-    }
-    if (typeof topLevelTitle === 'string' && topLevelTitle.trim() !== '') {
-      selectedSubNavItemTitle.set(topLevelTitle);
-      sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(topLevelTitle));
-    } else {
-      const customEvent = event as CustomEvent;
-      if (customEvent.detail && customEvent.detail.title) {
-        selectedSubNavItemTitle.set(customEvent.detail.title);
-        sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(customEvent.detail.title));
+      let topLevelTitle = null;
+      if (typeof window !== 'undefined') {
+        topLevelTitle = sessionStorage.getItem('subNav-topLevelTitle');
+        if (topLevelTitle) {
+          try {
+            topLevelTitle = JSON.parse(topLevelTitle);
+          } catch {
+            /* ignore parse error */
+          }
+        }
+      }
+      if (typeof topLevelTitle === 'string' && topLevelTitle.trim() !== '') {
+        selectedSubNavItemTitle.set(topLevelTitle);
+        sessionStorage.setItem(
+          'subNav-selectedTitle',
+          JSON.stringify(topLevelTitle)
+        );
+      } else {
+        const customEvent = event as CustomEvent;
+        if (customEvent.detail && customEvent.detail.title) {
+          selectedSubNavItemTitle.set(customEvent.detail.title);
+          sessionStorage.setItem(
+            'subNav-selectedTitle',
+            JSON.stringify(customEvent.detail.title)
+          );
+        }
       }
-    }
-  };
+    };
 
-  const handleLayoutTransition = (event: Event) => {
-    const customEvent = event as CustomEvent;
-    const { isMobile } = customEvent.detail;
-    if (!isMobile) {
-      isLayoutTransitioning = true;
-      setTimeout(() => {
-        isLayoutTransitioning = false;
-      }, 300);
-    }
-  };
+    const handleLayoutTransition = (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const { isMobile } = customEvent.detail;
+      if (!isMobile) {
+        isLayoutTransitioning = true;
+        setTimeout(() => {
+          isLayoutTransitioning = false;
+        }, 300);
+      }
+    };
 
-  window.addEventListener('sectionVisible', handleSectionVisible);
-  window.addEventListener('layoutTransition', handleLayoutTransition);
+    window.addEventListener('sectionVisible', handleSectionVisible);
+    window.addEventListener('layoutTransition', handleLayoutTransition);
 
-  return () => {
-    window.removeEventListener('sectionVisible', handleSectionVisible);
-    window.removeEventListener('layoutTransition', handleLayoutTransition);
-  };
-});
+    return () => {
+      window.removeEventListener('sectionVisible', handleSectionVisible);
+      window.removeEventListener('layoutTransition', handleLayoutTransition);
+    };
+  });
 </script>
 
 <div class="global-header" class:visible={showHeader()} part="global-header">
@@ -70,11 +87,11 @@ onMount(() => {
 <style>
   .global-header {
     opacity: 0;
-    transition: opacity 0.2s;
+    transition: opacity var(--ai-duration-fast);
   }
   .global-header.visible {
     opacity: 1;
-    transition: opacity 0.2s;
+    transition: opacity var(--ai-duration-fast);
   }
   .header-content {
     display: flex;

package/src/components/DesktopHeader.webcomponent.svelte

@@ -1,9 +1,15 @@
-<svelte:options customElement={{
-  tag: 'graymatter-desktop-header',
-  props: {
-    customHeaderText: { reflect: true, type: 'String', attribute: 'custom-header-text' }
-  }
-}} />
+<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';
@@ -12,6 +18,4 @@
   let { customHeaderText = '' } = $props();
 </script>
 
-<DesktopHeader
-  {customHeaderText}
-/>
+<DesktopHeader {customHeaderText} />