@sierragridteam/design-system 0.0.0-stage → 0.3.0

package/README.md

@@ -1,3 +1,18 @@
-# Temporary Holding Version
+# SIERRA design system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared Astro components, CSS tokens, and browser UI helpers.
+
+```sh
+pnpm add @sierragridteam/design-system
+```
+
+Import components from `@sierragridteam/design-system/components/Button.astro`,
+styles from `@sierragridteam/design-system/styles/global.css`, and browser helpers
+from `@sierragridteam/design-system/lib/controls`.
+
+See https://github.com/sierragridteam/sierra-ds for the demo and usage documentation.
+
+Copyright © 2026 Signal Integrity & Emergency Radio Response Alliance.
+All rights reserved. Public availability does not grant permission to reuse
+code, design, name, or brand assets. Contact info@sierragridteam.org for permission.
+Third-party dependencies retain their own licenses.

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@sierragridteam/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "type": "module",
+  "files": [
+    "src",
+    "assets"
+  ],
+  "exports": {
+    "./components/*": "./src/components/*",
+    "./styles/*": "./src/styles/*",
+    "./lib/*": "./src/lib/*.ts",
+    "./assets/*": "./assets/*"
+  },
+  "peerDependencies": {
+    "astro": "^7.3.4",
+    "maplibre-gl": "^5.24.0"
+  },
+  "peerDependenciesMeta": {
+    "maplibre-gl": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@types/geojson": "^7946.0.16"
+  },
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sierragridteam/sierra-ds.git",
+    "directory": "packages/design-system"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/Badge.astro

@@ -0,0 +1,13 @@
+---
+/** Badge — status label with a dot. Tones map to the shared state colours. */
+interface Props {
+  tone?: 'ok' | 'elevated' | 'alarm' | 'deep' | 'muted';
+  dot?: boolean;
+  class?: string;
+}
+const { tone = 'muted', dot = true, class: cls } = Astro.props;
+---
+
+<span class:list={['badge', tone !== 'muted' && `badge--${tone}`, !dot && 'badge--plain', cls]}>
+  <slot />
+</span>

package/src/components/Button.astro

