ui-svelte 0.2.19 → 0.2.20

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.
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .bd-glow {
3
3
  position: relative;
4
- border: 1px solid transparent;
4
+ border: 1px solid transparent !important;
5
5
  box-shadow:
6
6
  0 0 8px var(--bd-color, var(--primary)),
7
7
  0 0 16px color-mix(in oklch, var(--bd-color, var(--primary)) 50%, transparent);
@@ -17,7 +17,7 @@
17
17
 
18
18
  .bd-neon {
19
19
  position: relative;
20
- border: 2px solid var(--bd-color, var(--secondary));
20
+ border: 2px solid var(--bd-color, var(--secondary)) !important;
21
21
  box-shadow:
22
22
  0 0 5px var(--bd-color, var(--secondary)),
23
23
  0 0 10px var(--bd-color, var(--secondary)),
@@ -46,11 +46,11 @@
46
46
 
47
47
  .bd-grad {
48
48
  position: relative;
49
- border: 2px solid transparent;
49
+ border: 2px solid transparent !important;
50
50
  background:
51
51
  linear-gradient(var(--background), var(--background)) padding-box,
52
52
  linear-gradient(135deg, var(--bd-from, var(--primary)), var(--bd-to, var(--secondary)))
53
- border-box;
53
+ border-box !important;
54
54
  transition: all 0.3s ease;
55
55
  }
56
56
 
@@ -60,9 +60,10 @@
60
60
 
61
61
  .bd-rainbow {
62
62
  position: relative;
63
- border: none;
63
+ border: none !important;
64
64
  overflow: hidden;
65
65
  background: var(--background);
66
+ isolation: isolate;
66
67
  }
67
68
 
68
69
  .bd-rainbow::before {
@@ -104,7 +105,7 @@
104
105
  .bd-shimmer {
105
106
  position: relative;
106
107
  overflow: hidden;
107
- border: 2px solid color-mix(in oklch, var(--bd-color, var(--primary)) 40%, transparent);
108
+ border: 2px solid color-mix(in oklch, var(--bd-color, var(--primary)) 40%, transparent) !important;
108
109
  }
109
110
 
110
111
  .bd-shimmer::before {
@@ -143,7 +144,7 @@
143
144
 
144
145
  .bd-pulse {
145
146
  position: relative;
146
- border: 2px solid var(--bd-color, var(--primary));
147
+ border: 2px solid var(--bd-color, var(--primary)) !important;
147
148
  }
148
149
 
149
150
  .bd-pulse::after {
@@ -170,9 +171,10 @@
170
171
 
171
172
  .bd-wave {
172
173
  position: relative;
173
- border: none;
174
+ border: none !important;
174
175
  overflow: hidden;
175
176
  background: var(--background);
177
+ isolation: isolate;
176
178
  }
177
179
 
178
180
  .bd-wave::before {
@@ -211,7 +213,7 @@
211
213
 
212
214
  .bd-frost {
213
215
  position: relative;
214
- border: 1px solid color-mix(in oklch, var(--bd-color, var(--info)) 50%, white);
216
+ border: 1px solid color-mix(in oklch, var(--bd-color, var(--info)) 50%, white) !important;
215
217
  box-shadow:
216
218
  0 0 10px color-mix(in oklch, var(--bd-color, var(--info)) 30%, white),
217
219
  inset 0 0 20px color-mix(in oklch, var(--bd-color, var(--info)) 10%, white);
@@ -227,7 +229,7 @@
227
229
 
228
230
  .bd-ember {
229
231
  position: relative;
230
- border: 2px solid var(--danger);
232
+ border: 2px solid var(--danger) !important;
231
233
  box-shadow:
232
234
  0 0 10px var(--warning),
233
235
  0 0 20px var(--danger),
@@ -253,7 +255,7 @@
253
255
 
254
256
  .bd-laser {
255
257
  position: relative;
256
- border: 1px solid color-mix(in oklch, var(--bd-color, var(--primary)) 30%, transparent);
258
+ border: 1px solid color-mix(in oklch, var(--bd-color, var(--primary)) 30%, transparent) !important;
257
259
  overflow: hidden;
258
260
  }
259
261
 
@@ -310,7 +312,7 @@
310
312
  }
311
313
 
312
314
  .bd-solid {
313
- border: 2px solid var(--bd-color, var(--on-background));
315
+ border: 2px solid var(--bd-color, var(--on-background)) !important;
314
316
  transition: all 0.3s ease;
315
317
  }
316
318
 
@@ -331,7 +333,7 @@
331
333
  repeat-y,
332
334
  linear-gradient(0deg, var(--bd-color, var(--primary)) 50%, transparent 50%) right/2px 10px
333
335
  repeat-y;
334
- border: none;
336
+ border: none !important;
335
337
  background-size:
336
338
  20px 2px,
337
339
  20px 2px,
@@ -152,7 +152,7 @@
152
152
  id={`${uid}-{name}`}
153
153
  class={cn(
154
154
  'control-input',
155
- isFloatLabel && !isActive && !isFocused && value == '' && 'invisible',
155
+ isFloatLabel && !isActive && !isFocused && value == '' && 'is-invisible',
156
156
  controlClass
157
157
  )}
158
158
  {placeholder}
@@ -122,7 +122,7 @@
122
122
  class={cn(
123
123
  'textarea-control-input',
124
124
  isResize && 'is-resizable',
125
- isFloatLabel && !isActive && !isFocused && value == '' && 'invisible',
125
+ isFloatLabel && !isActive && !isFocused && value == '' && 'is-invisible',
126
126
  controlClass
127
127
  )}
128
128
  {placeholder}
@@ -253,6 +253,10 @@
253
253
  .control-input {
254
254
  @apply appearance-none flex-1 border-none outline-none truncate;
255
255
  @apply placeholder:transition-opacity placeholder:duration-300;
256
+
257
+ &.is-invisible {
258
+ @apply opacity-0;
259
+ }
256
260
  }
257
261
 
258
262
  .control-input,
@@ -222,7 +222,7 @@
222
222
  @apply min-h-12;
223
223
  resize: none;
224
224
 
225
- &.invisible {
225
+ &.is-invisible {
226
226
  @apply opacity-0;
227
227
  }
228
228
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-svelte",
3
- "version": "0.2.19",
3
+ "version": "0.2.20",
4
4
  "author": {
5
5
  "name": "SappsDev",
6
6
  "email": "info@sappsdev.com"