svelte-toggle-switch 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -0,0 +1,69 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.1.0] - 2026-01-02
+
+### Added
+- **Event Dispatchers**: Added `on:change`, `on:focus`, and `on:blur` event handlers for better integration with frameworks and form libraries
+- **Custom Text Labels**: New `onText` and `offText` props to customize the text displayed in the inner design (default: "ON"/"OFF")
+- **Form Validation Support**:
+  - `helperText` prop - Display helper text below the switch
+  - `errorText` prop - Display error message when validation fails
+  - `required` prop - Mark the switch as required
+  - `error` prop - Show error state with red styling
+  - `name` prop - Form field name for submission
+- **New Color Schemes**: Added `yellow`, `indigo`, and `teal` color schemes (now 9 total color schemes)
+- **Enhanced Accessibility**:
+  - `tabIndex` prop for custom keyboard navigation order
+  - `aria-required` and `aria-invalid` attributes for form validation
+  - Improved screen reader support with helper text announcements
+- **Demo Application**: Comprehensive SvelteKit demo with interactive playground at svelte-toggle-switch.ishansasika.dev
+  - Live preview with all props
+  - Real-time code generation
+  - 15+ quick example presets
+  - Icon picker with 10+ preset icons
+  - Complete documentation
+
+### Changed
+- Updated component to dispatch custom events with detailed payload
+- Multi-select now dispatches change events properly
+- Helper text and error text display dynamically below all switch designs
+- Error state now includes visual border color change
+
+### Fixed
+- Multi-select change events now trigger correctly
+- Focus and blur events properly propagate
+- ARIA attributes correctly reference helper text for screen readers
+
+## [2.0.0] - 2025-12-14
+
+### Added
+- Complete rewrite with TypeScript support
+- 5 design variants (slider/ios, inner, modern, material, multi)
+- 6 color schemes (blue, green, red, purple, orange, pink)
+- 5 size variants (xs, sm, md, lg, xl)
+- Custom icon support with showIcons, onIcon, and offIcon props
+- Comprehensive accessibility with ARIA attributes
+- Loading and disabled states
+- Shadow and outline visual effects
+- Customizable animations (duration and easing)
+- Label positioning (left/right)
+- Multi-option mode with radio group styling
+
+### Breaking Changes
+- Migrated from Svelte 4 to Svelte 5 with runes support
+- Component props now use TypeScript types
+- Removed deprecated v1.x props
+
+## [1.0.0] - 2022-05-29
+
+### Added
+- Initial release
+- Basic toggle switch functionality
+- iOS-style design
+- ON/OFF states
+- Simple customization options

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-toggle-switch",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -34,9 +34,11 @@
     "svelte component",
     "ui component",
     "accessible",
-    "typescript"
+    "typescript",
+    "form validation",
+    "events"
   ],
-  "author": "Ishan Karunaratne <ishansasika@gmail.com> (https://ishansasika.mn.co/)",
+  "author": "Ishan Karunaratne <ishansasika@gmail.com> (https://ishansasika.dev)",
   "license": "MIT",
-  "homepage": "https://github.com/ishansasika/svelte-toggle-switch#readme"
+  "homepage": "https://svelte-toggle-switch.ishansasika.dev"
 }

package/src/lib/Switch.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
 	// Core Props
 	export let value: boolean | string = false;
 	export let label: string = '';
@@ -11,7 +15,7 @@
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = 'md';
 	export let color: string = '#007AFF';
 	export let offColor: string = '#E5E7EB';
-	export let colorScheme: 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'pink' | 'custom' = 'blue';
+	export let colorScheme: 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'pink' | 'yellow' | 'indigo' | 'teal' | 'custom' = 'blue';
 
 	// State Props
 	export let disabled: boolean = false;
@@ -31,6 +35,8 @@
 	export let ariaLabel: string = '';
 	export let ariaDescribedBy: string = '';
 	export let id: string = '';
+	export let name: string = '';
+	export let tabIndex: number = 0;
 
 	// Advanced Props
 	export let labelPosition: 'left' | 'right' = 'right';
@@ -38,11 +44,22 @@
 	export let shadow: boolean = false;
 	export let outline: boolean = false;
 