@@ -0,0 +1,36 @@
+---
+/** Button — renders <a> when href is given, else <button>. Emits the global .btn classes. */
+interface Props {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
+  size?: 'md' | 'sm';
+  href?: string;
+  type?: 'button' | 'submit';
+  block?: boolean;
+  icon?: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+const {
+  variant = 'primary',
+  size = 'md',
+  href,
+  type = 'button',
+  block = false,
+  icon,
+  disabled,
+  class: cls,
+  ...rest
+} = Astro.props;
+const Tag = href ? 'a' : 'button';
+const classes = ['btn', `btn--${variant}`, size === 'sm' && 'btn--sm', block && 'btn--block', cls];
+---
+
+<Tag class:list={classes} href={href} type={href ? undefined : type} disabled={disabled} {...rest}>
+  {icon && (
+    <svg class="icon" aria-hidden="true">
+      <use href={`#i-${icon}`} />
+    </svg>
+  )}
+  <slot />
+</Tag>

package/src/components/Callout.astro

@@ -0,0 +1,17 @@
+---
+/** Callout — banner surface with a coloured left rule. Orange is for risk only. */
+interface Props {
+  tone?: 'green' | 'brass' | 'orange';
+  title?: string;
+  class?: string;
+}
+const { tone = 'green', title, class: cls } = Astro.props;
+---
+
+<div
+  class:list={['callout', tone !== 'green' && `callout--${tone}`, cls]}
+  role={tone === 'orange' ? 'alert' : undefined}
+>
+  {title && <span class="callout__title">{title}</span>}
+  <slot />
+</div>

package/src/components/Card.astro

@@ -0,0 +1,33 @@
+---
+/** Card — flat panel: card surface, tan border, 4px radius, never a shadow. */
+interface Props {
+  title?: string;
+  padded?: boolean;
+  surface?: 'card' | 'raised' | 'banner';
+  as?: 'div' | 'section' | 'article';
+  class?: string;
+  id?: string;
+}
+const { title, padded = true, surface = 'card', as: Tag = 'div', class: cls, id } = Astro.props;
+---
+
+<Tag class:list={['card', surface !== 'card' && `card--${surface}`, cls]} id={id}>
+  {(title || Astro.slots.has('actions')) && (
+    <div class="card__header">
+      {title && <h3 class="card__title">{title}</h3>}
+      <slot name="actions" />
+    </div>
+  )}
+  {padded ? (
+    <div class="card__body">
+      <slot />
+    </div>
+  ) : (
+    <slot />
+  )}
+  {Astro.slots.has('footer') && (
+    <div class="card__footer">
+      <slot name="footer" />
+    </div>
+  )}
+</Tag>

package/src/components/CopyButton.astro

@@ -0,0 +1,81 @@
+---
+import Icon from "./Icon.astro";
+interface Props {
+  value: string;
+  label?: string;
+}
+const { value, label = "Copy value" } = Astro.props;
+---
+
+<sierra-copy data-value={value}>
+  <button
+    type="button"
+    class="btn btn--ghost btn--sm btn--icon"
+    aria-label={label}
+    title={label}
+  >
+    <span data-copy-icon>
+      <Icon name="copy" />
+    </span>
+    <span data-copy-check hidden>
+      <Icon name="check" />
+    </span>
+  </button>
+  <span class="sr-only" role="status" aria-live="polite"></span>
+</sierra-copy>
+<script>
+  class SierraCopy extends HTMLElement {
+    controller?: AbortController;
+    timer?: ReturnType<typeof setTimeout>;
+    connectedCallback() {
+      this.controller?.abort();
+      this.controller = new AbortController();
+      const { signal } = this.controller;
+      const button = this.querySelector<HTMLButtonElement>("button")!;
+      const icon = this.querySelector<HTMLElement>("[data-copy-icon]")!;
+      const check = this.querySelector<HTMLElement>("[data-copy-check]")!;
+      const status = this.querySelector<HTMLElement>("[role=status]")!;
+      const originalTitle = button.title;
+      button.addEventListener(
+        "click",
+        async () => {
+          clearTimeout(this.timer);
+          icon.hidden = false;
+          check.hidden = true;
+          status.className = "sr-only";
+          status.textContent = "";
+          button.disabled = true;
+          try {
+            await navigator.clipboard.writeText(this.dataset.value ?? "");
+            if (signal.aborted) return;
+            icon.hidden = true;
+            check.hidden = false;
+            status.textContent = "Copied.";
+            button.title = "Copied";
+            this.timer = setTimeout(() => {
+              icon.hidden = false;
+              check.hidden = true;
+              button.title = originalTitle;
+              status.textContent = "";
+            }, 1800);
+          } catch {
+            if (signal.aborted) return;
+            status.className = "ds-copy-error";
+            status.textContent =
+              "Could not copy. Select the text to copy manually.";
+            button.title = originalTitle;
+          } finally {
+            if (!signal.aborted) button.disabled = false;
+          }
+        },
+        { signal },
+      );
+    }
+    disconnectedCallback() {
+      this.controller?.abort();
+      clearTimeout(this.timer);
+    }
+  }
+  if (!customElements.get("sierra-copy"))
+    customElements.define("sierra-copy", SierraCopy);
+</script>

package/src/components/DataDiff.astro

@@ -0,0 +1,50 @@
+---
+import { formatDataValue, type DataChange } from "../lib/data-values";
+interface Props {
+  label: string;
+  changes: DataChange[];
+  emptyMessage?: string;
+}
+const { label, changes, emptyMessage = "No changes." } = Astro.props;
+---
+
+<section class="ds-diff" aria-label={label}>
+  <div class="ds-diff-heading">
+    <strong>{label}</strong>
+    <span class="meta">
+      {changes.length} {changes.length === 1 ? "change" : "changes"}
+    </span>
+  </div>
+  {changes.length ? (
+    <ol class="ds-diff-list">
+      {changes.map((change) => (
+        <li data-kind={change.kind}>
+          <code class="ds-diff-field">{change.path || "(root)"}</code>
+          <div class="ds-diff-values">
+            <span class="sr-only">
+              {change.kind === "added"
+                ? "Added: "
+                : change.kind === "removed"
+                  ? "Removed: "
+                  : "Before: "}
+            </span>
+            {change.kind !== "added" && (
+              <del class="ds-diff-before">{formatDataValue(change.before)}</del>
+            )}{" "}
+            <span class="ds-diff-arrow" aria-hidden="true">
+              {change.kind === "added" ? "+" : "→"}
+            </span>{" "}
+            {change.kind === "changed" && <span class="sr-only">After: </span>}
+            {change.kind === "removed" ? (
+              <span class="ds-diff-removed">removed</span>
+            ) : (
+              <ins class="ds-diff-after">{formatDataValue(change.after)}</ins>
+            )}
+          </div>
+        </li>
+      ))}
+    </ol>
+  ) : (
+    <p class="ds-data-note">{emptyMessage}</p>
+  )}
+</section>

package/src/components/DataRow.astro

@@ -0,0 +1,23 @@
+---
+/** A record and its annotation are always one semantic row. Slot the remaining td cells. */
+interface Props {
+  label: string;
+  description?: string;
+  note?: string;
+  noteTone?: "neutral" | "caution";
+}
+const { label, description, note, noteTone = "neutral" } = Astro.props;
+---
+
+<tr class="ds-data-row">
+  <th scope="row">
+    <span>{label}</span>
+    {description && <p class="ds-data-note">{description}</p>}
+    {note && (
+      <p class="ds-row-note ds-data-note" data-tone={noteTone}>
+        {note}
+      </p>
+    )}
+  </th>
+  <slot />
+</tr>

package/src/components/DataStatus.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  state: "loading" | "fresh" | "stale" | "unavailable" | "empty";
+  message?: string;
+  updatedAt?: string;
+}
+const { state, message, updatedAt } = Astro.props;
+const labels = {
+  loading: "Loading data",
+  fresh: "Data available",
+  stale: "Showing last known data",
+  unavailable: "Data unavailable — state unknown",
+  empty: "No matching records",
+};
+---
+
+<div class="ds-data-status" data-state={state} role="status">
+  <strong>{labels[state]}</strong>
+  {message && <span>{message}</span>}
+  {updatedAt && (
+    <span>
+      Last success: <time datetime={updatedAt}>{updatedAt}</time>
+    </span>
+  )}
+  <slot />
+</div>

