@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -1 +1,8 @@
-export type IconColor = 'white' | 'blue' | 'green' | 'gray' | 'orange' | 'red' | 'text';
+import type { Snippet } from 'svelte';
+export type IconColor = 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'text' | 'on-accent';
+export type IconSize = 'sm' | 'md' | 'lg' | 'xlg';
+export type IconProp = string | {
+    src: string;
+    color?: IconColor;
+    size?: IconSize;
+} | Snippet;

package/dist/ui/icon-picker/cmp.icon-picker.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Singleselect } from '../select';
+import { isIconPickerGroup } from './types';
+let { value, icons, placeholder = '', disabled = false, error = false, borderless = false, cols = 7, on } = $props();
+const toOption = (i) => ({ value: i.value, label: i.label, disabled: i.disabled });
+const selectOptions = $derived(icons.map((item) => (isIconPickerGroup(item) ? { label: item.label, options: item.options.map(toOption) } : toOption(item))));
+const iconBySrc = $derived(new Map(icons.flatMap((item) => isIconPickerGroup(item) ? item.options.map((o) => [o.value, o.src]) : [[item.value, item.src]])));
+</script>
+
+<Singleselect
+  clearable
+  value={value}
+  options={selectOptions}
+  placeholder={placeholder}
+  disabled={disabled}
+  error={error}
+  borderless={borderless}
+  on={{ change: (v) => on?.change?.(v) }}>
+  {#snippet selectionSnippet({ option })}
+    {@const src = iconBySrc.get(option.value)}
+    <span class="icon-picker__selection">
+      {#if src}<span class="icon-picker__selection-icon"><Icon src={src} /></span>{/if}
+      <span class="icon-picker__selection-label">{option.label}</span>
+    </span>
+  {/snippet}
+
+  {#snippet listbox({ rows, highlight, on: listOn })}
+    <div class="icon-picker__grid" role="grid" style:--_cols={cols}>
+      {#each rows as r, i (r.kind === 'option' ? r.option.value : `${r.kind}-${i}`)}
+        {#if r.kind === 'group-header'}
+          <div class="icon-picker__group-header">{r.label}</div>
+        {:else if r.kind === 'option'}
+          {@const src = iconBySrc.get(r.option.value)}
+          <button
+            type="button"
+            class="icon-picker__tile"
+            class:icon-picker__tile--active={i === highlight}
+            class:icon-picker__tile--selected={r.selected}
+            role="gridcell"
+            aria-label={r.option.label}
+            aria-selected={r.selected}
+            title={r.option.label}
+            disabled={r.option.disabled}
+            onclick={() => listOn.pickRow(r)}
+            onmouseenter={() => listOn.hoverRow(i)}>
+            {#if src}<Icon src={src} />{/if}
+          </button>
+        {/if}
+      {/each}
+    </div>
+  {/snippet}
+</Singleselect>
+
+<!--
+@component
+IconPicker — select-style trigger that opens a grid of icons. A thin proxy over kit `Singleselect`
+that provides a custom `listbox` snippet for the grid layout and a `selectionSnippet` showing the
+chosen icon next to its label in the trigger. Search / filter, keyboard, accessibility, error / borderless
+styling all come from Singleselect.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--icon-picker--panel--padding` | Popover grid padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--icon-picker--tile--size` | Tile square size | `2.25rem` |
+| `--sc-kit--icon-picker--tile--gap` | Tile grid gap | `0.125rem` |
+| `--sc-kit--icon-picker--tile--icon--size` | Glyph size inside a tile | `1.125rem` |
+| `--sc-kit--icon-picker--selection--icon--size` | Leading icon size in the trigger selection | `1.125rem` |
+-->
+<style>.icon-picker__selection {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  min-width: 0;
+}
+.icon-picker__selection-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sc-kit--color--text--primary);
+  --sc-kit--icon--size: var(--sc-kit--icon-picker--selection--icon--size, 1.125rem);
+}
+.icon-picker__selection-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icon-picker__grid {
+  --_ip--tile-size: var(--sc-kit--icon-picker--tile--size, 2.25rem);
+  --_ip--tile-gap: var(--sc-kit--icon-picker--tile--gap, 0.125rem);
+  display: grid;
+  grid-template-columns: repeat(var(--_cols, 7), var(--_ip--tile-size));
+  gap: var(--_ip--tile-gap);
+  padding: var(--sc-kit--icon-picker--panel--padding, var(--sc-kit--space--2));
+}
+.icon-picker__group-header {
+  grid-column: 1/-1;
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--1) 0.125rem;
+  font-size: var(--sc-kit--font-size--xs);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--sc-kit--color--text--muted);
+}
+.icon-picker__tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_ip--tile-size);
+  height: var(--_ip--tile-size);
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--muted);
+  cursor: pointer;
+  --sc-kit--icon--size: var(--sc-kit--icon-picker--tile--icon--size, 1.125rem);
+  transition: color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.icon-picker__tile--active:not(:disabled) {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}
+.icon-picker__tile--selected {
+  background: var(--sc-kit--color--accent--soft);
+  border-color: var(--sc-kit--color--accent);
+  color: var(--sc-kit--color--accent);
+}
+.icon-picker__tile--selected.icon-picker__tile--active {
+  background: var(--sc-kit--color--accent--soft);
+  color: var(--sc-kit--color--accent);
+}
+.icon-picker__tile:disabled {
+  color: var(--sc-kit--color--text--placeholder);
+  cursor: default;
+}</style>

