@streamscloud/kit 0.19.1 → 0.19.2

package/dist/ui/checkbox/cmp.checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Icon } from '../icon';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_12_regular.svg?raw';
 import IconSubtract from '@fluentui/svg-icons/icons/subtract_16_regular.svg?raw';
-const { checked, disabled = false, label, title, on } = $props();
+const { checked, variant = 'default', size = 'md', disabled = false, label, title, on } = $props();
 const isOn = $derived(checked === true);
 const isIndeterminate = $derived(checked === 'indeterminate');
 const ariaChecked = $derived(isIndeterminate ? 'mixed' : isOn ? 'true' : 'false');
@@ -15,7 +15,12 @@ const handleClick = (event) => {
 };
 </script>
 
-<label class="check" class:check--on={isOn} class:check--indeterminate={isIndeterminate} class:check--disabled={disabled} title={title}>
+<label
+  class="check check--{variant} check--{size}"
+  class:check--on={isOn}
+  class:check--indeterminate={isIndeterminate}
+  class:check--disabled={disabled}
+  title={title}>
   <button type="button" class="check__box" role="checkbox" aria-checked={ariaChecked} disabled={disabled} onclick={handleClick}>
     <span class="check__mark" class:check__mark--visible={isOn || isIndeterminate} aria-hidden="true">
       <Icon src={isIndeterminate ? IconSubtract : IconCheckmark} />
