@streamscloud/kit 0.19.0 → 0.19.2

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 (17) hide show
  1. package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.d.ts +2 -0
  2. package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.js +7 -0
  3. package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts +2 -0
  4. package/dist/core/data-loaders/cursor-data-loader.svelte.js +7 -0
  5. package/dist/core/data-loaders/data-loader.d.ts +1 -0
  6. package/dist/core/data-loaders/page-data-loader.svelte.d.ts +3 -0
  7. package/dist/core/data-loaders/page-data-loader.svelte.js +21 -2
  8. package/dist/ui/checkbox/cmp.checkbox.svelte +49 -22
  9. package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts +10 -5
  10. package/dist/ui/checkbox/index.d.ts +1 -0
  11. package/dist/ui/checkbox/types.d.ts +2 -0
  12. package/dist/ui/checkbox/types.js +1 -0
  13. package/dist/ui/grid-card/cmp.grid-card.svelte +6 -26
  14. package/dist/ui/grid-card/cmp.grid-card.svelte.d.ts +0 -2
  15. package/package.json +1 -1
  16. package/dist/ui/grid-card/icon-checkbox-checked.svg +0 -5
  17. package/dist/ui/grid-card/icon-checkbox-unchecked.svg +0 -4
package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.d.ts CHANGED
@@ -8,11 +8,13 @@ export declare class CursorDataLoaderWithSearch<T> implements IDataLoader<T> {
8
8
  private pending;
9
9
  private generation;
10
10
  private searchStringMinLength;
11
+ private _loading;
11
12
  constructor(init: {
12
13
  loadPage: (continuationToken: ContinuationToken, searchString: string) => Promise<CursorResult<T> | null>;
13
14
  searchStringMinLength?: number;
14
15
  });
15
16
  get searchString(): string;
17
+ get loading(): boolean;
16
18
  loadMore: () => Promise<T[]>;
17
19
  reset(): Promise<void>;
18
20
  updateSearchString: (searchString: string | null) => void;
package/dist/core/data-loaders/cursor-data-loader-with-search.svelte.js CHANGED
@@ -8,6 +8,7 @@ export class CursorDataLoaderWithSearch {
8
8
  pending = null;
9
9
  generation = 0;
10
10
  searchStringMinLength = 1;
11
+ _loading = $state(false);
11
12
  constructor(init) {
12
13
  this.loadPage = init.loadPage;
13
14
  if (init.searchStringMinLength !== undefined) {
@@ -18,6 +19,9 @@ export class CursorDataLoaderWithSearch {
18
19
  get searchString() {
19
20
  return this._searchString;
20
21
  }
22
+ get loading() {
23
+ return this._loading;
24
+ }
21
25
  loadMore = async () => {
22
26
  if (this.pending) {
23
27
  return this.pending;
@@ -25,6 +29,7 @@ export class CursorDataLoaderWithSearch {
25
29
  if (!this.continuationToken.canLoadMore) {
26
30
  return [];
27
31
  }
32
+ this._loading = true;
28
33
  const pending = this.runLoad();
29
34
  this.pending = pending;
30
35
  try {
@@ -34,12 +39,14 @@ export class CursorDataLoaderWithSearch {
34
39
  // a concurrent reset() may have installed a newer load — leave that one alone
35
40
  if (this.pending === pending) {
36
41
  this.pending = null;
42
+ this._loading = false;
37
43
  }
38
44
  }
39
45
  };
40
46
  async reset() {
41
47
  this.generation++;
42
48
  this.pending = null;
49
+ this._loading = false;
43
50
  this.items = [];
44
51
  this.continuationToken = ContinuationToken.init();
45
52
  await this.loadMore();
package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts CHANGED
@@ -6,9 +6,11 @@ export declare class CursorDataLoader<T> implements IDataLoader<T> {
6
6
  private loadPage;
7
7
  private pending;
8
8
  private generation;
9
+ private _loading;
9
10
  constructor(init: {
10
11
  loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
11
12
  });
13
+ get loading(): boolean;
12
14
  loadMore: () => Promise<T[]>;
13
15
  reset(): Promise<void>;
14
16
  private runLoad;
package/dist/core/data-loaders/cursor-data-loader.svelte.js CHANGED
@@ -5,9 +5,13 @@ export class CursorDataLoader {
5
5
  loadPage;
6
6
  pending = null;
7
7
  generation = 0;
8
+ _loading = $state(false);
8
9
  constructor(init) {
9
10
  this.loadPage = init.loadPage;
10
11
  }
12
+ get loading() {
13
+ return this._loading;
14
+ }
11
15
  loadMore = async () => {
12
16
  if (this.pending) {
13
17
  return this.pending;
@@ -15,6 +19,7 @@ export class CursorDataLoader {
15
19
  if (!this.continuationToken.canLoadMore) {
16
20
  return [];
17
21
  }
22
+ this._loading = true;
18
23
  const pending = this.runLoad();
19
24
  this.pending = pending;
20
25
  try {
@@ -24,12 +29,14 @@ export class CursorDataLoader {
24
29
  // a concurrent reset() may have installed a newer load — leave that one alone
25
30
  if (this.pending === pending) {
26
31
  this.pending = null;
32
+ this._loading = false;
27
33
  }
28
34
  }
29
35
  };
30
36
  async reset() {
31
37
  this.generation++;
32
38
  this.pending = null;
39
+ this._loading = false;
33
40
  this.items = [];
34
41
  this.continuationToken = ContinuationToken.init();
35
42
  await this.loadMore();
package/dist/core/data-loaders/data-loader.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export interface IDataLoader<T> {
2
2
  items: T[];
3
+ loading: boolean;
3
4
  loadMore: () => Promise<T[]>;
4
5
  }
package/dist/core/data-loaders/page-data-loader.svelte.d.ts CHANGED
@@ -1,15 +1,18 @@
1
1
  import type { IDataLoader } from './data-loader';
2
2
  export declare class PageDataLoader<T> implements IDataLoader<T> {
3
3
  private _items;
4
+ private _loading;
4
5
  private canLoadMore;
5
6
  private perPage;
6
7
  private loadPage;
7
8
  private pageNumber;
9
+ private generation;
8
10
  constructor(init: {
9
11
  loadPage: (page: number, perPage: number) => Promise<T[]>;
10
12
  perPage?: number;
11
13
  });
12
14
  get items(): T[];
15
+ get loading(): boolean;
13
16
  loadMore: () => Promise<T[]>;
14
17
  reset: () => Promise<void>;
15
18
  }
package/dist/core/data-loaders/page-data-loader.svelte.js CHANGED
@@ -1,9 +1,11 @@
1
1
  export class PageDataLoader {
2
2
  _items = $state.raw([]);
3
+ _loading = $state(false);
3
4
  canLoadMore = $state(true);
4
5
  perPage = 20;
5
6
  loadPage;
6
7
  pageNumber = 1;
8
+ generation = 0;
7
9
  constructor(init) {
8
10
  this.loadPage = init.loadPage;
9
11
  if (init.perPage) {
@@ -13,12 +15,22 @@ export class PageDataLoader {
13
15
  get items() {
14
16
  return this._items;
15
17
  }
18
+ get loading() {
19
+ return this._loading;
20
+ }
16
21
  loadMore = async () => {
17
- if (!this.canLoadMore) {
22
+ if (this._loading || !this.canLoadMore) {
18
23
  return [];
19
24
  }
25
+ const generation = this.generation;
26
+ this._loading = true;
20
27
  try {
21
- const items = await this.loadPage(this.pageNumber++, this.perPage);
28
+ const items = await this.loadPage(this.pageNumber, this.perPage);
29
+ // a reset() mid-load bumps the generation — drop the stale page instead of appending it to the cleared list
30
+ if (generation !== this.generation) {
31
+ return [];
32
+ }
33
+ this.pageNumber++;
22
34
  this.canLoadMore = items.length === this.perPage;
23
35
  this._items = [...this._items, ...items];
24
36
  return items;
@@ -27,8 +39,15 @@ export class PageDataLoader {
27
39
  console.error('PageDataLoader: failed to load page', error);
28
40
  return [];
29
41
  }
42
+ finally {
43
+ if (generation === this.generation) {
44
+ this._loading = false;
45
+ }
46
+ }
30
47
  };
31
48
  reset = async () => {
49
+ this.generation++;
50
+ this._loading = false;
32
51
  this.pageNumber = 1;
33
52
  this._items = [];
34
53
  this.canLoadMore = true;
package/dist/ui/checkbox/cmp.checkbox.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">import { Icon } from '../icon';
2
2
  import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_12_regular.svg?raw';
3
3
  import IconSubtract from '@fluentui/svg-icons/icons/subtract_16_regular.svg?raw';
4
- const { checked, disabled = false, label, title, on } = $props();
4
+ const { checked, variant = 'default', size = 'md', disabled = false, label, title, on } = $props();
5
5
  const isOn = $derived(checked === true);
6
6
  const isIndeterminate = $derived(checked === 'indeterminate');
7
7
  const ariaChecked = $derived(isIndeterminate ? 'mixed' : isOn ? 'true' : 'false');
@@ -15,7 +15,12 @@ const handleClick = (event) => {
15
15
  };
16
16
  </script>
17
17
 
18
- <label class="check" class:check--on={isOn} class:check--indeterminate={isIndeterminate} class:check--disabled={disabled} title={title}>
18
+ <label
19
+ class="check check--{variant} check--{size}"
20
+ class:check--on={isOn}
21
+ class:check--indeterminate={isIndeterminate}
22
+ class:check--disabled={disabled}
23
+ title={title}>
19
24
  <button type="button" class="check__box" role="checkbox" aria-checked={ariaChecked} disabled={disabled} onclick={handleClick}>
20
25
  <span class="check__mark" class:check__mark--visible={isOn || isIndeterminate} aria-hidden="true">
21
26
  <Icon src={isIndeterminate ? IconSubtract : IconCheckmark} />
@@ -33,18 +38,18 @@ const handleClick = (event) => {
33
38
  Tri-state checkbox (off / on / mixed). Pass `checked={'indeterminate'}` to render the mixed
34
39
  indicator (e.g. for a parent of partially-checked children); clicking advances to checked.
35
40
 
41
+ Two variants: `default` fills the box with the accent color when checked; `on-accent` keeps a
42
+ light box and colors the ring + mark instead, for placement over media or colored surfaces.
43
+ Sizes `md` (16px box) and `lg` (20px box) scale the box and mark together.
44
+
36
45
  Clicking the label area also toggles the box. The component always stops click propagation
37
46
  so it can be safely nested inside clickable rows.
38
47
 
39
48
  ### CSS Custom Properties
40
49
  | Property | Description | Default |
41
50
  |---|---|---|
42
- | `--sc-kit--checkbox--size` | Box width and height | `1rem` |
51
+ | `--sc-kit--checkbox--size` | Box width and height | per size — `md` 16px, `lg` 20px |
43
52
  | `--sc-kit--checkbox--border-radius` | Box corner rounding | `var(--sc-kit--radius--sm)` |
44
- | `--sc-kit--checkbox--border-color` | Border color | per state |
45
- | `--sc-kit--checkbox--border-color--hover` | Border color on hover (off state only) | `var(--sc-kit--color--accent)` |
46
- | `--sc-kit--checkbox--background` | Box background | per state |
47
- | `--sc-kit--checkbox--mark-color` | Checkmark / dash color | `var(--sc-kit--color--text--on-accent)` |
48
53
  | `--sc-kit--checkbox--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
49
54
  | `--sc-kit--checkbox--gap` | Gap between box and label | `var(--sc-kit--space--2)` |
50
55
  | `--sc-kit--checkbox--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
@@ -53,17 +58,17 @@ so it can be safely nested inside clickable rows.
53
58
  -->
54
59
 
55
60
  <style>.check {
56
- --_check--size: var(--sc-kit--checkbox--size, 1rem);
57
- --_check--border-radius: var(--sc-kit--checkbox--border-radius, var(--sc-kit--radius--sm));
58
- --_check--border-color: var(--sc-kit--checkbox--border-color, var(--sc-kit--color--border--strong));
59
- --_check--border-color-hover: var(--sc-kit--checkbox--border-color--hover, var(--sc-kit--color--accent));
60
- --_check--background: var(--sc-kit--checkbox--background, var(--sc-kit--color--bg--field));
61
- --_check--mark-color: var(--sc-kit--checkbox--mark-color, var(--sc-kit--color--text--on-accent));
61
+ --_check--size: var(--sc-kit--checkbox--size, var(--_check--size-preset));
62
+ --_check--mark-size: var(--_check--mark-size-preset);
63
+ --_check--border-radius: var(--sc-kit--checkbox--border-radius, var(--_check--border-radius-preset));
62
64
  --_check--focus-ring-color: var(--sc-kit--checkbox--focus-ring-color, var(--sc-kit--color--border--focus));
63
65
  --_check--gap: var(--sc-kit--checkbox--gap, var(--sc-kit--space--2));
64
66
  --_check--label-font-size: var(--sc-kit--checkbox--label--font-size, var(--sc-kit--font-size--md));
65
67
  --_check--label-line-height: var(--sc-kit--checkbox--label--line-height, var(--sc-kit--line-height--md));
66
68
  --_check--label-color: var(--sc-kit--checkbox--label--color, var(--sc-kit--color--text--primary));
69
+ --_check--background: var(--_check--background-off);
70
+ --_check--border-color: var(--_check--border-color-off);
71
+ --_check--border-width: 1.5px;
67
72
  display: flex;
68
73
  align-items: center;
69
74
  gap: var(--_check--gap);
@@ -72,16 +77,38 @@ so it can be safely nested inside clickable rows.
72
77
  cursor: pointer;
73
78
  user-select: none;
74
79
  }
75
- .check--on {
76
- --sc-kit--checkbox--background: var(--sc-kit--color--accent);
77
- --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
80
+ .check--md {
81
+ --_check--size-preset: 1rem;
82
+ --_check--mark-size-preset: 0.75rem;
83
+ --_check--border-radius-preset: var(--sc-kit--radius--sm);
84
+ }
85
+ .check--lg {
86
+ --_check--size-preset: 1.25rem;
87
+ --_check--mark-size-preset: 0.9375rem;
88
+ --_check--border-radius-preset: var(--sc-kit--radius--sm);
89
+ }
90
+ .check--default {
91
+ --_check--background-off: var(--sc-kit--color--bg--field);
92
+ --_check--background-on: var(--sc-kit--color--accent);
93
+ --_check--border-color-off: var(--sc-kit--color--border--strong);
94
+ --_check--border-color-on: var(--sc-kit--color--accent);
95
+ --_check--border-color-hover: var(--sc-kit--color--accent);
96
+ --_check--mark-color: var(--sc-kit--color--text--on-accent);
97
+ }
98
+ .check--on-accent {
99
+ --_check--background-off: #ffffff;
100
+ --_check--background-on: #ffffff;
101
+ --_check--border-color-off: var(--sc-kit--color--text--muted);
102
+ --_check--border-color-on: var(--sc-kit--color--accent);
103
+ --_check--border-color-hover: var(--sc-kit--color--accent);
104
+ --_check--mark-color: var(--sc-kit--color--accent);
78
105
  }
79
- .check--indeterminate {
80
- --sc-kit--checkbox--background: var(--sc-kit--color--accent);
81
- --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
106
+ .check--on, .check--indeterminate {
107
+ --_check--background: var(--_check--background-on);
108
+ --_check--border-color: var(--_check--border-color-on);
82
109
  }
83
110
  .check:hover:not(.check--disabled):not(.check--on):not(.check--indeterminate) {
84
- --sc-kit--checkbox--border-color: var(--_check--border-color-hover);
111
+ --_check--border-color: var(--_check--border-color-hover);
85
112
  }
86
113
  .check--disabled {
87
114
  cursor: default;
@@ -97,7 +124,7 @@ so it can be safely nested inside clickable rows.
97
124
  padding: 0;
98
125
  color: var(--_check--mark-color);
99
126
  background: var(--_check--background);
100
- border: 1.5px solid var(--_check--border-color);
127
+ border: var(--_check--border-width) solid var(--_check--border-color);
101
128
  border-radius: var(--_check--border-radius);
102
129
  cursor: inherit;
103
130
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -107,7 +134,7 @@ so it can be safely nested inside clickable rows.
107
134
  outline-offset: 2px;
108
135
  }
109
136
  .check__mark {
110
- --sc-kit--icon--size: 0.75rem;
137
+ --sc-kit--icon--size: var(--_check--mark-size);
111
138
  display: inline-flex;
112
139
  opacity: 0;
113
140
  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts CHANGED
@@ -1,7 +1,12 @@
1
+ import type { CheckboxSize, CheckboxVariant } from './types';
1
2
  import type { Snippet } from 'svelte';
2
3
  type Props = {
3
4
  /** `true` (on), `false` (off), or `'indeterminate'` (mixed). */
4
5
  checked: boolean | 'indeterminate';
6
+ /** Color variant — `'on-accent'` keeps a light box (ring + mark colored) for use over media / colored surfaces. @default 'default' */
7
+ variant?: CheckboxVariant;
8
+ /** @default 'md' */
9
+ size?: CheckboxSize;
5
10
  disabled?: boolean;
6
11
  /** Label: plain text or a snippet for rich content (e.g. `<strong>`, `<a>`). */
7
12
  label?: string | Snippet;
@@ -14,18 +19,18 @@ type Props = {
14
19
  * Tri-state checkbox (off / on / mixed). Pass `checked={'indeterminate'}` to render the mixed
15
20
  * indicator (e.g. for a parent of partially-checked children); clicking advances to checked.
16
21
  *
22
+ * Two variants: `default` fills the box with the accent color when checked; `on-accent` keeps a
23
+ * light box and colors the ring + mark instead, for placement over media or colored surfaces.
24
+ * Sizes `md` (16px box) and `lg` (20px box) scale the box and mark together.
25
+ *
17
26
  * Clicking the label area also toggles the box. The component always stops click propagation
18
27
  * so it can be safely nested inside clickable rows.
19
28
  *
20
29
  * ### CSS Custom Properties
21
30
  * | Property | Description | Default |
22
31
  * |---|---|---|
23
- * | `--sc-kit--checkbox--size` | Box width and height | `1rem` |
32
+ * | `--sc-kit--checkbox--size` | Box width and height | per size — `md` 16px, `lg` 20px |
24
33
  * | `--sc-kit--checkbox--border-radius` | Box corner rounding | `var(--sc-kit--radius--sm)` |
25
- * | `--sc-kit--checkbox--border-color` | Border color | per state |
26
- * | `--sc-kit--checkbox--border-color--hover` | Border color on hover (off state only) | `var(--sc-kit--color--accent)` |
27
- * | `--sc-kit--checkbox--background` | Box background | per state |
28
- * | `--sc-kit--checkbox--mark-color` | Checkmark / dash color | `var(--sc-kit--color--text--on-accent)` |
29
34
  * | `--sc-kit--checkbox--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
30
35
  * | `--sc-kit--checkbox--gap` | Gap between box and label | `var(--sc-kit--space--2)` |
31
36
  * | `--sc-kit--checkbox--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
package/dist/ui/checkbox/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default as Checkbox } from './cmp.checkbox.svelte';
2
+ export type { CheckboxSize, CheckboxVariant } from './types';
package/dist/ui/checkbox/types.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type CheckboxVariant = 'default' | 'on-accent';
2
+ export type CheckboxSize = 'md' | 'lg';
package/dist/ui/checkbox/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/ui/grid-card/cmp.grid-card.svelte CHANGED
@@ -1,12 +1,6 @@
1
- <script lang="ts">import { Icon } from '../icon';
2
- import IconCheckboxChecked from './icon-checkbox-checked.svg?raw';
3
- import IconCheckboxUnchecked from './icon-checkbox-unchecked.svg?raw';
1
+ <script lang="ts">import { Checkbox } from '../checkbox';
4
2
  const { selected, children, on } = $props();
5
3
  const interactive = $derived(!!on?.activate);
6
- const onCheckboxClick = (e) => {
7
- e.stopPropagation();
8
- on?.select?.(!selected);
9
- };
10
4
  const onCardKeydown = (e) => {
11
5
  if (!on?.activate) {
12
6
  return;
@@ -30,9 +24,9 @@ const onCardKeydown = (e) => {
30
24
  onkeydown={onCardKeydown}>
31
25
  {@render children()}
32
26
  {#if selected || on?.select}
33
- <button type="button" class="grid-card__checkbox" class:grid-card__checkbox--checked={selected} onclick={onCheckboxClick} aria-pressed={selected}>
34
- <Icon src={selected ? IconCheckboxChecked : IconCheckboxUnchecked} />
35
- </button>
27
+ <div class="grid-card__checkbox">
28
+ <Checkbox variant="on-accent" checked={!!selected} on={{ change: (v) => on?.select?.(v) }} />
29
+ </div>
36
30
  {/if}
37
31
  </div>
38
32
  </div>
@@ -55,8 +49,6 @@ Inner interactive elements stop event propagation so they don't double-fire acti
55
49
  | `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
56
50
  | `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
57
51
  | `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
58
- | `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
59
- | `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
60
52
  -->
61
53
 
62
54
  <style>.grid-card-container {
@@ -70,8 +62,6 @@ Inner interactive elements stop event propagation so they don't double-fire acti
70
62
  --_grid-card--padding: var(--sc-kit--grid-card--padding, clamp(0.25rem, 3.6cqi, 0.5rem));
71
63
  --_grid-card--gap: var(--sc-kit--grid-card--gap, 0.25rem);
72
64
  --_grid-card--border-radius: var(--sc-kit--grid-card--border-radius, 0.25rem);
73
- --_grid-card--checkbox-color: var(--sc-kit--grid-card--checkbox--color, var(--sc-kit--color--text--muted));
74
- --_grid-card--checkbox-color-checked: var(--sc-kit--grid-card--checkbox--color--checked, var(--sc-kit--color--accent));
75
65
  position: relative;
76
66
  width: 100%;
77
67
  height: 100%;
@@ -95,17 +85,7 @@ Inner interactive elements stop event propagation so they don't double-fire acti
95
85
  }
96
86
  .grid-card__checkbox {
97
87
  position: absolute;
98
- top: 0.5rem;
99
- left: 0.5rem;
88
+ top: 0.75rem;
89
+ left: 0.75rem;
100
90
  z-index: 10;
101
- padding: 0;
102
- border: none;
103
- background: none;
104
- cursor: pointer;
105
- line-height: 0;
106
- --sc-kit--icon--size: 1.5rem;
107
- --sc-kit--icon--color: var(--_grid-card--checkbox-color);
108
- }
109
- .grid-card__checkbox--checked {
110
- --sc-kit--icon--color: var(--_grid-card--checkbox-color-checked);
111
91
  }</style>
package/dist/ui/grid-card/cmp.grid-card.svelte.d.ts CHANGED
@@ -31,8 +31,6 @@ type Props = {
31
31
  * | `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
32
32
  * | `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
33
33
  * | `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
34
- * | `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
35
- * | `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
36
34
  */
37
35
  declare const Cmp: import("svelte").Component<Props, {}, "">;
38
36
  type Cmp = ReturnType<typeof Cmp>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.19.0",
3
+ "version": "0.19.2",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",
package/dist/ui/grid-card/icon-checkbox-checked.svg DELETED
@@ -1,5 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
- <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
3
- <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
4
- <path d="M13.85 7.85l-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z" />
5
- </svg>
package/dist/ui/grid-card/icon-checkbox-unchecked.svg DELETED
@@ -1,4 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
- <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
3
- <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
4
- </svg>