+	// v2.1.0 New Features
+	// Custom Text Labels
+	export let onText: string = 'ON';
+	export let offText: string = 'OFF';
+
+	// Form Validation
+	export let helperText: string = '';
+	export let errorText: string = '';
+	export let required: boolean = false;
+	export let error: boolean = false;
+
 	// Internal state
 	let checked: boolean = typeof value === 'boolean' ? value : value === 'on';
 	const uniqueID = id || `switch-${Math.floor(Math.random() * 1000000)}`;
 
-	// Color schemes
+	// Color schemes (v2.1.0 - added yellow, indigo, teal)
 	const colorSchemes = {
 		blue: '#007AFF',
 		green: '#10B981',
@@ -50,6 +67,9 @@
 		purple: '#8B5CF6',
 		orange: '#F97316',
 		pink: '#EC4899',
+		yellow: '#F59E0B',
+		indigo: '#6366F1',
+		teal: '#14B8A6',
 		custom: color
 	};
 
@@ -83,7 +103,11 @@
 		if (design !== 'multi') {
 			const newChecked = !checked;
 			checked = newChecked;
-			value = newChecked ? (typeof value === 'boolean' ? true : 'on') : (typeof value === 'boolean' ? false : 'off');
+			const newValue = newChecked ? (typeof value === 'boolean' ? true : 'on') : (typeof value === 'boolean' ? false : 'off');
+			value = newValue;
+
+			// v2.1.0 - Dispatch change event
+			dispatch('change', { value: newValue, checked: newChecked });
 		}
 	}
 
@@ -95,10 +119,28 @@
 			if (design !== 'multi') {
 				const newChecked = !checked;
 				checked = newChecked;
-				value = newChecked ? (typeof value === 'boolean' ? true : 'on') : (typeof value === 'boolean' ? false : 'off');
+				const newValue = newChecked ? (typeof value === 'boolean' ? true : 'on') : (typeof value === 'boolean' ? false : 'off');
+				value = newValue;
+
+				// v2.1.0 - Dispatch change event
+				dispatch('change', { value: newValue, checked: newChecked });
 			}
 		}
 	}
