sveltacular 1.0.4 → 1.0.6
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/README.md +21 -2
- package/dist/forms/base-input-wrapper.svelte +0 -2
- package/dist/forms/check-box/check-box-group.svelte +2 -2
- package/dist/forms/date-box/date-box.svelte +15 -4
- package/dist/forms/file-box/file-box.svelte +1 -1
- package/dist/forms/form-field/form-field.svelte +86 -0
- package/dist/forms/form-field/form-field.svelte.d.ts +16 -0
- package/dist/forms/form-footer.svelte +7 -5
- package/dist/forms/form-label/form-label.svelte +30 -0
- package/dist/forms/form-label/form-label.svelte.d.ts +9 -0
- package/dist/forms/form-row/form-row.svelte +29 -0
- package/dist/forms/form-row/form-row.svelte.d.ts +7 -0
- package/dist/forms/form-section/form-section.svelte +36 -0
- package/dist/forms/form-section/form-section.svelte.d.ts +10 -0
- package/dist/forms/index.d.ts +10 -6
- package/dist/forms/index.js +10 -7
- package/dist/forms/info-box/info-box.svelte +1 -1
- package/dist/forms/list-box/list-box.svelte +3 -3
- package/dist/forms/money-box/money-box.svelte +27 -17
- package/dist/forms/number-box/number-box.svelte +5 -2
- package/dist/forms/number-range-box/number-range-box.svelte +218 -0
- package/dist/forms/number-range-box/number-range-box.svelte.d.ts +21 -0
- package/dist/forms/phone-box/phone-box.svelte +25 -13
- package/dist/forms/radio-group/radio-group.svelte +1 -1
- package/dist/forms/slider/slider.svelte +15 -15
- package/dist/forms/tag-input-box/tag-input-box.svelte +203 -0
- package/dist/forms/tag-input-box/tag-input-box.svelte.d.ts +17 -0
- package/dist/forms/text-area/text-area.svelte +1 -1
- package/dist/forms/text-box/text-box.svelte +1 -1
- package/dist/forms/time-box/time-box.svelte +42 -17
- package/dist/generic/avatar/avatar.svelte +3 -0
- package/dist/generic/chip/chip.svelte +3 -0
- package/dist/navigation/context-menu/README.md +3 -0
- package/dist/navigation/context-menu/context-menu-divider.svelte +3 -0
- package/dist/sveltacular.css +5 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { uniqueId } from '../../helpers/unique-id.js';
|
|
3
|
-
import FormField from '../form-field.svelte';
|
|
3
|
+
import FormField from '../form-field/form-field.svelte';
|
|
4
4
|
import type { ComponentSize } from '../../types/size.js';
|
|
5
5
|
|
|
6
6
|
const id = uniqueId();
|
|
@@ -29,20 +29,26 @@
|
|
|
29
29
|
</script>
|
|
30
30
|
|
|
31
31
|
<FormField {size} {label} {id} {required} {disabled}>
|
|
32
|
-
<input
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
32
|
+
<div class="input" class:disabled>
|
|
33
|
+
<input
|
|
34
|
+
{id}
|
|
35
|
+
type="time"
|
|
36
|
+
bind:value
|
|
37
|
+
{disabled}
|
|
38
|
+
{required}
|
|
39
|
+
oninput={handleInput}
|
|
40
|
+
aria-required={required}
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
41
43
|
</FormField>
|
|
42
44
|
|
|
43
|
-
<style
|
|
45
|
+
<style>.input {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: flex-start;
|
|
49
|
+
position: relative;
|
|
44
50
|
width: 100%;
|
|
45
|
-
|
|
51
|
+
height: 100%;
|
|
46
52
|
border-radius: var(--radius-md);
|
|
47
53
|
border: var(--border-thin) solid var(--form-input-border);
|
|
48
54
|
background-color: var(--form-input-bg);
|
|
@@ -51,13 +57,32 @@
|
|
|
51
57
|
font-weight: 500;
|
|
52
58
|
line-height: 2rem;
|
|
53
59
|
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);
|
|
60
|
+
user-select: none;
|
|
61
|
+
white-space: nowrap;
|
|
54
62
|
}
|
|
55
|
-
input
|
|
63
|
+
.input.disabled {
|
|
64
|
+
opacity: 0.5;
|
|
65
|
+
}
|
|
66
|
+
.input input {
|
|
67
|
+
background-color: transparent;
|
|
68
|
+
border: none;
|
|
69
|
+
line-height: 2rem;
|
|
70
|
+
font-size: var(--font-md);
|
|
71
|
+
width: 100%;
|
|
72
|
+
flex-grow: 1;
|
|
73
|
+
padding-left: var(--spacing-base);
|
|
74
|
+
padding-right: var(--spacing-base);
|
|
75
|
+
}
|
|
76
|
+
.input input:focus {
|
|
56
77
|
outline: none;
|
|
57
|
-
border-color: var(--form-input-border-focus, #3182ce);
|
|
58
78
|
}
|
|
59
|
-
input
|
|
60
|
-
|
|
79
|
+
.input input:focus-visible {
|
|
80
|
+
outline: 2px solid var(--focus-ring, #007bff);
|
|
81
|
+
outline-offset: 2px;
|
|
82
|
+
}
|
|
83
|
+
.input input:disabled {
|
|
61
84
|
cursor: not-allowed;
|
|
85
|
+
}
|
|
86
|
+
.input:focus-within {
|
|
87
|
+
border-color: var(--form-input-border-focus, #3182ce);
|
|
62
88
|
}</style>
|
|
63
|
-
|
package/dist/sveltacular.css
CHANGED
|
@@ -457,6 +457,11 @@
|
|
|
457
457
|
--body-fg: var(--base-color-fg);
|
|
458
458
|
}
|
|
459
459
|
|
|
460
|
+
/*
|
|
461
|
+
* Global Styles
|
|
462
|
+
*
|
|
463
|
+
* Base styles using design tokens for consistency
|
|
464
|
+
*/
|
|
460
465
|
/**
|
|
461
466
|
* Focus Ring Utilities
|
|
462
467
|
*
|
|
@@ -468,7 +473,6 @@
|
|
|
468
473
|
outline: none;
|
|
469
474
|
transition: box-shadow var(--transition-fast) var(--ease-out);
|
|
470
475
|
}
|
|
471
|
-
|
|
472
476
|
.focus-ring:focus-visible, .focus-ring-lg:focus-visible, .focus-ring-sm:focus-visible {
|
|
473
477
|
box-shadow: var(--focus-ring);
|
|
474
478
|
}
|