@happyvertical/smrt-ui 0.30.0

package/dist/components/display/Icon.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+/**
+ * Icon - SVG icon component
+ *
+ * Displays SVG icons from presets or custom paths.
+ *
+ * Accessibility:
+ * - Use aria-label for informative icons
+ * - Uses aria-hidden="true" by default (decorative)
+ */
+
+/** Props for Icon component */
+export interface Props {
+  /** Preset icon name */
+  name?: string;
+  /** Custom SVG path */
+  path?: string;
+  /** Icon size (number for pixels, string for CSS value) */
+  size?: string | number;
+  /** Icon color */
+  color?: string;
+  /** SVG viewBox */
+  viewBox?: string;
+  /** Accessible label (makes icon informative) */
+  'aria-label'?: string;
+}
+
+const {
+  name,
+  path,
+  size = 24,
+  color = 'currentColor',
+  viewBox = '0 0 24 24',
+  'aria-label': ariaLabel,
+}: Props = $props();
+
+const isInformative = $derived(!!ariaLabel);
+
+// Common M3 Icon Paths (Simplified)
+const presets: Record<string, string> = {
+  menu: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z',
+  search:
+    'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
+  close:
+    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z',
+  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z',
+  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z',
+  'chevron-down': 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
+  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
+  add: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+  mic: 'M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.04 6.43 5 7.07V21h4v-2.93c2.96-.64 5-3.54 5-7.07h-2z',
+};
+
+const finalPath = $derived(path ?? (name ? presets[name] : ''));
+const pxSize = $derived(typeof size === 'number' ? `${size}px` : size);
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={pxSize}
+  height={pxSize}
+  {viewBox}
+  fill={color}
+  aria-hidden={!isInformative}
+  aria-label={ariaLabel}
+  role={isInformative ? 'img' : undefined}
+>
+  <path d={finalPath} />
+</svg>
+
+<style>
+  svg {
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+</style>

package/dist/components/display/Icon.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Icon - SVG icon component
+ *
+ * Displays SVG icons from presets or custom paths.
+ *
+ * Accessibility:
+ * - Use aria-label for informative icons
+ * - Uses aria-hidden="true" by default (decorative)
+ */
+/** Props for Icon component */
+export interface Props {
+    /** Preset icon name */
+    name?: string;
+    /** Custom SVG path */
+    path?: string;
+    /** Icon size (number for pixels, string for CSS value) */
+    size?: string | number;
+    /** Icon color */
+    color?: string;
+    /** SVG viewBox */
+    viewBox?: string;
+    /** Accessible label (makes icon informative) */
+    'aria-label'?: string;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;
+//# sourceMappingURL=Icon.svelte.d.ts.map

package/dist/components/display/Icon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/Icon.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,+BAA+B;AAC/B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/display/StatusBadge.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+/**
+ * StatusBadge - Generic status indicator badge
+ *
+ * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
+ * or allows custom styling via CSS variables.
+ */
+
+import type { StatusType } from './types.js';
+
+/** Props for StatusBadge component */
+export interface Props {
+  /** The status value to display */
+  status: string;
+  /** Pre-defined color scheme type */
+  type?: StatusType;
+  /** Badge size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Visual variant */
+  variant?: 'filled' | 'outline';
+  /** Optional custom label (defaults to status value) */
+  label?: string;
+}
+
+const {
+  status,
+  type = 'default',
+  size = 'md',
+  variant = 'filled',
+  label,
+}: Props = $props();
+
+// Color mappings for different status domains - uses CSS variables with fallbacks
+const colorSchemes: Record<
+  StatusType,
+  Record<string, { bg: string; text: string; border?: string }>
+> = {
+  default: {
+    active: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    inactive: {
+      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
+      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+    },
+    pending: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+    error: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+    success: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    warning: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+  },
+  invoice: {
+    draft: {
+      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
+      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+    },
+    sent: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+    viewed: {
+      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
+      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+    },
+    paid: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    overdue: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+    cancelled: {
+      bg: 'var(--smrt-color-error-container, #fecaca)',
+      text: 'var(--smrt-color-on-error-container, #991b1b)',
+    },
+  },
+  project: {
+    lead: {
+      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
+      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+    },
+    quoted: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+    active: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+    on_hold: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+    completed: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    archived: {
+      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
+      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+    },
+  },
+  expense: {
+    unbilled: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+    billed: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    reimbursed: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+    rejected: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+  },
+  time: {
+    draft: {
+      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
+      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+    },
+    submitted: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+    approved: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    rejected: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+    billed: {
+      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
+      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+    },
+  },
+  compliance: {
+    valid: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    expiring: {
+      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
+      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+    },
+    expired: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+    pending: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+  },
+  estimate: {
+    draft: {
+      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
+      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+    },
+    presented: {
+      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
+      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+    },
+    accepted: {
+      bg: 'var(--smrt-color-primary-container, #dcfce7)',
+      text: 'var(--smrt-color-on-primary-container, #166534)',
+    },
+    declined: {
+      bg: 'var(--smrt-color-error-container, #fee2e2)',
+      text: 'var(--smrt-color-on-error-container, #dc2626)',
+    },
+    expired: {
+      bg: 'var(--smrt-color-error-container, #fecaca)',
+      text: 'var(--smrt-color-on-error-container, #991b1b)',
+    },
+  },
+};
+
+// Normalize status for lookup (lowercase, handle spaces/underscores)
+const normalizedStatus = $derived(status.toLowerCase().replace(/[\s-]/g, '_'));
+
+// Get colors for current status
+const colors = $derived.by(() => {
+  const scheme = colorSchemes[type] ?? colorSchemes.default;
+  return (
+    scheme[normalizedStatus] ?? {
+      bg: 'var(--smrt-color-surface-container-highest, #e5e7eb)',
+      text: 'var(--smrt-color-on-surface-variant, #374151)',
+    }
+  );
+});
+
+// Format display label
+const displayLabel = $derived(label ?? status.replace(/_/g, ' '));
+</script>
+
+<span
+  class="status-badge"
+  class:sm={size === 'sm'}
+  class:lg={size === 'lg'}
+  class:outline={variant === 'outline'}
+  style:--badge-bg={colors.bg}
+  style:--badge-text={colors.text}
+>
+  {displayLabel}
+</span>
+
+<style>
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    font-weight: var(--smrt-typography-label-medium-weight, 500);
+    border-radius: var(--smrt-radius-full, 9999px);
+    white-space: nowrap;
+    text-transform: capitalize;
+    background-color: var(--badge-bg);
+    color: var(--badge-text);
+    line-height: 1.25;
+  }
+
+  .status-badge.sm {
+    padding: 0.125rem 0.5rem;
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+  }
+
+  .status-badge.lg {
+    padding: 0.375rem 1rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .status-badge.outline {
+    background-color: transparent;
+    border: 1px solid var(--badge-text);
+  }
+</style>

package/dist/components/display/StatusBadge.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * StatusBadge - Generic status indicator badge
+ *
+ * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
+ * or allows custom styling via CSS variables.
+ */
+import type { StatusType } from './types.js';
+/** Props for StatusBadge component */
+export interface Props {
+    /** The status value to display */
+    status: string;
+    /** Pre-defined color scheme type */
+    type?: StatusType;
+    /** Badge size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'filled' | 'outline';
+    /** Optional custom label (defaults to status value) */
+    label?: string;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.svelte.d.ts.map

package/dist/components/display/StatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8MD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/display/__tests__/ConfidenceBadge.test.js

@@ -0,0 +1,96 @@
+/**
+ * Component tests for ConfidenceBadge (Sweep S11, #1416).
+ *
+ * ConfidenceBadge renders an ARIA meter for a 0-100 confidence score. Tests
+ * assert the real API from ConfidenceBadge.svelte — meter semantics
+ * (aria-valuenow/min/max/text), the >=80/>=50/else level→color mapping,
+ * clamping of out-of-range input, percent visibility, default vs custom
+ * aria-label, and axe-cleanliness across levels.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import ConfidenceBadge from '../ConfidenceBadge.svelte';
+describe('ConfidenceBadge', () => {
+    it('exposes meter semantics with the confidence as aria-valuenow', () => {
+        render(ConfidenceBadge, { props: { confidence: 73 } });
+        const meter = screen.getByRole('meter');
+        expect(meter).toHaveAttribute('aria-valuenow', '73');
+        expect(meter).toHaveAttribute('aria-valuemin', '0');
+        expect(meter).toHaveAttribute('aria-valuemax', '100');
+    });
+    it('shows the rounded percentage by default', () => {
+        render(ConfidenceBadge, { props: { confidence: 73.4 } });
+        expect(screen.getByText('73%')).toBeInTheDocument();
+    });
+    it('hides the percentage text when showPercent is false', () => {
+        render(ConfidenceBadge, { props: { confidence: 73, showPercent: false } });
+        expect(screen.queryByText('73%')).not.toBeInTheDocument();
+    });
+    it('derives a default aria-label from the rounded confidence', () => {
+        render(ConfidenceBadge, { props: { confidence: 91.6 } });
+        expect(screen.getByRole('meter')).toHaveAttribute('aria-label', 'Confidence: 92%');
+    });
+    it('uses a custom aria-label when provided', () => {
+        render(ConfidenceBadge, {
+            props: { confidence: 50, 'aria-label': 'OCR certainty' },
+        });
+        expect(screen.getByRole('meter')).toHaveAttribute('aria-label', 'OCR certainty');
+    });
+    it.each([
+        [95, 'high'],
+        [80, 'high'],
+        [65, 'medium'],
+        [50, 'medium'],
+        [30, 'low'],
+        [0, 'low'],
+    ])('reports "%s%%" as %s confidence in aria-valuetext', (value, level) => {
+        render(ConfidenceBadge, { props: { confidence: value } });
+        expect(screen.getByRole('meter')).toHaveAttribute('aria-valuetext', `${level} confidence (${value}%)`);
+    });
+    it('clamps confidence above 100 down to 100', () => {
+        render(ConfidenceBadge, { props: { confidence: 150 } });
+        const meter = screen.getByRole('meter');
+        expect(meter).toHaveAttribute('aria-valuenow', '100');
+        expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+    it('clamps negative confidence up to 0', () => {
+        render(ConfidenceBadge, { props: { confidence: -20 } });
+        const meter = screen.getByRole('meter');
+        expect(meter).toHaveAttribute('aria-valuenow', '0');
+        expect(screen.getByText('0%')).toBeInTheDocument();
+    });
+    it.each([
+        [90, 'primary'],
+        [60, 'secondary'],
+        [20, 'error'],
+    ])('maps %s%% to the %s color token for the bar', (value, token) => {
+        const { container } = render(ConfidenceBadge, {
+            props: { confidence: value },
+        });
+        const badge = container.querySelector('.confidence-badge');
+        expect(badge.style.getPropertyValue('--bar-color')).toContain(`smrt-color-${token}`);
+    });
+    it('appends a custom class alongside the base class', () => {
+        const { container } = render(ConfidenceBadge, {
+            props: { confidence: 50, class: 'my-badge' },
+        });
+        const badge = container.querySelector('.confidence-badge');
+        expect(badge).toHaveClass('my-badge');
+    });
+    it.each([
+        ['sm', 'sm'],
+        ['lg', 'lg'],
+    ])('applies the %s size class', (size, cls) => {
+        const { container } = render(ConfidenceBadge, {
+            props: { confidence: 50, size },
+        });
+        expect(container.querySelector('.confidence-badge')).toHaveClass(cls);
+    });
+    it.each([10, 60, 95])('is axe-clean at %s%% confidence', async (value) => {
+        const { container } = render(ConfidenceBadge, {
+            props: { confidence: value },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/display/__tests__/CurrencyDisplay.test.js

@@ -0,0 +1,114 @@
+/**
+ * Component tests for CurrencyDisplay (Sweep S11, #1416).
+ *
+ * CurrencyDisplay formats a numeric amount (cents or dollars) into a currency
+ * string via Intl.NumberFormat('en-CA'). Expected strings are derived with the
+ * SAME formatter the component uses so assertions stay locale-robust. Tests
+ * assert the real API from CurrencyDisplay.svelte — unit conversion, currency
+ * code, sign handling (negative/zero/showSign), highlight classes, size
+ * classes, and axe-cleanliness.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import CurrencyDisplay from '../CurrencyDisplay.svelte';
+/** Mirror the component's absolute-value currency formatting. */
+function money(absDollars, currency = 'CAD') {
+    return new Intl.NumberFormat('en-CA', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(absDollars);
+}
+describe('CurrencyDisplay', () => {
+    it('formats cents into dollars by default', () => {
+        render(CurrencyDisplay, { props: { amount: 12345 } }); // cents → $123.45
+        expect(screen.getByText(money(123.45))).toBeInTheDocument();
+    });
+    it('treats the amount as dollars when unit=dollars', () => {
+        render(CurrencyDisplay, { props: { amount: 50, unit: 'dollars' } });
+        expect(screen.getByText(money(50))).toBeInTheDocument();
+    });
+    it('formats zero', () => {
+        render(CurrencyDisplay, { props: { amount: 0, unit: 'dollars' } });
+        expect(screen.getByText(money(0))).toBeInTheDocument();
+    });
+    it('prefixes a minus sign for negative amounts', () => {
+        render(CurrencyDisplay, { props: { amount: -2500 } }); // -$25.00
+        expect(screen.getByText(`-${money(25)}`)).toBeInTheDocument();
+    });
+    it('formats a USD amount with the USD currency code', () => {
+        render(CurrencyDisplay, {
+            props: { amount: 1000, unit: 'dollars', currency: 'USD' },
+        });
+        expect(screen.getByText(money(1000, 'USD'))).toBeInTheDocument();
+    });
+    it('shows an explicit + sign for positive amounts when showSign is set', () => {
+        render(CurrencyDisplay, {
+            props: { amount: 1000, unit: 'dollars', showSign: true },
+        });
+        expect(screen.getByText(`+${money(1000)}`)).toBeInTheDocument();
+    });
+    it('shows a - sign for negatives when showSign is set', () => {
+        render(CurrencyDisplay, {
+            props: { amount: -1000, unit: 'dollars', showSign: true },
+        });
+        expect(screen.getByText(`-${money(1000)}`)).toBeInTheDocument();
+    });
+    it('does not add a sign to zero even when showSign is set', () => {
+        render(CurrencyDisplay, {
+            props: { amount: 0, unit: 'dollars', showSign: true },
+        });
+        const text = money(0);
+        expect(screen.getByText(text)).toBeInTheDocument();
+        expect(screen.queryByText(`+${text}`)).not.toBeInTheDocument();
+    });
+    it('applies the negative highlight class only when highlightNegative and amount<0', () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: -100, unit: 'dollars', highlightNegative: true },
+        });
+        expect(container.querySelector('span')).toHaveClass('negative');
+    });
+    it('does not apply the negative class to a positive amount', () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: 100, unit: 'dollars', highlightNegative: true },
+        });
+        expect(container.querySelector('span')).not.toHaveClass('negative');
+    });
+    it('applies the positive highlight class only when highlightPositive and amount>0', () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: 100, unit: 'dollars', highlightPositive: true },
+        });
+        expect(container.querySelector('span')).toHaveClass('positive');
+    });
+    it.each([
+        ['sm', 'sm'],
+        ['lg', 'lg'],
+    ])('applies the %s size class', (size, cls) => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: 100, unit: 'dollars', size },
+        });
+        expect(container.querySelector('span')).toHaveClass(cls);
+    });
+    it('appends a custom class alongside the base class', () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: 100, unit: 'dollars', class: 'my-money' },
+        });
+        const span = container.querySelector('span');
+        expect(span).toHaveClass('currency-display');
+        expect(span).toHaveClass('my-money');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: 12345 },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean for a highlighted negative value', async () => {
+        const { container } = render(CurrencyDisplay, {
+            props: { amount: -5000, highlightNegative: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});