sveltacular 1.0.6 → 1.0.9

package/README.md

@@ -1,9 +1,20 @@
 ![Sveltacular](https://raw.githubusercontent.com/jasonbyrne/sveltacular/main/static/sveltacular.png)
 
-Sveltacular is a TypeScript and SASS based component library for Svelte 5, with no other dependencies.
+Sveltacular is a comprehensive TypeScript and SASS based component library for Svelte 5, with **zero runtime dependencies**.
 
 Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was looking for, I made my own.
 
+## Features
+
+- ✅ **100+ Components** - Comprehensive component library covering forms, navigation, modals, tables, and more
+- ✅ **Zero Dependencies** - Built with pure Svelte 5, TypeScript, and SASS
+- ✅ **Fully Accessible** - WCAG 2.1 AA compliant with ARIA support and keyboard navigation
+- ✅ **Svelte 5 Native** - Uses modern runes (`$state`, `$derived`, `$props`) throughout
+- ✅ **TypeScript** - Full type safety with comprehensive type definitions
+- ✅ **Themable** - CSS custom properties for easy customization
+- ✅ **Well Tested** - Unit tests, E2E tests, and comprehensive test utilities
+- ✅ **Storybook** - Interactive documentation for all components
+
 ## Installation
 
 ```bash
@@ -48,57 +59,95 @@ npm i sveltacular
 
 ### Forms
 
-- **Button** - Multiple variants (primary, secondary, positive, danger, outline)
-- **TextBox** - Text input with validation and formatting options
+- **Button** - Multiple variants (primary, secondary, positive, danger, outline) with loading states
+- **TextBox** - Text input with validation, success states, loading indicators, and character counting
 - **NumberBox** - Number input with min/max/decimals
-- **TextArea** - Multi-line text input
-- **CheckBox** / **CheckBoxGroup** - Checkbox inputs
+- **NumberRangeBox** - Range input for min/max values
+- **TextArea** - Multi-line text input with auto-resize support
+- **CheckBox** / **CheckBoxGroup** - Checkbox inputs with grouping
 - **RadioGroup** / **RadioBox** - Radio button inputs
-- **ListBox** - Dropdown/select with search
+- **ListBox** - Dropdown/select with search and virtual scrolling
 - **DateBox** - Date picker
 - **TimeBox** - Time picker
-- **PhoneBox** - Phone number input
-- **FileBox** / **FileArea** - File upload
-- **Slider** - Range slider input
+- **PhoneBox** - Phone number input with formatting
+- **FileBox** / **FileArea** - File upload with drag-and-drop
+- **Slider** - Range slider with tooltip and value display
+- **SwitchBox** - Toggle switch component
+- **BoolBox** - Boolean input component
+- **MoneyBox** - Currency input with formatting
+- **TagBox** - Tag input with chip display
+- **UrlBox** - URL input with validation
+- **InfoBox** - Information display box
+- **NewOrExistingCombo** - Combo component for new/existing selection
 - **Form** - Form container with validation
+- **FormField** - Form field wrapper with label and error handling
+- **FormLabel** - Accessible form label
+- **FormRow** - Form row layout
+- **FormSection** - Form section grouping
+- **FormHeader** / **FormFooter** - Form header and footer components
 
 ### Generic Components
 
-- **Card** - Card container
+- **Card** - Card container with variants
 - **Pill** - Badge/pill component
 - **Badge** - Notification badge
 - **Avatar** - User avatar with initials fallback
-- **Tooltip** - Hover tooltip
-- **Popover** - Popover dialog
+- **Tooltip** - Hover tooltip with positioning
+- **Popover** - Popover dialog with smart positioning
 - **Spinner** - Loading spinner
 - **Rating** - Star rating component
 - **Chip** - Removable tag/chip
 - **Notice** - Alert/notice component
-- **Menu** - Dropdown menu
-- **List** - Styled list component
+- **Menu** - Dropdown menu with keyboard navigation
+- **List** - Styled list component with variants
+- **Empty** - Empty state component
+- **Divider** - Visual divider/separator
+- **Dot** - Status dot indicator
+- **Panel** - Panel container
+- **Section** - Section container
+- **Header** - Header component
+- **Link** - Styled link component
+- **Email** - Email display component
+- **Phone** - Phone number display
+- **Address** - Address display component
+- **DateTime** - Date/time display
+- **Scorecard** - Scorecard/metric display
+- **Toaster** - Toast notification system
+- **Overlay** - Overlay component
+- **DropdownItem** - Dropdown menu item
+- **ThemeProvider** - Theme provider component
 
 ### Navigation
 
-- **AppBar** - Application bar
+- **AppBar** - Application bar with navigation
 - **SideBar** - Side navigation
 - **Breadcrumbs** - Breadcrumb navigation
-- **Tabs** - Tab navigation
+- **Tabs** - Tab navigation with keyboard support
 - **Accordion** - Collapsible sections
 - **Wizard** - Multi-step wizard
 - **Pagination** - Page navigation
 - **Drawer** - Slide-out drawer
+- **CommandPalette** - Keyboard-driven command interface (⌘K / Ctrl+K) with fuzzy search
+- **ContextMenu** - Right-click context menu with nested submenus
+- **DropdownButton** - Button with dropdown menu
 
 ### Modals
 
-- **Modal** - Generic modal dialog
+- **Modal** - Generic modal dialog with focus trap
 - **Alert** - Alert dialog
 - **Confirm** - Confirmation dialog
 - **Prompt** - Input prompt dialog
+- **DialogWindow** - Dialog window component
+- **DialogHeader** / **DialogBody** / **DialogFooter** - Dialog structure components
+- **DialogCloseButton** - Dialog close button
 
 ### Tables
 
 - **Table** - Table component with header/body/footer
-- **DataGrid** - Advanced data grid
+- **DataGrid** - Advanced data grid with sorting and formatting
+- **TableRow** / **TableCell** - Table row and cell components
+- **TableHeader** / **TableHeaderCell** - Table header components
+- **TableCaption** - Table caption component
 
 ### Typography
 
@@ -106,12 +155,42 @@ npm i sveltacular
 - **Subtitle** - Subtitle component
 - **Text** - Text component
 - **Paragraph** - Paragraph component
-- **CodeBlock** - Code block
+- **CodeBlock** - Code block with syntax highlighting
+- **Code** - Inline code component
 
 ### Layout
 
-- **FlexRow** / **FlexCol** - Flexbox layout
-- **Grid** - Grid layout
+- **FlexRow** / **FlexCol** - Flexbox layout components
+- **FlexItem** - Flex item component
+- **Grid** - Grid layout component
+
+### Placeholders
+
+- **Loading** - Loading placeholder
+- **Progress** - Progress indicator
+- **SkeletonText** - Text skeleton loader
+- **SkeletonParagraph** - Paragraph skeleton loader
+- **SkeletonInput** - Input skeleton loader
+- **SkeletonTable** - Table skeleton loader
+
+### Timeline
+
+- **Timeline** - Timeline container
+- **TimelineItem** - Timeline item component
+
+### Images & Icons
+
+- **Image** - Image component with lazy loading
+- **Icon** - Icon component
+- **SvgIcon** - SVG icon wrapper
+- Built-in icons: AngleRightIcon, AngleUpIcon, CheckIcon, CopyIcon, EnvelopeIcon, FolderOpenIcon, HamburgerIcon, HomeIcon, LinkIcon, MobilePhoneIcon, PhoneIcon, UploadIcon
+
+### Data
+
+- **Countries** - Country data utilities
+- **UnitedStates** - US states data
+- **Canada** - Canadian provinces data
+- **Colors** - Color utilities
 
 ## Import Patterns
 
@@ -195,14 +274,112 @@ if (!result.isValid) {
 
 ## Accessibility
 
-Sveltacular components include:
+Sveltacular is committed to **WCAG 2.1 AA compliance** across all components. Every component includes:
+
+- ✅ **ARIA Attributes** - Proper roles, states, and properties for screen readers
+- ✅ **Keyboard Navigation** - Full keyboard support for all interactive components
+- ✅ **Focus Management** - Focus traps for modals, roving tabindex for menus
+- ✅ **Screen Reader Support** - Live region announcements for dynamic content
+- ✅ **Semantic HTML** - Proper HTML structure with meaningful elements
+- ✅ **Color Contrast** - All components meet WCAG contrast requirements
+- ✅ **Focus Indicators** - Visible focus rings for keyboard navigation
+- ✅ **Reduced Motion** - Respects `prefers-reduced-motion` preference
+
+See [ACCESSIBILITY.md](./ACCESSIBILITY.md) for detailed accessibility documentation and best practices.
+
+## Form Enhancements
+
+Sveltacular includes enhanced form components with modern UX features:
+
+### TextBox Enhancements
 
-- ARIA attributes for screen readers
-- Keyboard navigation support
-- Focus management utilities
-- Semantic HTML structure
+- **Success States** - Visual success feedback with animated checkmark
+- **Loading Indicators** - Show loading spinner during async validation
+- **Character Counting** - Display character count with visual warnings (90% yellow, 100% red)
 
-## Run Storybook
+### TextArea Enhancements
+
+- **Auto-Resize** - Automatically grows/shrinks based on content
+- **Min/Max Rows** - Configurable row constraints
+
+### Slider Enhancements
+
+- **Tooltip Display** - Show value tooltip on drag/focus
+- **Value Display** - Optional value display below slider
+- **Custom Formatting** - Format values with custom formatter function
+
+### FileArea Enhancements
+
+- **Enhanced Drag States** - Visual feedback with scale, glow, and transitions
+- **Smooth Animations** - CSS-based animations for optimal performance
+
+## Testing
+
+Sveltacular includes comprehensive testing infrastructure:
+
+### Unit Tests
+
+```bash
+npm run test              # Run unit tests
+npm run test:ui          # Run with UI
+npm run test:coverage    # Run with coverage report
+```
+
+### E2E Tests
+
+```bash
+npm run test:e2e         # Run E2E tests
+npm run test:e2e:ui      # Run with UI
+npm run test:e2e:debug   # Debug mode
+```
+
+### All Tests
+
+```bash
+npm run test:all         # Run unit and E2E tests
+```
+
+See [TESTING.md](./TESTING.md) for comprehensive testing documentation.
+
+## Helpers & Utilities
+
+Sveltacular provides a rich set of helper utilities:
+
+### Focus Management
+
+- `createFocusTrap` - Trap focus within modals
+- `RovingTabindexManager` - Manage keyboard navigation in lists/menus
+
+### Screen Reader Announcements
+
+- `announcePolite` - Polite announcements
+- `announceError` - Error announcements
+- `announceLoading` - Loading state announcements
+
+### Search & Filtering
+
+- `fuzzySearch` - Zero-dependency fuzzy search implementation
+
+### Animation Helpers
+
+- Animation actions for fade, scale, slide effects
+- Spring animations
+- Respects `prefers-reduced-motion`
+
+### Other Utilities
+
+- `debounce` - Debounce function calls
+- `uniqueId` - Generate unique IDs
+- `capitalize` / `ucfirst` - String utilities
+- `ago` - Relative time formatting
+- `roundToDecimals` - Number formatting
+- Date utilities, positioning helpers, and more
+
+See the [helpers documentation](./src/lib/helpers/) for the complete list.
+
+## Development
+
+### Run Storybook
 
 Browse all available components and their props by running Storybook locally:
 
@@ -210,10 +387,37 @@ Browse all available components and their props by running Storybook locally:
 npm run storybook
 ```
 
+### Development Scripts
+
+```bash
+npm run dev              # Start dev server
+npm run build            # Build for production
+npm run check            # Type check
+npm run lint             # Lint code
+npm run format           # Format code
+```
+
+## Documentation
+
+- **[THEMING.md](./THEMING.md)** - Complete theming guide with all CSS variables
+- **[ACCESSIBILITY.md](./ACCESSIBILITY.md)** - Accessibility features and best practices
+- **[TESTING.md](./TESTING.md)** - Testing guide and utilities
+- **[Storybook](http://localhost:6006)** - Interactive component documentation (run `npm run storybook`)
+
+## Recent Updates
+
+### Version 1.0.6
+
+- ✅ **Command Palette** - Keyboard-driven command interface with fuzzy search
+- ✅ **Context Menu** - Right-click menu with nested submenus
+- ✅ **Form Enhancements** - Success states, loading indicators, character counting, auto-resize
+- ✅ **Comprehensive Testing** - Unit tests, E2E tests, and test utilities
+- ✅ **Accessibility Improvements** - Enhanced ARIA support and keyboard navigation
+
 ## Contributing
 
 Contributions are welcome! Please see the contributing guidelines (coming soon).
 
 ## License
 
-MIT
+Apache-2.0

package/dist/forms/bool-box/bool-box.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
 	import ListBox from '../list-box/list-box.svelte';
 	import type { FormFieldSizeOptions } from '../../index.js';
+	import type { FormFieldFeedback } from '../form-field/form-field.svelte';
 
 	let {
 		value = $bindable(false),
 		options = ['Yes', 'No'] as [yes: string, no: string],
 		size = 'md' as FormFieldSizeOptions,
 		onChange = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		disabled = false,
+		required = false
 	}: {
 		value?: boolean;
 		options?: [yes: string, no: string];
 		size?: FormFieldSizeOptions;
 		onChange?: ((value: boolean) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
+		required?: boolean;
 	} = $props();
 
 	let stringValue = $state(value ? 'true' : 'false');
@@ -29,4 +38,14 @@
 	]);
 </script>
 
-<ListBox {items} bind:value={stringValue} {size} onChange={handleChange} {label} />
+<ListBox
+	{items}
+	bind:value={stringValue}
+	{size}
+	onChange={handleChange}
+	{label}
+	{helperText}
+	{feedback}
+	{disabled}
+	{required}
+/>

package/dist/forms/bool-box/bool-box.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { FormFieldSizeOptions } from '../../index.js';
+import type { FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: boolean;
     options?: [yes: string, no: string];
     size?: FormFieldSizeOptions;
     onChange?: ((value: boolean) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
+    required?: boolean;
 };
 declare const BoolBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type BoolBox = ReturnType<typeof BoolBox>;

package/dist/forms/check-box/check-box-group.svelte

@@ -69,6 +69,7 @@
 				bind:isChecked={item.isChecked}
 				onChange={handleCheckboxChange}
 				label={item.name}
+				inline={true}
 			/>
 		{/each}
 	</div>

package/dist/forms/check-box/check-box.svelte

@@ -2,6 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import CheckIcon from '../../icons/check-icon.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	let {
 		value = '',
@@ -10,7 +12,12 @@
 		name = undefined,
 		onChange = undefined,
 		label,
-		children
+		children,
+		size = 'full' as FormFieldSizeOptions,
+		helperText = undefined,
+		feedback = undefined,
+		required = false,
+		inline = false
 	}: {
 		value?: string;
 		isChecked?: boolean;
@@ -19,6 +26,11 @@
 		onChange?: ((data: { isChecked: boolean; value: string }) => void) | undefined;
 		label?: string;
 		children?: Snippet;
+		size?: FormFieldSizeOptions;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		required?: boolean;
+		inline?: boolean;
 	} = $props();
 
 	const id = uniqueId();
@@ -33,43 +45,73 @@
 	};
 </script>
 
