@gsa-tts/graymatter-ui 0.5.1 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -61,8 +61,8 @@
     "typescript": "5.7.3",
     "vite": "^6.4.1",
     "vitest": "^3.0.7",
-    "@gsa-tts/graymatter-eslint": "0.0.2",
     "@gsa-tts/graymatter-typescript-config": "0.0.2",
+    "@gsa-tts/graymatter-eslint": "0.0.2",
     "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {

package/src/components/Button.svelte

@@ -10,6 +10,7 @@
    * - href?: string (optional - renders as <a> if provided)
    * - disabled?: boolean (default: false)
    * - type?: 'button' | 'submit' | 'reset' (default: 'button')
+   * - hasBoxShadow?: boolean (default: true) - Whether to show box shadow on square buttons
    *
    * Examples:
    * - Round primary button: <Button>Click me</Button>
@@ -17,6 +18,7 @@
    * - 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>
+   * - Button without shadow: <Button shape="square" hasBoxShadow={false}>No Shadow</Button>
    */
   interface Props {
     variant?: 'primary' | 'secondary' | 'unstyled';
@@ -27,6 +29,7 @@
     size?: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
+    hasBoxShadow?: boolean;
     class?: string;
     children?: import('svelte').Snippet;
     [key: `data-${string}`]: string;
@@ -42,6 +45,7 @@
     onclick,
     size = 'medium',
     type = 'button',
+    hasBoxShadow = true,
     class: className = '',
     children,
     // eslint-disable-next-line svelte/valid-compile
@@ -63,6 +67,7 @@
       variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
       variant === 'unstyled' ? 'ai-button--unstyled' : '',
       shape === 'square' ? 'ai-button--square' : '',
+      !hasBoxShadow ? 'ai-button--no-shadow' : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -387,5 +392,14 @@
     color: inherit;
     opacity: 0.75;
   }
+
+  /* No shadow modifier */
+  .ai-button--no-shadow {
+    box-shadow: none !important;
+  }
+
+  .ai-button--no-shadow:is(:hover, :focus) {
+    box-shadow: none !important;
+  }
   /*! purgecss end ignore */
 </style>

package/src/components/Modal.svelte