package/src/components/DataTable.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  caption: string;
+  columns: { label: string; numeric?: boolean }[];
+}
+const { caption, columns } = Astro.props;
+---
+
+<div class="table-wrap" tabindex="0" role="region" aria-label={caption}>
+  <table class="table ds-data-table">
+    <caption>{caption}</caption>
+    <thead>
+      <tr>
+        {columns.map((column) => (
+          <th scope="col" class:list={{ "ds-numeric": column.numeric }}>
+            {column.label}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      <slot />
+    </tbody>
+  </table>
+</div>

package/src/components/EmptyState.astro

@@ -0,0 +1,17 @@
+---
+/** EmptyState — for lists with nothing in them. Calm, on the hero tint. */
+interface Props {
+  title: string;
+  icon?: string;
+  class?: string;
+}
+const { title, icon = 'inbox', class: cls } = Astro.props;
+---
+
+<div class:list={['empty', cls]}>
+  <svg class="icon" aria-hidden="true">
+    <use href={`#i-${icon}`}></use>
+  </svg>
+  <p class="empty__title">{title}</p>
+  <slot />
+</div>

package/src/components/Field.astro

@@ -0,0 +1,25 @@
+---
+/** Field — label + control + help/error. The control is slotted so any input type works. */
+interface Props {
+  label: string;
+  for: string;
+  help?: string;
+  optional?: boolean;
+  class?: string;
+}
+const { label, for: htmlFor, help, optional = false, class: cls } = Astro.props;
+---
+
+<div class:list={['field', cls]}>
+  <label class="field__label" for={htmlFor}>
+    {label}
+    {optional && <span class="field__optional">(optional)</span>}
+  </label>
+  <slot />
+  {help && (
+    <p class="field__help" id={`${htmlFor}-help`}>
+      {help}
+    </p>
+  )}
+  <p class="field__error" id={`${htmlFor}-error`} hidden></p>
+</div>

package/src/components/FilterBar.astro

@@ -0,0 +1,10 @@
+---
+interface Props {
+  label?: string;
+}
+const { label = "Filters" } = Astro.props;
+---
+
+<div class="ds-filter-bar" role="group" aria-label={label}>
+  <slot />
+</div>