@streamscloud/kit 0.2.2 → 0.2.4

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/button/resources/button-base.svelte +2 -2
  2. package/dist/ui/button/resources/button-theme.svelte +19 -16
  3. package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte +1 -1
  4. package/dist/ui/icon-text/cmp.icon-text.svelte +34 -13
  5. package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts +10 -4
  6. package/package.json +1 -1
package/dist/ui/button/resources/button-base.svelte CHANGED
@@ -20,7 +20,7 @@ export {};
20
20
  --_button--font--color--active: var(--sc-kit--button--font--color--active, var(--_button--font--color));
21
21
  --_button--font--color--disabled: var(--sc-kit--button--font--color--disabled, var(--_button--font--color));
22
22
  --_button--font-weight: var(--sc-kit--button--font-weight, 400);
23
- --_button--text--font-size: var(--sc-kit--button--text--font-size, 0.75em);
23
+ --_button--text--font-size: var(--sc-kit--button--text--font-size, 0.875em);
24
24
  --_button--icon--font-size: var(--sc-kit--button--icon--font-size, 1em);
25
25
  --_button--justify-content: var(--sc-kit--button--justify-content, center);
26
26
  --_button--background: var(--sc-kit--button--background, white);
@@ -61,7 +61,7 @@ export {};
61
61
  width: 100%;
62
62
  text-align: center;
63
63
  font-size: var(--_button--text--font-size);
64
- --sc-kit--icon-text--global--font-size: 1rem;
64
+ --sc-kit--icon-text--root--font-size: 1rem;
65
65
  --sc-kit--icon-text--text--font-size: var(--_button--text--font-size);
66
66
  --sc-kit--icon-text--icon--font-size: var(--_button--icon--font-size);
67
67
  --sc-kit--icon-text--justify-content: var(--_button--justify-content);
package/dist/ui/button/resources/button-theme.svelte CHANGED
@@ -38,7 +38,7 @@ export {};
38
38
  --sc-kit--button--background--disabled: var(--sc-kit--button--primary--background--disabled, #91b3f3);
39
39
  --sc-kit--button--border: var(--sc-kit--button--primary--border, none);
40
40
  --sc-kit--button--border--disabled: var(--sc-kit--button--primary--border--disabled, none);
41
- --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
41
+ --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, inset 0px var(--_button--shadow-y, 2px) 0px 0px rgba(255, 255, 255, 0.3));
42
42
  }