@@ -33,18 +38,18 @@ const handleClick = (event) => {
 Tri-state checkbox (off / on / mixed). Pass `checked={'indeterminate'}` to render the mixed
 indicator (e.g. for a parent of partially-checked children); clicking advances to checked.
 
+Two variants: `default` fills the box with the accent color when checked; `on-accent` keeps a
+light box and colors the ring + mark instead, for placement over media or colored surfaces.
+Sizes `md` (16px box) and `lg` (20px box) scale the box and mark together.
+
 Clicking the label area also toggles the box. The component always stops click propagation
 so it can be safely nested inside clickable rows.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--checkbox--size` | Box width and height | `1rem` |
+| `--sc-kit--checkbox--size` | Box width and height | per size — `md` 16px, `lg` 20px |
 | `--sc-kit--checkbox--border-radius` | Box corner rounding | `var(--sc-kit--radius--sm)` |
-| `--sc-kit--checkbox--border-color` | Border color | per state |
-| `--sc-kit--checkbox--border-color--hover` | Border color on hover (off state only) | `var(--sc-kit--color--accent)` |
-| `--sc-kit--checkbox--background` | Box background | per state |
-| `--sc-kit--checkbox--mark-color` | Checkmark / dash color | `var(--sc-kit--color--text--on-accent)` |
 | `--sc-kit--checkbox--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
 | `--sc-kit--checkbox--gap` | Gap between box and label | `var(--sc-kit--space--2)` |
 | `--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.
 -->
 
 <style>.check {
-  --_check--size: var(--sc-kit--checkbox--size, 1rem);
-  --_check--border-radius: var(--sc-kit--checkbox--border-radius, var(--sc-kit--radius--sm));
-  --_check--border-color: var(--sc-kit--checkbox--border-color, var(--sc-kit--color--border--strong));
-  --_check--border-color-hover: var(--sc-kit--checkbox--border-color--hover, var(--sc-kit--color--accent));
-  --_check--background: var(--sc-kit--checkbox--background, var(--sc-kit--color--bg--field));
-  --_check--mark-color: var(--sc-kit--checkbox--mark-color, var(--sc-kit--color--text--on-accent));
+  --_check--size: var(--sc-kit--checkbox--size, var(--_check--size-preset));
+  --_check--mark-size: var(--_check--mark-size-preset);
+  --_check--border-radius: var(--sc-kit--checkbox--border-radius, var(--_check--border-radius-preset));
   --_check--focus-ring-color: var(--sc-kit--checkbox--focus-ring-color, var(--sc-kit--color--border--focus));
   --_check--gap: var(--sc-kit--checkbox--gap, var(--sc-kit--space--2));
   --_check--label-font-size: var(--sc-kit--checkbox--label--font-size, var(--sc-kit--font-size--md));
   --_check--label-line-height: var(--sc-kit--checkbox--label--line-height, var(--sc-kit--line-height--md));
   --_check--label-color: var(--sc-kit--checkbox--label--color, var(--sc-kit--color--text--primary));
+  --_check--background: var(--_check--background-off);
+  --_check--border-color: var(--_check--border-color-off);
+  --_check--border-width: 1.5px;
   display: flex;
   align-items: center;
   gap: var(--_check--gap);
@@ -72,16 +77,38 @@ so it can be safely nested inside clickable rows.
   cursor: pointer;
   user-select: none;
 }
-.check--on {
-  --sc-kit--checkbox--background: var(--sc-kit--color--accent);
-  --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
+.check--md {
+  --_check--size-preset: 1rem;
+  --_check--mark-size-preset: 0.75rem;
+  --_check--border-radius-preset: var(--sc-kit--radius--sm);
+}
+.check--lg {
+  --_check--size-preset: 1.25rem;
+  --_check--mark-size-preset: 0.9375rem;
+  --_check--border-radius-preset: var(--sc-kit--radius--sm);
+}
+.check--default {
+  --_check--background-off: var(--sc-kit--color--bg--field);
+  --_check--background-on: var(--sc-kit--color--accent);
+  --_check--border-color-off: var(--sc-kit--color--border--strong);
+  --_check--border-color-on: var(--sc-kit--color--accent);
+  --_check--border-color-hover: var(--sc-kit--color--accent);
+  --_check--mark-color: var(--sc-kit--color--text--on-accent);
+}
+.check--on-accent {
+  --_check--background-off: #ffffff;
+  --_check--background-on: #ffffff;
+  --_check--border-color-off: var(--sc-kit--color--text--muted);
+  --_check--border-color-on: var(--sc-kit--color--accent);
+  --_check--border-color-hover: var(--sc-kit--color--accent);
+  --_check--mark-color: var(--sc-kit--color--accent);
 }
-.check--indeterminate {
-  --sc-kit--checkbox--background: var(--sc-kit--color--accent);
-  --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
+.check--on, .check--indeterminate {
+  --_check--background: var(--_check--background-on);
+  --_check--border-color: var(--_check--border-color-on);
 }
 .check:hover:not(.check--disabled):not(.check--on):not(.check--indeterminate) {
-  --sc-kit--checkbox--border-color: var(--_check--border-color-hover);
+  --_check--border-color: var(--_check--border-color-hover);
 }
 .check--disabled {
   cursor: default;
@@ -97,7 +124,7 @@ so it can be safely nested inside clickable rows.
   padding: 0;
   color: var(--_check--mark-color);
   background: var(--_check--background);
-  border: 1.5px solid var(--_check--border-color);
+  border: var(--_check--border-width) solid var(--_check--border-color);
   border-radius: var(--_check--border-radius);
   cursor: inherit;
   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.
   outline-offset: 2px;
 }
 .check__mark {
-  --sc-kit--icon--size: 0.75rem;
+  --sc-kit--icon--size: var(--_check--mark-size);
   display: inline-flex;
   opacity: 0;
   transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);

package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { CheckboxSize, CheckboxVariant } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
     /** `true` (on), `false` (off), or `'indeterminate'` (mixed). */
     checked: boolean | 'indeterminate';
+    /** Color variant — `'on-accent'` keeps a light box (ring + mark colored) for use over media / colored surfaces. @default 'default' */
+    variant?: CheckboxVariant;
+    /** @default 'md' */
+    size?: CheckboxSize;
     disabled?: boolean;
     /** Label: plain text or a snippet for rich content (e.g. `<strong>`, `<a>`). */
     label?: string | Snippet;
@@ -14,18 +19,18 @@ type Props = {
  * Tri-state checkbox (off / on / mixed). Pass `checked={'indeterminate'}` to render the mixed
  * indicator (e.g. for a parent of partially-checked children); clicking advances to checked.
  *
+ * Two variants: `default` fills the box with the accent color when checked; `on-accent` keeps a
+ * light box and colors the ring + mark instead, for placement over media or colored surfaces.
+ * Sizes `md` (16px box) and `lg` (20px box) scale the box and mark together.
+ *
  * Clicking the label area also toggles the box. The component always stops click propagation
  * so it can be safely nested inside clickable rows.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--checkbox--size` | Box width and height | `1rem` |
+ * | `--sc-kit--checkbox--size` | Box width and height | per size — `md` 16px, `lg` 20px |
  * | `--sc-kit--checkbox--border-radius` | Box corner rounding | `var(--sc-kit--radius--sm)` |
- * | `--sc-kit--checkbox--border-color` | Border color | per state |
- * | `--sc-kit--checkbox--border-color--hover` | Border color on hover (off state only) | `var(--sc-kit--color--accent)` |
- * | `--sc-kit--checkbox--background` | Box background | per state |
- * | `--sc-kit--checkbox--mark-color` | Checkmark / dash color | `var(--sc-kit--color--text--on-accent)` |
  * | `--sc-kit--checkbox--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
  * | `--sc-kit--checkbox--gap` | Gap between box and label | `var(--sc-kit--space--2)` |
  * | `--sc-kit--checkbox--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |

package/dist/ui/checkbox/index.d.ts

@@ -1 +1,2 @@
 export { default as Checkbox } from './cmp.checkbox.svelte';
+export type { CheckboxSize, CheckboxVariant } from './types';

package/dist/ui/checkbox/types.d.ts

@@ -0,0 +1,2 @@
+export type CheckboxVariant = 'default' | 'on-accent';
+export type CheckboxSize = 'md' | 'lg';

package/dist/ui/checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/grid-card/cmp.grid-card.svelte

@@ -1,12 +1,6 @@
-<script lang="ts">import { Icon } from '../icon';
-import IconCheckboxChecked from './icon-checkbox-checked.svg?raw';
-import IconCheckboxUnchecked from './icon-checkbox-unchecked.svg?raw';
+<script lang="ts">import { Checkbox } from '../checkbox';
 const { selected, children, on } = $props();
 const interactive = $derived(!!on?.activate);
-const onCheckboxClick = (e) => {
-    e.stopPropagation();
-    on?.select?.(!selected);
-};
 const onCardKeydown = (e) => {
     if (!on?.activate) {
         return;
@@ -30,9 +24,9 @@ const onCardKeydown = (e) => {
     onkeydown={onCardKeydown}>
     {@render children()}
     {#if selected || on?.select}
-      <button type="button" class="grid-card__checkbox" class:grid-card__checkbox--checked={selected} onclick={onCheckboxClick} aria-pressed={selected}>
-        <Icon src={selected ? IconCheckboxChecked : IconCheckboxUnchecked} />
-      </button>
+      <div class="grid-card__checkbox">
+        <Checkbox variant="on-accent" checked={!!selected} on={{ change: (v) => on?.select?.(v) }} />
+      </div>
     {/if}
   </div>
 </div>
@@ -55,8 +49,6 @@ Inner interactive elements stop event propagation so they don't double-fire acti
 | `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
 | `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
 | `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
-| `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
-| `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
 -->
 
 <style>.grid-card-container {
@@ -70,8 +62,6 @@ Inner interactive elements stop event propagation so they don't double-fire acti
   --_grid-card--padding: var(--sc-kit--grid-card--padding, clamp(0.25rem, 3.6cqi, 0.5rem));
   --_grid-card--gap: var(--sc-kit--grid-card--gap, 0.25rem);
   --_grid-card--border-radius: var(--sc-kit--grid-card--border-radius, 0.25rem);
-  --_grid-card--checkbox-color: var(--sc-kit--grid-card--checkbox--color, var(--sc-kit--color--text--muted));
-  --_grid-card--checkbox-color-checked: var(--sc-kit--grid-card--checkbox--color--checked, var(--sc-kit--color--accent));
   position: relative;
   width: 100%;
   height: 100%;
@@ -95,17 +85,7 @@ Inner interactive elements stop event propagation so they don't double-fire acti
 }
 .grid-card__checkbox {
   position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
+  top: 0.75rem;
+  left: 0.75rem;
   z-index: 10;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  line-height: 0;
-  --sc-kit--icon--size: 1.5rem;
-  --sc-kit--icon--color: var(--_grid-card--checkbox-color);
-}
-.grid-card__checkbox--checked {
-  --sc-kit--icon--color: var(--_grid-card--checkbox-color-checked);
 }</style>

package/dist/ui/grid-card/cmp.grid-card.svelte.d.ts

@@ -31,8 +31,6 @@ type Props = {
  * | `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
  * | `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
  * | `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
- * | `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
- * | `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/ui/grid-card/icon-checkbox-checked.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
-  <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" />
-  <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" />
-</svg>

package/dist/ui/grid-card/icon-checkbox-unchecked.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
-  <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" />
-</svg>