@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte.d.ts

@@ -3,14 +3,30 @@ type Props = {
     settings: GroupedSidebarSettings;
 };
 /**
- * A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+ * A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-
+ * expand modes, with optional auto-height sections. Configure via `GroupedSidebarSettings`; pass groups
+ * + sections via `SidebarGroupModel` / `SidebarGroupSectionModel`.
+ *
+ * A section's `component` accepts a `Snippet` or `DynamicComponentModel`. Svelte 5 hoists `{#snippet}`
+ * declarations, so assign a markup snippet to `component` DIRECTLY in the script-level settings — no
+ * dummy-placeholder + post-init bind needed:
+ *
+ * ```svelte
+ * <script lang="ts">
+ * const settings = new GroupedSidebarSettings({
+ *   groups: [{ id: 'main', name: 'Main', sections: [{ id: 'general', name: 'General', component: general }] }]
+ * });
+ * </script>
+ * {#snippet general()}<div>…</div>{/snippet}
+ * <GroupedSidebar {settings} />
+ * ```
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
- * | `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
- * | `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar--background` | Sidebar background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `--sc-kit--space--4` |
+ * | `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `--sc-kit--space--4` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/grouped-sidebar/types.svelte.js

@@ -47,10 +47,10 @@ export class SidebarGroupModel {
 }
 export class SidebarGroupSectionModel {
     id;
-    name;
+    name = $state.raw('');
     expanded = $state(false);
-    component;
-    withoutPaddings;
+    component = $state.raw(null);
+    withoutPaddings = $state.raw(false);
     isValid = $derived.by(() => this.validator?.isValid ?? true);
     _validator = $state.raw(null);
     _onExpandedCallback;

package/dist/ui/handle-input/cmp.handle-input.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Input } from '../input';
+import { Spinner } from '../spinner';
+import { HandleInputLocalization } from './handle-input-localization';
+import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_16_filled.svg?raw';
+import IconDismissCircle from '@fluentui/svg-icons/icons/dismiss_circle_16_filled.svg?raw';
+let { value, size = 'md', status, statusLabel, on, ...rest } = $props();
+const localization = new HandleInputLocalization();
+const defaultLabel = (s) => (s === 'available' ? localization.available : s === 'taken' ? localization.taken : localization.checking);
+const badgeLabel = $derived(status ? (statusLabel ?? defaultLabel(status)) : '');
+</script>
+
+{#snippet prefixSlot()}
+  <span class="handle-input__prefix handle-input__prefix--{size}" aria-label={localization.prefixLabel}>@</span>
+{/snippet}
+
+{#snippet suffixSlot()}
+  {#if status}
+    <span class="handle-input__status handle-input__status--{status}" role="status" aria-live="polite">
+      {#if status === 'checking'}
+        <Spinner size="sm" />
+      {:else if status === 'available'}
+        <Icon src={IconCheckmarkCircle} size="sm" />
+      {:else}
+        <Icon src={IconDismissCircle} size="sm" />
+      {/if}
+      <span class="handle-input__status-label">{badgeLabel}</span>
+    </span>
+  {/if}
+{/snippet}
+
+<Input
+  {...rest}
+  value={value}
+  size={size}
+  type="text"
+  autocapitalize="none"
+  spellcheck={false}
+  prefix={prefixSlot}
+  suffix={status ? suffixSlot : undefined}
+  on={on} />
+
+<!--
+@component
+A single-line handle / username input with a fixed `@` prefix shown in a tonally distinct gray
+segment, plus an optional availability badge on the right (`available` / `taken` / `checking`).
+The bound `value` is the handle WITHOUT the `@`.
+
+Built as a thin wrapper around kit `Input` — the prefix segment is rendered via Input's `prefix`
+snippet slot, the status pill via Input's `suffix` snippet slot. Presentational only — the parent
+owns the async availability lookup.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--handle-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--handle-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--handle-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+| `--sc-kit--handle-input--status--available--background` | Available pill background | `--sc-kit--color--success--soft` |
+| `--sc-kit--handle-input--status--available--color` | Available pill text + icon color | `--sc-kit--color--success` |
+| `--sc-kit--handle-input--status--taken--background` | Taken pill background | `--sc-kit--color--danger--soft` |
+| `--sc-kit--handle-input--status--taken--color` | Taken pill text + icon color | `--sc-kit--color--danger` |
+| `--sc-kit--handle-input--status--checking--background` | Checking pill background | `--sc-kit--color--bg--active` |
+| `--sc-kit--handle-input--status--checking--color` | Checking pill text + spinner color | `--sc-kit--color--text--secondary` |
+
+Plus every public CSS variable exposed by `<Input>`.
+-->
+
+<style>.handle-input__prefix {
+  --_hi--prefix-background: var(--sc-kit--handle-input--prefix--background, var(--sc-kit--color--bg--field-alt));
+  --_hi--prefix-color: var(--sc-kit--handle-input--prefix--color, var(--sc-kit--color--text--muted));
+  --_hi--prefix-border-color: var(--sc-kit--handle-input--prefix--border-color, var(--sc-kit--color--border--field));
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  background: var(--_hi--prefix-background);
+  color: var(--_hi--prefix-color);
+  border-inline-end: 1px solid var(--_hi--prefix-border-color);
+  line-height: var(--sc-kit--leading--tight);
+  user-select: none;
+  white-space: nowrap;
+}
+.handle-input__prefix--sm {
+  padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.handle-input__prefix--md {
+  padding-inline: var(--sc-kit--field--padding-inline--md);
+}
+.handle-input__prefix--lg {
+  padding-inline: var(--sc-kit--field--padding-inline--lg);
+}
+.handle-input__status {
+  --_hi--status-background: var(--sc-kit--color--bg--active);
+  --_hi--status-color: var(--sc-kit--color--text--secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  border-radius: var(--sc-kit--radius--pill);
+  background: var(--_hi--status-background);
+  color: var(--_hi--status-color);
+  font-size: var(--sc-kit--font-size--xs);
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+  white-space: nowrap;
+  user-select: none;
+  --sc-kit--icon--color: var(--_hi--status-color);
+}
+.handle-input__status--available {
+  --_hi--status-background: var(--sc-kit--handle-input--status--available--background, var(--sc-kit--color--success--soft));
+  --_hi--status-color: var(--sc-kit--handle-input--status--available--color, var(--sc-kit--color--success));
+}
+.handle-input__status--taken {
+  --_hi--status-background: var(--sc-kit--handle-input--status--taken--background, var(--sc-kit--color--danger--soft));
+  --_hi--status-color: var(--sc-kit--handle-input--status--taken--color, var(--sc-kit--color--danger));
+}
+.handle-input__status--checking {
+  --_hi--status-background: var(--sc-kit--handle-input--status--checking--background, var(--sc-kit--color--bg--active));
+  --_hi--status-color: var(--sc-kit--handle-input--status--checking--color, var(--sc-kit--color--text--secondary));
+}
+.handle-input__status-label {
+  max-width: 7.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/ui/handle-input/cmp.handle-input.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { InputForwardedProps } from '../input';
+type HandleStatus = 'available' | 'taken' | 'checking';
+type Props = Omit<InputForwardedProps, 'autocapitalize' | 'spellcheck'> & {
+    /**
+     * Availability status. Presentational only — the parent owns the async lookup and sets
+     * `status` accordingly. The status pill is rendered as a free-form suffix inside the input.
+     */
+    status?: HandleStatus;
+    /** Override the default localized badge label for the current `status`. */
+    statusLabel?: string;
+};
+/**
+ * A single-line handle / username input with a fixed `@` prefix shown in a tonally distinct gray
+ * segment, plus an optional availability badge on the right (`available` / `taken` / `checking`).
+ * The bound `value` is the handle WITHOUT the `@`.
+ *
+ * Built as a thin wrapper around kit `Input` — the prefix segment is rendered via Input's `prefix`
+ * snippet slot, the status pill via Input's `suffix` snippet slot. Presentational only — the parent
+ * owns the async availability lookup.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--handle-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--handle-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--handle-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+ * | `--sc-kit--handle-input--status--available--background` | Available pill background | `--sc-kit--color--success--soft` |
+ * | `--sc-kit--handle-input--status--available--color` | Available pill text + icon color | `--sc-kit--color--success` |
+ * | `--sc-kit--handle-input--status--taken--background` | Taken pill background | `--sc-kit--color--danger--soft` |
+ * | `--sc-kit--handle-input--status--taken--color` | Taken pill text + icon color | `--sc-kit--color--danger` |
+ * | `--sc-kit--handle-input--status--checking--background` | Checking pill background | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--handle-input--status--checking--color` | Checking pill text + spinner color | `--sc-kit--color--text--secondary` |
+ *
+ * Plus every public CSS variable exposed by `<Input>`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/handle-input/handle-input-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class HandleInputLocalization {
+    get prefixLabel(): string;
+    get available(): string;
+    get taken(): string;
+    get checking(): string;
+}

package/dist/ui/handle-input/handle-input-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    prefixLabel: {
+        en: 'Handle prefix',
+        no: 'Brukernavn-prefiks'
+    },
+    available: {
+        en: 'Available',
+        no: 'Ledig'
+    },
+    taken: {
+        en: 'Taken',
+        no: 'Opptatt'
+    },
+    checking: {
+        en: 'Checking…',
+        no: 'Sjekker…'
+    }
+};
+export class HandleInputLocalization {
+    get prefixLabel() {
+        return loc.prefixLabel[AppLocale.current];
+    }
+    get available() {
+        return loc.available[AppLocale.current];
+    }
+    get taken() {
+        return loc.taken[AppLocale.current];
+    }
+    get checking() {
+        return loc.checking[AppLocale.current];
+    }
+}

package/dist/ui/handle-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HandleInput } from './cmp.handle-input.svelte';
+export { HandleInputLocalization } from './handle-input-localization';

package/dist/ui/handle-input/index.js

@@ -0,0 +1,2 @@
+export { default as HandleInput } from './cmp.handle-input.svelte';
+export { HandleInputLocalization } from './handle-input-localization';

package/dist/ui/html-block/cmp.html-block.svelte

@@ -6,65 +6,83 @@ export {};
   {@render children()}
 </div>
 
+<!--
+@component
+A scoped style wrapper for arbitrary HTML — applies typographic and list-style defaults to descendant
+`h1`–`h6`, `a`, `pre`, `ul`, `ol`, `table` produced by an external HTML source (rich-text editor,
+markdown renderer, server-rendered email body). The wrapper itself is `display: contents` so layout is
+unaffected.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--html-block--text-color` | Body text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--html-block--link-color` | Anchor color | `--sc-kit--color--accent` |
+| `--sc-kit--html-block--code-font` | Monospace font for `pre` | `--sc-kit--font--mono` |
+-->
+
 <style>.html-block {
+  --_html-block--text: var(--sc-kit--html-block--text-color, var(--sc-kit--color--text--primary));
+  --_html-block--link: var(--sc-kit--html-block--link-color, var(--sc-kit--color--accent));
+  --_html-block--code-font: var(--sc-kit--html-block--code-font, var(--sc-kit--font--mono));
   display: contents;
   overflow-wrap: break-word;
   font-size: 0.875em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: normal;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h1) {
   font-size: 1.5em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 600;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h2) {
   font-size: 1.375em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 600;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h3) {
   font-size: 1.25em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 600;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h4) {
   font-size: 1.125em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 500;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h5) {
   font-size: 1.0625em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 500;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(h6) {
   font-size: 1em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: 500;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(a) {
   font-size: 1em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: normal;
-  color: light-dark(#2e2e2e, #ffffff);
-  color: light-dark(#144ab0, #5a8dec);
+  color: var(--_html-block--text);
+  color: var(--_html-block--link);
 }
 .html-block :global(pre) {
-  font-family: monospace;
+  font-family: var(--_html-block--code-font);
   white-space: pre-wrap;
   margin: 1em 0;
   font-size: 1em;
-  line-height: 1;
+  line-height: var(--sc-kit--leading--tight);
   font-weight: normal;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(ul) :global(> li),
 .html-block :global(ol) :global(> li) {
@@ -72,9 +90,9 @@ export {};
   margin-left: 1em;
   position: relative;
   font-size: 1em;
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--normal);
   font-weight: normal;
-  color: light-dark(#2e2e2e, #ffffff);
+  color: var(--_html-block--text);
 }
 .html-block :global(ol) {
   list-style-type: decimal;

package/dist/ui/html-block/cmp.html-block.svelte.d.ts

@@ -2,6 +2,19 @@ import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
 };
+/**
+ * A scoped style wrapper for arbitrary HTML — applies typographic and list-style defaults to descendant
+ * `h1`–`h6`, `a`, `pre`, `ul`, `ol`, `table` produced by an external HTML source (rich-text editor,
+ * markdown renderer, server-rendered email body). The wrapper itself is `display: contents` so layout is
+ * unaffected.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--html-block--text-color` | Body text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--html-block--link-color` | Anchor color | `--sc-kit--color--accent` |
+ * | `--sc-kit--html-block--code-font` | Monospace font for `pre` | `--sc-kit--font--mono` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -0,0 +1,19 @@
+<script lang="ts">import Icon from './cmp.icon.svelte';
+import { splitIcon } from './icon-utils';
+const { icon, color, size } = $props();
+const split = $derived(splitIcon(icon));
+</script>
+
+{#if split.snippet}
+  {@render split.snippet()}
+{:else if split.src}
+  <Icon src={split.src} color={split.color ?? color ?? null} size={split.size ?? size ?? null} />
+{/if}
+
+<!--
+@component
+Renders an `IconProp` — discriminates between snippet, string SVG, and `{ src, color?, size? }` object.
+Use this wherever a component model carries an `icon: IconProp` field, so the discrimination logic
+lives in one place. `color` and `size` props provide fallbacks when the icon itself doesn't specify
+them; they are ignored when the icon is a snippet (snippets render themselves).
+-->

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

@@ -0,0 +1,18 @@
+import type { IconColor, IconProp, IconSize } from './types';
+type Props = {
+    /** Icon to render — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp | null;
+    /** Fallback color when `icon` doesn't carry one (ignored for snippets). */
+    color?: IconColor;
+    /** Fallback size when `icon` doesn't carry one (ignored for snippets). */
+    size?: IconSize;
+};
+/**
+ * Renders an `IconProp` — discriminates between snippet, string SVG, and `{ src, color?, size? }` object.
+ * Use this wherever a component model carries an `icon: IconProp` field, so the discrimination logic
+ * lives in one place. `color` and `size` props provide fallbacks when the icon itself doesn't specify
+ * them; they are ignored when the icon is a snippet (snippets render themselves).
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { HtmlHelper } from '../../core/utils/html-helper';
 import { onMount } from 'svelte';
-let { src, color = null } = $props();
+let { src, color = null, size } = $props();
 let mounted = $state(false);
 onMount(() => {
     mounted = true;
@@ -10,13 +10,17 @@ onMount(() => {
 {#if src?.startsWith('<svg')}
   <div
     class="icon"
-    class:icon--white={color === 'white'}
+    class:icon--accent={color === 'accent'}
+    class:icon--muted={color === 'muted'}
+    class:icon--success={color === 'success'}
+    class:icon--warning={color === 'warning'}
+    class:icon--danger={color === 'danger'}
     class:icon--text={color === 'text'}
-    class:icon--gray={color === 'gray'}
-    class:icon--green={color === 'green'}
-    class:icon--red={color === 'red'}
-    class:icon--orange={color === 'orange'}
-    class:icon--blue={color === 'blue'}>
+    class:icon--on-accent={color === 'on-accent'}
+    class:icon--sm={size === 'sm'}
+    class:icon--md={size === 'md'}
+    class:icon--lg={size === 'lg'}
+    class:icon--xlg={size === 'xlg'}>
     {#if mounted}
       {@html HtmlHelper.sanitizeSvg(src)}
     {/if}
@@ -33,52 +37,72 @@ Renders an inline SVG icon with configurable size, color presets, and optional s
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--icon--color` | Fill color (overrides currentColor) | `currentColor` |
-| `--sc-kit--icon--color-blue` | Color for `blue` preset | `#3b82f6` / `#60a5fa` |
-| `--sc-kit--icon--color-gray` | Color for `gray` preset | `#737373` |
-| `--sc-kit--icon--color-green` | Color for `green` preset | `#22c55e` |
-| `--sc-kit--icon--color-orange` | Color for `orange` preset | `#f97316` |
-| `--sc-kit--icon--color-red` | Color for `red` preset | `#ef4444` |
-| `--sc-kit--icon--color-text` | Color for `text` preset | `neutral-800` / `white` |
-| `--sc-kit--icon--color-white` | Color for `white` preset | `white` |
+| `--sc-kit--icon--color-accent` | Color for `accent` preset | `--sc-kit--color--accent` |
+| `--sc-kit--icon--color-muted` | Color for `muted` preset | `--sc-kit--color--text--muted` |
+| `--sc-kit--icon--color-success` | Color for `success` preset | `--sc-kit--color--success` |
+| `--sc-kit--icon--color-warning` | Color for `warning` preset | `--sc-kit--color--warning` |
+| `--sc-kit--icon--color-danger` | Color for `danger` preset | `--sc-kit--color--danger` |
+| `--sc-kit--icon--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
+| `--sc-kit--icon--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
 | `--sc-kit--icon--filter` | CSS filter applied to the SVG | `none` |
-| `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` |
+| `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` (20px) |
 | `--sc-kit--icon--stroke-width` | Stroke width on SVG paths | `0` |
+
+### Size presets
+| Class | `--sc-kit--icon--size` |
+|---|---|
+| `icon--sm` | `0.875rem` (14px) |
+| `icon--md` | `1.25rem` (20px) |
+| `icon--lg` | `2rem` (32px) |
+| `icon--xlg` | `3rem` (48px) |
 -->
 
 <style>.icon {
   --_icon--color: var(--sc-kit--icon--color);
-  --_icon--color-blue: var(--sc-kit--icon--color-blue, light-dark(#3b82f6, #60a5fa));
-  --_icon--color-gray: var(--sc-kit--icon--color-gray, #737373);
-  --_icon--color-green: var(--sc-kit--icon--color-green, #22c55e);
-  --_icon--color-orange: var(--sc-kit--icon--color-orange, #f97316);
-  --_icon--color-red: var(--sc-kit--icon--color-red, #ef4444);
-  --_icon--color-text: var(--sc-kit--icon--color-text, light-dark(#1f2937, #ffffff));
-  --_icon--color-white: var(--sc-kit--icon--color-white, #ffffff);
+  --_icon--color-accent: var(--sc-kit--icon--color-accent, var(--sc-kit--color--accent));
+  --_icon--color-muted: var(--sc-kit--icon--color-muted, var(--sc-kit--color--text--muted));
+  --_icon--color-success: var(--sc-kit--icon--color-success, var(--sc-kit--color--success));
+  --_icon--color-warning: var(--sc-kit--icon--color-warning, var(--sc-kit--color--warning));
+  --_icon--color-danger: var(--sc-kit--icon--color-danger, var(--sc-kit--color--danger));
+  --_icon--color-text: var(--sc-kit--icon--color-text, var(--sc-kit--color--text--primary));
+  --_icon--color-on-accent: var(--sc-kit--icon--color-on-accent, var(--sc-kit--color--text--on-accent));
   --_icon--filter: var(--sc-kit--icon--filter, none);
   --_icon--size: var(--sc-kit--icon--size, 1.25rem);
   --_icon--stroke-width: var(--sc-kit--icon--stroke-width, 0);
   display: contents;
 }
-.icon--white {
-  --_icon--color: var(--_icon--color-white);
+.icon--accent {
+  --_icon--color: var(--_icon--color-accent);
+}
+.icon--muted {
+  --_icon--color: var(--_icon--color-muted);
+}
+.icon--success {
+  --_icon--color: var(--_icon--color-success);
+}
+.icon--warning {
+  --_icon--color: var(--_icon--color-warning);
+}
+.icon--danger {
+  --_icon--color: var(--_icon--color-danger);
 }
 .icon--text {
   --_icon--color: var(--_icon--color-text);
 }
-.icon--gray {
-  --_icon--color: var(--_icon--color-gray);
+.icon--on-accent {
+  --_icon--color: var(--_icon--color-on-accent);
 }
-.icon--green {
-  --_icon--color: var(--_icon--color-green);
+.icon--sm {
+  --sc-kit--icon--size: 0.875rem;
 }
-.icon--red {
-  --_icon--color: var(--_icon--color-red);
+.icon--md {
+  --sc-kit--icon--size: 1.25rem;
 }
-.icon--orange {
-  --_icon--color: var(--_icon--color-orange);
+.icon--lg {
+  --sc-kit--icon--size: 2rem;
 }
-.icon--blue {
-  --_icon--color: var(--_icon--color-blue);
+.icon--xlg {
+  --sc-kit--icon--size: 3rem;
 }
 .icon :global(svg) {
   display: inline-block;

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

@@ -1,9 +1,11 @@
-import type { IconColor } from './types';
+import type { IconColor, IconSize } from './types';
 interface Props {
     /** Raw SVG string (must start with `<svg`) */
     src: string;
     /** Predefined color preset applied to the icon */
     color?: IconColor | null;
