@happyvertical/smrt-ui 0.30.0

package/dist/styles/tokens.css

@@ -0,0 +1,76 @@
+/**
+ * SMRT Svelte Design Tokens
+ * CSS custom properties for consistent theming across components
+ */
+
+:root {
+  /* Colors - Primary */
+  --color-primary-main: #1976d2;
+  --color-primary-light: #e3f2fd;
+  --color-primary-dark: #1565c0;
+
+  /* Colors - Neutral */
+  --color-neutral-white: #ffffff;
+  --color-neutral-gray100: #f5f5f5;
+  --color-neutral-gray200: #eeeeee;
+  --color-neutral-gray300: #e0e0e0;
+  --color-neutral-gray400: #9ca3af;
+  --color-neutral-black: #000000;
+
+  /* Colors - Text */
+  --color-text-primary: #212121;
+  --color-text-secondary: #757575;
+  --color-text-inverse: #ffffff;
+
+  /* Colors - Semantic */
+  --color-semantic-error: #f44336;
+  --color-semantic-success: #4caf50;
+  --color-semantic-warning: #ff9800;
+  --color-semantic-info: #2196f3;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+  /* Font Sizes */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.5rem;
+  --border-radius-lg: 0.75rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Transitions */
+  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-fast: 150ms;
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/test-support/a11y.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Accessibility assertion helper for component golden tests (Sweep L4, #1423).
+ *
+ * Runs axe-core against a rendered container and fails the test with a readable
+ * report if any violations are found. Use after a Testing Library `render()`:
+ *
+ *   const { container } = render(MyComponent, { props });
+ *   await expectNoA11yViolations(container);
+ *
+ * `color-contrast` is disabled by default: jsdom has no layout/paint engine, so
+ * contrast can't be computed and the rule produces non-deterministic noise.
+ * Pass `{ rules: { 'color-contrast': { enabled: true } } }` to override.
+ */
+import axe from 'axe-core';
+export declare function expectNoA11yViolations(container: HTMLElement, options?: axe.RunOptions): Promise<void>;
+//# sourceMappingURL=a11y.d.ts.map

package/dist/test-support/a11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/test-support/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,GAAG,MAAM,UAAU,CAAC;AAG3B,wBAAsB,sBAAsB,CAC1C,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE,GAAG,CAAC,UAAe,GAC3B,OAAO,CAAC,IAAI,CAAC,CAmBf"}

package/dist/test-support/a11y.js

@@ -0,0 +1,32 @@
+/**
+ * Accessibility assertion helper for component golden tests (Sweep L4, #1423).
+ *
+ * Runs axe-core against a rendered container and fails the test with a readable
+ * report if any violations are found. Use after a Testing Library `render()`:
+ *
+ *   const { container } = render(MyComponent, { props });
+ *   await expectNoA11yViolations(container);
+ *
+ * `color-contrast` is disabled by default: jsdom has no layout/paint engine, so
+ * contrast can't be computed and the rule produces non-deterministic noise.
+ * Pass `{ rules: { 'color-contrast': { enabled: true } } }` to override.
+ */
+import axe from 'axe-core';
+import { expect } from 'vitest';
+export async function expectNoA11yViolations(container, options = {}) {
+    const results = await axe.run(container, {
+        rules: { 'color-contrast': { enabled: false } },
+        ...options,
+    });
+    if (results.violations.length > 0) {
+        const report = results.violations
+            .map((v) => {
+            const targets = v.nodes
+                .map((n) => `      - ${n.target.join(' ')}`)
+                .join('\n');
+            return `  [${v.id}] ${v.help}\n    ${v.helpUrl}\n${targets}`;
+        })
+            .join('\n');
+        expect.fail(`axe found ${results.violations.length} accessibility violation(s):\n${report}`);
+    }
+}

package/dist/test-support/setup.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Vitest setup for smrt-svelte component tests (Sweep L4, #1423).
+ *
+ * Registered via `setupFiles` in vitest.config.ts (the smrt-vitest plugin
+ * appends its own setup alongside this one). Provides:
+ *   - jest-dom matchers (`toBeInTheDocument`, `toHaveAttribute`, `toBeDisabled`, …)
+ *   - Testing Library auto-cleanup after each test (unmounts mounted components
+ *     so the jsdom document doesn't leak between tests).
+ */
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=setup.d.ts.map

package/dist/test-support/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test-support/setup.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,kCAAkC,CAAC"}

package/dist/test-support/setup.js

@@ -0,0 +1,33 @@
+/**
+ * Vitest setup for smrt-svelte component tests (Sweep L4, #1423).
+ *
+ * Registered via `setupFiles` in vitest.config.ts (the smrt-vitest plugin
+ * appends its own setup alongside this one). Provides:
+ *   - jest-dom matchers (`toBeInTheDocument`, `toHaveAttribute`, `toBeDisabled`, …)
+ *   - Testing Library auto-cleanup after each test (unmounts mounted components
+ *     so the jsdom document doesn't leak between tests).
+ */
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/svelte';
+import { afterEach } from 'vitest';
+afterEach(() => {
+    cleanup();
+});
+// jsdom does not implement the native <dialog> modal methods, so components
+// that drive a dialog via showModal()/close() (e.g. Modal, ConfirmDialog) throw
+// on mount. Polyfill the minimum: toggle the `open` property (which jsdom
+// reflects to the attribute, giving the element its `dialog` role) and emit the
+// matching events.
+if (typeof HTMLDialogElement !== 'undefined') {
+    if (!HTMLDialogElement.prototype.showModal) {
+        HTMLDialogElement.prototype.showModal = function showModal() {
+            this.open = true;
+        };
+    }
+    if (!HTMLDialogElement.prototype.close) {
+        HTMLDialogElement.prototype.close = function close() {
+            this.open = false;
+            this.dispatchEvent(new Event('close'));
+        };
+    }
+}

package/dist/theme/ThemeProvider.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { onMount } from 'svelte';
+import {
+  setThemeContext,
+  type ThemeContext,
+  type ThemeState,
+} from './context.js';
+import {
+  type ColorScheme,
+  defaultThemeConfig,
+  generateThemeVariables,
+  type ThemeConfig,
+} from './tokens.js';
+
+interface Props {
+  /** Initial color scheme */
+  colorScheme?: ColorScheme;
+  /** Primary color override */
+  primaryColor?: string;
+  /** Border radius scale */
+  borderRadius?: ThemeConfig['borderRadius'];
+  /** Custom CSS variable overrides */
+  overrides?: Record<string, string>;
+  /** Persist preference to localStorage */
+  persist?: boolean;
+  /** Storage key for persistence */
+  storageKey?: string;
+  /** Content */
+  children: Snippet;
+}
+
+let {
+  colorScheme = 'system',
+  primaryColor,
+  borderRadius = 'md',
+  overrides = {},
+  persist = true,
+  storageKey = 'smrt-theme',
+  children,
+}: Props = $props();
+
+// Internal state
+let config = $state<ThemeConfig>({
+  colorScheme: 'system',
+  primaryColor: defaultThemeConfig.primaryColor,
+  borderRadius: 'md',
+  overrides: {},
+});
+let appliedColorScheme: ColorScheme | undefined;
+let appliedPrimaryColor: string | undefined;
+let appliedBorderRadius: ThemeConfig['borderRadius'] | undefined;
+let appliedOverrides: Record<string, string> | undefined;
+
+$effect(() => {
+  if (
+    appliedColorScheme === colorScheme &&
+    appliedPrimaryColor === primaryColor &&
+    appliedBorderRadius === borderRadius &&
+    appliedOverrides === overrides
+  ) {
+    return;
+  }
+
+  appliedColorScheme = colorScheme;
+  appliedPrimaryColor = primaryColor;
+  appliedBorderRadius = borderRadius;
+  appliedOverrides = overrides;
+
+  config = {
+    colorScheme,
+    primaryColor: primaryColor ?? defaultThemeConfig.primaryColor,
+    borderRadius,
+    overrides,
+  };
+});
+
+let systemPrefersDark = $state(false);
+let mounted = $state(false);
+
+// Resolved scheme (never 'system')
+const resolvedScheme = $derived<'light' | 'dark'>(
+  config.colorScheme === 'system'
+    ? systemPrefersDark
+      ? 'dark'
+      : 'light'
+    : config.colorScheme,
+);
+
+const isDark = $derived(resolvedScheme === 'dark');
+
+// Generate CSS variables
+const cssVariables = $derived(() => {
+  const vars = generateThemeVariables(isDark);
+
+  // Override primary color if specified
+  if (
+    config.primaryColor &&
+    config.primaryColor !== defaultThemeConfig.primaryColor
+  ) {
+    vars['--smrt-color-primary'] = config.primaryColor;
+  }
+
+  // Apply custom overrides
+  return { ...vars, ...config.overrides };
+});
+
+// Create style string
+const styleString = $derived(() => {
+  const vars = cssVariables();
+  return Object.entries(vars)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('; ');
+});
+
+// Theme state for context
+const themeState = $derived<ThemeState>({
+  colorScheme: config.colorScheme,
+  resolvedScheme,
+  isDark,
+  config,
+});
+
+// Context methods
+function setColorScheme(scheme: ColorScheme): void {
+  config.colorScheme = scheme;
+  if (persist && typeof localStorage !== 'undefined') {
+    try {
+      localStorage.setItem(storageKey, scheme);
+    } catch {
+      // Ignore storage errors (e.g. quota exceeded, access denied in private browsing)
+    }
+  }
+}
+
+function toggleColorScheme(): void {
+  const newScheme = isDark ? 'light' : 'dark';
+  setColorScheme(newScheme);
+}
+
+function updateConfig(updates: Partial<ThemeConfig>): void {
+  config = { ...config, ...updates };
+}
+
+// Create context
+const context: ThemeContext = {
+  get state() {
+    return themeState;
+  },
+  setColorScheme,
+  toggleColorScheme,
+  updateConfig,
+};
+
+setThemeContext(context);
+
+onMount(() => {
+  // Check system preference
+  if (typeof window !== 'undefined') {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    systemPrefersDark = mediaQuery.matches;
+
+    // Listen for system preference changes
+    const handler = (e: MediaQueryListEvent) => {
+      systemPrefersDark = e.matches;
+    };
+    mediaQuery.addEventListener('change', handler);
+
+    // Load persisted preference
+    if (persist) {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored && ['light', 'dark', 'system'].includes(stored)) {
+          config.colorScheme = stored as ColorScheme;
+        }
+      } catch {
+        // Ignore storage errors (e.g. access denied in private browsing)
+      }
+    }
+
+    mounted = true;
+
+    return () => {
+      mediaQuery.removeEventListener('change', handler);
+    };
+  }
+});
+
+// Update document class for global dark mode styling
+$effect(() => {
+  if (typeof document !== 'undefined' && mounted) {
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.setAttribute('data-theme', resolvedScheme);
+  }
+});
+</script>
+
+<div class="smrt-theme-root" class:dark={isDark} style={styleString()} data-theme={resolvedScheme}>
+  {@render children()}
+</div>
+
+<style>
+  .smrt-theme-root {
+    /* Ensure theme variables cascade to all children */
+    display: contents;
+  }
+</style>

package/dist/theme/ThemeProvider.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type ColorScheme, type ThemeConfig } from './tokens.js';
+interface Props {
+    /** Initial color scheme */
+    colorScheme?: ColorScheme;
+    /** Primary color override */
+    primaryColor?: string;
+    /** Border radius scale */
+    borderRadius?: ThemeConfig['borderRadius'];
+    /** Custom CSS variable overrides */
+    overrides?: Record<string, string>;
+    /** Persist preference to localStorage */
+    persist?: boolean;
+    /** Storage key for persistence */
+    storageKey?: string;
+    /** Content */
+    children: Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

package/dist/theme/ThemeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,EACL,KAAK,WAAW,EAGhB,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAGrB,UAAU,KAAK;IACb,2BAA2B;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqLD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/theme/context.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme context for sharing theme state across components
+ */
+import type { ColorScheme, ThemeConfig } from './tokens.js';
+/**
+ * Theme context key
+ */
+export declare const THEME_KEY: unique symbol;
+/**
+ * Theme state interface
+ */
+export interface ThemeState {
+    /** Current color scheme */
+    colorScheme: ColorScheme;
+    /** Resolved color scheme (never 'system') */
+    resolvedScheme: 'light' | 'dark';
+    /** Whether dark mode is active */
+    isDark: boolean;
+    /** Full theme configuration */
+    config: ThemeConfig;
+}
+/**
+ * Theme context interface with methods
+ */
+export interface ThemeContext {
+    /** Current theme state */
+    state: ThemeState;
+    /** Set color scheme preference */
+    setColorScheme: (scheme: ColorScheme) => void;
+    /** Toggle between light and dark */
+    toggleColorScheme: () => void;
+    /** Update theme configuration */
+    updateConfig: (config: Partial<ThemeConfig>) => void;
+}
+/**
+ * Set theme context (used by ThemeProvider)
+ */
+export declare function setThemeContext(context: ThemeContext): void;
+/**
+ * Get theme context
+ * @throws If called outside of ThemeProvider
+ */
+export declare function getThemeContext(): ThemeContext;
+/**
+ * Try to get theme context
+ * Returns null if not available (doesn't throw)
+ */
+export declare function tryGetThemeContext(): ThemeContext | null;
+//# sourceMappingURL=context.d.ts.map

package/dist/theme/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/theme/context.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS,eAAuB,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,6CAA6C;IAC7C,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,iCAAiC;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAU9C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,GAAG,IAAI,CAExD"}

package/dist/theme/context.js

@@ -0,0 +1,32 @@
+/**
+ * Theme context for sharing theme state across components
+ */
+import { getContext, setContext } from 'svelte';
+/**
+ * Theme context key
+ */
+export const THEME_KEY = Symbol('smrt-theme');
+/**
+ * Set theme context (used by ThemeProvider)
+ */
+export function setThemeContext(context) {
+    setContext(THEME_KEY, context);
+}
+/**
+ * Get theme context
+ * @throws If called outside of ThemeProvider
+ */
+export function getThemeContext() {
+    const context = getContext(THEME_KEY);
+    if (!context) {
+        throw new Error('Theme context not found. Make sure to wrap your app with <ThemeProvider>');
+    }
+    return context;
+}
+/**
+ * Try to get theme context
+ * Returns null if not available (doesn't throw)
+ */
+export function tryGetThemeContext() {
+    return getContext(THEME_KEY) ?? null;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Theme system exports
+ */
+export { getThemeContext, setThemeContext, THEME_KEY, type ThemeContext, type ThemeState, tryGetThemeContext, } from './context.js';
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+export { borderRadius, type ColorScheme, darkColors, defaultThemeConfig, duration, easing, elevation, generateColorVariables, generateThemeVariables, lightColors, spacing, type ThemeConfig, typography, } from './tokens.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EACL,YAAY,EACZ,KAAK,WAAW,EAChB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,sBAAsB,EACtB,sBAAsB,EACtB,WAAW,EACX,OAAO,EACP,KAAK,WAAW,EAChB,UAAU,GACX,MAAM,aAAa,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,9 @@
+/**
+ * Theme system exports
+ */
+// Context
+export { getThemeContext, setThemeContext, THEME_KEY, tryGetThemeContext, } from './context.js';
+// Components
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+// Tokens
+export { borderRadius, darkColors, defaultThemeConfig, duration, easing, elevation, generateColorVariables, generateThemeVariables, lightColors, spacing, typography, } from './tokens.js';