@gsa-tts/graymatter-ui 0.2.8 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -56,15 +56,15 @@
     "vitest": "^3.0.7",
     "vite": "^6.3.5",
     "@gsa-tts/graymatter-eslint": "0.0.1",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1"
+    "@gsa-tts/graymatter-vitest-config": "0.0.1",
+    "@gsa-tts/graymatter-typescript-config": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
     "@uswds/uswds": "3.12.0",
     "astro": "^5.11.0",
     "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/components/Button.svelte

@@ -32,8 +32,12 @@
       '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' : '',
@@ -46,29 +50,18 @@
 </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 {
+  :root,
+  :host {
     /* global button */
     --ai-button-radius: var(--ai-radius-round);
     --ai-button-padding-x: 2rem;
@@ -78,12 +71,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);
@@ -148,19 +137,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);
   }
 
@@ -203,29 +195,33 @@
   }
 
   /* 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;

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} />