package/dist/ui/icon-picker/cmp.icon-picker.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type IconPickerItem } from './types';
+type Props = {
+    value: string | null;
+    /** Flat list of icons or a list of labelled groups. */
+    icons: IconPickerItem[];
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    /** Render the trigger with no border / background. @default false */
+    borderless?: boolean;
+    /** Tiles per row in the popover grid. @default 7 */
+    cols?: number;
+    on?: {
+        change?: (value: string | null) => void;
+    };
+};
+/**
+ * IconPicker — select-style trigger that opens a grid of icons. A thin proxy over kit `Singleselect`
+ * that provides a custom `listbox` snippet for the grid layout and a `selectionSnippet` showing the
+ * chosen icon next to its label in the trigger. Search / filter, keyboard, accessibility, error / borderless
+ * styling all come from Singleselect.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--icon-picker--panel--padding` | Popover grid padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--icon-picker--tile--size` | Tile square size | `2.25rem` |
+ * | `--sc-kit--icon-picker--tile--gap` | Tile grid gap | `0.125rem` |
+ * | `--sc-kit--icon-picker--tile--icon--size` | Glyph size inside a tile | `1.125rem` |
+ * | `--sc-kit--icon-picker--selection--icon--size` | Leading icon size in the trigger selection | `1.125rem` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/icon-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconPicker } from './cmp.icon-picker.svelte';
+export type { IconPickerGroup, IconPickerItem, IconPickerOption } from './types';

package/dist/ui/icon-picker/index.js

@@ -0,0 +1 @@
+export { default as IconPicker } from './cmp.icon-picker.svelte';

package/dist/ui/icon-picker/types.d.ts

@@ -0,0 +1,16 @@
+export type IconPickerOption = {
+    value: string;
+    /** Accessible label / tooltip — also shown next to the icon in the trigger when selected. */
+    label: string;
+    /** Raw SVG string (e.g. from a `?raw` Vite import). */
+    src: string;
+    disabled?: boolean;
+};
+export type IconPickerGroup = {
+    /** Section heading shown above the group's tiles (non-interactive). */
+    label: string;
+    options: IconPickerOption[];
+};
+/** Either a single option or a labeled group of options. Discriminated structurally — `'options' in item`. */
+export type IconPickerItem = IconPickerOption | IconPickerGroup;
+export declare const isIconPickerGroup: (item: IconPickerItem) => item is IconPickerGroup;

package/dist/ui/icon-picker/types.js

