@streamscloud/kit 0.19.4 → 0.19.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.
Files changed (13) hide show
  1. package/dist/ui/date-picker/cmp.date-picker.svelte +0 -1
  2. package/dist/ui/input/cmp.input.svelte +0 -1
  3. package/dist/ui/navigation/cmp.nav-rail-item.svelte +8 -1
  4. package/dist/ui/navigation/cmp.nav-rail-item.svelte.d.ts +3 -0
  5. package/dist/ui/numeral-input/cmp.numeral-input.svelte +0 -1
  6. package/dist/ui/rich-text-input/cmp.rich-text-input.svelte +0 -1
  7. package/dist/ui/segmented-control/cmp.segmented-control.svelte +6 -6
  8. package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts +3 -3
  9. package/dist/ui/select/_select-trigger.scss +0 -1
  10. package/dist/ui/select/cmp.singleselect-async.svelte +0 -1
  11. package/dist/ui/select/multiselect-base.svelte +0 -1
  12. package/dist/ui/textarea/cmp.textarea.svelte +0 -1
  13. package/package.json +1 -1
package/dist/ui/date-picker/cmp.date-picker.svelte CHANGED
@@ -275,7 +275,6 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
275
275
  --sc-kit--date-picker--background: transparent;
276
276
  --sc-kit--date-picker--border-color: transparent;
277
277
  --sc-kit--date-picker--underline-color: transparent;
278
- --sc-kit--date-picker--padding-inline: 0;
279
278
  }