-<label>
-	<input
-		type="checkbox"
-		{id}
-		{disabled}
-		{name}
-		{value}
-		bind:checked={isChecked}
-		onchange={onChecked}
-	/>
-	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
-	</span>
-	{#if children}
-		<div class="text">
-			{@render children()}
-		</div>
-	{:else if label}
-		<div class="text">
-			{label}
-		</div>
-	{/if}
-</label>
+{#if inline}
+	<label class="checkbox-label">
+		<input
+			type="checkbox"
+			{id}
+			{disabled}
+			{name}
+			{value}
+			bind:checked={isChecked}
+			onchange={onChecked}
+			{required}
+		/>
+		<span class="checkbox">
+			<span class="checkmark"><CheckIcon /></span>
+		</span>
+		{#if children}
+			<div class="text">
+				{@render children()}
+			</div>
+		{:else if label}
+			<div class="text">
+				{label}
+			</div>
+		{/if}
+	</label>
+{:else}
+	<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+		<label class="checkbox-label">
+			<input
+				type="checkbox"
+				{id}
+				{disabled}
+				{name}
+				{value}
+				bind:checked={isChecked}
+				onchange={onChecked}
+				{required}
+			/>
+			<span class="checkbox">
+				<span class="checkmark"><CheckIcon /></span>
+			</span>
+			{#if children}
+				<div class="text">
+					{@render children()}
+				</div>
+			{:else if label}
+				<div class="text">
+					{label}
+				</div>
+			{/if}
+		</label>
+	</FormField>
+{/if}
 
-<style>label {
+<style>.checkbox-label {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
 }
-label .text {
+.checkbox-label .text {
   display: block;
   margin-left: var(--spacing-sm);
   font-size: var(--font-md);
   line-height: 2rem;
 }
-label .checkbox {
+.checkbox-label .checkbox {
   position: relative;
   display: block;
   width: var(--spacing-base);
@@ -80,7 +122,7 @@ label .checkbox {
   transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
   user-select: none;
 }
-label .checkbox .checkmark {
+.checkbox-label .checkbox .checkmark {
   display: block;
   position: absolute;
   top: 0;
@@ -94,15 +136,15 @@ label .checkbox .checkmark {
   stroke: var(--form-input-selected-fg);
   transition: width var(--transition-base) var(--ease-in-out), height var(--transition-base) var(--ease-in-out);
 }
-label input {
+.checkbox-label input {
   width: 0;
   height: 0;
 }
-label input:checked + .checkbox {
+.checkbox-label input:checked + .checkbox {
   background-color: var(--form-input-bg);
   border-color: var(--form-input-border);
 }
-label input:checked + .checkbox .checkmark {
+.checkbox-label input:checked + .checkbox .checkmark {
   width: 100%;
   height: 100%;
 }</style>

package/dist/forms/check-box/check-box.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { Snippet } from 'svelte';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
+import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string;
     isChecked?: boolean;
@@ -10,6 +12,11 @@ type $$ComponentProps = {
     }) => void) | undefined;
     label?: string;
     children?: Snippet;
+    size?: FormFieldSizeOptions;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    required?: boolean;
+    inline?: boolean;
 };
 declare const CheckBox: import("svelte").Component<$$ComponentProps, {}, "isChecked">;
 type CheckBox = ReturnType<typeof CheckBox>;

package/dist/forms/date-box/date-box.svelte

@@ -8,7 +8,7 @@
 		isDateTimeString
 	} from '../../helpers/date.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
 	import Button from '../button/button.svelte';
 
@@ -28,7 +28,9 @@
 		steps = [] as DateIncrementStep[],
 		onChange = undefined,
 		onCheckChanged = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined
 	}: {
 		value?: string | undefined | null;
 		defaultValue?: string | undefined;
@@ -42,6 +44,8 @@
 		onChange?: ((value: string | null) => void) | undefined;
 		onCheckChanged?: ((enabled: boolean) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
 	} = $props();
 
 	const getDefaultValue = () => {
@@ -84,7 +88,7 @@
 	let disabled = $derived(!enabled);
 </script>
 
-<FormField {size} {label} {id} {required} {disabled}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div class:nullable class:disabled>
 		<span class="input">
 			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} oninput={onInput} />

package/dist/forms/date-box/date-box.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
 type DateIncrementStep = {
     label: string;
@@ -17,6 +18,8 @@ type $$ComponentProps = {
     onChange?: ((value: string | null) => void) | undefined;
     onCheckChanged?: ((enabled: boolean) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
 };
 declare const DateBox: import("svelte").Component<$$ComponentProps, {}, "value" | "enabled">;
 type DateBox = ReturnType<typeof DateBox>;