@@ -0,0 +1 @@
+export const isIconPickerGroup = (item) => 'options' in item;

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -1,41 +1,35 @@
-<script lang="ts">import { Icon } from '../icon';
-let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, hideText = false, children } = $props();
-const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
-const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
-const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
-const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !== 'function' ? secondaryIcon : null);
+<script lang="ts">import { IconSlot } from '../icon';
+let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText = false, size, children } = $props();
 </script>
 
-<span class="icon-text" class:icon-text--right={iconPosition === 'right'}>
+<span
+  class="icon-text"
+  class:icon-text--trailing={iconPosition === 'trailing'}
+  class:icon-text--sm={size === 'sm'}
+  class:icon-text--md={size === 'md'}
+  class:icon-text--lg={size === 'lg'}>
   <span class="icon-text__icon">
-    {#if iconAsSnippet}
-      {@render iconAsSnippet()}
-    {:else if iconAsString}
-      <Icon src={iconAsString} color={iconColor} />
-    {/if}
+    <IconSlot icon={icon} size={size} />
   </span>
   {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
       {@render children()}
     </span>
   {/if}
-  {#if secondaryIconAsSnippet || secondaryIconAsString}
-    <span class="icon-text__secondary-icon">
-      {#if secondaryIconAsSnippet}
-        {@render secondaryIconAsSnippet()}
-      {:else if secondaryIconAsString}
-        <Icon src={secondaryIconAsString} color={secondaryIconColor} />
-      {/if}
+  {#if secondaryIcon}
+    <span class="icon-text__secondary">
+      <IconSlot icon={secondaryIcon} size={size} />
     </span>
   {/if}
 </span>
 
 <!--
 @component
-Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
-(rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
-before or after the text. The optional `secondaryIcon` is always rendered on the
-opposite side of the text from the primary icon.
+Displays icons + text in a horizontal layout. Primary `icon` sits on the leading side by
+default; flip with `iconPosition='trailing'`. Optional `secondaryIcon` always renders on
+the opposite side of text from the primary, useful for "label + chevron" / "label +
+status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, an
+`{ src, color }` object to apply a color preset, or a custom `Snippet`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -44,12 +38,12 @@ opposite side of the text from the primary icon.
 | `--sc-kit--icon-text--root--color` | Root text color | — |
 | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
 | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
-| `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
-| `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+| `--sc-kit--icon-text--icon--font-size` | Font size of the primary icon | text font size |
+| `--sc-kit--icon-text--icon--color` | Primary icon color | global color |
 | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
 | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
-| `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
-| `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
+| `--sc-kit--icon-text--secondary--font-size` | Font size of the secondary icon | text font size |
+| `--sc-kit--icon-text--secondary--color` | Secondary icon color | global color |
 -->
 
 <style>.icon-text {
@@ -61,8 +55,8 @@ opposite side of the text from the primary icon.
   --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color, var(--_icon-text--root--color));
   --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
   --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
-  --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--icon--font-size));
-  --_icon-text--secondary-icon--color: var(--sc-kit--icon-text--secondary-icon--color, var(--_icon-text--root--color));
+  --_icon-text--secondary--font-size: var(--sc-kit--icon-text--secondary--font-size, var(--_icon-text--icon--font-size));
+  --_icon-text--secondary--color: var(--sc-kit--icon-text--secondary--color, var(--_icon-text--root--color));
   display: flex;
   align-items: center;
   justify-content: var(--_icon-text--justify-content);
@@ -71,9 +65,18 @@ opposite side of the text from the primary icon.
   color: var(--_icon-text--root--color);
   min-width: 0;
 }
-.icon-text--right {
+.icon-text--trailing {
   flex-direction: row-reverse;
 }
+.icon-text--sm {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
+}
+.icon-text--md {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
+}
+.icon-text--lg {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
+}
 .icon-text__text {
   font-size: var(--_icon-text--text--font-size);
   display: var(--_icon-text--text--display);
@@ -93,10 +96,10 @@ opposite side of the text from the primary icon.
   --sc-kit--icon--color: var(--_icon-text--icon--color);
   --sc-kit--icon--size: 1em;
 }
-.icon-text__secondary-icon {
-  font-size: var(--_icon-text--secondary-icon--font-size);
-  color: var(--_icon-text--secondary-icon--color);
+.icon-text__secondary {
+  font-size: var(--_icon-text--secondary--font-size);
+  color: var(--_icon-text--secondary--color);
   display: flex;
-  --sc-kit--icon--color: var(--_icon-text--secondary-icon--color);
+  --sc-kit--icon--color: var(--_icon-text--secondary--color);
   --sc-kit--icon--size: 1em;
 }</style>

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -1,27 +1,26 @@
-import { type IconColor } from '../icon';
+import { type IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** SVG string or custom snippet for the icon */
-    icon?: string | Snippet;
-    /** Color preset passed to the Icon component */
-    iconColor?: IconColor | null;
-    /** Icon placement relative to text @default 'left' */
-    iconPosition?: 'left' | 'right';
-    /** SVG string or custom snippet for a secondary icon on the opposite side of text from the primary icon */
-    secondaryIcon?: string | Snippet;
-    /** Color preset for the secondary icon */
-    secondaryIconColor?: IconColor | null;
+    /** Primary icon. SVG source string, `{ src, color }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Side of the text where the primary icon sits. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    /** Optional secondary icon — always rendered on the opposite side of text from the primary. */
+    secondaryIcon?: IconProp;
     /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
     /** Hide text, showing only the icon(s) */
     hideText?: boolean;
+    /** Font-size preset — scales icon + text together (em-based). Inherits (`1em`) when unset. */
+    size?: 'sm' | 'md' | 'lg';
     children?: Snippet;
 };
 /**
- * Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
- * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
- * before or after the text. The optional `secondaryIcon` is always rendered on the
- * opposite side of the text from the primary icon.
+ * Displays icons + text in a horizontal layout. Primary `icon` sits on the leading side by
+ * default; flip with `iconPosition='trailing'`. Optional `secondaryIcon` always renders on
+ * the opposite side of text from the primary, useful for "label + chevron" / "label +
+ * status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, an
+ * `{ src, color }` object to apply a color preset, or a custom `Snippet`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -30,12 +29,12 @@ type Props = {
  * | `--sc-kit--icon-text--root--color` | Root text color | — |
  * | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
  * | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
- * | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
- * | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+ * | `--sc-kit--icon-text--icon--font-size` | Font size of the primary icon | text font size |
+ * | `--sc-kit--icon-text--icon--color` | Primary icon color | global color |
  * | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
  * | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
- * | `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
- * | `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
+ * | `--sc-kit--icon-text--secondary--font-size` | Font size of the secondary icon | text font size |
+ * | `--sc-kit--icon-text--secondary--color` | Secondary icon color | global color |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/image/cmp.image-rounded.svelte

@@ -11,6 +11,8 @@ let { src, alt = '', ring = false, on } = $props();
 <!--
 @component
 A rounded-corner image with an optional decorative double-border ring (outer gradient + inner solid).
+Ring defaults derive from semantic tokens (`--sc-kit--color--accent` family + `--bg--panel`) so the ring
+re-themes automatically with the rest of the kit.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -19,13 +21,13 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
 | `--sc-kit--image--rounded--width` | Container width | inherits `--size` |
 | `--sc-kit--image--rounded--height` | Container height | inherits `--size` |
 | `--sc-kit--image--rounded--image--border-radius` | Inner image corner radius | computed |
-| `--sc-kit--image--rounded--inner--border-color` | Inner border color | `white` / `dark-900` |
+| `--sc-kit--image--rounded--inner--border-color` | Inner border color | `--sc-kit--color--bg--panel` |
 | `--sc-kit--image--rounded--inner--border-radius` | Inner border radius | computed |
 | `--sc-kit--image--rounded--inner--border-width` | Inner border thickness | `4px` |
-| `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `primary-500` to `primary-100` |
-| `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `2px` |
+| `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `accent → accent--soft` |
+| `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `--sc-kit--radius--md` |
 | `--sc-kit--image--rounded--outer--border-width` | Outer ring thickness | `2px` |
-| `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `neutral-300` / `neutral-700` |
+| `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.rounded-img {
@@ -36,7 +38,7 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
     --sc-kit--image--rounded--image--border-radius,
     calc(var(--_image--rounded--inner--border-radius) - var(--_image--rounded--inner--border-width))
   );
-  --_image--rounded--inner--border-color: var(--sc-kit--image--rounded--inner--border-color, light-dark(#ffffff, #121212));
+  --_image--rounded--inner--border-color: var(--sc-kit--image--rounded--inner--border-color, var(--sc-kit--color--bg--panel));
   --_image--rounded--inner--border-radius: var(
     --sc-kit--image--rounded--inner--border-radius,
     calc(var(--_image--rounded--outer--border-radius) - var(--_image--rounded--outer--border-width))
@@ -44,17 +46,11 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
   --_image--rounded--inner--border-width: var(--sc-kit--image--rounded--inner--border-width, 4px);
   --_image--rounded--outer--border-color: var(
     --sc-kit--image--rounded--outer--border-color,
-    linear-gradient(
-      light-dark(#144ab0, #5a8dec),
-      light-dark(#dfe9fb, #0c2d69)
-    )
+    linear-gradient(var(--sc-kit--color--accent), var(--sc-kit--color--accent--soft))
   );
-  --_image--rounded--outer--border-radius: var(--sc-kit--image--rounded--outer--border-radius, 2px);
+  --_image--rounded--outer--border-radius: var(--sc-kit--image--rounded--outer--border-radius, var(--sc-kit--radius--md));
   --_image--rounded--outer--border-width: var(--sc-kit--image--rounded--outer--border-width, 2px);
-  --_image--rounded--stub--background: var(
-    --sc-kit--image--rounded--stub--background,
-    var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
-  );
+  --_image--rounded--stub--background: var(--sc-kit--image--rounded--stub--background, var(--sc-kit--color--bg--images));
   width: var(--_image--rounded--width);
   height: var(--_image--rounded--height);
   border-radius: var(--_image--rounded--outer--border-radius);

package/dist/ui/image/cmp.image-rounded.svelte.d.ts

@@ -10,6 +10,8 @@ type Props = {
 };
 /**
  * A rounded-corner image with an optional decorative double-border ring (outer gradient + inner solid).
+ * Ring defaults derive from semantic tokens (`--sc-kit--color--accent` family + `--bg--panel`) so the ring
+ * re-themes automatically with the rest of the kit.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -18,13 +20,13 @@ type Props = {
  * | `--sc-kit--image--rounded--width` | Container width | inherits `--size` |
  * | `--sc-kit--image--rounded--height` | Container height | inherits `--size` |
  * | `--sc-kit--image--rounded--image--border-radius` | Inner image corner radius | computed |
- * | `--sc-kit--image--rounded--inner--border-color` | Inner border color | `white` / `dark-900` |
+ * | `--sc-kit--image--rounded--inner--border-color` | Inner border color | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--image--rounded--inner--border-radius` | Inner border radius | computed |
  * | `--sc-kit--image--rounded--inner--border-width` | Inner border thickness | `4px` |
- * | `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `primary-500` to `primary-100` |
- * | `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `2px` |
+ * | `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `accent → accent--soft` |
+ * | `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `--sc-kit--radius--md` |
  * | `--sc-kit--image--rounded--outer--border-width` | Outer ring thickness | `2px` |
- * | `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/image/cmp.image-stub.svelte

@@ -13,11 +13,11 @@ A placeholder image stub showing a generic image icon, used as a fallback when n
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+| `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.image-stub {
-  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-color--bg-images, light-dark(#d1d5db, #374151)));
+  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-kit--color--bg--images));
   width: 100%;
   height: 100%;
   z-index: 2;

package/dist/ui/image/cmp.image-stub.svelte.d.ts

@@ -17,7 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;

package/dist/ui/image/cmp.image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-import { calculateImageState, ImageState } from './image-state';
+import { calculateImageState } from './image-state';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
 let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
@@ -16,16 +16,16 @@ const onLoadError = () => {
 
 <div class="image">
   {#if !!src}
-    <img class="image__img" class:image__img--hidden={imageState !== ImageState.showImage} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
+    <img class="image__img" class:image__img--hidden={imageState !== 'showImage'} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
   {/if}
 
-  {#if imageState === ImageState.showError}
+  {#if imageState === 'showError'}
     <div class="image__load-error">
       <Icon src={IconImageOff} />
     </div>
   {/if}
 
-  {#if imageState === ImageState.showStub}
+  {#if imageState === 'showStub'}
     {#if stub}
       {@render stub()}
     {:else}
@@ -44,17 +44,14 @@ Displays an image with loading states: shows the image on success, an error icon
 | `--sc-kit--image--background` | Container background | `transparent` |
 | `--sc-kit--image--border-radius` | Corner rounding | `0` |
 | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
-| `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+| `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.image {
   --_image--background: var(--sc-kit--image--background, transparent);
   --_image--border-radius: var(--sc-kit--image--border-radius, 0);
   --_image--object-fit: var(--sc-kit--image--object-fit, cover);
-  --_image--stub--background: var(
-    --sc-kit--image--stub--background,
-    var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
-  );
+  --_image--stub--background: var(--sc-kit--image--stub--background, var(--sc-kit--color--bg--images));
   position: relative;
   width: 100%;
   height: 100%;

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

@@ -21,7 +21,7 @@ type Props = {
  * | `--sc-kit--image--background` | Container background | `transparent` |
  * | `--sc-kit--image--border-radius` | Corner rounding | `0` |
  * | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
- * | `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/image/image-state.d.ts

@@ -1,6 +1,2 @@
-export declare enum ImageState {
-    showImage = 0,
-    showError = 1,
-    showStub = 2
-}
+export type ImageState = 'showImage' | 'showError' | 'showStub';
 export declare const calculateImageState: (src: string | null | undefined, isError: boolean, showStubOnError: boolean) => ImageState;

package/dist/ui/image/image-state.js

@@ -1,17 +1,11 @@
-export var ImageState;
-(function (ImageState) {
-    ImageState[ImageState["showImage"] = 0] = "showImage";
-    ImageState[ImageState["showError"] = 1] = "showError";
-    ImageState[ImageState["showStub"] = 2] = "showStub";
-})(ImageState || (ImageState = {}));
 export const calculateImageState = (src, isError, showStubOnError) => {
     if (isError && !showStubOnError) {
-        return ImageState.showError;
+        return 'showError';
     }
     else if (!src || (isError && showStubOnError)) {
-        return ImageState.showStub;
+        return 'showStub';
     }
     else {
-        return ImageState.showImage;
+        return 'showImage';
     }
 };

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

@@ -2,4 +2,5 @@ export { default as Image } from './cmp.image.svelte';
 export { default as ImageRound } from './cmp.image-round.svelte';
 export { default as ImageRounded } from './cmp.image-rounded.svelte';
 export { default as ImageStub } from './cmp.image-stub.svelte';
-export { ImageState, calculateImageState } from './image-state';
+export { calculateImageState } from './image-state';
+export type { ImageState } from './image-state';

package/dist/ui/image/index.js

@@ -2,4 +2,4 @@ export { default as Image } from './cmp.image.svelte';
 export { default as ImageRound } from './cmp.image-round.svelte';
 export { default as ImageRounded } from './cmp.image-rounded.svelte';
 export { default as ImageStub } from './cmp.image-stub.svelte';
-export { ImageState, calculateImageState } from './image-state';
+export { calculateImageState } from './image-state';