@streamscloud/kit 0.19.1 → 0.19.3

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/checkbox/cmp.checkbox.svelte +49 -22
  2. package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts +10 -5
  3. package/dist/ui/checkbox/index.d.ts +1 -0
  4. package/dist/ui/checkbox/types.d.ts +2 -0
  5. package/dist/ui/checkbox/types.js +1 -0
  6. package/dist/ui/grid-card/cmp.grid-card.svelte +6 -26
  7. package/dist/ui/grid-card/cmp.grid-card.svelte.d.ts +0 -2
  8. package/dist/ui/page-layout/cmp.page-panel.svelte +0 -1
  9. package/dist/ui/rich-text-input/cmp.rich-text-input.svelte +4 -7
  10. package/dist/ui/rich-text-input/hugerte.declarations.d.ts +3 -3
  11. package/package.json +1 -1
  12. package/dist/ui/grid-card/icon-checkbox-checked.svg +0 -5
  13. package/dist/ui/grid-card/icon-checkbox-unchecked.svg +0 -4
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/dist/ui/page-layout/cmp.page-panel.svelte CHANGED
@@ -295,7 +295,6 @@ to min / max; Enter / Space toggle collapsed.
295
295
  justify-content: center;
296
296
  flex: 1;
297
297
  min-width: 0;
298
- overflow: hidden;
299
298
  }
300
299
  .page-panel__header-right {
301
300
  display: flex;
package/dist/ui/rich-text-input/cmp.rich-text-input.svelte CHANGED
@@ -53,8 +53,8 @@ onMount(async () => {
53
53
  await Promise.all([
54
54
  import('hugerte/models/dom'),
55
55
  import('hugerte/themes/silver'),
56
- AppTheme.isDarkMode ? import('hugerte/skins/ui/oxide-dark/skin.js') : import('hugerte/skins/ui/oxide/skin.js'),
57
- import('hugerte/skins/ui/oxide/content.inline.js'),
56
+ AppTheme.isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/skin.js') : import('hugerte/skins/ui/hugerte-5/skin.js'),
57
+ import('hugerte/skins/ui/hugerte-5/content.inline.js'),
58
58
  import('hugerte/icons/default'),
59
59
  import('hugerte/plugins/advlist'),
60
60
  import('hugerte/plugins/link'),
@@ -64,11 +64,8 @@ onMount(async () => {
64
64
  const initOptions = {
65
65
  target: elementRef,
66
66
  inline: true,
67
- // Skin CSS is injected at build time via the `.js` imports above; `skin_url: 'default'`
68
- // keeps HugeRTE's runtime skin pipeline happy (anything else either fetches a 404 or
69
- // breaks toolbar rendering). `content_css: false` skips the redundant content-CSS
70
- // fetch — inline mode renders into our host DOM, no iframe content CSS needed.
71
- skin_url: 'default',
67
+ // Must match the injected skin's resource key (`ui/<skin_url>/skin.css`) or HugeRTE fetches it over the network and 404s.
68
+ skin_url: 'hugerte-5',
72
69
  content_css: false,
73
70
  fixed_toolbar_container: options?.fixedToolbarId ? `#${options.fixedToolbarId}` : undefined,
74
71
  fixed_toolbar_container_target: options?.fixedToolbarId ? undefined : toolbarRef,
package/dist/ui/rich-text-input/hugerte.declarations.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  declare module 'hugerte/models/dom';
2
2
  declare module 'hugerte/themes/silver';
3
3
  declare module 'hugerte/icons/default';
4
- declare module 'hugerte/skins/ui/oxide/skin.js';
5
- declare module 'hugerte/skins/ui/oxide-dark/skin.js';
6
- declare module 'hugerte/skins/ui/oxide/content.inline.js';
4
+ declare module 'hugerte/skins/ui/hugerte-5/skin.js';
5
+ declare module 'hugerte/skins/ui/hugerte-5-dark/skin.js';
6
+ declare module 'hugerte/skins/ui/hugerte-5/content.inline.js';
7
7
  declare module 'hugerte/plugins/advlist';
8
8
  declare module 'hugerte/plugins/link';
9
9
  declare module 'hugerte/plugins/lists';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.19.1",
3
+ "version": "0.19.3",
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>