@@ -0,0 +1,374 @@
+<script lang="ts">
+  /**
+   * Modal Component
+   *
+   * A flexible modal component that can be used for dialogs, confirmations, and custom overlays.
+   *
+   * Props:
+   * - open: boolean - Controls whether the modal is visible
+   * - onClose?: () => void - Callback when modal should close (backdrop click or ESC key)
+   * - closeOnBackdropClick?: boolean - Whether clicking backdrop closes modal (default: true)
+   * - closeOnEscape?: boolean - Whether ESC key closes modal (default: true)
+   * - size?: 'small' | 'medium' | 'large' - Modal width (default: 'medium')
+   * - showCloseButton?: boolean - Whether to show X close button (default: true)
+   * - centered?: boolean - Center content text (default: true)
+   * - icon?: Snippet - Optional icon to display at top
+   * - title?: string - Optional title text
+   * - content?: string[] - Array of paragraph texts to display
+   * - buttons?: Array<ButtonConfig> - Optional buttons to display
+   * - children?: Snippet - Custom content (overrides title/content/buttons if provided)
+   * - class?: string - Additional CSS classes for the modal
+   *
+   * Example (Simple):
+   * ```svelte
+   * <Modal
+   *   open={isOpen}
+   *   title="Delete Item"
+   *   content={["This action cannot be undone.", "Are you sure?"]}
+   *   buttons={[
+   *     { text: 'Delete', variant: 'primary', onclick: handleDelete },
+   *     { text: 'Cancel', variant: 'secondary', onclick: () => isOpen = false }
+   *   ]}
+   * />
+   * ```
+   *
+   * Example (Custom):
+   * ```svelte
+   * <Modal open={isOpen} onClose={() => isOpen = false}>
+   *   <h2>Custom Content</h2>
+   *   <p>Your custom HTML here</p>
+   * </Modal>
+   * ```
+   */
+  import { CloseIcon } from './icons/index.js';
+  import Button from './Button.svelte';
+
+  interface ButtonConfig {
+    text: string;
+    variant?: 'primary' | 'secondary' | 'unstyled';
+    onclick: (event: MouseEvent) => void;
+    class?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    open: boolean;
+    onClose?: () => void;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    showCloseButton?: boolean;
+    centered?: boolean;
+    icon?: import('svelte').Snippet;
+    title?: string;
+    content?: string[];
+    buttons?: ButtonConfig[];
+    children?: import('svelte').Snippet;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(),
+    onClose,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    size = 'medium',
+    showCloseButton = true,
+    centered = true,
+    icon,
+    title,
+    content,
+    buttons,
+    children,
+    class: className = '',
+  }: Props = $props();
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      open = false;
+      onClose?.();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (closeOnEscape && event.key === 'Escape') {
+      open = false;
+      onClose?.();
+    }
+  }
+
+  function handleCloseClick() {
+    open = false;
+    onClose?.();
+  }
+
+  // Add/remove body scroll lock when modal is open
+  $effect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div
+    class="ai-modal-backdrop"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      class="ai-modal ai-modal--{size} {className}"
+      class:ai-modal--centered={centered}
+      role="dialog"
+      aria-modal="true"
+    >
+      {#if showCloseButton}
+        <button
+          class="ai-modal__close"
+          onclick={handleCloseClick}
+          aria-label="Close modal"
+          type="button"
+        >
+          <CloseIcon />
+        </button>
+      {/if}
+      <div class="ai-modal__content">
+        {#if children}
+          {@render children()}
+        {:else}
+          <div class="ai-modal__structured-content">
+            {#if icon}
+              <div class="ai-modal__icon-container">
+                {@render icon()}
+              </div>
+            {/if}
+
+            {#if title}
+              <h2 class="ai-modal__title">
+                {title}
+              </h2>
+            {/if}
+
+            {#if content && content.length > 0}
+              <div class="ai-modal__text">
+                {#each content as paragraph}
+                  <p class="ai-modal__paragraph">
+                    {paragraph}
+                  </p>
+                {/each}
+              </div>
+            {/if}
+
+            {#if buttons && buttons.length > 0}
+              <div class="ai-modal__actions">
+                {#each buttons as button}
+                  <Button
+                    variant={button.variant || 'primary'}
+                    shape="square"
+                    onclick={button.onclick}
+                    disabled={button.disabled}
+                    hasBoxShadow={false}
+                    class="ai-modal__button {button.class || ''}"
+                  >
+                    {button.text}
+                  </Button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /*! purgecss start ignore */
+  :root,
+  :host {
+    --ai-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+    --ai-modal-bg: var(--ai-color-white);
+    --ai-modal-border-radius: 1.0625rem;
+    --ai-modal-border: 0.0625rem solid var(--ai-color-steel-200);
+    --ai-modal-padding: 2rem;
+    --ai-modal-gap: 1.5rem;
+    --ai-modal-content-width: 22.4375rem;
+    --ai-modal-width: 26.4375rem; /* 22.4375rem content + 2rem padding * 2 */
+    --ai-modal-max-width-small: 25rem;
+    --ai-modal-max-width-large: 50rem;
+    --ai-modal-shadow: 0 0.1875rem 1.25rem 0.0625rem rgba(50, 54, 61, 0.15);
+    --ai-modal-close-size: var(--ai-size-32, 2rem);
+    --ai-modal-close-top: var(--ai-size-16, 1rem);
+    --ai-modal-close-right: var(--ai-size-16, 1rem);
+
+    /* Typography tokens */
+    --ai-modal-title-size: var(--ai-size-20, 1.25rem);
+    --ai-modal-title-weight: var(--ai-font-weight-semibold, 600);
+    --ai-modal-text-size: 1rem;
+    --ai-modal-text-line-height: 1.3;
+  }
+
+  .ai-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--ai-modal-backdrop-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-16);
+    z-index: 9999;
+    animation: fadeIn 0.2s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .ai-modal {
+    position: relative;
+    display: inline-flex;
+    padding: var(--ai-modal-padding);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-modal-gap);
+    background-color: var(--ai-modal-bg);
+    border-radius: var(--ai-modal-border-radius);
+    border: var(--ai-modal-border);
+    box-shadow: var(--ai-modal-shadow);
+    max-height: calc(100vh - var(--ai-size-32, 2rem));
+    overflow-y: auto;
+    animation: slideUp 0.3s ease-out;
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(var(--ai-size-32));
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .ai-modal--small {
+    max-width: var(--ai-modal-max-width-small);
+    width: 100%;
+  }
+
+  .ai-modal--medium {
+    width: var(--ai-modal-width);
+  }
+
+  .ai-modal--large {
+    max-width: var(--ai-modal-max-width-large);
+    width: 100%;
+  }
+
+  .ai-modal__close {
+    position: absolute;
+    top: var(--ai-modal-close-top);
+    right: var(--ai-modal-close-right);
+    width: var(--ai-modal-close-size);
+    height: var(--ai-modal-close-size);
+    padding: var(--ai-size-6);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ai-size-4);
+    transition: background-color 0.2s ease;
+    color: var(--ai-color-neutral-600);
+  }
+
+  .ai-modal__close:hover {
+    background-color: var(--ai-color-neutral-100);
+    color: var(--ai-color-black);
+  }
+
+  .ai-modal__close:focus {
+    outline: 0.125rem solid var(--ai-color-black);
+    outline-offset: 0.125rem;
+  }
+
+  .ai-modal__content {
+    width: 100%;
+  }
+
+  .ai-modal--centered .ai-modal__content {
+    text-align: center;
+  }
+
+  /* Structured content layout */
+  .ai-modal__structured-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-modal-gap);
+  }
+
+  .ai-modal--centered .ai-modal__structured-content {
+    align-items: center;
+    text-align: center;
+  }
+
+  /* Icon container - just for layout, no styling */
+  .ai-modal__icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* Title */
+  .ai-modal__title {
+    font-size: var(--ai-modal-title-size);
+    font-weight: var(--ai-modal-title-weight);
+    margin: 0;
+    color: var(--ai-color-black, #000);
+    line-height: 1.3;
+  }
+
+  /* Text content */
+  .ai-modal__text {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--ai-modal-gap) / 2);
+    width: 100%;
+  }
+
+  .ai-modal__paragraph {
+    font-size: var(--ai-modal-text-size);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--ai-modal-text-line-height);
+    margin: 0;
+    color: var(--ai-color-black);
+  }
+
+  /* Actions */
+  .ai-modal__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ai-size-12, 0.75rem);
+    width: 100%;
+    margin-top: calc(var(--ai-modal-gap) / 2);
+  }
+
+  .ai-modal__button {
+    width: 100%;
+  }
+  /*! purgecss end ignore */
+</style>

