@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { IconSlot } from '../icon';
 let { action, on } = $props();
 </script>
 
@@ -6,6 +6,7 @@ let { action, on } = $props();
   type="button"
   class="card-action"
   title={action.title ?? ''}
+  disabled={action.disabled}
   onclick={(e) => {
     if (!action.propagateClickEvent) {
       e.stopPropagation();
@@ -14,25 +15,37 @@ let { action, on } = $props();
     action.callback?.();
     on?.click?.();
   }}>
-  <Icon src={action.icon} color={action.iconColor ?? 'text'} />
+  <IconSlot icon={action.icon} color="text" />
 </button>
 
 <!--
 @component
-A single icon button representing a card action, with a scale-on-hover effect.
+A single icon button representing a card action, with a scale-on-hover effect. Set `action.disabled` to
+render a disabled button (no callback, no hover effect via the native `:disabled` state).
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--card-action--padding` | Button padding | `0.3125em` |
+| `--sc-kit--card-action--hover-scale` | Scale factor on hover | `1.2` |
 -->
 
 <style>.card-action {
   --_card-action--padding: var(--sc-kit--card-action--padding, 0.3125em);
+  --_card-action--hover-scale: var(--sc-kit--card-action--hover-scale, 1.2);
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
   padding: var(--_card-action--padding);
-  transition: transform 0.3s;
+  transition: transform var(--sc-kit--duration--slow) var(--sc-kit--ease--default);
   line-height: 0;
 }
-.card-action:hover {
-  transform: scale(1.2);
+.card-action:hover:not(:disabled) {
+  transform: scale(var(--_card-action--hover-scale));
+}
+.card-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }</style>

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -1,18 +1,20 @@
 import type { CardActionModel } from './types';
 type Props = {
-    /** Action definition containing icon, callback, title, and color */
+    /** Action definition containing icon, callback, and title */
     action: CardActionModel;
     on?: {
         click?: () => void;
     };
 };
 /**
- * A single icon button representing a card action, with a scale-on-hover effect.
+ * A single icon button representing a card action, with a scale-on-hover effect. Set `action.disabled` to
+ * render a disabled button (no callback, no hover effect via the native `:disabled` state).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--card-action--padding` | Button padding | `0.3125em` |
+ * | `--sc-kit--card-action--hover-scale` | Scale factor on hover | `1.2` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,41 +1,40 @@
-<script lang="ts">import { Dropdown } from '../dropdown';
+<script lang="ts">import { Popover } from '../popover';
 import CardAction from './cmp.card-action.svelte';
 import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-let { actions, dropdownPosition = 'bottom-start' } = $props();
-let toggleDropdown = $state.raw(null);
-let closeDropdown = () => {
-    if (toggleDropdown) {
-        toggleDropdown(false);
-    }
-};
+let { actions, popoverPosition = 'bottom-start' } = $props();
+let popover = $state.raw(undefined);
+const closePopover = () => popover?.close();
 </script>
 
 {#if actions.length}
   <div class="card-actions">
-    <Dropdown position={dropdownPosition} on={{ mounted: (v) => (toggleDropdown = v.toggleOpen) }}>
+    <Popover bind:this={popover} position={popoverPosition}>
       {#snippet trigger()}
         <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
       {/snippet}
 
       <div class="card-actions__dropdown-content">
         {#each actions as action (action)}
-          <CardAction action={action} on={{ click: closeDropdown }} />
+          <CardAction action={action} on={{ click: closePopover }} />
         {/each}
       </div>
-    </Dropdown>
+    </Popover>
   </div>
 {/if}
 
 <!--
 @component
-An absolutely-positioned actions menu that reveals on hover, showing a "more" trigger icon with a dropdown of `CardAction` items. Wrap the parent container with the `.card-actions-container` class.
+An absolutely-positioned actions menu that reveals on hover. Renders a "more vertical" trigger icon;
+clicking it opens a popover holding one `CardAction` button per item in `actions`. The parent
+container must carry the `.card-actions-container` class so the reveal-on-hover rule has an anchor —
+this is a deliberate scope rule, not a class to slap on by accident.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--card-actions--background` | Trigger background | `neutral-50` / `neutral-900` |
-| `--sc-kit--card-actions--border-radius` | Corner rounding | `0.1875em` |
-| `--sc-kit--card-actions--dropdown-background` | Dropdown panel background | inherits `--background` |
+| `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--card-actions--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
+| `--sc-kit--card-actions--popover-background` | Popover panel background | inherits `--background` |
 | `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
 | `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
 | `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |
@@ -44,9 +43,9 @@ An absolutely-positioned actions menu that reveals on hover, showing a "more" tr
 -->
 
 <style>.card-actions {
-  --_card-actions--background: var(--sc-kit--card-actions--background, light-dark(#f9fafb, #111827));
-  --_card-actions--border-radius: var(--sc-kit--card-actions--border-radius, 0.1875em);
-  --_card-actions--dropdown-background: var(--sc-kit--card-actions--dropdown-background, var(--_card-actions--background));
+  --_card-actions--background: var(--sc-kit--card-actions--background, var(--sc-kit--color--bg--panel));
+  --_card-actions--border-radius: var(--sc-kit--card-actions--border-radius, var(--sc-kit--radius--sm));
+  --_card-actions--popover-background: var(--sc-kit--card-actions--popover-background, var(--_card-actions--background));
   --_card-actions--font-size: var(--sc-kit--card-actions--font-size, 1rem);
   --_card-actions--left-offset: var(--sc-kit--card-actions--left-offset, 0.3125em);
   --_card-actions--opacity: var(--sc-kit--card-actions--opacity, 0);
@@ -59,14 +58,14 @@ An absolutely-positioned actions menu that reveals on hover, showing a "more" tr
   --sc-kit--icon--stroke-width: 0.3;
   font-size: var(--_card-actions--font-size);
   opacity: var(--_card-actions--opacity);
-  transition: opacity ease-in-out 0.4s;
+  transition: opacity var(--sc-kit--duration--slow) var(--sc-kit--ease--default);
   display: flex;
   background: var(--_card-actions--background);
   border-radius: var(--_card-actions--border-radius);
 }
 .card-actions__dropdown-content {
   padding: 0 0.3125em;
-  background: var(--_card-actions--dropdown-background);
+  background: var(--_card-actions--popover-background);
 }
 @media (any-hover: none) {
   .card-actions {

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

@@ -1,20 +1,23 @@
-import { type DropdownPosition } from '../dropdown';
 import type { CardActionModel } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
-    /** Array of action definitions to display in the dropdown */
+    /** Array of action definitions to display in the popover */
     actions: CardActionModel[];
-    /** Popper.js placement of the dropdown panel @default 'bottom-start' */
-    dropdownPosition?: DropdownPosition;
+    /** Floating UI placement of the popover panel @default 'bottom-start' */
+    popoverPosition?: Placement;
 };
 /**
- * An absolutely-positioned actions menu that reveals on hover, showing a "more" trigger icon with a dropdown of `CardAction` items. Wrap the parent container with the `.card-actions-container` class.
+ * An absolutely-positioned actions menu that reveals on hover. Renders a "more vertical" trigger icon;
+ * clicking it opens a popover holding one `CardAction` button per item in `actions`. The parent
+ * container must carry the `.card-actions-container` class so the reveal-on-hover rule has an anchor —
+ * this is a deliberate scope rule, not a class to slap on by accident.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--card-actions--background` | Trigger background | `neutral-50` / `neutral-900` |
- * | `--sc-kit--card-actions--border-radius` | Corner rounding | `0.1875em` |
- * | `--sc-kit--card-actions--dropdown-background` | Dropdown panel background | inherits `--background` |
+ * | `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--card-actions--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
+ * | `--sc-kit--card-actions--popover-background` | Popover panel background | inherits `--background` |
  * | `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
  * | `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
  * | `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |

package/dist/ui/card-actions/types.d.ts

@@ -1,8 +1,7 @@
-import type { IconColor } from '../icon';
+import type { IconProp } from '../icon';
 export type CardActionModel = {
-    icon: string;
+    icon: IconProp;
     title?: string;
-    iconColor?: IconColor;
     callback?: () => void | Promise<void>;
     disabled?: boolean;
     propagateClickEvent?: boolean;

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

@@ -1,107 +1,130 @@
 <script lang="ts">import { Icon } from '../icon';
-import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_20_filled.svg?raw';
-import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_20_regular.svg?raw';
-const { checked, disabled = false, label = undefined, stopPropagation = true, title = '', checkedIcon = IconCheckboxChecked, uncheckedIcon = IconCheckboxUnchecked, children, on } = $props();
-let iconRef;
-const onCheckboxClick = (event) => {
-    if (stopPropagation) {
-        event.stopPropagation();
-    }
+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 isOn = $derived(checked === true);
+const isIndeterminate = $derived(checked === 'indeterminate');
+const ariaChecked = $derived(isIndeterminate ? 'mixed' : isOn ? 'true' : 'false');
+const handleClick = (event) => {
+    event.stopPropagation();
     if (disabled) {
         return;
     }
-    on?.change(!checked);
-};
-const onCheckboxKeyPress = (event) => {
-    if (event.code === 'Space' || event.key === ' ') {
-        event.preventDefault();
-        onCheckboxClick(event);
-        setTimeout(() => {
-            iconRef.focus();
-        });
-    }
+    const next = checked !== true;
+    on?.change?.(next);
 };
 </script>
 
-<div class="checkbox" onclick={onCheckboxClick} class:checkbox--disabled={disabled} title={title} onkeydown={onCheckboxKeyPress} role="none">
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <span class="checkbox__icon" class:checkbox__icon--checked={checked} tabindex="0" bind:this={iconRef}>
-    <Icon src={checked ? checkedIcon : uncheckedIcon} />
-  </span>
-  {#if label}
-    <span class="checkbox__label">{label}</span>
-  {:else if children}
-    <div class="checkbox__body">
-      {@render children()}
-    </div>
+<label class="check" 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}>
+    {#if isOn}
+      <span class="check__mark" aria-hidden="true"><Icon src={IconCheckmark} /></span>
+    {:else if isIndeterminate}
+      <span class="check__mark" aria-hidden="true"><Icon src={IconSubtract} /></span>
+    {/if}
+  </button>
+  {#if typeof label === 'string'}
+    <span class="check__label">{label}</span>
+  {:else if label}
+    <span class="check__label">{@render label()}</span>
   {/if}
-</div>
+</label>
 
 <!--
 @component
-A checkbox control with optional label or custom body content.
+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.
+
+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--gap` | Gap between icon and label | `0.625em` |
-| `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
-| `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
-| `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
-| `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
-| `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
-| `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
+| `--sc-kit--checkbox--size` | Box width and height | `1rem` |
+| `--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)` |
+| `--sc-kit--checkbox--label--line-height` | Label line height | `var(--sc-kit--line-height--md)` |
+| `--sc-kit--checkbox--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
 -->
 
-<style>.checkbox {
-  --_checkbox--gap: var(--sc-kit--checkbox--gap, 0.625em);
-  --_checkbox--icon--size: var(--sc-kit--checkbox--icon--size, 1.5em);
-  --_checkbox--label--font-size: var(--sc-kit--checkbox--label--font-size, 1em);
-  --_checkbox--label--line-height: var(--sc-kit--checkbox--label--line-height, 1em);
-  --_checkbox--align-items: var(--sc-kit--checkbox--align-items, center);
-  --_checkbox--color: var(--sc-kit--checkbox--color, light-dark(#6b7280, #4b5563));
-  --_checkbox--color--checked: var(--sc-kit--checkbox--color--checked, light-dark(#144ab0, #5a8dec));
-  display: flex;
-  align-items: var(--_checkbox--align-items);
-  gap: var(--_checkbox--gap);
+<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--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));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_check--gap);
+  max-width: 100%;
   cursor: pointer;
+  user-select: none;
 }
-.checkbox__icon {
-  --sc-kit--icon--size: var(--_checkbox--icon--size);
-  --sc-kit--icon--color: var(--_checkbox--color);
-  line-height: 0;
+.check--on {
+  --sc-kit--checkbox--background: var(--sc-kit--color--accent);
+  --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
 }
-.checkbox__icon:focus {
-  filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.25));
+.check--indeterminate {
+  --sc-kit--checkbox--background: var(--sc-kit--color--accent);
+  --sc-kit--checkbox--border-color: var(--sc-kit--color--accent);
 }
-.checkbox__icon--checked {
-  --sc-kit--icon--color: var(--_checkbox--color--checked);
+.check:hover:not(.check--disabled):not(.check--on):not(.check--indeterminate) {
+  --sc-kit--checkbox--border-color: var(--_check--border-color-hover);
 }
-.checkbox__label {
-  font-size: var(--_checkbox--label--font-size);
-  line-height: var(--_checkbox--label--line-height);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  -webkit-user-drag: none;
-  user-select: none;
+.check--disabled {
+  cursor: default;
+  opacity: 0.5;
 }
-.checkbox__label :global([contenteditable]) {
-  user-select: text;
+.check__box {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_check--size);
+  height: var(--_check--size);
+  padding: 0;
+  color: var(--_check--mark-color);
+  background: var(--_check--background);
+  border: 1.5px 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);
+}
+.check__box:focus-visible {
+  outline: 2px solid var(--_check--focus-ring-color);
+  outline-offset: 2px;
+}
+.check__mark {
+  --sc-kit--icon--size: 0.75rem;
+  display: inline-flex;
 }
-.checkbox__body {
-  font-size: var(--_checkbox--label--font-size);
-  line-height: var(--_checkbox--label--line-height);
+.check__label {
   min-width: 0;
+  font-size: var(--_check--label-font-size);
+  line-height: var(--_check--label-line-height);
+  color: var(--_check--label-color);
   -webkit-user-drag: none;
   user-select: none;
 }
-.checkbox__body :global([contenteditable]) {
+.check__label :global([contenteditable]) {
   user-select: text;
 }
-.checkbox--disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.check__label {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }</style>

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

@@ -1,33 +1,36 @@
 import type { Snippet } from 'svelte';
 type Props = {
-    checked: boolean;
+    /** `true` (on), `false` (off), or `'indeterminate'` (mixed). */
+    checked: boolean | 'indeterminate';
     disabled?: boolean;
-    label?: string;
-    /** @default true */
-    stopPropagation?: boolean;
+    /** Label: plain text or a snippet for rich content (e.g. `<strong>`, `<a>`). */
+    label?: string | Snippet;
     title?: string;
-    /** Custom icon for checked state */
-    checkedIcon?: string;
-    /** Custom icon for unchecked state */
-    uncheckedIcon?: string;
-    children?: Snippet;
     on?: {
-        change: (value: boolean) => void;
+        change?: (value: boolean) => void;
     };
 };
 /**
- * A checkbox control with optional label or custom body content.
+ * 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.
+ *
+ * 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--gap` | Gap between icon and label | `0.625em` |
- * | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
- * | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
- * | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
- * | `--sc-kit--checkbox--align-items` | Cross-axis alignment | `center` |
- * | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
- * | `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
+ * | `--sc-kit--checkbox--size` | Box width and height | `1rem` |
+ * | `--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)` |
+ * | `--sc-kit--checkbox--label--line-height` | Label line height | `var(--sc-kit--line-height--md)` |
+ * | `--sc-kit--checkbox--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,3 +1 @@
 export { default as Checkbox } from './cmp.checkbox.svelte';
-export { default as ThreeStateCheckbox } from './cmp.three-state-checkbox.svelte';
-export type { CheckboxState } from './types';

package/dist/ui/checkbox/index.js

@@ -1,2 +1 @@
 export { default as Checkbox } from './cmp.checkbox.svelte';
-export { default as ThreeStateCheckbox } from './cmp.three-state-checkbox.svelte';