@streamscloud/kit 0.19.5 → 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 (5) hide show
  1. package/dist/ui/navigation/cmp.nav-rail-item.svelte +8 -1
  2. package/dist/ui/navigation/cmp.nav-rail-item.svelte.d.ts +3 -0
  3. package/dist/ui/segmented-control/cmp.segmented-control.svelte +6 -6
  4. package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts +3 -3
  5. package/package.json +1 -1
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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.19.5",
3
+ "version": "0.19.6",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",