43
43
  .button-theme--standard {
44
44
  --sc-kit--button--font--color: var(--sc-kit--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
@@ -63,12 +63,12 @@ export {};
63
63
  --sc-kit--button--standard--background--disabled,
64
64
  light-dark(#f2f2f3, #374151)
65
65
  );
66
- --sc-kit--button--border: var(--sc-kit--button--standard--border, 1px solid light-dark(#e5e7eb, #4b5563));
66
+ --sc-kit--button--border: var(--sc-kit--button--standard--border, 1px solid light-dark(#f2f2f3, #1e1e1e));
67
67
  --sc-kit--button--border--disabled: var(
68
68
  --sc-kit--button--standard--border--disabled,
69
69
  1px solid light-dark(#e5e7eb, #4b5563)
70
70
  );
71
- --sc-kit--button--box-shadow: var(--sc-kit--button--standard--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
71
+ --sc-kit--button--box-shadow: var(--sc-kit--button--standard--box-shadow, inset 0px var(--_button--shadow-y, 2px) 0px 0px rgba(255, 255, 255, 0.3));
72
72
  }
73
73
  .button-theme--white {
74
74
  --sc-kit--button--font--color: var(--sc-kit--button--white--font--color, light-dark(#2e2e2e, #ffffff));
@@ -92,7 +92,7 @@ export {};
92
92
  );
93
93
  --sc-kit--button--border: var(--sc-kit--button--white--border, none);
94
94
  --sc-kit--button--border--disabled: var(--sc-kit--button--white--border--disabled, none);
95
- --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
95
+ --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, none);
96
96
  }
97
97
  .button-theme--gray {
98
98
  --sc-kit--button--font--color: var(--sc-kit--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
@@ -119,7 +119,7 @@ export {};
119
119
  --sc-kit--button--gray--border--disabled,
120
120
  1px solid light-dark(#e5e7eb, #4b5563)
121
121
  );
122
- --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
122
+ --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, none);
123
123
  }
124
124
  .button-theme--green {
125
125
  --sc-kit--button--font--color: var(--sc-kit--button--green--font--color, light-dark(#0cce6b, #ffffff));
@@ -149,7 +149,7 @@ export {};
149
149
  --sc-kit--button--green--border--disabled,
150
150
  1px solid light-dark(#0cce6b, #4b5563)
151
151
  );
152
- --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
152
+ --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, none);
153
153
  }
154
154
  .button-theme--black {
155
155
  --sc-kit--button--font--color: var(--sc-kit--button--black--font--color, light-dark(#ffffff, #2e2e2e));
@@ -173,7 +173,7 @@ export {};
173
173
  );
174
174
  --sc-kit--button--border: var(--sc-kit--button--black--border, none);
175
175
  --sc-kit--button--border--disabled: var(--sc-kit--button--black--border--disabled, none);
176
- --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
176
+ --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, none);
177
177
  }
178
178
  .button-theme--alert {
179
179
  --sc-kit--button--font--color: var(--sc-kit--button--alert--font--color, #ffffff);
@@ -185,7 +185,7 @@ export {};
185
185
  --sc-kit--button--background--disabled: var(--sc-kit--button--alert--background--disabled, #f6a7b1);
186
186
  --sc-kit--button--border: var(--sc-kit--button--alert--border, none);
187
187
  --sc-kit--button--border--disabled: var(--sc-kit--button--alert--border--disabled, none);
188
- --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
188
+ --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, none);
189
189
  }
190
190
  .button-theme--warning {
191
191
  --sc-kit--button--font--color: var(--sc-kit--button--warning--font--color, #ffffff);
@@ -197,7 +197,7 @@ export {};
197
197
  --sc-kit--button--background--disabled: var(--sc-kit--button--warning--background--disabled, #fcd34d);
198
198
  --sc-kit--button--border: var(--sc-kit--button--warning--border, none);
199
199
  --sc-kit--button--border--disabled: var(--sc-kit--button--warning--border--disabled, none);
200
- --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
200
+ --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, none);
201
201
  }
202
202
  .button-theme--text-only {
203
203
  --sc-kit--button--font--color: var(--sc-kit--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));
@@ -318,15 +318,18 @@ export {};
318
318
  }
319
319
  .button-theme--size-standard {
320
320
  --sc-kit--button--height: 2em;
321
- --sc-kit--button--text--font-size: 0.75em;
322
321
  }
323
322
  .button-theme--size-large {
324
- --sc-kit--button--height: 3em;
325
- --sc-kit--button--font-weight: 500;
326
- --sc-kit--icon--stroke-width: 0.4;
327
- --sc-kit--button--text--font-size: 0.9375em;
323
+ --sc-kit--button--height: 2.5em;
324
+ --sc-kit--button--text--font-size: 1.125em;
325
+ --sc-kit--button--icon--font-size: 1.25em;
326
+ --sc-kit--button--padding--horizontal: 1.5em;
327
+ --sc-kit--button--border-radius: 0.375em;
328
+ --_button--shadow-y: 3px;
328
329
  }
329
330
  .button-theme--size-small {
330
- --sc-kit--button--height: 1.5em;
331
- --sc-kit--button--text--font-size: 0.625em;
331
+ --sc-kit--button--height: 1.75em;
332
+ --sc-kit--button--text--font-size: 0.75em;
333
+ --sc-kit--button--padding--horizontal: 0.75em;
334
+ --_button--shadow-y: 1.5px;
332
335
  }</style>
package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte CHANGED
@@ -122,7 +122,7 @@ picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
122
122
  align-items: center;
123
123
  min-width: 0;
124
124
  gap: 0.5rem;
125
- --sc-kit--icon-text--icon--size: 1rem;
125
+ --sc-kit--icon-text--icon--font-size: 1rem;
126
126
  }
127
127
  .img-cropper-toolbar__button {
128
128
  font-size: 0.75rem;
package/dist/ui/icon-text/cmp.icon-text.svelte CHANGED
@@ -1,7 +1,9 @@
1
1
  <script lang="ts">import { Icon } from '../icon';
2
- let { icon, iconColor, iconPosition = 'left', trimText = false, children } = $props();
2
+ let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, children } = $props();
3
3
  const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
4
4
  const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
5
+ const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
6
+ const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !== 'function' ? secondaryIcon : null);
5
7
  </script>
6
8
 
7
9
  <span class="icon-text" class:icon-text--right={iconPosition === 'right'}>
@@ -17,44 +19,56 @@ const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
17
19
  {@render children()}
18
20
  </span>
19
21
  {/if}
22
+ {#if secondaryIconAsSnippet || secondaryIconAsString}
23
+ <span class="icon-text__secondary-icon">
24
+ {#if secondaryIconAsSnippet}
25
+ {@render secondaryIconAsSnippet()}
26
+ {:else if secondaryIconAsString}
27
+ <Icon src={secondaryIconAsString} color={secondaryIconColor} />
28
+ {/if}
29
+ </span>
30
+ {/if}
20
31
  </span>
21
32
 
22
33
  <!--
23
34
  @component
24
35
  Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
25
36
  (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
26
- before or after the text.
37
+ before or after the text. The optional `secondaryIcon` is always rendered on the
38
+ opposite side of the text from the primary icon.
27
39
 
28
40
  ### CSS Custom Properties
29
41
  | Property | Description | Default |
30
42
  |---|---|---|
31
- | `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
32
- | `--sc-kit--icon-text--global--color` | Root text color | — |
43
+ | `--sc-kit--icon-text--root--font-size` | Root font size of the component | `1em` |
44
+ | `--sc-kit--icon-text--root--color` | Root text color | — |
33
45
  | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
34
46
  | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
35
47
  | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
36
48
  | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
37
- | `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
38
49
  | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
39
50
  | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
51
+ | `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
52
+ | `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
40
53
  -->
41
54
 
42
55
  <style>.icon-text {
43
- --_icon-text--global--font-size: var(--sc-kit--icon-text--global--font-size, 1em);
44
- --_icon-text--global--color: var(--sc-kit--icon-text--global--color);
56
+ --_icon-text--root--font-size: var(--sc-kit--icon-text--root--font-size, 1em);
57
+ --_icon-text--root--color: var(--sc-kit--icon-text--root--color);
45
58
  --_icon-text--text--display: var(--sc-kit--icon-text--text--display, flex);
46
59
  --_icon-text--text--font-size: var(--sc-kit--icon-text--text--font-size, 1em);
47
60
  --_icon-text--icon--font-size: var(--sc-kit--icon-text--icon--font-size, var(--_icon-text--text--font-size));
48
- --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color);
61
+ --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color, var(--_icon-text--root--color));
49
62
  --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
50
63
  --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
51
- --_icon-text--icon--size: var(--sc-kit--icon-text--icon--size, 1em);
64
+ --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--text--font-size));
65
+ --_icon-text--secondary-icon--color: var(--sc-kit--icon-text--secondary-icon--color, var(--_icon-text--root--color));
52
66
  display: flex;
53
67
  align-items: center;
54
68
  justify-content: var(--_icon-text--justify-content);
55
- font-size: var(--_icon-text--global--font-size);
69
+ font-size: var(--_icon-text--root--font-size);
56
70
  gap: var(--_icon-text--gap);
57
- color: var(--_icon-text--global--color);
71
+ color: var(--_icon-text--root--color);
58
72
  min-width: 0;
59
73
  }
60
74
  .icon-text--right {
@@ -76,6 +90,13 @@ before or after the text.
76
90
  font-size: var(--_icon-text--icon--font-size);
77
91
  color: var(--_icon-text--icon--color);
78
92
  display: flex;
79
- --sc-kit--icon--color: var(--_icon-text--icon--color, var(--_icon-text--global--color));
80
- --sc-kit--icon--size: var(--_icon-text--icon--size);
93
+ --sc-kit--icon--color: var(--_icon-text--icon--color);
94
+ --sc-kit--icon--size: 1em;
95
+ }
96
+ .icon-text__secondary-icon {
97
+ font-size: var(--_icon-text--secondary-icon--font-size);
98
+ color: var(--_icon-text--secondary-icon--color);
99
+ display: flex;
100
+ --sc-kit--icon--color: var(--_icon-text--secondary-icon--color);
101
+ --sc-kit--icon--size: 1em;
81
102
  }</style>
package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts CHANGED
@@ -7,6 +7,10 @@ type Props = {
7
7
  iconColor?: IconColor | null;
8
8
  /** Icon placement relative to text @default 'left' */
9
9
  iconPosition?: 'left' | 'right';
10
+ /** SVG string or custom snippet for a secondary icon on the opposite side of text from the primary icon */
11
+ secondaryIcon?: string | Snippet;
12
+ /** Color preset for the secondary icon */
13
+ secondaryIconColor?: IconColor | null;
10
14
  /** Truncate text with ellipsis on overflow */
11
15
  trimText?: boolean;
12
16
  children?: Snippet;
@@ -14,20 +18,22 @@ type Props = {
14
18
  /**
15
19
  * Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
16
20
  * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
17
- * before or after the text.
21
+ * before or after the text. The optional `secondaryIcon` is always rendered on the
22
+ * opposite side of the text from the primary icon.
18
23
  *
19
24
  * ### CSS Custom Properties
20
25
  * | Property | Description | Default |
21
26
  * |---|---|---|
22
- * | `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
23
- * | `--sc-kit--icon-text--global--color` | Root text color | — |
27
+ * | `--sc-kit--icon-text--root--font-size` | Root font size of the component | `1em` |
28
+ * | `--sc-kit--icon-text--root--color` | Root text color | — |
24
29
  * | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
25
30
  * | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
26
31
  * | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
27
32
  * | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
28
- * | `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
29
33
  * | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
30
34
  * | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
35
+ * | `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
36
+ * | `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
31
37
  */
32
38
  declare const Cmp: import("svelte").Component<Props, {}, "">;
33
39
  type Cmp = ReturnType<typeof Cmp>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",