package/src/components/index.ts

@@ -14,6 +14,7 @@ export { default as ApiDocSubNavList } from './ApiDocSubNavList.svelte';
 export { default as ApiDocSubNavMenuItem } from './ApiDocSubNavMenuItem.svelte';
 export { default as PlatformFooter } from './PlatformFooter.svelte';
 export { default as PlatformFooterMenu } from './PlatformFooterMenu.svelte';
+export { default as Modal } from './Modal.svelte';
 
 // Icon Components
 export * from './icons/index.js';

package/src/content/api/getting-started.mdx

@@ -27,6 +27,13 @@ USAi API is organized around [REST](http://en.wikipedia.org/wiki/Representationa
 - [Llama 3.2 11B](https://www.llama.com/docs/model-cards-and-prompt-formats/llama3_2/)
 - [Llama 4 Maverick](https://www.llama.com/docs/model-cards-and-prompt-formats/llama4/)
 
+**OpenAI models**
+- [GPT 5.2](https://developers.openai.com/api/docs/models/gpt-5.2)
+- [GPT 5.4](https://developers.openai.com/api/docs/models/gpt-5.4)
+
+**xAI models**
+- [Grok 4](https://docs.x.ai/developers/models/grok-4.20)
+
 The interface is modeled after the [OpenAI Chat Completion API](https://platform.openai.com/docs/guides/text?api-mode=responses). We will continue to add more models over time; we may also remove models if they are found to not meet our standards. You will be notified if a model is removed. 
 
 Each model we draw on has unique capabilities. Models may also respond differently to the same API request. Below is a summary of each endpoint’s functionality:
@@ -58,7 +65,9 @@ Because the underlying platforms have different capabilities and interfaces, not
 
 #### Guardrail limitations
 
-We do not have guardrails beyond those provided by our model providers; this means that an API user has full control over what inputs and outputs are allowed when using the API. We expect API users to interact with the API ethically and deliberately, and add their own guardrails and system prompts as needed. We recommend implementing system prompts when using the API in situations where you do not know what inputs the model will receive. 
+For OpenAI and xAI models we have Azure's DefaultV2 content filtering enabled, which provides automated harm detection across four categories (Hate, Self-Harm, Sexual, Violence) plus advanced protections against prompt injection, and copyright violations. When the platform detects harmful content it will raise an HTTP 400 error in non-streaming contexts and return an error chunk when streaming.
+
+For Google, Anthropic, and Meta models we do not have guardrails beyond those provided by our model providers; this means that an API user has full control over what inputs and outputs are allowed when using the API. We expect API users to interact with the API ethically and deliberately, and add their own guardrails and system prompts as needed. We recommend implementing system prompts when using the API in situations where you do not know what inputs the model will receive. 
 
 System prompts should address your needs and concerns. Some of the system prompts in USAi Chat include:
 - You are a helpful assistant that works for a government agency.