sveltacular 0.0.77 → 1.0.1

package/dist/tables/table-row.svelte

@@ -1,16 +1,96 @@
-<tr>
-	<slot />
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { JsonObject } from '../types/data.js';
+	import { getTableContext } from './table-context.svelte.js';
+
+	let {
+		children,
+		row = undefined,
+		rowIndex = undefined,
+		selectable = false
+	}: {
+		children?: Snippet;
+		row?: JsonObject;
+		rowIndex?: number;
+		selectable?: boolean;
+	} = $props();
+
+	const context = getTableContext();
+
+	// Get row ID for selection
+	let rowId = $derived(
+		row && context?.config.rowIdKey
+			? (row[context.config.rowIdKey] as string | number)
+			: undefined
+	);
+
+	let isSelected = $derived(
+		rowId !== undefined && context ? context.isRowSelected(rowId) : false
+	);
+
+	let canSelect = $derived(selectable && context?.config.enableSelection && rowId !== undefined);
+
+	function handleClick(event: MouseEvent) {
+		if (canSelect && rowId !== undefined && rowIndex !== undefined) {
+			const shiftKey = event.shiftKey;
+			context?.toggleRow(rowId, rowIndex, shiftKey);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (canSelect && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			if (rowId !== undefined && rowIndex !== undefined) {
+				context?.toggleRow(rowId, rowIndex, event.shiftKey);
+			}
+		}
+	}
+</script>
+
+<tr
+	class:selectable={canSelect}
+	class:selected={isSelected}
+	aria-selected={canSelect ? isSelected : undefined}
+	tabindex={canSelect ? 0 : undefined}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	role={canSelect ? 'row' : undefined}
+>
+	{@render children?.()}
 </tr>
 
 <style>
 	tr {
-		background-color: var(--table-row-bg, #fff);
-		color: var(--table-row-fg, #000);
-		border-bottom: solid 1px var(--table-row-border, #000);
+		background-color: var(--table-row-even-bg, #fff);
+		color: var(--table-row-even-fg, #000);
+		border-bottom: solid 1px var(--table-row-even-border, #ddd);
+		transition: background-color 0.15s ease;
 	}
 
 	tr:nth-of-type(odd) {
-		background-color: var(--table-row-alt-bg, #ccc);
-		color: var(--table-row-alt-fg, #000);
+		background-color: var(--table-row-odd-bg, #f9f9f9);
+		color: var(--table-row-odd-fg, #000);
+	}
+
+	tr.selectable {
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--table-row-hover-bg, rgba(0, 0, 0, 0.05));
+		}
+
+		&:focus {
+			outline: 2px solid var(--focus-color, #0066cc);
+			outline-offset: -2px;
+		}
+	}
+
+	tr.selected {
+		background-color: var(--table-row-selected-bg, rgba(0, 102, 204, 0.1)) !important;
+		border-color: var(--table-row-selected-border, #0066cc);
+	}
+
+	tr.selected.selectable:hover {
+		background-color: var(--table-row-selected-hover-bg, rgba(0, 102, 204, 0.15)) !important;
 	}
 </style>

package/dist/tables/table-row.svelte.d.ts

@@ -1,29 +1,11 @@
-/** @typedef {typeof __propDef.props}  TableRowProps */
-/** @typedef {typeof __propDef.events}  TableRowEvents */
-/** @typedef {typeof __propDef.slots}  TableRowSlots */
-export default class TableRow extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TableRowProps = typeof __propDef.props;
-export type TableRowEvents = typeof __propDef.events;
-export type TableRowSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { Snippet } from 'svelte';
+import type { JsonObject } from '../types/data.js';
+type $$ComponentProps = {
+    children?: Snippet;
+    row?: JsonObject;
+    rowIndex?: number;
+    selectable?: boolean;
 };
-export {};
+declare const TableRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/tables/table.svelte

@@ -1,5 +1,50 @@
-<table>
-	<slot />
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { JsonObject } from '../types/data.js';
+	import { createTableContext, type TableContextConfig } from './table-context.svelte.js';
+	import { untrack } from 'svelte';
+
+	let {
+		children,
+		enableSorting = true,
+		enableSelection = false,
+		selectionMode = 'multi',
+		rowIdKey = 'id',
+		stickyHeader = false,
+		onSort = undefined,
+		onSelectionChange = undefined
+	}: {
+		children?: Snippet;
+		enableSorting?: boolean;
+		enableSelection?: boolean;
+		selectionMode?: 'single' | 'multi';
+		rowIdKey?: string;
+		stickyHeader?: boolean;
+		onSort?: (column: string, direction: 'asc' | 'desc') => void;
+		onSelectionChange?: (selectedIds: Set<string | number>) => void;
+	} = $props();
+
+	// Create table context for child components
+	// Using untrack() to indicate we intentionally want non-reactive initial values
+	const config: TableContextConfig<JsonObject> = {
+		enableSorting: untrack(() => enableSorting),
+		enableSelection: untrack(() => enableSelection),
+		selectionMode: untrack(() => selectionMode),
+		rowIdKey: untrack(() => rowIdKey),
+		onSort: untrack(() => onSort),
+		onSelectionChange: untrack(() => onSelectionChange)
+	};
+
+	createTableContext(config);
+</script>
+
+<table
+	class:sticky-header={stickyHeader}
+	role="grid"
+	aria-rowcount={enableSelection ? undefined : undefined}
+	aria-colcount={undefined}
+>
+	{@render children?.()}
 </table>
 
 <style>
@@ -7,5 +52,19 @@
 		width: 100%;
 		border-collapse: collapse;
 		font-family: var(--base-font-family, sans-serif);
+		position: relative;
+	}
+
+	table.sticky-header :global(thead) {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background: var(--table-header-bg);
+	}
+
+	table.sticky-header :global(thead th) {
+		position: sticky;
+		top: 0;
+		background: var(--table-header-bg);
 	}
 </style>

package/dist/tables/table.svelte.d.ts

@@ -1,29 +1,14 @@
-/** @typedef {typeof __propDef.props}  TableProps */
-/** @typedef {typeof __propDef.events}  TableEvents */
-/** @typedef {typeof __propDef.slots}  TableSlots */
-export default class Table extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    enableSorting?: boolean;
+    enableSelection?: boolean;
+    selectionMode?: 'single' | 'multi';
+    rowIdKey?: string;
+    stickyHeader?: boolean;
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    onSelectionChange?: (selectedIds: Set<string | number>) => void;
 };
-export {};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/test-utils/accessibility-helpers.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Accessibility testing helpers
+ */
+/**
+ * Check if element has proper ARIA label
+ */
+export declare function hasAccessibleName(element: Element): boolean;
+/**
+ * Get accessible name of element
+ */
+export declare function getAccessibleName(element: Element): string;
+/**
+ * Check if element is keyboard accessible
+ */
+export declare function isKeyboardAccessible(element: Element): boolean;
+/**
+ * Check if element has proper role
+ */
+export declare function hasRole(element: Element, expectedRole: string): boolean;
+/**
+ * Check if element is properly described
+ */
+export declare function hasDescription(element: Element): boolean;
+/**
+ * Get description text
+ */
+export declare function getDescription(element: Element): string;
+/**
+ * Check if element is marked as invalid
+ */
+export declare function isInvalid(element: Element): boolean;
+/**
+ * Check if element is marked as required
+ */
+export declare function isRequired(element: Element): boolean;
+/**
+ * Check if element is expanded (for collapsible elements)
+ */
+export declare function isExpanded(element: Element): boolean;
+/**
+ * Check if element is pressed (for toggle buttons)
+ */
+export declare function isPressed(element: Element): boolean;
+/**
+ * Check if element is checked (for checkboxes/radios)
+ */
+export declare function isChecked(element: Element): boolean;
+/**
+ * Check if element is selected (for options)
+ */
+export declare function isSelected(element: Element): boolean;
+/**
+ * Get all focusable elements within a container
+ */
+export declare function getFocusableElements(container?: Element): Element[];
+/**
+ * Check if focus is trapped within container
+ */
+export declare function isFocusTrapped(container: Element): boolean;
+/**
+ * Check if element has live region attributes
+ */
+export declare function hasLiveRegion(element: Element): boolean;
+/**
+ * Get live region politeness level
+ */
+export declare function getLiveRegionPoliteness(element: Element): 'polite' | 'assertive' | 'off' | null;
+/**
+ * Check contrast ratio (simplified check)
+ * Note: This is a basic check. For comprehensive contrast testing, use axe-core
+ */
+export declare function hasGoodContrast(element: HTMLElement): boolean;
+/**
+ * Check if element has sufficient size for touch targets (44x44px minimum)
+ */
+export declare function hasSufficientTouchTargetSize(element: HTMLElement): boolean;
+/**
+ * Verify keyboard navigation order
+ */
+export declare function getTabOrder(container?: Element): Element[];

package/dist/test-utils/accessibility-helpers.js

@@ -0,0 +1,220 @@
+/**
+ * Accessibility testing helpers
+ */
+/**
+ * Check if element has proper ARIA label
+ */
+export function hasAccessibleName(element) {
+    const ariaLabel = element.getAttribute('aria-label');
+    const ariaLabelledBy = element.getAttribute('aria-labelledby');
+    const title = element.getAttribute('title');
+    if (ariaLabel || title)
+        return true;
+    if (ariaLabelledBy) {
+        const labelElement = document.getElementById(ariaLabelledBy);
+        return !!labelElement?.textContent?.trim();
+    }
+    // Check for label element
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        const id = element.id;
+        if (id) {
+            const label = document.querySelector(`label[for="${id}"]`);
+            return !!label?.textContent?.trim();
+        }
+    }
+    return false;
+}
+/**
+ * Get accessible name of element
+ */
+export function getAccessibleName(element) {
+    const ariaLabel = element.getAttribute('aria-label');
+    if (ariaLabel)
+        return ariaLabel;
+    const ariaLabelledBy = element.getAttribute('aria-labelledby');
+    if (ariaLabelledBy) {
+        const labelElement = document.getElementById(ariaLabelledBy);
+        return labelElement?.textContent?.trim() || '';
+    }
+    const title = element.getAttribute('title');
+    if (title)
+        return title;
+    // Check for label element
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        const id = element.id;
+        if (id) {
+            const label = document.querySelector(`label[for="${id}"]`);
+            return label?.textContent?.trim() || '';
+        }
+    }
+    return element.textContent?.trim() || '';
+}
+/**
+ * Check if element is keyboard accessible
+ */
+export function isKeyboardAccessible(element) {
+    const tabindex = element.getAttribute('tabindex');
+    // Elements with tabindex="-1" are programmatically focusable but not keyboard accessible
+    if (tabindex === '-1')
+        return false;
+    // Interactive elements are keyboard accessible by default
+    const interactiveElements = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+    if (interactiveElements.includes(element.tagName)) {
+        return !element.hasAttribute('disabled');
+    }
+    // Elements with positive or zero tabindex are keyboard accessible
+    return tabindex !== null && parseInt(tabindex) >= 0;
+}
+/**
+ * Check if element has proper role
+ */
+export function hasRole(element, expectedRole) {
+    const role = element.getAttribute('role');
+    return role === expectedRole;
+}
+/**
+ * Check if element is properly described
+ */
+export function hasDescription(element) {
+    const ariaDescribedBy = element.getAttribute('aria-describedby');
+    if (!ariaDescribedBy)
+        return false;
+    const descriptionElement = document.getElementById(ariaDescribedBy);
+    return !!descriptionElement?.textContent?.trim();
+}
+/**
+ * Get description text
+ */
+export function getDescription(element) {
+    const ariaDescribedBy = element.getAttribute('aria-describedby');
+    if (!ariaDescribedBy)
+        return '';
+    const descriptionElement = document.getElementById(ariaDescribedBy);
+    return descriptionElement?.textContent?.trim() || '';
+}
+/**
+ * Check if element is marked as invalid
+ */
+export function isInvalid(element) {
+    return element.getAttribute('aria-invalid') === 'true';
+}
+/**
+ * Check if element is marked as required
+ */
+export function isRequired(element) {
+    return (element.hasAttribute('required') ||
+        element.getAttribute('aria-required') === 'true');
+}
+/**
+ * Check if element is expanded (for collapsible elements)
+ */
+export function isExpanded(element) {
+    return element.getAttribute('aria-expanded') === 'true';
+}
+/**
+ * Check if element is pressed (for toggle buttons)
+ */
+export function isPressed(element) {
+    return element.getAttribute('aria-pressed') === 'true';
+}
+/**
+ * Check if element is checked (for checkboxes/radios)
+ */
+export function isChecked(element) {
+    if (element instanceof HTMLInputElement) {
+        return element.checked;
+    }
+    return element.getAttribute('aria-checked') === 'true';
+}
+/**
+ * Check if element is selected (for options)
+ */
+export function isSelected(element) {
+    if (element instanceof HTMLOptionElement) {
+        return element.selected;
+    }
+    return element.getAttribute('aria-selected') === 'true';
+}
+/**
+ * Get all focusable elements within a container
+ */
+export function getFocusableElements(container = document.body) {
+    const selector = [
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])'
+    ].join(',');
+    return Array.from(container.querySelectorAll(selector));
+}
+/**
+ * Check if focus is trapped within container
+ */
+export function isFocusTrapped(container) {
+    const focusableElements = getFocusableElements(container);
+    const activeElement = document.activeElement;
+    if (!activeElement)
+        return false;
+    return focusableElements.some(el => el === activeElement || el.contains(activeElement));
+}
+/**
+ * Check if element has live region attributes
+ */
+export function hasLiveRegion(element) {
+    return element.hasAttribute('aria-live');
+}
+/**
+ * Get live region politeness level
+ */
+export function getLiveRegionPoliteness(element) {
+    const value = element.getAttribute('aria-live');
+    if (value === 'polite' || value === 'assertive' || value === 'off') {
+        return value;
+    }
+    return null;
+}
+/**
+ * Check contrast ratio (simplified check)
+ * Note: This is a basic check. For comprehensive contrast testing, use axe-core
+ */
+export function hasGoodContrast(element) {
+    const style = window.getComputedStyle(element);
+    const color = style.color;
+    const backgroundColor = style.backgroundColor;
+    // If no background color is set, we can't determine contrast
+    if (!backgroundColor || backgroundColor === 'rgba(0, 0, 0, 0)') {
+        return true; // Assume parent has proper contrast
+    }
+    // This is a simplified check - real contrast calculation is complex
+    // For production, use axe-core or similar tools
+    return color !== backgroundColor;
+}
+/**
+ * Check if element has sufficient size for touch targets (44x44px minimum)
+ */
+export function hasSufficientTouchTargetSize(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.width >= 44 && rect.height >= 44;
+}
+/**
+ * Verify keyboard navigation order
+ */
+export function getTabOrder(container = document.body) {
+    const focusableElements = getFocusableElements(container);
+    return focusableElements.sort((a, b) => {
+        const aTabIndex = parseInt(a.getAttribute('tabindex') || '0');
+        const bTabIndex = parseInt(b.getAttribute('tabindex') || '0');
+        // Elements with tabindex > 0 come first, in order
+        if (aTabIndex > 0 && bTabIndex > 0) {
+            return aTabIndex - bTabIndex;
+        }
+        if (aTabIndex > 0)
+            return -1;
+        if (bTabIndex > 0)
+            return 1;
+        // Otherwise, use DOM order
+        return 0;
+    });
+}

package/dist/test-utils/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Test utilities for Sveltacular component testing
+ * @module test-utils
+ */
+export * from './render-helpers';
+export * from './test-data';
+export * from './mock-helpers';
+export * from './accessibility-helpers';

package/dist/test-utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * Test utilities for Sveltacular component testing
+ * @module test-utils
+ */
+export * from './render-helpers';
+export * from './test-data';
+export * from './mock-helpers';
+export * from './accessibility-helpers';

package/dist/test-utils/mock-helpers.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Mock helpers for testing
+ */
+import { vi } from 'vitest';
+/**
+ * Mock a function with optional implementation
+ */
+export declare function mockFunction<T extends (...args: any[]) => any>(implementation?: T): ReturnType<typeof vi.fn>;
+/**
+ * Mock console methods to suppress output during tests
+ */
+export declare function mockConsole(): void;
+/**
+ * Mock fetch API
+ */
+export declare function mockFetch(response: any, options?: {
+    ok?: boolean;
+    status?: number;
+}): typeof fetch;
+/**
+ * Mock setTimeout/setInterval for testing
+ */
+export declare function mockTimers(): void;
+/**
+ * Mock Date.now() for consistent timestamps
+ */
+export declare function mockDateNow(timestamp?: number): void;
+/**
+ * Mock window.location
+ */
+export declare function mockLocation(url?: string): void;
+/**
+ * Mock clipboard API
+ */
+export declare function mockClipboard(): {
+    writeText: import("vitest").Mock<(...args: any[]) => any>;
+    readText: import("vitest").Mock<(...args: any[]) => any>;
+    write: import("vitest").Mock<(...args: any[]) => any>;
+    read: import("vitest").Mock<(...args: any[]) => any>;
+};
+/**
+ * Mock getBoundingClientRect for positioning tests
+ */
+export declare function mockGetBoundingClientRect(element: Element, rect: Partial<DOMRect>): void;
+/**
+ * Mock viewport size
+ */
+export declare function mockViewport(width?: number, height?: number): void;
+/**
+ * Mock media query
+ */
+export declare function mockMediaQuery(query: string, matches?: boolean): import("vitest").Mock<(...args: any[]) => any>;
+/**
+ * Mock prefers-reduced-motion
+ */
+export declare function mockPrefersReducedMotion(enabled?: boolean): void;
+/**
+ * Mock prefers-color-scheme
+ */
+export declare function mockPrefersColorScheme(scheme?: 'light' | 'dark'): void;
+/**
+ * Create a mock file for file input testing
+ */
+export declare function createMockFile(name?: string, content?: string, type?: string): File;
+/**
+ * Create multiple mock files
+ */
+export declare function createMockFiles(count?: number): File[];