@streamscloud/kit 0.2.6 → 0.2.7

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 (6) hide show
  1. package/dist/ui/checkbox/cmp.checkbox.svelte +24 -19
  2. package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts +1 -1
  3. package/dist/ui/checkbox/cmp.three-state-checkbox.svelte +6 -16
  4. package/dist/ui/checkbox/cmp.three-state-checkbox.svelte.d.ts +1 -1
  5. package/dist/ui/toggle/cmp.toggle.svelte +6 -2
  6. package/package.json +1 -1
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/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",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",