+    /** Size preset. Sets `--sc-kit--icon--size` to 14 / 20 / 32 / 48 px respectively. Omit to fall through to the CSS cascade (default 1.25rem = 20px). */
+    size?: IconSize | null;
 }
 /**
  * Renders an inline SVG icon with configurable size, color presets, and optional stroke/filter effects.
@@ -12,16 +14,24 @@ interface Props {
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--icon--color` | Fill color (overrides currentColor) | `currentColor` |
- * | `--sc-kit--icon--color-blue` | Color for `blue` preset | `#3b82f6` / `#60a5fa` |
- * | `--sc-kit--icon--color-gray` | Color for `gray` preset | `#737373` |
- * | `--sc-kit--icon--color-green` | Color for `green` preset | `#22c55e` |
- * | `--sc-kit--icon--color-orange` | Color for `orange` preset | `#f97316` |
- * | `--sc-kit--icon--color-red` | Color for `red` preset | `#ef4444` |
- * | `--sc-kit--icon--color-text` | Color for `text` preset | `neutral-800` / `white` |
- * | `--sc-kit--icon--color-white` | Color for `white` preset | `white` |
+ * | `--sc-kit--icon--color-accent` | Color for `accent` preset | `--sc-kit--color--accent` |
+ * | `--sc-kit--icon--color-muted` | Color for `muted` preset | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--icon--color-success` | Color for `success` preset | `--sc-kit--color--success` |
+ * | `--sc-kit--icon--color-warning` | Color for `warning` preset | `--sc-kit--color--warning` |
+ * | `--sc-kit--icon--color-danger` | Color for `danger` preset | `--sc-kit--color--danger` |
+ * | `--sc-kit--icon--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--icon--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
  * | `--sc-kit--icon--filter` | CSS filter applied to the SVG | `none` |
- * | `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` |
+ * | `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` (20px) |
  * | `--sc-kit--icon--stroke-width` | Stroke width on SVG paths | `0` |
+ *
+ * ### Size presets
+ * | Class | `--sc-kit--icon--size` |
+ * |---|---|
+ * | `icon--sm` | `0.875rem` (14px) |
+ * | `icon--md` | `1.25rem` (20px) |
+ * | `icon--lg` | `2rem` (32px) |
+ * | `icon--xlg` | `3rem` (48px) |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/icon/icon-utils.d.ts

@@ -0,0 +1,9 @@
+import type { IconColor, IconProp, IconSize } from './types';
+import type { Snippet } from 'svelte';
+export type SplitIcon = {
+    snippet: Snippet | null;
+    src: string | null;
+    color: IconColor | null;
+    size: IconSize | null;
+};
+export declare const splitIcon: (icon: IconProp | undefined | null) => SplitIcon;

package/dist/ui/icon/icon-utils.js

@@ -0,0 +1,12 @@
+export const splitIcon = (icon) => {
+    if (icon === null || icon === undefined) {
+        return { snippet: null, src: null, color: null, size: null };
+    }
+    if (typeof icon === 'function') {
+        return { snippet: icon, src: null, color: null, size: null };
+    }
+    if (typeof icon === 'string') {
+        return { snippet: null, src: icon, color: null, size: null };
+    }
+    return { snippet: null, src: icon.src, color: icon.color ?? null, size: icon.size ?? null };
+};

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

@@ -1,2 +1,4 @@
 export { default as Icon } from './cmp.icon.svelte';
-export type { IconColor } from './types';
+export { default as IconSlot } from './cmp.icon-slot.svelte';
+export { splitIcon } from './icon-utils';
+export type { IconColor, IconProp, IconSize } from './types';

package/dist/ui/icon/index.js

@@ -1 +1,3 @@
 export { default as Icon } from './cmp.icon.svelte';
+export { default as IconSlot } from './cmp.icon-slot.svelte';
+export { splitIcon } from './icon-utils';