280
279
  .date-picker__trigger {
281
280
  box-sizing: border-box;
package/dist/ui/input/cmp.input.svelte CHANGED
@@ -270,7 +270,6 @@ or the clear button (see `HandleInput`'s availability pill).
270
270
  --sc-kit--input--background: transparent;
271
271
  --sc-kit--input--border-color: transparent;
272
272
  --sc-kit--input--underline-color: transparent;
273
- --sc-kit--input--padding-inline: 0;
274
273
  }
275
274
  .input--has-prefix {
276
275
  padding-inline-start: 0;
package/dist/ui/navigation/cmp.nav-rail-item.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">import { IconSlot } from '../icon';
2
- const { label, icon, href, active = false, disabled = false, target, rel, on } = $props();
2
+ const { label, icon, href, active = false, error = false, disabled = false, target, rel, on } = $props();
3
3
  const handleClick = () => {
4
4
  if (disabled) {
5
5
  return;
@@ -17,6 +17,7 @@ const handleClick = () => {
17
17
  <a
18
18
  class="nav-rail-item"
19
19
  class:nav-rail-item--active={active}
20
+ class:nav-rail-item--error={error}
20
21
  class:nav-rail-item--disabled={disabled}
21
22
  href={href}
22
23
  target={target}
@@ -31,6 +32,7 @@ const handleClick = () => {
31
32
  type="button"
32
33
  class="nav-rail-item"
33
34
  class:nav-rail-item--active={active}
35
+ class:nav-rail-item--error={error}
34
36
  class:nav-rail-item--disabled={disabled}
35
37
  disabled={disabled}
36
38
  aria-current={active ? 'page' : undefined}
@@ -55,6 +57,7 @@ CSS variables (settable on the parent rail or any ancestor).
55
57
  | `--sc-kit--nav-rail--item-radius` | Tile radius | `--sc-kit--radius--sm` |
56
58
  | `--sc-kit--nav-rail--item-color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
57
59
  | `--sc-kit--nav-rail--item-color--active` | Active text/icon color | `--sc-kit--color--text--primary` |
60
+ | `--sc-kit--nav-rail--item-color--error` | Error text/icon color | `--sc-kit--color--danger` |
58
61
  | `--sc-kit--nav-rail--item-background--active` | Active tile background | `--sc-kit--color--bg--menu-active` |
59
62
  -->
60
63
  <style>.nav-rail-item {
@@ -64,6 +67,7 @@ CSS variables (settable on the parent rail or any ancestor).
64
67
  --_nav-rail--item-radius: var(--sc-kit--nav-rail--item-radius, var(--sc-kit--radius--sm));
65
68
  --_nav-rail--item-color: var(--sc-kit--nav-rail--item-color, var(--sc-kit--color--text--secondary));
66
69
  --_nav-rail--item-color-active: var(--sc-kit--nav-rail--item-color--active, var(--sc-kit--color--text--primary));
70
+ --_nav-rail--item-color-error: var(--sc-kit--nav-rail--item-color--error, var(--sc-kit--color--danger));
67
71
  --_nav-rail--item-background-active: var(--sc-kit--nav-rail--item-background--active, var(--sc-kit--color--bg--menu-active));
68
72
  display: flex;
69
73
  flex-direction: column;
@@ -88,6 +92,9 @@ CSS variables (settable on the parent rail or any ancestor).
88
92
  .nav-rail-item:hover:not(.nav-rail-item--disabled):not(:disabled) {
89
93
  color: var(--_nav-rail--item-color-active);
90
94
  }
95
+ .nav-rail-item--error, .nav-rail-item--error:hover:not(.nav-rail-item--disabled):not(:disabled) {
96
+ color: var(--_nav-rail--item-color-error);
97
+ }
91
98
  .nav-rail-item--disabled, .nav-rail-item:disabled {
92
99
  opacity: 0.35;
93
100
  cursor: default;
package/dist/ui/navigation/cmp.nav-rail-item.svelte.d.ts CHANGED
@@ -7,6 +7,8 @@ type Props = {
7
7
  href?: string;
8
8
  /** Highlight as the current section. Consumer-controlled. @default false */
9
9
  active?: boolean;
10
+ /** Paint the tile in the danger color to signal an error in its section. @default false */
11
+ error?: boolean;
10
12
  disabled?: boolean;
11
13
  /** Anchor target — only relevant when `href` is set. */
12
14
  target?: string;
@@ -31,6 +33,7 @@ type Props = {
31
33
  * | `--sc-kit--nav-rail--item-radius` | Tile radius | `--sc-kit--radius--sm` |
32
34
  * | `--sc-kit--nav-rail--item-color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
33
35
  * | `--sc-kit--nav-rail--item-color--active` | Active text/icon color | `--sc-kit--color--text--primary` |
36
+ * | `--sc-kit--nav-rail--item-color--error` | Error text/icon color | `--sc-kit--color--danger` |
34
37
  * | `--sc-kit--nav-rail--item-background--active` | Active tile background | `--sc-kit--color--bg--menu-active` |
35
38
  */
36
39
  declare const Cmp: import("svelte").Component<Props, {}, "">;
package/dist/ui/numeral-input/cmp.numeral-input.svelte CHANGED
@@ -294,7 +294,6 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
294
294
  --sc-kit--numeral-input--background: transparent;
295
295
  --sc-kit--numeral-input--border-color: transparent;
296
296
  --sc-kit--numeral-input--underline-color: transparent;
297
- --sc-kit--numeral-input--padding-inline: 0;
298
297
  box-shadow: none;
299
298
  }
300
299
  .numeral-input__el {
package/dist/ui/rich-text-input/cmp.rich-text-input.svelte CHANGED
@@ -249,7 +249,6 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
249
249
  --sc-kit--rich-text-input--background: transparent;
250
250
  --sc-kit--rich-text-input--border-color: transparent;
251
251
  --sc-kit--rich-text-input--underline-color: transparent;
252
- --sc-kit--rich-text-input--padding-inline: 0;
253
252
  box-shadow: none;
254
253
  }
255
254
  .rich-text-input__toolbar {
package/dist/ui/segmented-control/cmp.segmented-control.svelte CHANGED
@@ -19,7 +19,7 @@ const handleClick = (segment) => {
19
19
  class="segmented-control__segment"
20
20
  class:segmented-control__segment--active={isActive(segment)}
21
21
  class:segmented-control__segment--disabled={segment.disabled}
22
- class:segmented-control__segment--invalid={segment.invalid}
22
+ class:segmented-control__segment--error={segment.error}
23
23
  role="radio"
24
24
  aria-checked={isActive(segment)}
25
25
  disabled={segment.disabled}
@@ -36,7 +36,7 @@ SegmentedControl — radio-style toggle group rendered as connected pills. Two v
36
36
  - **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
37
37
  - **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
38
38
 
39
- Each segment carries an optional `disabled` flag (non-interactive) and an optional `invalid` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
39
+ Each segment carries an optional `disabled` flag (non-interactive) and an optional `error` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
40
40
 
41
41
  ### CSS Custom Properties
42
42
  | Property | Description | Default |
@@ -49,7 +49,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
49
49
  | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
50
50
  | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
51
51
  | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |
52
- | `--sc-kit--segmented-control--color--invalid` | Invalid segment text color | `--sc-kit--color--danger` |
52
+ | `--sc-kit--segmented-control--color--error` | Error segment text color | `--sc-kit--color--danger` |
53
53
  | `--sc-kit--segmented-control--background--active` | Active segment background | tray: `--bg--panel`, outlined: `--bg--menu-active` |
54
54
  | `--sc-kit--segmented-control--tray--background` | Outer tray background (tray variant) | `--sc-kit--color--bg--active` |
55
55
  | `--sc-kit--segmented-control--tray--padding` | Inner tray padding around segments | `3px` |
@@ -67,7 +67,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
67
67
  --_sc--color-hover: var(--sc-kit--segmented-control--color--hover, var(--sc-kit--color--text--primary));
68
68
  --_sc--color-active: var(--sc-kit--segmented-control--color--active, var(--sc-kit--color--text--primary));
69
69
  --_sc--color-disabled: var(--sc-kit--segmented-control--color--disabled, var(--sc-kit--color--text--muted));
70
- --_sc--color-invalid: var(--sc-kit--segmented-control--color--invalid, var(--sc-kit--color--danger));
70
+ --_sc--color-error: var(--sc-kit--segmented-control--color--error, var(--sc-kit--color--danger));
71
71
  --_sc--background-active: var(--sc-kit--segmented-control--background--active, var(--_sc--background-active-default));
72
72
  --_sc--tray-background: var(--sc-kit--segmented-control--tray--background, var(--sc-kit--color--bg--active));
73
73
  --_sc--tray-padding: var(--sc-kit--segmented-control--tray--padding, 3px);
@@ -159,8 +159,8 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
159
159
  color: var(--_sc--color-disabled);
160
160
  cursor: default;
161
161
  }
162
- .segmented-control__segment--invalid {
163
- color: var(--_sc--color-invalid);
162
+ .segmented-control__segment--error {
163
+ color: var(--_sc--color-error);
164
164
  }
165
165
  .segmented-control__segment:focus-visible {
166
166
  outline: 2px solid var(--sc-kit--color--border--focus);
package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts CHANGED
@@ -4,7 +4,7 @@ export type Segment<TValue = unknown> = {
4
4
  /** Non-interactive — click does nothing. */
5
5
  disabled?: boolean;
6
6
  /** Visual flag — colors the segment in the danger tone (validation hint). */
7
- invalid?: boolean;
7
+ error?: boolean;
8
8
  };
9
9
  declare function $$render<T>(): {
10
10
  props: {
@@ -48,7 +48,7 @@ interface $$IsomorphicComponent {
48
48
  * - **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
49
49
  * - **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
50
50
  *
51
- * Each segment carries an optional `disabled` flag (non-interactive) and an optional `invalid` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
51
+ * Each segment carries an optional `disabled` flag (non-interactive) and an optional `error` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
52
52
  *
53
53
  * ### CSS Custom Properties
54
54
  * | Property | Description | Default |
@@ -61,7 +61,7 @@ interface $$IsomorphicComponent {
61
61
  * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
62
62
  * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
63
63
  * | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |
64
- * | `--sc-kit--segmented-control--color--invalid` | Invalid segment text color | `--sc-kit--color--danger` |
64
+ * | `--sc-kit--segmented-control--color--error` | Error segment text color | `--sc-kit--color--danger` |
65
65
  * | `--sc-kit--segmented-control--background--active` | Active segment background | tray: `--bg--panel`, outlined: `--bg--menu-active` |
66
66
  * | `--sc-kit--segmented-control--tray--background` | Outer tray background (tray variant) | `--sc-kit--color--bg--active` |
67
67
  * | `--sc-kit--segmented-control--tray--padding` | Inner tray padding around segments | `3px` |
package/dist/ui/select/_select-trigger.scss CHANGED
@@ -102,7 +102,6 @@
102
102
  --sc-kit--select--trigger--background: transparent;
103
103
  --sc-kit--select--trigger--border-color: transparent;
104
104
  --sc-kit--select--trigger--underline-color: transparent;
105
- --sc-kit--select--trigger--padding-inline: 0;
106
105
  box-shadow: none;
107
106
  }
108
107
 
package/dist/ui/select/cmp.singleselect-async.svelte CHANGED
@@ -267,7 +267,6 @@ background--hover}`.
267
267
  --sc-kit--select--trigger--background: transparent;
268
268
  --sc-kit--select--trigger--border-color: transparent;
269
269
  --sc-kit--select--trigger--underline-color: transparent;
270
- --sc-kit--select--trigger--padding-inline: 0;
271
270
  box-shadow: none;
272
271
  }
273
272
  .singleselect__input {
package/dist/ui/select/multiselect-base.svelte CHANGED
@@ -483,7 +483,6 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
483
483
  --sc-kit--select--trigger--background: transparent;
484
484
  --sc-kit--select--trigger--border-color: transparent;
485
485
  --sc-kit--select--trigger--underline-color: transparent;
486
- --sc-kit--select--trigger--padding-inline: 0;
487
486
  box-shadow: none;
488
487
  }
489
488
  .multiselect-trigger__input {
package/dist/ui/textarea/cmp.textarea.svelte CHANGED
@@ -232,7 +232,6 @@ exposed via `bind:this`.
232
232
  --sc-kit--textarea--background: transparent;
233
233
  --sc-kit--textarea--border-color: transparent;
234
234
  --sc-kit--textarea--underline-color: transparent;
235
- --sc-kit--textarea--padding-inline: 0;
236
235
  box-shadow: none;
237
236
  }
238
237
  .textarea__el {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.19.4",
3
+ "version": "0.19.6",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",