svelte-toggle-switch 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +3 -1
- package/CHANGELOG.md +55 -0
- package/README.md +125 -1
- package/dist/svelte-toggle-switch.css +1 -1
- package/dist/svelte-toggle-switch.js +1833 -1492
- package/dist/svelte-toggle-switch.umd.cjs +35 -30
- package/index.html +4 -1
- package/package.json +7 -2
- package/src/lib/Switch.svelte +789 -223
- package/svelte-toggle-switch-2.3.0.tgz +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,61 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [2.3.0] - 2026-01-16
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- **Pulse Animation**:
|
|
12
|
+
- `pulse` prop to enable attention-grabbing glow effect
|
|
13
|
+
- `pulseIntensity` prop with `'subtle'`, `'normal'`, and `'strong'` options
|
|
14
|
+
- `pulseColor` prop for custom glow color
|
|
15
|
+
- CSS keyframe animations with color-mix for smooth gradients
|
|
16
|
+
- Works across all 5 design variants
|
|
17
|
+
- **Success Animation**:
|
|
18
|
+
- `showSuccessAnimation` prop to enable visual feedback on toggle
|
|
19
|
+
- Animated checkmark icon with pop effect
|
|
20
|
+
- `successDuration` prop to customize animation length (default 1500ms)
|
|
21
|
+
- Green success state with smooth transitions
|
|
22
|
+
- **Error Animation**:
|
|
23
|
+
- `showErrorAnimation` prop for shake effect on failed operations
|
|
24
|
+
- Horizontal shake keyframe animation
|
|
25
|
+
- Useful for async toggle operations that may fail
|
|
26
|
+
- **Haptic Feedback**:
|
|
27
|
+
- `hapticFeedback` prop to enable vibration on mobile devices
|
|
28
|
+
- `hapticPattern` prop with presets: `'light'` (10ms), `'medium'` (20ms), `'heavy'` (30-10-30ms)
|
|
29
|
+
- Custom pattern support via number array (e.g., `[15, 5, 15, 5, 30]`)
|
|
30
|
+
- Uses Vibration API with graceful fallback
|
|
31
|
+
- **Skeleton Loading State**:
|
|
32
|
+
- `skeleton` prop to show loading placeholder instead of switch
|
|
33
|
+
- `skeletonAnimation` prop with `'shimmer'`, `'pulse'`, and `'wave'` options
|
|
34
|
+
- Design-specific skeleton sizes matching each variant
|
|
35
|
+
- Dark mode aware skeleton colors
|
|
36
|
+
- Label text also shows skeleton state
|
|
37
|
+
- **Tooltip Support**:
|
|
38
|
+
- `tooltip` prop to show hover tooltip text
|
|
39
|
+
- `tooltipPosition` prop with `'top'`, `'bottom'`, `'left'`, `'right'` options
|
|
40
|
+
- `tooltipDelay` prop to customize show delay (default 300ms)
|
|
41
|
+
- Arrow pointer indicating switch
|
|
42
|
+
- Smooth fade-in animation
|
|
43
|
+
- **Demo Application Enhancements**:
|
|
44
|
+
- Dedicated v2.3.0 features showcase section with green gradient theme
|
|
45
|
+
- 20+ interactive examples for new features
|
|
46
|
+
- Combined features demonstration
|
|
47
|
+
- Reload button for skeleton demo
|
|
48
|
+
- Feature descriptions for each section
|
|
49
|
+
|
|
50
|
+
### Changed
|
|
51
|
+
- Updated all click/touch handlers to respect skeleton state
|
|
52
|
+
- Enhanced internal state management for animations
|
|
53
|
+
- Added switch-wrapper element for tooltip positioning
|
|
54
|
+
- Improved CSS architecture with v2.3.0 comment sections
|
|
55
|
+
|
|
56
|
+
### Technical
|
|
57
|
+
- Added presentation role to container for accessibility
|
|
58
|
+
- Implemented SSR-safe navigator checks for haptic feedback
|
|
59
|
+
- Created animation keyframes for pulse, success, error, and skeleton
|
|
60
|
+
- Added tooltip positioning with CSS transforms
|
|
61
|
+
- Maintained full backward compatibility with v2.2.0
|
|
62
|
+
|
|
8
63
|
## [2.2.0] - 2026-01-06
|
|
9
64
|
|
|
10
65
|
### Added
|
package/README.md
CHANGED
|
@@ -17,6 +17,11 @@ A comprehensive, accessible, and highly customizable toggle switch component for
|
|
|
17
17
|
🌈 **Gradient Colors**: 5 beautiful gradient presets + custom gradients (v2.2.0)\
|
|
18
18
|
👆 **Touch Gestures**: Swipe to toggle on mobile devices (v2.2.0)\
|
|
19
19
|
🌐 **RTL Support**: Full right-to-left language support (v2.2.0)\
|
|
20
|
+
💫 **Pulse Animation**: Draw attention with pulsing glow effects (v2.3.0)\
|
|
21
|
+
✅ **Success Animation**: Visual feedback with checkmark animation (v2.3.0)\
|
|
22
|
+
📳 **Haptic Feedback**: Vibration feedback on mobile devices (v2.3.0)\
|
|
23
|
+
💀 **Skeleton Loading**: Shimmer/pulse placeholders while loading (v2.3.0)\
|
|
24
|
+
💬 **Tooltip Support**: Built-in tooltips with positioning (v2.3.0)\
|
|
20
25
|
🚀 **Modern Stack**: Built with Svelte 5, Vite 6, and TypeScript 5
|
|
21
26
|
|
|
22
27
|
## Installation
|
|
@@ -48,6 +53,100 @@ pnpm add svelte-toggle-switch
|
|
|
48
53
|
<Switch bind:value={enabled} label="Enable notifications" />
|
|
49
54
|
```
|
|
50
55
|
|
|
56
|
+
## New in v2.3.0
|
|
57
|
+
|
|
58
|
+
### 💫 Pulse Animation
|
|
59
|
+
|
|
60
|
+
Draw attention to important toggles with a pulsing glow effect.
|
|
61
|
+
|
|
62
|
+
```svelte
|
|
63
|
+
<!-- Subtle pulse -->
|
|
64
|
+
<Switch bind:value={enabled} pulse={true} pulseIntensity="subtle" label="Notifications" />
|
|
65
|
+
|
|
66
|
+
<!-- Normal pulse (default) -->
|
|
67
|
+
<Switch bind:value={enabled} pulse={true} pulseIntensity="normal" label="New Feature" />
|
|
68
|
+
|
|
69
|
+
<!-- Strong pulse -->
|
|
70
|
+
<Switch bind:value={enabled} pulse={true} pulseIntensity="strong" label="Important!" />
|
|
71
|
+
|
|
72
|
+
<!-- Custom pulse color -->
|
|
73
|
+
<Switch bind:value={enabled} pulse={true} pulseColor="#FF6B6B" label="Custom Glow" />
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### ✅ Success Animation
|
|
77
|
+
|
|
78
|
+
Visual feedback with checkmark animation when toggle action succeeds.
|
|
79
|
+
|
|
80
|
+
```svelte
|
|
81
|
+
<!-- Enable success animation -->
|
|
82
|
+
<Switch bind:value={enabled} showSuccessAnimation={true} label="Save changes" />
|
|
83
|
+
|
|
84
|
+
<!-- Custom animation duration -->
|
|
85
|
+
<Switch
|
|
86
|
+
bind:value={enabled}
|
|
87
|
+
showSuccessAnimation={true}
|
|
88
|
+
successDuration={2000}
|
|
89
|
+
label="Long feedback"
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 📳 Haptic Feedback
|
|
94
|
+
|
|
95
|
+
Vibration feedback on mobile devices using the Vibration API.
|
|
96
|
+
|
|
97
|
+
```svelte
|
|
98
|
+
<!-- Light haptic -->
|
|
99
|
+
<Switch bind:value={enabled} hapticFeedback={true} hapticPattern="light" label="Tap" />
|
|
100
|
+
|
|
101
|
+
<!-- Medium haptic -->
|
|
102
|
+
<Switch bind:value={enabled} hapticFeedback={true} hapticPattern="medium" label="Touch" />
|
|
103
|
+
|
|
104
|
+
<!-- Heavy haptic -->
|
|
105
|
+
<Switch bind:value={enabled} hapticFeedback={true} hapticPattern="heavy" label="Strong" />
|
|
106
|
+
|
|
107
|
+
<!-- Custom vibration pattern (ms) -->
|
|
108
|
+
<Switch
|
|
109
|
+
bind:value={enabled}
|
|
110
|
+
hapticFeedback={true}
|
|
111
|
+
hapticPattern={[15, 5, 15, 5, 30]}
|
|
112
|
+
label="Pattern"
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 💀 Skeleton Loading
|
|
117
|
+
|
|
118
|
+
Beautiful loading placeholders while fetching data.
|
|
119
|
+
|
|
120
|
+
```svelte
|
|
121
|
+
<!-- Shimmer animation (default) -->
|
|
122
|
+
<Switch bind:value={enabled} skeleton={isLoading} skeletonAnimation="shimmer" label="Settings" />
|
|
123
|
+
|
|
124
|
+
<!-- Pulse animation -->
|
|
125
|
+
<Switch bind:value={enabled} skeleton={isLoading} skeletonAnimation="pulse" label="Loading..." />
|
|
126
|
+
|
|
127
|
+
<!-- Wave animation -->
|
|
128
|
+
<Switch bind:value={enabled} skeleton={isLoading} skeletonAnimation="wave" label="Fetching..." />
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### 💬 Tooltip Support
|
|
132
|
+
|
|
133
|
+
Built-in tooltips to provide additional context.
|
|
134
|
+
|
|
135
|
+
```svelte
|
|
136
|
+
<!-- Top tooltip (default) -->
|
|
137
|
+
<Switch bind:value={enabled} tooltip="Enable this feature" tooltipPosition="top" label="Feature" />
|
|
138
|
+
|
|
139
|
+
<!-- Bottom tooltip -->
|
|
140
|
+
<Switch bind:value={enabled} tooltip="Affects all users" tooltipPosition="bottom" label="Global" />
|
|
141
|
+
|
|
142
|
+
<!-- Left/right tooltips -->
|
|
143
|
+
<Switch bind:value={enabled} tooltip="Warning!" tooltipPosition="left" label="Danger" />
|
|
144
|
+
<Switch bind:value={enabled} tooltip="Info" tooltipPosition="right" label="Setting" />
|
|
145
|
+
|
|
146
|
+
<!-- Custom delay -->
|
|
147
|
+
<Switch bind:value={enabled} tooltip="Quick tip" tooltipDelay={100} label="Fast" />
|
|
148
|
+
```
|
|
149
|
+
|
|
51
150
|
## New in v2.2.0
|
|
52
151
|
|
|
53
152
|
### 🌙 Dark Mode Support
|
|
@@ -339,6 +438,19 @@ Add custom icons to your toggles.
|
|
|
339
438
|
| `swipeToToggle` | `boolean` | `false` | Enable swipe gesture to toggle (mobile) (v2.2.0) |
|
|
340
439
|
| `swipeThreshold` | `number` | `50` | Swipe distance in pixels to trigger toggle (v2.2.0) |
|
|
341
440
|
| `dir` | `'ltr' \| 'rtl' \| 'auto'` | `'auto'` | Text direction for RTL support (v2.2.0) |
|
|
441
|
+
| `pulse` | `boolean` | `false` | Enable pulse animation (v2.3.0) |
|
|
442
|
+
| `pulseIntensity` | `'subtle' \| 'normal' \| 'strong'` | `'normal'` | Pulse animation intensity (v2.3.0) |
|
|
443
|
+
| `pulseColor` | `string` | `''` | Custom pulse glow color (v2.3.0) |
|
|
444
|
+
| `showSuccessAnimation` | `boolean` | `false` | Show checkmark animation on toggle (v2.3.0) |
|
|
445
|
+
| `showErrorAnimation` | `boolean` | `false` | Show shake animation on error (v2.3.0) |
|
|
446
|
+
| `successDuration` | `number` | `1500` | Duration of success animation in ms (v2.3.0) |
|
|
447
|
+
| `hapticFeedback` | `boolean` | `false` | Enable vibration on mobile (v2.3.0) |
|
|
448
|
+
| `hapticPattern` | `'light' \| 'medium' \| 'heavy' \| number[]` | `'light'` | Haptic vibration pattern (v2.3.0) |
|
|
449
|
+
| `skeleton` | `boolean` | `false` | Show skeleton loading state (v2.3.0) |
|
|
450
|
+
| `skeletonAnimation` | `'shimmer' \| 'pulse' \| 'wave'` | `'shimmer'` | Skeleton animation type (v2.3.0) |
|
|
451
|
+
| `tooltip` | `string` | `''` | Tooltip text to display on hover (v2.3.0) |
|
|
452
|
+
| `tooltipPosition` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Tooltip position (v2.3.0) |
|
|
453
|
+
| `tooltipDelay` | `number` | `300` | Delay before showing tooltip in ms (v2.3.0) |
|
|
342
454
|
|
|
343
455
|
## Accessibility
|
|
344
456
|
|
|
@@ -468,7 +580,19 @@ MIT © [Ishan Karunaratne](https://github.com/ishansasika)
|
|
|
468
580
|
|
|
469
581
|
## Changelog
|
|
470
582
|
|
|
471
|
-
### Version 2.
|
|
583
|
+
### Version 2.3.0 (Latest)
|
|
584
|
+
|
|
585
|
+
**New Features** - Enhanced animations and user feedback:
|
|
586
|
+
|
|
587
|
+
- 💫 **Pulse Animation**: Draw attention with subtle/normal/strong glow effects
|
|
588
|
+
- ✅ **Success Animation**: Checkmark animation on successful toggle
|
|
589
|
+
- 📳 **Haptic Feedback**: Vibration patterns on mobile devices
|
|
590
|
+
- 💀 **Skeleton Loading**: Shimmer/pulse/wave loading placeholders
|
|
591
|
+
- 💬 **Tooltip Support**: Built-in tooltips with 4 positions
|
|
592
|
+
- 🎨 Custom pulse colors and animation durations
|
|
593
|
+
- 📱 Custom haptic vibration patterns
|
|
594
|
+
|
|
595
|
+
### Version 2.2.0
|
|
472
596
|
|
|
473
597
|
**New Features** - Enhanced mobile experience and theming:
|
|
474
598
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--active-color: #007AFF;--off-color: #E5E7EB;--animation-duration: .3s;--animation-easing: ease-in-out}.switch-container.svelte-128hqhb{display:inline-flex;align-items:center;gap:.75em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.switch-container.disabled.svelte-128hqhb{opacity:.5;cursor:not-allowed}.switch-container.readonly.svelte-128hqhb{cursor:default}.switch-container.dark.svelte-128hqhb .switch-label:where(.svelte-128hqhb){color:#e5e7eb}.switch-label.svelte-128hqhb{-webkit-user-select:none;user-select:none;font-size:1em;color:#374151;transition:color var(--animation-duration) var(--animation-easing)}.switch-helper-text.svelte-128hqhb{display:block;font-size:.875em;color:#6b7280;margin-top:.375em;line-height:1.4}.switch-helper-text.error-text.svelte-128hqhb{color:#ef4444}.switch.svelte-128hqhb{position:relative;border:none;cursor:pointer;transition:all var(--animation-duration) var(--animation-easing);font-family:inherit}.switch.svelte-128hqhb:disabled{cursor:not-allowed}.switch.svelte-128hqhb:focus-visible{outline:2px solid var(--active-color);outline-offset:2px}.switch.shadow.svelte-128hqhb{box-shadow:0 2px 4px #0000001a}.switch.outline.svelte-128hqhb{border:1px solid #D1D5DB}.switch.error.svelte-128hqhb{border-color:#ef4444}.switch.error.svelte-128hqhb:focus-visible{outline-color:#ef4444}.switch--inner.svelte-128hqhb{padding:.4em .8em;background-color:var(--off-color);color:#6b7280;font-weight:500;font-size:.875em;min-width:4em;border-radius:.25em}.switch--inner.rounded.svelte-128hqhb{border-radius:.5em}.switch--inner.checked.svelte-128hqhb{background-color:var(--active-color);color:#fff}.switch--inner.checked.gradient.svelte-128hqhb{background:var(--active-color)}.switch--inner.svelte-128hqhb .switch-text:where(.svelte-128hqhb){display:block;-webkit-user-select:none;user-select:none;pointer-events:none}.switch--slider.svelte-128hqhb{padding:0;background:transparent;width:3.5em;height:2em}.switch-track.svelte-128hqhb{position:relative;display:block;width:100%;height:100%;background-color:var(--off-color);border-radius:1em;transition:background-color var(--animation-duration) var(--animation-easing)}.switch--slider.checked.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background-color:var(--active-color)}.switch--slider.checked.gradient.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background:var(--active-color)}.switch-thumb.svelte-128hqhb{position:absolute;top:.15em;left:.15em;width:1.7em;height:1.7em;background-color:#fff;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing);box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.switch--slider.checked.svelte-128hqhb .switch-thumb:where(.svelte-128hqhb){transform:translate(1.5em)}.switch-thumb.dragging.svelte-128hqhb{transition:none;transform:translate(calc(var(--drag-offset, 0px)))}.switch--slider.checked.svelte-128hqhb .switch-thumb.dragging:where(.svelte-128hqhb){transform:translate(calc(1.5em + var(--drag-offset, 0px)))}.switch--slider.rtl.checked.svelte-128hqhb .switch-thumb:where(.svelte-128hqhb){transform:translate(-1.5em)}.switch--slider.rtl.checked.svelte-128hqhb .switch-thumb.dragging:where(.svelte-128hqhb){transform:translate(calc(-1.5em + var(--drag-offset, 0px)))}.switch-icon.svelte-128hqhb{font-size:.75em;-webkit-user-select:none;user-select:none}.switch--modern.svelte-128hqhb{padding:0;background:transparent;width:4em;height:2.2em}.switch--modern.svelte-128hqhb .switch-track:where(.svelte-128hqhb){border-radius:1.1em}.switch-thumb-modern.svelte-128hqhb{position:absolute;top:.2em;left:.2em;width:1.8em;height:1.8em;background-color:#fff;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing),background-color var(--animation-duration) var(--animation-easing);box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.switch--modern.checked.svelte-128hqhb .switch-thumb-modern:where(.svelte-128hqhb){transform:translate(1.8em)}.switch-thumb-modern.dragging.svelte-128hqhb{transition:none;transform:translate(calc(var(--drag-offset, 0px)))}.switch--modern.checked.svelte-128hqhb .switch-thumb-modern.dragging:where(.svelte-128hqhb){transform:translate(calc(1.8em + var(--drag-offset, 0px)))}.switch--modern.rtl.checked.svelte-128hqhb .switch-thumb-modern:where(.svelte-128hqhb){transform:translate(-1.8em)}.switch--modern.rtl.checked.svelte-128hqhb .switch-thumb-modern.dragging:where(.svelte-128hqhb){transform:translate(calc(-1.8em + var(--drag-offset, 0px)))}.switch--modern.checked.gradient.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background:var(--active-color)}.track-icons.svelte-128hqhb{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 .5em;pointer-events:none}.track-icon.svelte-128hqhb{font-size:.7em;color:#fff;opacity:0;transition:opacity var(--animation-duration) var(--animation-easing)}.switch--modern.checked.svelte-128hqhb .track-icon--on:where(.svelte-128hqhb){opacity:1}.switch--modern.svelte-128hqhb:not(.checked) .track-icon--off:where(.svelte-128hqhb){opacity:.7}.switch-icon-modern.svelte-128hqhb{font-size:.8em;-webkit-user-select:none;user-select:none;color:var(--active-color)}.switch--material.svelte-128hqhb{padding:0;background:transparent;width:3.5em;height:1.5em}.switch-track-material.svelte-128hqhb{position:relative;display:block;width:100%;height:100%;background-color:var(--off-color);border-radius:.75em;transition:background-color var(--animation-duration) var(--animation-easing)}.switch--material.checked.svelte-128hqhb .switch-track-material:where(.svelte-128hqhb){background-color:var(--active-color);opacity:.5}.switch-thumb-material.svelte-128hqhb{position:absolute;top:50%;left:0;transform:translateY(-50%);width:1.5em;height:1.5em;background-color:#fafafa;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing),background-color var(--animation-duration) var(--animation-easing);box-shadow:0 2px 4px #0000004d;display:flex;align-items:center;justify-content:center}.switch--material.checked.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){transform:translateY(-50%) translate(2em);background-color:var(--active-color)}.switch-thumb-material.dragging.svelte-128hqhb{transition:none;transform:translateY(-50%) translate(calc(var(--drag-offset, 0px)))}.switch--material.checked.svelte-128hqhb .switch-thumb-material.dragging:where(.svelte-128hqhb){transform:translateY(-50%) translate(calc(2em + var(--drag-offset, 0px)))}.switch--material.rtl.checked.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){transform:translateY(-50%) translate(-2em)}.switch--material.rtl.checked.svelte-128hqhb .switch-thumb-material.dragging:where(.svelte-128hqhb){transform:translateY(-50%) translate(calc(-2em + var(--drag-offset, 0px)))}.switch--material.checked.gradient.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){background:var(--active-color)}.switch-container--multi.svelte-128hqhb{display:block}.switch-multi.svelte-128hqhb{display:inline-block}.switch-multi-legend.svelte-128hqhb{font-size:.9em;color:#374151;margin-bottom:.5em;font-weight:500}.switch-multi-options.svelte-128hqhb{display:inline-flex;background-color:var(--off-color);border-radius:.5em;padding:.25em;position:relative}.switch-multi-options.shadow.svelte-128hqhb{box-shadow:0 2px 4px #0000001a}.switch-multi-options.outline.svelte-128hqhb{border:1px solid #D1D5DB}.switch-multi-input.svelte-128hqhb{position:absolute;opacity:0;pointer-events:none}.switch-multi-label.svelte-128hqhb{position:relative;padding:.5em 1.2em;border-radius:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--animation-duration) var(--animation-easing);font-size:.875em;font-weight:500;color:#6b7280;z-index:1}.switch-multi-label.first.svelte-128hqhb{margin-left:0}.switch-multi-label.last.svelte-128hqhb{margin-right:0}.switch-multi-input.svelte-128hqhb:checked+.switch-multi-label:where(.svelte-128hqhb){background-color:var(--active-color);color:#fff;box-shadow:0 1px 3px #0000001a}.switch-multi-options.gradient.svelte-128hqhb .switch-multi-input:where(.svelte-128hqhb):checked+.switch-multi-label:where(.svelte-128hqhb){background:var(--active-color)}.switch-multi-input.svelte-128hqhb:focus-visible+.switch-multi-label:where(.svelte-128hqhb){outline:2px solid var(--active-color);outline-offset:2px}.switch-multi-input.svelte-128hqhb:disabled+.switch-multi-label:where(.svelte-128hqhb){cursor:not-allowed;opacity:.5}.spinner.svelte-128hqhb,.spinner-small.svelte-128hqhb{display:inline-block;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:svelte-128hqhb-spin .6s linear infinite}.spinner.svelte-128hqhb{width:1em;height:1em}.spinner-small.svelte-128hqhb{width:.8em;height:.8em;border-width:1.5px}@keyframes svelte-128hqhb-spin{to{transform:rotate(360deg)}}.switch.svelte-128hqhb:not(:disabled):hover{opacity:.9}.switch-multi-label.svelte-128hqhb:hover{background-color:#0000000d}.switch-multi-input.svelte-128hqhb:checked+.switch-multi-label:where(.svelte-128hqhb):hover{background-color:var(--active-color);opacity:.9}
|
|
1
|
+
:root{--active-color: #007AFF;--off-color: #E5E7EB;--animation-duration: .3s;--animation-easing: ease-in-out}.switch-container.svelte-128hqhb{display:inline-flex;align-items:center;gap:.75em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.switch-container.disabled.svelte-128hqhb{opacity:.5;cursor:not-allowed}.switch-container.readonly.svelte-128hqhb{cursor:default}.switch-container.dark.svelte-128hqhb .switch-label:where(.svelte-128hqhb){color:#e5e7eb}.switch-label.svelte-128hqhb{-webkit-user-select:none;user-select:none;font-size:1em;color:#374151;transition:color var(--animation-duration) var(--animation-easing)}.switch-helper-text.svelte-128hqhb{display:block;font-size:.875em;color:#6b7280;margin-top:.375em;line-height:1.4}.switch-helper-text.error-text.svelte-128hqhb{color:#ef4444}.switch.svelte-128hqhb{position:relative;border:none;cursor:pointer;transition:all var(--animation-duration) var(--animation-easing);font-family:inherit}.switch.svelte-128hqhb:disabled{cursor:not-allowed}.switch.svelte-128hqhb:focus-visible{outline:2px solid var(--active-color);outline-offset:2px}.switch.shadow.svelte-128hqhb{box-shadow:0 2px 4px #0000001a}.switch.outline.svelte-128hqhb{border:1px solid #D1D5DB}.switch.error.svelte-128hqhb{border-color:#ef4444}.switch.error.svelte-128hqhb:focus-visible{outline-color:#ef4444}.switch--inner.svelte-128hqhb{padding:.4em .8em;background-color:var(--off-color);color:#6b7280;font-weight:500;font-size:.875em;min-width:4em;border-radius:.25em}.switch--inner.rounded.svelte-128hqhb{border-radius:.5em}.switch--inner.checked.svelte-128hqhb{background-color:var(--active-color);color:#fff}.switch--inner.checked.gradient.svelte-128hqhb{background:var(--active-color)}.switch--inner.svelte-128hqhb .switch-text:where(.svelte-128hqhb){display:block;-webkit-user-select:none;user-select:none;pointer-events:none}.switch--slider.svelte-128hqhb{padding:0;background:transparent;width:3.5em;height:2em}.switch-track.svelte-128hqhb{position:relative;display:block;width:100%;height:100%;background-color:var(--off-color);border-radius:1em;transition:background-color var(--animation-duration) var(--animation-easing)}.switch--slider.checked.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background-color:var(--active-color)}.switch--slider.checked.gradient.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background:var(--active-color)}.switch-thumb.svelte-128hqhb{position:absolute;top:.15em;left:.15em;width:1.7em;height:1.7em;background-color:#fff;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing);box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.switch--slider.checked.svelte-128hqhb .switch-thumb:where(.svelte-128hqhb){transform:translate(1.5em)}.switch-thumb.dragging.svelte-128hqhb{transition:none;transform:translate(calc(var(--drag-offset, 0px)))}.switch--slider.checked.svelte-128hqhb .switch-thumb.dragging:where(.svelte-128hqhb){transform:translate(calc(1.5em + var(--drag-offset, 0px)))}.switch--slider.rtl.checked.svelte-128hqhb .switch-thumb:where(.svelte-128hqhb){transform:translate(-1.5em)}.switch--slider.rtl.checked.svelte-128hqhb .switch-thumb.dragging:where(.svelte-128hqhb){transform:translate(calc(-1.5em + var(--drag-offset, 0px)))}.switch-icon.svelte-128hqhb{font-size:.75em;-webkit-user-select:none;user-select:none}.switch--modern.svelte-128hqhb{padding:0;background:transparent;width:4em;height:2.2em}.switch--modern.svelte-128hqhb .switch-track:where(.svelte-128hqhb){border-radius:1.1em}.switch-thumb-modern.svelte-128hqhb{position:absolute;top:.2em;left:.2em;width:1.8em;height:1.8em;background-color:#fff;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing),background-color var(--animation-duration) var(--animation-easing);box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.switch--modern.checked.svelte-128hqhb .switch-thumb-modern:where(.svelte-128hqhb){transform:translate(1.8em)}.switch-thumb-modern.dragging.svelte-128hqhb{transition:none;transform:translate(calc(var(--drag-offset, 0px)))}.switch--modern.checked.svelte-128hqhb .switch-thumb-modern.dragging:where(.svelte-128hqhb){transform:translate(calc(1.8em + var(--drag-offset, 0px)))}.switch--modern.rtl.checked.svelte-128hqhb .switch-thumb-modern:where(.svelte-128hqhb){transform:translate(-1.8em)}.switch--modern.rtl.checked.svelte-128hqhb .switch-thumb-modern.dragging:where(.svelte-128hqhb){transform:translate(calc(-1.8em + var(--drag-offset, 0px)))}.switch--modern.checked.gradient.svelte-128hqhb .switch-track:where(.svelte-128hqhb){background:var(--active-color)}.track-icons.svelte-128hqhb{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 .5em;pointer-events:none}.track-icon.svelte-128hqhb{font-size:.7em;color:#fff;opacity:0;transition:opacity var(--animation-duration) var(--animation-easing)}.switch--modern.checked.svelte-128hqhb .track-icon--on:where(.svelte-128hqhb){opacity:1}.switch--modern.svelte-128hqhb:not(.checked) .track-icon--off:where(.svelte-128hqhb){opacity:.7}.switch-icon-modern.svelte-128hqhb{font-size:.8em;-webkit-user-select:none;user-select:none;color:var(--active-color)}.switch--material.svelte-128hqhb{padding:0;background:transparent;width:3.5em;height:1.5em}.switch-track-material.svelte-128hqhb{position:relative;display:block;width:100%;height:100%;background-color:var(--off-color);border-radius:.75em;transition:background-color var(--animation-duration) var(--animation-easing)}.switch--material.checked.svelte-128hqhb .switch-track-material:where(.svelte-128hqhb){background-color:var(--active-color);opacity:.5}.switch-thumb-material.svelte-128hqhb{position:absolute;top:50%;left:0;transform:translateY(-50%);width:1.5em;height:1.5em;background-color:#fafafa;border-radius:50%;transition:transform var(--animation-duration) var(--animation-easing),background-color var(--animation-duration) var(--animation-easing);box-shadow:0 2px 4px #0000004d;display:flex;align-items:center;justify-content:center}.switch--material.checked.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){transform:translateY(-50%) translate(2em);background-color:var(--active-color)}.switch-thumb-material.dragging.svelte-128hqhb{transition:none;transform:translateY(-50%) translate(calc(var(--drag-offset, 0px)))}.switch--material.checked.svelte-128hqhb .switch-thumb-material.dragging:where(.svelte-128hqhb){transform:translateY(-50%) translate(calc(2em + var(--drag-offset, 0px)))}.switch--material.rtl.checked.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){transform:translateY(-50%) translate(-2em)}.switch--material.rtl.checked.svelte-128hqhb .switch-thumb-material.dragging:where(.svelte-128hqhb){transform:translateY(-50%) translate(calc(-2em + var(--drag-offset, 0px)))}.switch--material.checked.gradient.svelte-128hqhb .switch-thumb-material:where(.svelte-128hqhb){background:var(--active-color)}.switch-container--multi.svelte-128hqhb{display:block}.switch-multi.svelte-128hqhb{display:inline-block}.switch-multi-legend.svelte-128hqhb{font-size:.9em;color:#374151;margin-bottom:.5em;font-weight:500}.switch-multi-options.svelte-128hqhb{display:inline-flex;background-color:var(--off-color);border-radius:.5em;padding:.25em;position:relative}.switch-multi-options.shadow.svelte-128hqhb{box-shadow:0 2px 4px #0000001a}.switch-multi-options.outline.svelte-128hqhb{border:1px solid #D1D5DB}.switch-multi-input.svelte-128hqhb{position:absolute;opacity:0;pointer-events:none}.switch-multi-label.svelte-128hqhb{position:relative;padding:.5em 1.2em;border-radius:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--animation-duration) var(--animation-easing);font-size:.875em;font-weight:500;color:#6b7280;z-index:1}.switch-multi-label.first.svelte-128hqhb{margin-left:0}.switch-multi-label.last.svelte-128hqhb{margin-right:0}.switch-multi-input.svelte-128hqhb:checked+.switch-multi-label:where(.svelte-128hqhb){background-color:var(--active-color);color:#fff;box-shadow:0 1px 3px #0000001a}.switch-multi-options.gradient.svelte-128hqhb .switch-multi-input:where(.svelte-128hqhb):checked+.switch-multi-label:where(.svelte-128hqhb){background:var(--active-color)}.switch-multi-input.svelte-128hqhb:focus-visible+.switch-multi-label:where(.svelte-128hqhb){outline:2px solid var(--active-color);outline-offset:2px}.switch-multi-input.svelte-128hqhb:disabled+.switch-multi-label:where(.svelte-128hqhb){cursor:not-allowed;opacity:.5}.spinner.svelte-128hqhb,.spinner-small.svelte-128hqhb{display:inline-block;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:svelte-128hqhb-spin .6s linear infinite}.spinner.svelte-128hqhb{width:1em;height:1em}.spinner-small.svelte-128hqhb{width:.8em;height:.8em;border-width:1.5px}@keyframes svelte-128hqhb-spin{to{transform:rotate(360deg)}}.switch.svelte-128hqhb:not(:disabled):hover{opacity:.9}.switch-multi-label.svelte-128hqhb:hover{background-color:#0000000d}.switch-multi-input.svelte-128hqhb:checked+.switch-multi-label:where(.svelte-128hqhb):hover{background-color:var(--active-color);opacity:.9}.switch-wrapper.svelte-128hqhb{position:relative;display:inline-flex;align-items:center}.switch.pulse.svelte-128hqhb,.switch-multi.pulse.svelte-128hqhb{animation:svelte-128hqhb-pulse-animation 2s infinite}.switch.pulse-subtle.svelte-128hqhb,.switch-multi.pulse-subtle.svelte-128hqhb{animation:svelte-128hqhb-pulse-animation-subtle 2s infinite}.switch.pulse-normal.svelte-128hqhb,.switch-multi.pulse-normal.svelte-128hqhb{animation:svelte-128hqhb-pulse-animation-normal 2s infinite}.switch.pulse-strong.svelte-128hqhb,.switch-multi.pulse-strong.svelte-128hqhb{animation:svelte-128hqhb-pulse-animation-strong 2s infinite}@keyframes svelte-128hqhb-pulse-animation-subtle{0%,to{box-shadow:0 0 0 0 var(--pulse-color)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--pulse-color) 30%,transparent)}}@keyframes svelte-128hqhb-pulse-animation-normal{0%,to{box-shadow:0 0 0 0 var(--pulse-color)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--pulse-color) 50%,transparent)}}@keyframes svelte-128hqhb-pulse-animation-strong{0%,to{box-shadow:0 0 0 0 var(--pulse-color)}50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--pulse-color) 70%,transparent)}}@keyframes svelte-128hqhb-pulse-animation{0%,to{box-shadow:0 0 0 0 var(--pulse-color)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--pulse-color) 50%,transparent)}}.switch.success-animation.svelte-128hqhb{animation:svelte-128hqhb-success-pop .3s ease-out}.switch.success-animation.svelte-128hqhb .switch-track:where(.svelte-128hqhb),.switch.success-animation.svelte-128hqhb .switch-track-material:where(.svelte-128hqhb){background-color:#10b981!important}@keyframes svelte-128hqhb-success-pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.success-icon.svelte-128hqhb{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9em;animation:svelte-128hqhb-success-checkmark .3s ease-out}.success-icon-small.svelte-128hqhb{display:flex;align-items:center;justify-content:center;color:#10b981;font-size:.7em;font-weight:700;animation:svelte-128hqhb-success-checkmark .3s ease-out}@keyframes svelte-128hqhb-success-checkmark{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.switch.error-animation.svelte-128hqhb{animation:svelte-128hqhb-error-shake .4s ease-out}@keyframes svelte-128hqhb-error-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.switch-skeleton.svelte-128hqhb{background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;border-radius:1em}.switch-skeleton--slider.svelte-128hqhb,.switch-skeleton--modern.svelte-128hqhb{width:3.5em;height:2em}.switch-skeleton--modern.svelte-128hqhb{width:4em;height:2.2em}.switch-skeleton--inner.svelte-128hqhb{width:4em;height:2em;border-radius:.5em}.switch-skeleton--material.svelte-128hqhb{width:3.5em;height:1.5em;border-radius:.75em}.switch-skeleton--multi.svelte-128hqhb{width:12em;height:2.5em;border-radius:.5em}.skeleton-text.svelte-128hqhb{background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;border-radius:.25em;min-width:4em;min-height:1em;color:transparent!important}.skeleton-shimmer.svelte-128hqhb{animation:svelte-128hqhb-skeleton-shimmer 1.5s infinite}.skeleton-pulse.svelte-128hqhb{animation:svelte-128hqhb-skeleton-pulse 1.5s infinite}.skeleton-wave.svelte-128hqhb{animation:svelte-128hqhb-skeleton-wave 1.5s infinite}@keyframes svelte-128hqhb-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes svelte-128hqhb-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes svelte-128hqhb-skeleton-wave{0%{background-position:200% 0;opacity:1}50%{opacity:.7}to{background-position:-200% 0;opacity:1}}.switch-container.dark.svelte-128hqhb .switch-skeleton:where(.svelte-128hqhb),.switch-container.dark.svelte-128hqhb .skeleton-text:where(.svelte-128hqhb){background:linear-gradient(90deg,#374151 25%,#4b5563,#374151 75%);background-size:200% 100%}.switch-tooltip.svelte-128hqhb{position:absolute;background-color:#1f2937;color:#fff;padding:.5em .75em;border-radius:.375em;font-size:.75em;white-space:nowrap;z-index:1000;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;animation:svelte-128hqhb-tooltip-fade-in .2s ease-out;pointer-events:none}.switch-tooltip.svelte-128hqhb:after{content:"";position:absolute;border:6px solid transparent}.switch-tooltip.tooltip-top.svelte-128hqhb{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.switch-tooltip.tooltip-top.svelte-128hqhb:after{top:100%;left:50%;transform:translate(-50%);border-top-color:#1f2937}.switch-tooltip.tooltip-bottom.svelte-128hqhb{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.switch-tooltip.tooltip-bottom.svelte-128hqhb:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:#1f2937}.switch-tooltip.tooltip-left.svelte-128hqhb{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.switch-tooltip.tooltip-left.svelte-128hqhb:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:#1f2937}.switch-tooltip.tooltip-right.svelte-128hqhb{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.switch-tooltip.tooltip-right.svelte-128hqhb:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:#1f2937}@keyframes svelte-128hqhb-tooltip-fade-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.switch-tooltip.tooltip-left.svelte-128hqhb,.switch-tooltip.tooltip-right.svelte-128hqhb{animation:svelte-128hqhb-tooltip-fade-in-horizontal .2s ease-out}@keyframes svelte-128hqhb-tooltip-fade-in-horizontal{0%{opacity:0;transform:translateY(-50%) translate(4px)}to{opacity:1;transform:translateY(-50%) translate(0)}}
|