@streamscloud/kit 0.2.42 → 0.9.0

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';

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;