@streamscloud/kit 0.2.6 → 0.2.7-1772698500959

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.
Files changed (12) hide show
  1. package/dist/styles/_input.scss +3 -4
  2. package/dist/ui/checkbox/cmp.checkbox.svelte +24 -19
  3. package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts +1 -1
  4. package/dist/ui/checkbox/cmp.three-state-checkbox.svelte +6 -16
  5. package/dist/ui/checkbox/cmp.three-state-checkbox.svelte.d.ts +1 -1
  6. package/dist/ui/datetime-picker/cmp.datetime-picker.svelte +5 -3
  7. package/dist/ui/inputs/input/cmp.input.svelte +5 -4
  8. package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte +5 -4
  9. package/dist/ui/inputs/rich-text-input/tinymce-input.svelte +5 -4
  10. package/dist/ui/inputs/textarea/cmp.textarea.svelte +5 -4
  11. package/dist/ui/toggle/cmp.toggle.svelte +6 -2
  12. package/package.json +1 -1
package/dist/styles/_input.scss CHANGED
@@ -12,11 +12,11 @@
12
12
  --_input--border-radius: var(--_--input--border-radius, #{functions.em(4)});
13
13
 
14
14
  --_input--icon--size: var(--_--input--icon--size, 1em);
15
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
15
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
16
16
 
17
17
  --_input--text--font-size: var(--_--input--text--font-size, #{functions.em(14)});
18
18
  --_input--text--color: var(--_--input--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
19
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
19
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
20
20
 
21
21
  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
22
22
 
@@ -42,6 +42,7 @@
42
42
  padding-left: var(--_input--padding-left);
43
43
 
44
44
  @include input-accent-shadow;
45
+ @include transitions.transition(box-shadow border-color width background padding);
45
46
 
46
47
  &--disabled {
47
48
  background-color: var(--_input--background--disabled);
@@ -72,7 +73,6 @@
72
73
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
73
74
  position: relative;
74
75
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
75
- @include transitions.transition(box-shadow border-color width background padding);
76
76
 
77
77
  &:focus,
78
78
  &:focus-within {
@@ -94,5 +94,4 @@
94
94
  --_input--background--disabled: transparent;
95
95
  --_input--accent-color: transparent;
96
96
  --_input--explicit-shadow-color: transparent;
97
- --_input--height: auto;
98
97
  }
package/dist/ui/checkbox/cmp.checkbox.svelte CHANGED
@@ -23,14 +23,7 @@ const onCheckboxKeyPress = (event) => {
23
23
  };
24
24
  </script>
25
25
 
26
- <div
27
- class="checkbox"
28
- onclick={onCheckboxClick}
29
- class:checkbox--disabled={disabled}
30
- class:checkbox--align-top={!!children}
31
- title={title}
32
- onkeydown={onCheckboxKeyPress}
33
- role="none">
26
+ <div class="checkbox" onclick={onCheckboxClick} class:checkbox--disabled={disabled} title={title} onkeydown={onCheckboxKeyPress} role="none">
34
27
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
35
28
  <span class="checkbox__icon" class:checkbox__icon--checked={checked} tabindex="0" bind:this={iconRef}>
36
29
  <Icon src={checked ? checkedIcon : uncheckedIcon} />
@@ -55,7 +48,7 @@ A checkbox control with optional label or custom body content.
55
48
  | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
56
49
  | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
57
50
  | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
58
- | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
51
+ | `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
59
52
  | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
60
53
  | `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
61
54
  -->
@@ -68,17 +61,15 @@ A checkbox control with optional label or custom body content.
68
61
  --_checkbox--align-items: var(--sc-kit--checkbox--align-items, center);
69
62
  --_checkbox--color: var(--sc-kit--checkbox--color, light-dark(#6b7280, #4b5563));
70
63
  --_checkbox--color--checked: var(--sc-kit--checkbox--color--checked, light-dark(#144ab0, #5a8dec));
71
- display: inline-flex;
72
- align-items: center;
73
- gap: var(--_checkbox--gap);
74
- }
75
- .checkbox--align-top {
64
+ display: flex;
76
65
  align-items: var(--_checkbox--align-items);
66
+ gap: var(--_checkbox--gap);
67
+ cursor: pointer;
77
68
  }
78
69
  .checkbox__icon {
79
70
  --sc-kit--icon--size: var(--_checkbox--icon--size);
80
71
  --sc-kit--icon--color: var(--_checkbox--color);
81
- cursor: pointer;
72
+ line-height: 0;
82
73
  }
83
74
  .checkbox__icon:focus {
84
75
  filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.25));
@@ -86,17 +77,31 @@ A checkbox control with optional label or custom body content.
86
77
  .checkbox__icon--checked {
87
78
  --sc-kit--icon--color: var(--_checkbox--color--checked);
88
79
  }
89
- .checkbox__label, .checkbox__body {
80
+ .checkbox__label {
90
81
  font-size: var(--_checkbox--label--font-size);
91
82
  line-height: var(--_checkbox--label--line-height);
92
- cursor: pointer;
83
+ min-width: 0;
84
+ text-overflow: ellipsis;
85
+ max-width: 100%;
86
+ white-space: nowrap;
87
+ overflow: hidden;
88
+ -webkit-user-drag: none;
89
+ user-select: none;
90
+ }
91
+ .checkbox__label :global([contenteditable]) {
92
+ user-select: text;
93
+ }
94
+ .checkbox__body {
95
+ font-size: var(--_checkbox--label--font-size);
96
+ line-height: var(--_checkbox--label--line-height);
97
+ min-width: 0;
93
98
  -webkit-user-drag: none;
94
99
  user-select: none;
95
100
  }
96
- .checkbox__label :global([contenteditable]), .checkbox__body :global([contenteditable]) {
101
+ .checkbox__body :global([contenteditable]) {
97
102
  user-select: text;
98
103
  }
99
104
  .checkbox--disabled {
100
105
  opacity: 0.5;
101
- cursor: default;
106
+ pointer-events: none;
102
107
  }</style>
package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts CHANGED
@@ -25,7 +25,7 @@ type Props = {
25
25
  * | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
26
26
  * | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
27
27
  * | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
28
- * | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
28
+ * | `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
29
29
  * | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
30
30
  * | `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
31
31
  */
package/dist/ui/checkbox/cmp.three-state-checkbox.svelte CHANGED
@@ -33,14 +33,7 @@ const checkboxIcon = $derived.by(() => {
33
33
  });
34
34
  </script>
35
35
 
36
- <div
37
- class="checkbox"
38
- onclick={onCheckboxClick}
39
- class:checkbox--disabled={disabled}
40
- class:checkbox--align-top={!!children}
41
- title={title}
42
- onkeydown={onCheckboxKeyPress}
43
- role="none">
36
+ <div class="checkbox" onclick={onCheckboxClick} class:checkbox--disabled={disabled} title={title} onkeydown={onCheckboxKeyPress} role="none">
44
37
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
45
38
  <span class="checkbox__icon" class:checkbox__icon--checked={state !== 'unchecked'} tabindex="0" bind:this={iconRef}>
46
39
  <Icon src={checkboxIcon} />
@@ -65,7 +58,7 @@ A three-state checkbox (unchecked, checked, indeterminate) with optional label o
65
58
  | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
66
59
  | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
67
60
  | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
68
- | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
61
+ | `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
69
62
  | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
70
63
  | `--sc-kit--checkbox--color--checked` | Checked/indeterminate icon color | `primary-500` / `primary-400` |
71
64
  -->
@@ -79,16 +72,14 @@ A three-state checkbox (unchecked, checked, indeterminate) with optional label o
79
72
  --_checkbox--color: var(--sc-kit--checkbox--color, light-dark(#6b7280, #4b5563));
80
73
  --_checkbox--color--checked: var(--sc-kit--checkbox--color--checked, light-dark(#144ab0, #5a8dec));
81
74
  display: inline-flex;
82
- align-items: center;
83
- gap: var(--_checkbox--gap);
84
- }
85
- .checkbox--align-top {
86
75
  align-items: var(--_checkbox--align-items);
76
+ gap: var(--_checkbox--gap);
77
+ cursor: pointer;
87
78
  }
88
79
  .checkbox__icon {
89
80
  --sc-kit--icon--size: var(--_checkbox--icon--size);
90
81
  --sc-kit--icon--color: var(--_checkbox--color);
91
- cursor: pointer;
82
+ line-height: 0;
92
83
  }
93
84
  .checkbox__icon:focus {
94
85
  filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.25));
@@ -99,7 +90,6 @@ A three-state checkbox (unchecked, checked, indeterminate) with optional label o
99
90
  .checkbox__label, .checkbox__body {
100
91
  font-size: var(--_checkbox--label--font-size);
101
92
  line-height: var(--_checkbox--label--line-height);
102
- cursor: pointer;
103
93
  -webkit-user-drag: none;
104
94
  user-select: none;
105
95
  }
@@ -108,5 +98,5 @@ A three-state checkbox (unchecked, checked, indeterminate) with optional label o
108
98
  }
109
99
  .checkbox--disabled {
110
100
  opacity: 0.5;
111
- cursor: default;
101
+ pointer-events: none;
112
102
  }</style>
package/dist/ui/checkbox/cmp.three-state-checkbox.svelte.d.ts CHANGED
@@ -28,7 +28,7 @@ type Props = {
28
28
  * | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
29
29
  * | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
30
30
  * | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
31
- * | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
31
+ * | `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
32
32
  * | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
33
33
  * | `--sc-kit--checkbox--color--checked` | Checked/indeterminate icon color | `primary-500` / `primary-400` |
34
34
  */
package/dist/ui/datetime-picker/cmp.datetime-picker.svelte CHANGED
@@ -204,10 +204,10 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
204
204
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
205
205
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
206
206
  --_input--icon--size: var(--_--input--icon--size, 1em);
207
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
207
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
208
208
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
209
209
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
210
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
210
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
211
211
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
212
212
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
213
213
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -231,11 +231,13 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
231
231
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
232
232
  position: relative;
233
233
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
234
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
235
234
  }
236
235
  .datetime-picker:focus, .datetime-picker:focus-within {
237
236
  --_input--default-shadow-color: var(--_input--accent-color);
238
237
  }
238
+ .datetime-picker {
239
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
240
+ }
239
241
  .datetime-picker--disabled {
240
242
  background-color: var(--_input--background--disabled);
241
243
  cursor: default;
package/dist/ui/inputs/input/cmp.input.svelte CHANGED
@@ -148,10 +148,10 @@ Text/password input with optional clear button, icon, and emoji picker.
148
148
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
149
149
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
150
150
  --_input--icon--size: var(--_--input--icon--size, 1em);
151
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
151
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
152
152
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
153
153
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
154
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
154
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
155
155
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
156
156
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
157
157
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -175,11 +175,13 @@ Text/password input with optional clear button, icon, and emoji picker.
175
175
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
176
176
  position: relative;
177
177
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
178
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
179
178
  }
180
179
  .input:focus, .input:focus-within {
181
180
  --_input--default-shadow-color: var(--_input--accent-color);
182
181
  }
182
+ .input {
183
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
184
+ }
183
185
  .input--disabled {
184
186
  background-color: var(--_input--background--disabled);
185
187
  cursor: default;
@@ -199,7 +201,6 @@ Text/password input with optional clear button, icon, and emoji picker.
199
201
  --_input--background--disabled: transparent;
200
202
  --_input--accent-color: transparent;
201
203
  --_input--explicit-shadow-color: transparent;
202
- --_input--height: auto;
203
204
  }
204
205
  .input--has-emoji {
205
206
  --_--input--padding-right: 1.5em;
package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte CHANGED
@@ -165,10 +165,10 @@ Uses cleave-zen for formatting and cursor tracking.
165
165
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
166
166
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
167
167
  --_input--icon--size: var(--_--input--icon--size, 1em);
168
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
168
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
169
169
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
170
170
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
171
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
171
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
172
172
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
173
173
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
174
174
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -192,11 +192,13 @@ Uses cleave-zen for formatting and cursor tracking.
192
192
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
193
193
  position: relative;
194
194
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
195
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
196
195
  }
197
196
  .numeral-input:focus, .numeral-input:focus-within {
198
197
  --_input--default-shadow-color: var(--_input--accent-color);
199
198
  }
199
+ .numeral-input {
200
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
201
+ }
200
202
  .numeral-input--disabled {
201
203
  background-color: var(--_input--background--disabled);
202
204
  cursor: default;
@@ -215,7 +217,6 @@ Uses cleave-zen for formatting and cursor tracking.
215
217
  --_input--background--disabled: transparent;
216
218
  --_input--accent-color: transparent;
217
219
  --_input--explicit-shadow-color: transparent;
218
- --_input--height: auto;
219
220
  }
220
221
  .numeral-input__input {
221
222
  flex: 1;
package/dist/ui/inputs/rich-text-input/tinymce-input.svelte CHANGED
@@ -164,10 +164,10 @@ const setEditorValue = (editor, val) => {
164
164
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
165
165
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
166
166
  --_input--icon--size: var(--_--input--icon--size, 1em);
167
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
167
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
168
168
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
169
169
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
170
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
170
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
171
171
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
172
172
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
173
173
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -191,11 +191,13 @@ const setEditorValue = (editor, val) => {
191
191
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
192
192
  position: relative;
193
193
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
194
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
195
194
  }
196
195
  .tinymce-input:focus, .tinymce-input:focus-within {
197
196
  --_input--default-shadow-color: var(--_input--accent-color);
198
197
  }
198
+ .tinymce-input {
199
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
200
+ }
199
201
  .tinymce-input--disabled {
200
202
  background-color: var(--_input--background--disabled);
201
203
  cursor: default;
@@ -213,7 +215,6 @@ const setEditorValue = (editor, val) => {
213
215
  --_input--background--disabled: transparent;
214
216
  --_input--accent-color: transparent;
215
217
  --_input--explicit-shadow-color: transparent;
216
- --_input--height: auto;
217
218
  }
218
219
  .tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
219
220
  border-radius: 0.375em !important;
package/dist/ui/inputs/textarea/cmp.textarea.svelte CHANGED
@@ -151,10 +151,10 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
151
151
  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
152
152
  --_input--border-radius: var(--_--input--border-radius, 0.25em);
153
153
  --_input--icon--size: var(--_--input--icon--size, 1em);
154
- --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
154
+ --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
155
155
  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
156
156
  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
157
- --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
157
+ --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
158
158
  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
159
159
  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
160
160
  --_input--padding--block: var(--_--input--padding--block, 0);
@@ -178,11 +178,13 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
178
178
  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
179
179
  position: relative;
180
180
  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
181
- transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
182
181
  }
183
182
  .textarea-input:focus, .textarea-input:focus-within {
184
183
  --_input--default-shadow-color: var(--_input--accent-color);
185
184
  }
185
+ .textarea-input {
186
+ transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
187
+ }
186
188
  .textarea-input--disabled {
187
189
  background-color: var(--_input--background--disabled);
188
190
  cursor: default;
@@ -196,7 +198,6 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
196
198
  --_input--background--disabled: transparent;
197
199
  --_input--accent-color: transparent;
198
200
  --_input--explicit-shadow-color: transparent;
199
- --_input--height: auto;
200
201
  }
201
202
  .textarea-input--has-emoji {
202
203
  --_--input--padding-right: 1.5em;
package/dist/ui/toggle/cmp.toggle.svelte CHANGED
@@ -48,11 +48,10 @@ A toggle switch for boolean on/off states with optional label.
48
48
  }
49
49
  .toggle--disabled {
50
50
  opacity: 0.6;
51
- cursor: default;
51
+ pointer-events: none;
52
52
  }
53
53
  .toggle .toggle-switch {
54
54
  font-size: var(--_toggle--switch--font-size);
55
- cursor: pointer;
56
55
  position: relative;
57
56
  display: inline-block;
58
57
  width: var(--_toggle--switch--width);
@@ -98,6 +97,11 @@ A toggle switch for boolean on/off states with optional label.
98
97
  .toggle .toggle__label {
99
98
  margin-left: 0.875em;
100
99
  font-size: var(--_toggle--label--font-size);
100
+ min-width: 0;
101
101
  cursor: inherit;
102
102
  user-select: none;
103
+ text-overflow: ellipsis;
104
+ max-width: 100%;
105
+ white-space: nowrap;
106
+ overflow: hidden;
103
107
  }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.2.6",
3
+ "version": "0.2.7-1772698500959",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",