@streamscloud/kit 0.9.4 → 0.9.6

package/dist/ui/avatar/cmp.avatar.svelte

@@ -72,6 +72,8 @@ load / error / stub state machine.
 | `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
 | `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
 | `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
+| `--sc-kit--avatar--badge--initials--background` | Badge initials chip background (contrast element of org-with-user) | `--sc-kit--color--accent` |
+| `--sc-kit--avatar--badge--initials--color` | Badge initials chip text color | `--sc-kit--color--text--on-accent` |
 -->
 
 <style>.avatar {
@@ -86,6 +88,8 @@ load / error / stub state machine.
   --_avatar--badge-size: var(--sc-kit--avatar--badge--size, calc(var(--_avatar--size) * 0.45));
   --_avatar--badge-ring-color: var(--sc-kit--avatar--badge--ring-color, var(--sc-kit--color--bg--panel));
   --_avatar--badge-ring-width: var(--sc-kit--avatar--badge--ring-width, 1.5px);
+  --_avatar--badge-initials-background: var(--sc-kit--avatar--badge--initials--background, var(--sc-kit--color--accent));
+  --_avatar--badge-initials-color: var(--sc-kit--avatar--badge--initials--color, var(--sc-kit--color--text--on-accent));
   --_avatar--border-radius: var(--sc-kit--avatar--border-radius, 50%);
   --sc-kit--image--border-radius: var(--_avatar--border-radius);
   --sc-kit--image--background: var(--_avatar--background);
@@ -133,6 +137,8 @@ load / error / stub state machine.
 .avatar__initials--badge {
   border-radius: var(--sc-kit--radius--sm);
   font-size: calc(var(--_avatar--badge-size) * 0.5);
+  background: var(--_avatar--badge-initials-background);
+  color: var(--_avatar--badge-initials-color);
 }
 .avatar__badge {
   position: absolute;

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

@@ -35,6 +35,8 @@ type Props = {
  * | `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
  * | `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
+ * | `--sc-kit--avatar--badge--initials--background` | Badge initials chip background (contrast element of org-with-user) | `--sc-kit--color--accent` |
+ * | `--sc-kit--avatar--badge--initials--color` | Badge initials chip text color | `--sc-kit--color--text--on-accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -156,7 +156,8 @@ $effect(() => {
   {/if}
 
   {#if open}
-    <div bind:this={panelEl} class="date-picker__panel">
+    <!-- preventDefault cancels FormField's <label> activation — a dead-space click inside the panel would forward to the trigger and close the calendar. -->
+    <div bind:this={panelEl} class="date-picker__panel" role="presentation" onclick={(e) => e.preventDefault()} onkeydown={() => undefined}>
       <DatePickerCalendar
         selectedDate={selectedDate}
         minDate={minDate}

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -74,6 +74,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
   class:singleselect--inert={inert}
   class:singleselect--borderless={borderless}
   onclick={core.handleClick}
+  onmousedown={core.handleMousedown}
   onkeydown={() => undefined}
   role="presentation">
   {#if icon}

package/dist/ui/select/multiselect-base.svelte

@@ -185,6 +185,7 @@ const handleDndFinalize = (e) => {
     class:multiselect-trigger--inert={inert}
     class:multiselect-trigger--borderless={borderless}
     onclick={core.handleClick}
+    onmousedown={core.handleMousedown}
     onkeydown={() => undefined}
     role="presentation">
     {#if icon}

package/dist/ui/select/select-core.svelte.d.ts

@@ -73,6 +73,7 @@ export type SelectCore<T> = {
     readonly interactionLocked: boolean;
     handleFocus: () => void;
     handleClick: (e: MouseEvent) => void;
+    handleMousedown: (e: MouseEvent) => void;
     handleInput: (e: Event) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     openPopover: () => void;

package/dist/ui/select/select-core.svelte.js

@@ -250,6 +250,8 @@ export function createSelectCore(config) {
     };
     const handleFocus = () => undefined;
     const handleClick = (e) => {
+        // Cancels FormField's <label> activation — else its synthetic click re-toggles the popover on every pick.
+        e.preventDefault();
         if (!config.getInteractive() || isFiltering) {
             return;
         }
@@ -268,6 +270,12 @@ export function createSelectCore(config) {
             openPopover();
         }
     };
+    const handleMousedown = (e) => {
+        // Keeps the inner input focused — default mousedown on the chevron/padding blurs it (focus-ring flicker).
+        if (e.target !== config.getInputEl()) {
+            e.preventDefault();
+        }
+    };
     const handleInput = (e) => {
         if (!config.getInteractive()) {
             return;
@@ -357,6 +365,7 @@ export function createSelectCore(config) {
         },
         handleFocus,
         handleClick,
+        handleMousedown,
         handleInput,
         handleKeydown,
         openPopover,

package/dist/ui/select/select-listbox.svelte

@@ -116,7 +116,11 @@ $effect(() => {
     role="listbox"
     id={listboxId}
     tabindex="-1"
-    onclick={(e) => e.stopPropagation()}
+    onclick={(e) => {
+      // preventDefault cancels FormField's <label> activation — stopPropagation alone doesn't.
+      e.preventDefault();
+      e.stopPropagation();
+    }}
     onmousedown={(e) => e.stopPropagation()}
     onkeydown={() => undefined}>
     {#if headerSnippet}

package/dist/ui/stepper-dialog-layout/cmp.stepper-dialog-layout.svelte

@@ -0,0 +1,197 @@
+<script lang="ts" generics="TResult = void, TCancelResult = void">import { Button } from '../button';
+import { Dialog, DialogCloseButton } from '../dialog';
+import { IconSlot } from '../icon';
+import { Stepper } from '../stepper';
+import { StepperDialogLayoutLocalization } from './stepper-dialog-layout-localization';
+let { controller, icon, title, subtitle, steps, canAdvance = () => true, labels, children, on } = $props();
+const localization = new StepperDialogLayoutLocalization();
+let step = $state(0);
+let submitting = $state(false);
+const isFirstStep = $derived(step === 0);
+const isLastStep = $derived(step === steps.length - 1);
+const stepAllowed = $derived(canAdvance(step));
+const showCloseButton = $derived(!controller.settings.nonCancelable);
+const setStep = (next) => {
+    step = next;
+    on.stepChange?.(next);
+};
+const handleNext = async () => {
+    if (!stepAllowed) {
+        return;
+    }
+    if (on.beforeNext && (await on.beforeNext(step)) === false) {
+        return;
+    }
+    setStep(step + 1);
+};
+const handleBack = () => {
+    if (step > 0) {
+        setStep(step - 1);
+    }
+};
+const handleFinish = async () => {
+    if (!stepAllowed || submitting) {
+        return;
+    }
+    submitting = true;
+    try {
+        await on.finish();
+    }
+    catch (error) {
+        console.error('StepperDialogLayout: on.finish threw — surface errors inside the handler', error);
+    }
+    finally {
+        submitting = false;
+    }
+};
+const handleStepClick = (clicked) => {
+    if (clicked < step) {
+        setStep(clicked);
+    }
+};
+</script>
+
+<div class="stepper-dialog-layout">
+  <Dialog controller={controller}>
+    {#snippet headerSection()}
+      <div class="stepper-dialog-layout__header">
+        {#if icon}
+          <span class="stepper-dialog-layout__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+        {/if}
+        <div class="stepper-dialog-layout__title-block">
+          <div class="stepper-dialog-layout__title">{title}</div>
+          {#if subtitle}
+            <div class="stepper-dialog-layout__subtitle">{subtitle}</div>
+          {/if}
+        </div>
+        {#if showCloseButton}
+          <DialogCloseButton controller={controller} />
+        {/if}
+      </div>
+    {/snippet}
+
+    {#snippet bodySection()}
+      <div class="stepper-dialog-layout__layout">
+        <div class="stepper-dialog-layout__sidebar">
+          <Stepper orientation="vertical" completed="checkmark" current={step} steps={steps} on={{ stepClick: handleStepClick }} />
+        </div>
+        <div class="stepper-dialog-layout__main">
+          <div class="stepper-dialog-layout__body">{@render children(step)}</div>
+        </div>
+      </div>
+    {/snippet}
+
+    {#snippet footer()}
+      <Button type="button" variant="secondary" on={{ click: () => controller.cancel() }}>{labels?.cancel ?? localization.cancel}</Button>
+      {#if !isFirstStep}
+        <Button type="button" variant="ghost" on={{ click: handleBack }}>{labels?.back ?? localization.back}</Button>
+      {/if}
+      {#if isLastStep}
+        <Button type="button" variant="primary" loading={submitting} disabled={!stepAllowed || submitting} on={{ click: () => void handleFinish() }}
+          >{labels?.finish ?? localization.finish}</Button>
+      {:else}
+        <Button type="button" variant="primary" disabled={!stepAllowed} on={{ click: () => void handleNext() }}>{labels?.next ?? localization.next}</Button>
+      {/if}
+    {/snippet}
+  </Dialog>
+</div>
+
+<!--
+@component
+StepperDialogLayout — layout scaffold for multi-step wizard dialog views: header (icon / title /
+subtitle / close), vertical Stepper sidebar, scrollable body, and a Cancel / Back / Next / Finish
+footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
+navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
+Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next / Finish.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--stepper-dialog-layout--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
+| `--sc-kit--stepper-dialog-layout--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--stepper-dialog-layout--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
+-->
+
+<style>.stepper-dialog-layout {
+  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, functions.to-rem(320));
+  --_sdl--sidebar-background: var(--sc-kit--stepper-dialog-layout--sidebar--background, var(--sc-kit--color--bg--field-alt));
+  --sc-kit--dialog--height: var(--sc-kit--stepper-dialog-layout--height, auto);
+  --sc-kit--dialog--body--overflow-y: auto;
+  display: contents;
+}
+.stepper-dialog-layout__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
+  border-block-end: 1px solid var(--sc-kit--color--border);
+}
+.stepper-dialog-layout__icon {
+  --sc-kit--icon--size: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  background: var(--sc-kit--color--bg--field-alt);
+  color: var(--sc-kit--color--text--primary);
+  border-radius: var(--sc-kit--radius--md);
+}
+.stepper-dialog-layout__title-block {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.stepper-dialog-layout__title {
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--sc-kit--color--text--primary);
+}
+.stepper-dialog-layout__subtitle {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  line-height: var(--sc-kit--leading--normal);
+}
+.stepper-dialog-layout__layout {
+  display: flex;
+  flex: 1;
+  min-block-size: 0;
+  block-size: 100%;
+}
+@media screen and (max-width: 768px) {
+  .stepper-dialog-layout__layout {
+    flex-direction: column;
+  }
+}
+.stepper-dialog-layout__sidebar {
+  flex: 0 0 var(--_sdl--sidebar-width);
+  padding: var(--sc-kit--space--5) var(--sc-kit--space--4);
+  background: var(--_sdl--sidebar-background);
+  border-inline-end: 1px solid var(--sc-kit--color--border);
+  overflow-y: auto;
+  min-block-size: 0;
+}
+@media screen and (max-width: 768px) {
+  .stepper-dialog-layout__sidebar {
+    flex: 0 0 auto;
+    border-inline-end: none;
+    border-block-end: 1px solid var(--sc-kit--color--border);
+  }
+}
+.stepper-dialog-layout__main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+.stepper-dialog-layout__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
+}</style>

package/dist/ui/stepper-dialog-layout/cmp.stepper-dialog-layout.svelte.d.ts

@@ -0,0 +1,66 @@
+import { type DialogController } from '../dialog';
+import { type IconProp } from '../icon';
+import { type Step } from '../stepper';
+import type { Snippet } from 'svelte';
+declare function $$render<TResult = void, TCancelResult = void>(): {
+    props: {
+        controller: DialogController<TResult, TCancelResult>;
+        /** Leading header icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+        icon?: IconProp;
+        title: string;
+        subtitle?: string;
+        steps: Step[];
+        /** Reactive gate for Next / Finish per step index. @default () => true */
+        canAdvance?: (step: number) => boolean;
+        /** Per-button overrides of the localized footer labels. */
+        labels?: {
+            cancel?: string;
+            back?: string;
+            next?: string;
+            finish?: string;
+        };
+        /** Body content; receives the current step index. */
+        children: Snippet<[number]>;
+        on: {
+            /** Owns closing: call `controller.ok(...)` on success; return without closing to keep the dialog open. Surface errors inside the handler — rejections are absorbed (logged), not rethrown. */
+            finish: () => void | Promise<void>;
+            beforeNext?: (step: number) => boolean | void | Promise<boolean | void>;
+            stepChange?: (step: number) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TResult = void, TCancelResult = void> {
+    props(): ReturnType<typeof $$render<TResult, TCancelResult>>['props'];
+    events(): ReturnType<typeof $$render<TResult, TCancelResult>>['events'];
+    slots(): ReturnType<typeof $$render<TResult, TCancelResult>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TResult = void, TCancelResult = void>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['events']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TResult, TCancelResult>['bindings']>;
+    } & ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * StepperDialogLayout — layout scaffold for multi-step wizard dialog views: header (icon / title /
+ * subtitle / close), vertical Stepper sidebar, scrollable body, and a Cancel / Back / Next / Finish
+ * footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
+ * navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
+ * Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next / Finish.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--stepper-dialog-layout--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
+ * | `--sc-kit--stepper-dialog-layout--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--stepper-dialog-layout--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
+export default Cmp;

package/dist/ui/stepper-dialog-layout/index.d.ts

@@ -0,0 +1 @@
+export { default as StepperDialogLayout } from './cmp.stepper-dialog-layout.svelte';

package/dist/ui/stepper-dialog-layout/index.js

@@ -0,0 +1 @@
+export { default as StepperDialogLayout } from './cmp.stepper-dialog-layout.svelte';

package/dist/ui/{stepper-dialog/stepper-dialog-localization.d.ts → stepper-dialog-layout/stepper-dialog-layout-localization.d.ts}

@@ -1,4 +1,4 @@
-export declare class StepperDialogLocalization {
+export declare class StepperDialogLayoutLocalization {
     get cancel(): string;
     get back(): string;
     get next(): string;

package/dist/ui/{stepper-dialog/stepper-dialog-localization.js → stepper-dialog-layout/stepper-dialog-layout-localization.js}

@@ -1,18 +1,4 @@
 import { AppLocale } from '../../core/locale';
-export class StepperDialogLocalization {
-    get cancel() {
-        return loc.cancel[AppLocale.current];
-    }
-    get back() {
-        return loc.back[AppLocale.current];
-    }
-    get next() {
-        return loc.next[AppLocale.current];
-    }
-    get finish() {
-        return loc.finish[AppLocale.current];
-    }
-}
 const loc = {
     cancel: {
         en: 'Cancel',
@@ -31,3 +17,17 @@ const loc = {
         no: 'Fullfør'
     }
 };
+export class StepperDialogLayoutLocalization {
+    get cancel() {
+        return loc.cancel[AppLocale.current];
+    }
+    get back() {
+        return loc.back[AppLocale.current];
+    }
+    get next() {
+        return loc.next[AppLocale.current];
+    }
+    get finish() {
+        return loc.finish[AppLocale.current];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -359,9 +359,9 @@
       "types": "./dist/ui/stepper/index.d.ts",
       "svelte": "./dist/ui/stepper/index.js"
     },
-    "./ui/stepper-dialog": {
-      "types": "./dist/ui/stepper-dialog/index.d.ts",
-      "svelte": "./dist/ui/stepper-dialog/index.js"
+    "./ui/stepper-dialog-layout": {
+      "types": "./dist/ui/stepper-dialog-layout/index.d.ts",
+      "svelte": "./dist/ui/stepper-dialog-layout/index.js"
     },
     "./ui/swipe-indicator": {
       "types": "./dist/ui/swipe-indicator/index.d.ts",

package/dist/ui/stepper-dialog/cmp.stepper-dialog.svelte

@@ -1,221 +0,0 @@
-<script lang="ts">import { Button } from '../button';
-import { Dialog, DialogCloseButton } from '../dialog';
-import { Icon } from '../icon';
-import { Stepper } from '../stepper';
-import { StepperDialogLocalization } from './stepper-dialog-localization';
-let { controller, data } = $props();
-const localization = new StepperDialogLocalization();
-let step = $state(0);
-let submitting = $state(false);
-const isFirstStep = $derived(step === 0);
-const isLastStep = $derived(step === data.steps.length - 1);
-const canAdvance = $derived(data.canAdvance(step));
-const showCloseButton = $derived(!controller.settings.nonCancelable);
-const setStep = (i) => {
-    step = i;
-    data.on.stepChange?.(i);
-};
-const handleNext = async () => {
-    if (!canAdvance) {
-        return;
-    }
-    if (data.on.beforeNext) {
-        const result = await data.on.beforeNext(step);
-        if (result === false) {
-            return;
-        }
-    }
-    setStep(step + 1);
-};
-const handleBack = () => {
-    if (step > 0) {
-        setStep(step - 1);
-    }
-};
-const handleFinish = async () => {
-    if (!canAdvance || submitting) {
-        return;
-    }
-    submitting = true;
-    try {
-        await data.on.finish();
-        controller.ok();
-    }
-    finally {
-        submitting = false;
-    }
-};
-const handleStepClick = (i) => {
-    if (i < step) {
-        setStep(i);
-    }
-};
-</script>
-
-{#snippet footerButtons()}
-  <Button type="button" variant="secondary" on={{ click: () => controller.cancel() }}>{data.cancelLabel ?? localization.cancel}</Button>
-  {#if !isFirstStep}
-    <Button type="button" variant="ghost" on={{ click: handleBack }}>{data.backLabel ?? localization.back}</Button>
-  {/if}
-  {#if isLastStep}
-    <Button type="button" variant="primary" loading={submitting} disabled={!canAdvance || submitting} on={{ click: handleFinish }}
-      >{data.finishLabel ?? localization.finish}</Button>
-  {:else}
-    <Button type="button" variant="primary" disabled={!canAdvance} on={{ click: handleNext }}>{data.nextLabel ?? localization.next}</Button>
-  {/if}
-{/snippet}
-
-{#snippet titleRow()}
-  <div class="stepper-dialog__title-row">
-    {#if data.icon}<span class="stepper-dialog__icon" aria-hidden="true"><Icon src={data.icon} /></span>{/if}
-    <div class="stepper-dialog__title-block">
-      <div class="stepper-dialog__title">{data.title}</div>
-      {#if data.subtitle}<div class="stepper-dialog__subtitle">{data.subtitle}</div>{/if}
-    </div>
-    {#if showCloseButton}<DialogCloseButton controller={controller} />{/if}
-  </div>
-{/snippet}
-
-<div
-  class="stepper-dialog stepper-dialog--{data.layout}"
-  style:--sc-kit--dialog--height={data.height}
-  style:--sc-kit--dialog--body--overflow-y={data.height ? 'auto' : null}
-  style:--_stepper-dialog--sidebar-background={data.sidebarBackground}>
-  {#if data.layout === 'side'}
-    <Dialog controller={controller}>
-      {#snippet headerSection()}
-        <div class="stepper-dialog__header stepper-dialog__header--side">
-          {@render titleRow()}
-        </div>
-      {/snippet}
-      {#snippet bodySection()}
-        <div class="stepper-dialog__layout">
-          <div class="stepper-dialog__sidebar">
-            <Stepper orientation="vertical" completed="checkmark" current={step} steps={data.steps} on={{ stepClick: handleStepClick }} />
-          </div>
-          <div class="stepper-dialog__main">
-            <div class="stepper-dialog__body">{@render data.content(step)}</div>
-          </div>
-        </div>
-      {/snippet}
-      {#snippet footer()}{@render footerButtons()}{/snippet}
-    </Dialog>
-  {:else}
-    <Dialog controller={controller}>
-      {#snippet headerSection()}
-        <div class="stepper-dialog__header stepper-dialog__header--top">
-          {@render titleRow()}
-          <div class="stepper-dialog__stepper">
-            <Stepper orientation="horizontal-inline" size="sm" completed="checkmark" current={step} steps={data.steps} on={{ stepClick: handleStepClick }} />
-          </div>
-        </div>
-      {/snippet}
-      {#snippet body()}{@render data.content(step)}{/snippet}
-      {#snippet footer()}{@render footerButtons()}{/snippet}
-    </Dialog>
-  {/if}
-</div>
-
-<!--
-@component
-Internal view for `openStepperDialog`. Renders a multi-step dialog: header (icon + title + subtitle + close),
-a stepper band (top layout) or vertical sidebar (side layout), the current step's body, and a Cancel / Back /
-Next / Finish footer. The dialog owns step navigation and the submitting spinner; the consumer owns step
-content (via `content` snippet) and the finish handler.
-
-Never render this view directly — use the imperative `openStepperDialog(...)` from the module barrel.
--->
-
-<style>.stepper-dialog {
-  --_stepper-dialog--sidebar-width: 20rem;
-  --_stepper-dialog--sidebar-background: var(--sc-kit--color--bg--field-alt);
-  --_stepper-dialog--header-background: var(--sc-kit--color--bg--field-alt);
-  --_stepper-dialog--header-border-color: var(--sc-kit--color--border);
-  display: contents;
-}
-.stepper-dialog__header {
-  display: flex;
-  flex-direction: column;
-}
-.stepper-dialog__header--side {
-  border-bottom: 1px solid var(--_stepper-dialog--header-border-color);
-}
-.stepper-dialog__title-row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sc-kit--space--3);
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
-}
-.stepper-dialog__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 2.5rem;
-  height: 2.5rem;
-  background: var(--sc-kit--color--bg--field-alt);
-  color: var(--sc-kit--color--text--primary);
-  border-radius: var(--sc-kit--radius--md);
-  --sc-kit--icon--size: 1.5rem;
-}
-.stepper-dialog__title-block {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-.stepper-dialog__title {
-  font-size: var(--sc-kit--font-size--lg);
-  font-weight: var(--sc-kit--font-weight--semibold);
-  line-height: var(--sc-kit--leading--tight);
-  color: var(--sc-kit--color--text--primary);
-}
-.stepper-dialog__subtitle {
-  font-size: var(--sc-kit--font-size--sm);
-  color: var(--sc-kit--color--text--muted);
-  line-height: var(--sc-kit--leading--snug);
-}
-.stepper-dialog__stepper {
-  padding: var(--sc-kit--space--2) var(--sc-kit--space--6);
-  background: var(--_stepper-dialog--header-background);
-}
-.stepper-dialog__layout {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  height: 100%;
-}
-@media screen and (max-width: 768px) {
-  .stepper-dialog__layout {
-    flex-direction: column;
-  }
-}
-.stepper-dialog__sidebar {
-  flex: 0 0 var(--_stepper-dialog--sidebar-width);
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--4);
-  background: var(--_stepper-dialog--sidebar-background);
-  border-right: 1px solid var(--sc-kit--color--border);
-  overflow-y: auto;
-  min-height: 0;
-}
-@media screen and (max-width: 768px) {
-  .stepper-dialog__sidebar {
-    flex: 0 0 auto;
-    border-right: none;
-    border-bottom: 1px solid var(--sc-kit--color--border);
-  }
-}
-.stepper-dialog__main {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-.stepper-dialog__body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
-}</style>

package/dist/ui/stepper-dialog/cmp.stepper-dialog.svelte.d.ts

@@ -1,17 +0,0 @@
-import { type DialogController } from '../dialog';
-import type { StepperDialogData } from './types';
-type Props = {
-    controller: DialogController;
-    data: StepperDialogData;
-};
-/**
- * Internal view for `openStepperDialog`. Renders a multi-step dialog: header (icon + title + subtitle + close),
- * a stepper band (top layout) or vertical sidebar (side layout), the current step's body, and a Cancel / Back /
- * Next / Finish footer. The dialog owns step navigation and the submitting spinner; the consumer owns step
- * content (via `content` snippet) and the finish handler.
- *
- * Never render this view directly — use the imperative `openStepperDialog(...)` from the module barrel.
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/stepper-dialog/index.d.ts

@@ -1,2 +0,0 @@
-export { openStepperDialog } from './stepper-dialog';
-export type { StepperDialogData, StepperDialogLayout } from './types';

package/dist/ui/stepper-dialog/index.js

@@ -1 +0,0 @@
-export { openStepperDialog } from './stepper-dialog';

package/dist/ui/stepper-dialog/stepper-dialog.d.ts

@@ -1,22 +0,0 @@
-import { type DialogResult } from '../dialog';
-import type { Step } from '../stepper';
-import type { StepperDialogData, StepperDialogLayout } from './types';
-import type { Snippet } from 'svelte';
-type StepperDialogInit = {
-    icon?: string;
-    title: string;
-    subtitle?: string;
-    steps: Step[];
-    layout?: StepperDialogLayout;
-    sidebarBackground?: string;
-    canAdvance?: (step: number) => boolean;
-    cancelLabel?: string;
-    backLabel?: string;
-    nextLabel?: string;
-    finishLabel?: string;
-    height?: string;
-    content: Snippet<[number]>;
-    on: StepperDialogData['on'];
-};
-export declare const openStepperDialog: (init: StepperDialogInit) => Promise<DialogResult<void>>;
-export {};

package/dist/ui/stepper-dialog/stepper-dialog.js

@@ -1,26 +0,0 @@
-import { Dialogs } from '../dialog';
-import StepperDialogView from './cmp.stepper-dialog.svelte';
-export const openStepperDialog = (init) => {
-    const data = {
-        icon: init.icon,
-        title: init.title,
-        subtitle: init.subtitle,
-        steps: init.steps,
-        layout: init.layout ?? 'top',
-        sidebarBackground: init.sidebarBackground,
-        canAdvance: init.canAdvance ?? (() => true),
-        cancelLabel: init.cancelLabel,
-        backLabel: init.backLabel,
-        nextLabel: init.nextLabel,
-        finishLabel: init.finishLabel,
-        height: init.height,
-        content: init.content,
-        on: init.on
-    };
-    return Dialogs.open({
-        view: StepperDialogView,
-        data,
-        explicitSettings: { closeOnEsc: true, closeOnClickOutside: false },
-        containerSettings: { size: data.layout === 'side' ? 'large' : 'medium' }
-    });
-};

package/dist/ui/stepper-dialog/types.d.ts

@@ -1,34 +0,0 @@
-import type { Step } from '../stepper';
-import type { Snippet } from 'svelte';
-export type StepperDialogLayout = 'top' | 'side';
-export type StepperDialogData = {
-    icon?: string;
-    title: string;
-    subtitle?: string;
-    steps: Step[];
-    layout: StepperDialogLayout;
-    /** Side-layout sidebar background — any valid CSS `background` shorthand. No-op in `'top'` layout. */
-    sidebarBackground?: string;
-    /** Reactive: close over reactive state to enable/disable Next / Finish per step. @default () => true */
-    canAdvance: (step: number) => boolean;
-    /** Override the localized Cancel label. */
-    cancelLabel?: string;
-    /** Override the localized Back label. */
-    backLabel?: string;
-    /** Override the localized Next label. */
-    nextLabel?: string;
-    /** Override the localized Finish label. */
-    finishLabel?: string;
-    /** Fixed dialog height (any CSS length). When set, body scrolls inside the fixed frame. */
-    height?: string;
-    /** Body content — receives the current step index. */
-    content: Snippet<[number]>;
-    on: {
-        /** Called when the user clicks Finish from the last step. Dialog auto-closes with `controller.ok()` after this resolves; throw to keep it open. */
-        finish: () => void | Promise<void>;
-        /** Pre-advance hook. Return `false` to block Next. */
-        beforeNext?: (step: number) => boolean | void | Promise<boolean | void>;
-        /** Fires whenever the internal step index changes. */
-        stepChange?: (step: number) => void;
-    };
-};

package/dist/ui/stepper-dialog/types.js

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