+
+	// v2.1.0 - Focus/Blur event handlers
+	function handleFocus(event: FocusEvent) {
+		dispatch('focus', { event });
+	}
+
+	function handleBlur(event: FocusEvent) {
+		dispatch('blur', { event });
+	}
+
+	// v2.1.0 - Multi-select change handler
+	function handleMultiChange() {
+		dispatch('change', { value });
+	}
 </script>
 
 {#if design === 'inner'}
@@ -117,16 +159,22 @@
 			aria-checked={checked}
 			aria-label={ariaLabel || label}
 			aria-labelledby={label ? `${uniqueID}-label` : undefined}
-			aria-describedby={ariaDescribedBy || undefined}
+			aria-describedby={ariaDescribedBy || (helperText || errorText ? `${uniqueID}-helper` : undefined)}
+			aria-required={required}
+			aria-invalid={error}
 			{disabled}
+			tabindex={tabIndex}
 			class="switch switch--inner"
 			class:checked
 			class:loading
 			class:rounded
 			class:shadow
 			class:outline
+			class:error
 			on:click={handleClick}
 			on:keydown={handleKeyDown}
+			on:focus={handleFocus}
+			on:blur={handleBlur}
 			style="
 				--active-color: {activeColor};
 				--off-color: {offColor};
@@ -137,12 +185,17 @@
 			{#if loading}
 				<span class="spinner"></span>
 			{:else}
-				<span class="switch-text">{checked ? 'ON' : 'OFF'}</span>
+				<span class="switch-text">{checked ? onText : offText}</span>
 			{/if}
 		</button>
 		{#if label && labelPosition === 'right'}
 			<span class="switch-label" id="{uniqueID}-label">{label}</span>
 		{/if}
+		{#if helperText || errorText}
+			<span class="switch-helper-text" id="{uniqueID}-helper" class:error-text={error}>
+				{error && errorText ? errorText : helperText}
+			</span>
+		{/if}
 	</div>
 
 {:else if design === 'slider' || design === 'ios'}
@@ -161,15 +214,21 @@
 			aria-checked={checked}
 			aria-label={ariaLabel || label}
 			aria-labelledby={label ? `${uniqueID}-label` : undefined}
-			aria-describedby={ariaDescribedBy || undefined}
+			aria-describedby={ariaDescribedBy || (helperText || errorText ? `${uniqueID}-helper` : undefined)}
+			aria-required={required}
+			aria-invalid={error}
 			{disabled}
+			tabindex={tabIndex}
 			class="switch switch--slider"
 			class:checked
 			class:loading
 			class:shadow
 			class:outline
+			class:error
 			on:click={handleClick}
 			on:keydown={handleKeyDown}
+			on:focus={handleFocus}
+			on:blur={handleBlur}
 			style="
 				--active-color: {activeColor};
 				--off-color: {offColor};
@@ -190,6 +249,11 @@
 		{#if label && labelPosition === 'right'}
 			<span class="switch-label" id="{uniqueID}-label">{label}</span>
 		{/if}
+		{#if helperText || errorText}
+			<span class="switch-helper-text" id="{uniqueID}-helper" class:error-text={error}>
+				{error && errorText ? errorText : helperText}
+			</span>
+		{/if}
 	</div>
 
 {:else if design === 'modern'}
@@ -208,15 +272,21 @@
 			aria-checked={checked}
 			aria-label={ariaLabel || label}
 			aria-labelledby={label ? `${uniqueID}-label` : undefined}
-			aria-describedby={ariaDescribedBy || undefined}
+			aria-describedby={ariaDescribedBy || (helperText || errorText ? `${uniqueID}-helper` : undefined)}
+			aria-required={required}
+			aria-invalid={error}
 			{disabled}
+			tabindex={tabIndex}
 			class="switch switch--modern"
 			class:checked
 			class:loading
 			class:shadow
 			class:outline
+			class:error
 			on:click={handleClick}
 			on:keydown={handleKeyDown}
+			on:focus={handleFocus}
+			on:blur={handleBlur}
 			style="
 				--active-color: {activeColor};
 				--off-color: {offColor};
@@ -243,6 +313,11 @@
 		{#if label && labelPosition === 'right'}
 			<span class="switch-label" id="{uniqueID}-label">{label}</span>
 		{/if}
+		{#if helperText || errorText}
+			<span class="switch-helper-text" id="{uniqueID}-helper" class:error-text={error}>
+				{error && errorText ? errorText : helperText}
+			</span>
+		{/if}
 	</div>
 
 {:else if design === 'material'}
@@ -261,15 +336,21 @@
 			aria-checked={checked}
 			aria-label={ariaLabel || label}
 			aria-labelledby={label ? `${uniqueID}-label` : undefined}
-			aria-describedby={ariaDescribedBy || undefined}
+			aria-describedby={ariaDescribedBy || (helperText || errorText ? `${uniqueID}-helper` : undefined)}
+			aria-required={required}
+			aria-invalid={error}
 			{disabled}
+			tabindex={tabIndex}
 			class="switch switch--material"
 			class:checked
 			class:loading
 			class:shadow
 			class:outline
+			class:error
 			on:click={handleClick}
 			on:keydown={handleKeyDown}
+			on:focus={handleFocus}
+			on:blur={handleBlur}
 			style="
 				--active-color: {activeColor};
 				--off-color: {offColor};
@@ -288,6 +369,11 @@
 		{#if label && labelPosition === 'right'}
 			<span class="switch-label" id="{uniqueID}-label">{label}</span>
 		{/if}
+		{#if helperText || errorText}
+			<span class="switch-helper-text" id="{uniqueID}-helper" class:error-text={error}>
+				{error && errorText ? errorText : helperText}
+			</span>
+		{/if}
 	</div>
 
 {:else if design === 'multi'}
@@ -317,9 +403,13 @@
 					<input
 						type="radio"
 						id="{uniqueID}-{option}"
+						{name}
 						value={option}
 						bind:group={value}
+						on:change={handleMultiChange}
 						{disabled}
+						{required}
+						tabindex={tabIndex}
 						class="switch-multi-input"
 					/>
 					<label
@@ -333,6 +423,11 @@
 				{/each}
 			</div>
 		</div>
+		{#if helperText || errorText}
+			<span class="switch-helper-text" id="{uniqueID}-helper" class:error-text={error}>
+				{error && errorText ? errorText : helperText}
+			</span>
+		{/if}
 	</div>
 {/if}
 
@@ -367,6 +462,19 @@
 		color: #374151;
 	}
 
+	/* v2.1.0 - Helper Text */
+	.switch-helper-text {
+		display: block;
+		font-size: 0.875em;
+		color: #6B7280;
+		margin-top: 0.375em;
+		line-height: 1.4;
+	}
+
+	.switch-helper-text.error-text {
+		color: #EF4444;
+	}
+
 	/* Base Switch */
 	.switch {
 		position: relative;
@@ -393,6 +501,15 @@
 		border: 1px solid #D1D5DB;
 	}
 
+	/* v2.1.0 - Error State */
+	.switch.error {
+		border-color: #EF4444;
+	}
+
+	.switch.error:focus-visible {
+		outline-color: #EF4444;
+	}
+
 	/* Inner Design */
 	.switch--inner {
 		padding: 0.4em 0.8em;

package/CLAUDE.md

@@ -1,165 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is an NPM package providing a comprehensive, accessible toggle switch component for Svelte applications. The package has been completely rewritten in version 2.0 with TypeScript support, multiple design variants, extensive customization options, and enhanced accessibility features.
-
-## Development Commands
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server with hot reload
-npm run dev
-
-# Build the package for distribution
-npm run build
-
-# Preview production build
-npm run preview
-
-# Run TypeScript type checking
-npm run check
-```
-
-## Tech Stack
-
-- **Svelte 5.16.0**: Latest Svelte with runes support
-- **TypeScript 5.7.3**: Full type safety
-- **Vite 6.0.5**: Fast build tooling
-- **svelte-check**: TypeScript checking for Svelte files
-
-## Architecture
-
-### Component Structure
-
-The main component is located at `src/lib/Switch.svelte`. This single component supports five distinct design variants controlled by the `design` prop:
-
-- **slider/ios**: iOS-style toggle switch (default)
-- **inner**: Toggle button with visible ON/OFF text
-- **modern**: Enhanced slider with optional track icons
-- **material**: Google Material Design inspired toggle
-- **multi**: Radio group styled as a segmented control
-
-### Component API Design
-
-The component uses a comprehensive props-based API with full TypeScript support:
-
-#### Core Props
-- `value`: Two-way bound state (boolean or string for multi design)
-- `label`: Accessible label text
-- `design`: Design variant selector
-
-#### Styling System
-- **Color Schemes**: 6 built-in schemes (blue, green, red, purple, orange, pink) + custom
-- **Size Variants**: xs, sm, md, lg, xl (mapped to rem values) or custom number
-- **Visual Options**: shadow, outline, rounded, labelPosition
-
-#### State Management
-- `disabled`: Prevents interaction, shows disabled UI
-- `loading`: Shows spinner animation, prevents interaction
-- `readonly`: Prevents changes but shows current state
-
-#### Icon System
-- `showIcons`: Enable icon display
-- `onIcon`/`offIcon`: Customizable icons (text/emoji/symbols)
-- Icons displayed differently per design variant
-
-#### Animation Customization
-- `animationDuration`: Transition duration in ms (default 300)
-- `animationEasing`: CSS easing function (default 'ease-in-out')
-
-#### Accessibility
-- `ariaLabel`: Custom ARIA label
-- `ariaDescribedBy`: Links to description element
-- `id`: Custom element ID (auto-generated if not provided)
-
-### State Management
-
-The component uses Svelte's reactive statements (`$:`) to sync internal and external state:
-
-1. **For slider/inner/modern/material designs**:
-   - Internal `checked` boolean tracks state
-   - Syncs with `value` prop (boolean or 'on'/'off' string)
-   - Two-way binding via `bind:value`
-
-2. **For multi design**:
-   - Uses native radio input `bind:group`
-   - Value is one of the strings from `options` array
-   - No internal checked state needed
-
-3. **Unique IDs**:
-   - Auto-generated using `Math.floor(Math.random() * 1000000)`
-   - Used for ARIA attributes (`aria-labelledby`, `id` attributes)
-   - Can be overridden via `id` prop
-
-### Accessibility Implementation
-
-Comprehensive ARIA and keyboard support:
-
-- **ARIA Roles**: `role="switch"` for toggles, `role="radiogroup"` for multi
-- **State Attributes**: `aria-checked` reflects current state
-- **Labeling**: `aria-labelledby` connects visual labels, `aria-describedby` for descriptions
-- **Keyboard Navigation**: Space and Enter keys toggle state
-- **Focus Management**: `:focus-visible` for keyboard-only focus rings
-- **Disabled State**: Properly communicated to assistive technologies
-
-### Styling Architecture
-
-All styles are scoped within the component using Svelte's `<style>` block:
-
-- **CSS Custom Properties**: Used for theming (`--active-color`, `--off-color`, `--animation-duration`, `--animation-easing`)
-- **Design-Specific Classes**: `.switch--slider`, `.switch--inner`, `.switch--modern`, `.switch--material`, `.switch-multi`
-- **State Classes**: `.checked`, `.disabled`, `.loading`, `.shadow`, `.outline`
-- **Conditional Rendering**: `{#if design === 'variant'}` blocks for each design
-- **No External Dependencies**: Self-contained styling, no CSS framework required
-
-### TypeScript Integration
-
-The component is written in TypeScript (`<script lang="ts">`):
-
-- All props have explicit type annotations
-- Union types for variant options (design, size, colorScheme)
-- Event handlers properly typed (MouseEvent, KeyboardEvent)
-- Exported types available for consumers
-
-### Demo Application
-
-`src/App.svelte` serves as a comprehensive showcase of all component features:
-
-- Organized into sections by feature category
-- Interactive examples with state display
-- Beautiful gradient background with card-based layout
-- Responsive design for mobile devices
-- Not included in the distributed package (development only)
-
-## Build Configuration
-
-### Vite Config
-- Library mode enabled with entry point `src/lib/Switch.svelte`
-- Package name: 'SvelteToggleSwitch'
-- Standard Svelte plugin configuration
-
-### TypeScript Config
-- Extends `@tsconfig/svelte` base configuration
-- ESNext target for modern JavaScript
-- Includes all `.svelte`, `.ts`, `.js`, and `.d.ts` files in `src/`
-- Composite project with references to `tsconfig.node.json`
-
-### Package Configuration
-- Version 2.0.0 (major rewrite)
-- Peer dependency: Svelte 3.x, 4.x, or 5.x
-- Development dependencies all on latest versions
-- MIT licensed
-
-## Key Design Decisions
-
-1. **Single Component Approach**: All variants in one component file for easier maintenance
-2. **CSS-in-JS via Custom Properties**: Enables dynamic theming without style duplication
-3. **Progressive Enhancement**: Basic functionality without JavaScript, enhanced with interactivity
-4. **Accessibility First**: ARIA and keyboard support built-in, not added later
-5. **TypeScript Throughout**: Type safety for better DX and fewer runtime errors
-6. **Zero Dependencies**: No runtime dependencies beyond Svelte peer dependency

package/src/App.svelte

@@ -1,409 +0,0 @@
-<script lang="ts">
-	import Switch from './lib/Switch.svelte';
-
-	// State variables for different examples
-	let basicSwitch = false;
-	let colorSwitch = false;
-	let sizeSwitch = false;
-	let disabledSwitch = false;
-	let loadingSwitch = false;
-	let iconSwitch = false;
-	let multiSwitch = 'Option 1';
-	let labelPositionSwitch = true;
-	let animationSwitch = false;
-	let innerSwitch = false;
-	let modernSwitch = false;
-	let materialSwitch = false;
-
-	// Color schemes
-	let greenSwitch = false;
-	let redSwitch = false;
-	let purpleSwitch = false;
-	let orangeSwitch = false;
-	let pinkSwitch = false;
-
-	// Sizes
-	let xsSwitch = false;
-	let smSwitch = false;
-	let mdSwitch = false;
-	let lgSwitch = false;
-	let xlSwitch = false;
-</script>
-
-<main>
-	<header>
-		<h1>Svelte Toggle Switch</h1>
-		<p class="subtitle">A comprehensive, accessible toggle switch component for Svelte</p>
-	</header>
-
-	<section>
-		<h2>Design Variants</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Slider (iOS Style)</h3>
-				<Switch bind:value={basicSwitch} label="Enable notifications" design="slider" />
-				<p class="state">State: {basicSwitch}</p>
-			</div>
-
-			<div class="card">
-				<h3>Inner</h3>
-				<Switch bind:value={innerSwitch} label="Dark mode" design="inner" />
-				<p class="state">State: {innerSwitch}</p>
-			</div>
-
-			<div class="card">
-				<h3>Modern</h3>
-				<Switch bind:value={modernSwitch} label="Auto-save" design="modern" />
-				<p class="state">State: {modernSwitch}</p>
-			</div>
-
-			<div class="card">
-				<h3>Material</h3>
-				<Switch bind:value={materialSwitch} label="Bluetooth" design="material" />
-				<p class="state">State: {materialSwitch}</p>
-			</div>
-		</div>
-	</section>
-
-	<section>
-		<h2>Color Schemes</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Blue (Default)</h3>
-				<Switch bind:value={colorSwitch} label="Blue theme" colorScheme="blue" />
-			</div>
-
-			<div class="card">
-				<h3>Green</h3>
-				<Switch bind:value={greenSwitch} label="Green theme" colorScheme="green" />
-			</div>
-
-			<div class="card">
-				<h3>Red</h3>
-				<Switch bind:value={redSwitch} label="Red theme" colorScheme="red" />
-			</div>
-
-			<div class="card">
-				<h3>Purple</h3>
-				<Switch bind:value={purpleSwitch} label="Purple theme" colorScheme="purple" />
-			</div>
-
-			<div class="card">
-				<h3>Orange</h3>
-				<Switch bind:value={orangeSwitch} label="Orange theme" colorScheme="orange" />
-			</div>
-
-			<div class="card">
-				<h3>Pink</h3>
-				<Switch bind:value={pinkSwitch} label="Pink theme" colorScheme="pink" />
-			</div>
-		</div>
-	</section>
-
-	<section>
-		<h2>Size Variants</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Extra Small</h3>
-				<Switch bind:value={xsSwitch} label="XS Size" size="xs" />
-			</div>
-
-			<div class="card">
-				<h3>Small</h3>
-				<Switch bind:value={smSwitch} label="Small Size" size="sm" />
-			</div>
-
-			<div class="card">
-				<h3>Medium (Default)</h3>
-				<Switch bind:value={mdSwitch} label="Medium Size" size="md" />
-			</div>
-
-			<div class="card">
-				<h3>Large</h3>
-				<Switch bind:value={lgSwitch} label="Large Size" size="lg" />
-			</div>
-
-			<div class="card">
-				<h3>Extra Large</h3>
-				<Switch bind:value={xlSwitch} label="XL Size" size="xl" />
-			</div>
-		</div>
-	</section>
-
-	<section>
-		<h2>States</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Disabled</h3>
-				<Switch bind:value={disabledSwitch} label="Disabled switch" disabled />
-			</div>
-
-			<div class="card">
-				<h3>Loading</h3>
-				<Switch bind:value={loadingSwitch} label="Loading state" loading />
-			</div>
-
-			<div class="card">
-				<h3>Read-only</h3>
-				<Switch bind:value={disabledSwitch} label="Read-only switch" readonly />
-			</div>
-		</div>
-	</section>
-
-	<section>
-		<h2>Icon Support</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Slider with Icons</h3>
-				<Switch
-					bind:value={iconSwitch}
-					label="Wi-Fi"
-					design="slider"
-					showIcons={true}
-					onIcon="✓"
-					offIcon="✕"
-				/>
-			</div>
-
-			<div class="card">
-				<h3>Modern with Custom Icons</h3>
-				<Switch
-					bind:value={iconSwitch}
-					label="Airplane Mode"
-					design="modern"
-					showIcons={true}
-					onIcon="✈"
-					offIcon="✕"
-					colorScheme="purple"
-				/>
-			</div>
-
-			<div class="card">
-				<h3>Custom Emoji Icons</h3>
-				<Switch
-					bind:value={iconSwitch}
-					label="Theme"
-					design="slider"
-					showIcons={true}
-					onIcon="🌙"
-					offIcon="☀"
-					colorScheme="orange"
-					size="lg"
-				/>
-			</div>
-		</div>
-	</section>
-
-	<section>
-		<h2>Multi-option Switch</h2>
-		<div class="card">
-			<h3>Toggle Group</h3>
-			<Switch
-				bind:value={multiSwitch}
-				label="Select an option"
-				design="multi"
-				options={['Option 1', 'Option 2', 'Option 3']}
-			/>
-			<p class="state">Selected: {multiSwitch}</p>
-		</div>
-
-		<div class="card">
-			<h3>View Mode Selector</h3>
-			<Switch
-				bind:value={multiSwitch}
-				label="View"
-				design="multi"
-				options={['Grid', 'List']}
-				size="sm"
-				colorScheme="green"
-			/>
-		</div>
-	</section>
-
-	<section>
-		<h2>Advanced Features</h2>
-		<div class="grid">
-			<div class="card">
-				<h3>Label Position</h3>
-				<Switch
-					bind:value={labelPositionSwitch}
-					label="Label on left"
-					labelPosition="left"
-				/>
-			</div>
-
-			<div class="card">
-				<h3>With Shadow</h3>
-				<Switch bind:value={sizeSwitch} label="Shadow effect" shadow />
-			</div>
-
-			<div class="card">
-				<h3>With Outline</h3>
-				<Switch bind:value={sizeSwitch} label="Outline style" outline />
-			</div>
-
-			<div class="card">
-				<h3>Custom Animation</h3>
-				<Switch
-					bind:value={animationSwitch}
-					label="Slow animation"
-					animationDuration={800}
-					animationEasing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-					colorScheme="pink"
-				/>
-			</div>
-
-			<div class="card">
-				<h3>Custom Colors</h3>
-				<Switch
-					bind:value={animationSwitch}
-					label="Custom palette"
-					colorScheme="custom"
-					color="#FF6B6B"
-					offColor="#F0F0F0"
-				/>
-			</div>
-		</div>
-	</section>
-
-	<footer>
-		<p>Built with Svelte • TypeScript • Vite</p>
-		<p>
-			<a href="https://github.com/ishansasika/svelte-toggle-switch" target="_blank" rel="noopener">
-				View on GitHub
-			</a>
-		</p>
-	</footer>
-</main>
-
-<style>
-	:root {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-			Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-		line-height: 1.6;
-	}
-
-	main {
-		max-width: 1200px;
-		margin: 0 auto;
-		padding: 2rem;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		min-height: 100vh;
-	}
-
-	header {
-		text-align: center;
-		margin-bottom: 3rem;
-		color: white;
-	}
-
-	h1 {
-		font-size: 3rem;
-		margin: 0;
-		font-weight: 700;
-		letter-spacing: -0.02em;
-	}
-
-	.subtitle {
-		font-size: 1.25rem;
-		opacity: 0.9;
-		margin-top: 0.5rem;
-	}
-
-	section {
-		background: white;
-		border-radius: 1rem;
-		padding: 2rem;
-		margin-bottom: 2rem;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-	}
-
-	h2 {
-		margin-top: 0;
-		color: #1f2937;
-		font-size: 1.75rem;
-		margin-bottom: 1.5rem;
-		border-bottom: 2px solid #e5e7eb;
-		padding-bottom: 0.5rem;
-	}
-
-	h3 {
-		color: #4b5563;
-		font-size: 1rem;
-		margin-top: 0;
-		margin-bottom: 1rem;
-		font-weight: 600;
-	}
-
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 1.5rem;
-	}
-
-	.card {
-		background: #f9fafb;
-		padding: 1.5rem;
-		border-radius: 0.75rem;
-		border: 1px solid #e5e7eb;
-		transition: all 0.3s ease;
-	}
-
-	.card:hover {
-		border-color: #d1d5db;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-		transform: translateY(-2px);
-	}
-
-	.state {
-		margin-top: 1rem;
-		padding: 0.5rem;
-		background: white;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		color: #6b7280;
-		font-family: 'Courier New', monospace;
-	}
-
-	footer {
-		text-align: center;
-		color: white;
-		padding: 2rem 0;
-		margin-top: 2rem;
-	}
-
-	footer p {
-		margin: 0.5rem 0;
-	}
-
-	footer a {
-		color: white;
-		text-decoration: underline;
-	}
-
-	footer a:hover {
-		opacity: 0.8;
-	}
-
-	@media (max-width: 768px) {
-		main {
-			padding: 1rem;
-		}
-
-		h1 {
-			font-size: 2rem;
-		}
-
-		.subtitle {
-			font-size: 1rem;
-		}
-
-		section {
-			padding: 1.5rem;
-		}
-
-		.grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>

package/src/vite-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "checkJs": true,
-    "isolatedModules": true,
-    "moduleDetection": "force"
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
-}

package/tsconfig.node.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.js"]
-}