@getmicdrop/svelte-components 5.18.1 → 5.18.2
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.
|
@@ -104,11 +104,12 @@ describe('Checkbox Colors', () => {
|
|
|
104
104
|
});
|
|
105
105
|
|
|
106
106
|
describe('Checkbox Input Styling', () => {
|
|
107
|
-
test('has w-4 and h-4 size', () => {
|
|
107
|
+
test('has w-4 and h-4 size with shrink-0', () => {
|
|
108
108
|
const { container } = render(Checkbox);
|
|
109
109
|
const input = container.querySelector('input');
|
|
110
110
|
expect(input).toHaveClass('w-4');
|
|
111
111
|
expect(input).toHaveClass('h-4');
|
|
112
|
+
expect(input).toHaveClass('shrink-0');
|
|
112
113
|
});
|
|
113
114
|
|
|
114
115
|
test('has rounded corners', () => {
|
|
@@ -117,24 +118,12 @@ describe('Checkbox Input Styling', () => {
|
|
|
117
118
|
expect(input).toHaveClass('rounded');
|
|
118
119
|
});
|
|
119
120
|
|
|
120
|
-
test('has bg-gray-100 background', () => {
|
|
121
|
-
const { container } = render(Checkbox);
|
|
122
|
-
const input = container.querySelector('input');
|
|
123
|
-
expect(input).toHaveClass('bg-gray-100');
|
|
124
|
-
});
|
|
125
|
-
|
|
126
121
|
test('has border-gray-300 border', () => {
|
|
127
122
|
const { container } = render(Checkbox);
|
|
128
123
|
const input = container.querySelector('input');
|
|
129
124
|
expect(input).toHaveClass('border-gray-300');
|
|
130
125
|
});
|
|
131
126
|
|
|
132
|
-
test('has dark mode background', () => {
|
|
133
|
-
const { container } = render(Checkbox);
|
|
134
|
-
const input = container.querySelector('input');
|
|
135
|
-
expect(input).toHaveClass('dark:bg-gray-700');
|
|
136
|
-
});
|
|
137
|
-
|
|
138
127
|
test('has dark mode border', () => {
|
|
139
128
|
const { container } = render(Checkbox);
|
|
140
129
|
const input = container.querySelector('input');
|
|
@@ -173,10 +162,10 @@ describe('Checkbox Label Styling', () => {
|
|
|
173
162
|
expect(label).toHaveClass('inline-flex');
|
|
174
163
|
});
|
|
175
164
|
|
|
176
|
-
test('label has items-
|
|
165
|
+
test('label has items-start alignment', () => {
|
|
177
166
|
const { container } = render(Checkbox);
|
|
178
167
|
const label = container.querySelector('label');
|
|
179
|
-
expect(label).toHaveClass('items-
|
|
168
|
+
expect(label).toHaveClass('items-start');
|
|
180
169
|
});
|
|
181
170
|
|
|
182
171
|
test('label has gap-2 spacing', () => {
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
let colorClass = $derived(colorClasses[color] || colorClasses.blue);
|
|
54
54
|
|
|
55
55
|
let inputClasses = $derived([
|
|
56
|
-
"w-4 h-4 rounded",
|
|
57
|
-
"
|
|
58
|
-
"dark:
|
|
56
|
+
"w-4 h-4 shrink-0 rounded",
|
|
57
|
+
"border-gray-300",
|
|
58
|
+
"dark:border-gray-600",
|
|
59
59
|
"focus:outline-hidden",
|
|
60
60
|
colorClass,
|
|
61
61
|
disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</script>
|
|
64
64
|
|
|
65
65
|
<label
|
|
66
|
-
class="inline-flex items-
|
|
66
|
+
class="inline-flex items-start gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
|
|
67
67
|
{...restProps}
|
|
68
68
|
>
|
|
69
69
|
<input
|