@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,286 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Icon } from '../icon';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
+let { steps, current = 0, orientation = 'horizontal', size = 'md', completed = 'numbered', on } = $props();
+const statusFor = (i) => {
+    if (i < current) {
+        return 'completed';
+    }
+    if (i === current) {
+        return 'current';
+    }
+    return 'pending';
+};
+</script>
+
+{#snippet inner(step: Step, status: StepStatus, indicator: string | number)}
+  <span class="stepper__circle">
+    {#if status === 'completed' && completed === 'checkmark'}
+      <Icon src={IconCheckmark} />
+    {:else}
+      {indicator}
+    {/if}
+  </span>
+  <span class="stepper__content">
+    <span class="stepper__title">
+      <span class="stepper__title-text">{step.title}</span>
+      <span class="stepper__title-sizer" aria-hidden="true">{step.title}</span>
+    </span>
+    {#if step.description}
+      <span class="stepper__description">{step.description}</span>
+    {/if}
+  </span>
+{/snippet}
+
+<div class="stepper stepper--{orientation} stepper--{size}" role="list">
+  {#each steps as step, i (i)}
+    {@const status = statusFor(i)}
+    {@const isLast = i === steps.length - 1}
+    {@const clickable = !!on?.stepClick && status === 'completed'}
+    {@const indicator = step.label ?? i + 1}
+    <div class="stepper__item stepper__item--{status}" class:stepper__item--with-connector={!isLast} class:stepper__item--clickable={clickable} role="listitem">
+      {#if clickable}
+        <button type="button" class="stepper__step" onclick={() => on?.stepClick?.(i)}>
+          {@render inner(step, status, indicator)}
+        </button>
+      {:else}
+        <div class="stepper__step" aria-current={status === 'current' ? 'step' : undefined}>
+          {@render inner(step, status, indicator)}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<!--
+@component
+Stepper — progress indicator for multi-step flows. Renders a list of steps with a circle indicator and
+a title / description per step. Status (completed / current / pending) is derived from each step's index
+relative to `current`. Pass `on.stepClick` to make completed steps clickable for backward navigation.
+
+Layouts:
+- `horizontal` (default) — circle stacked above label; full-page form headers.
+- `horizontal-inline` — circle beside label, line connectors flex between steps; tight chrome.
+- `vertical` — circle beside label, steps stacked top-to-bottom; sidebar checklists.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--stepper--circle--size` | Indicator circle size | per `size` preset (28 / 20px) |
+| `--sc-kit--stepper--accent` | Completed / current accent color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--stepper--accent--soft` | Vertical current-step pill background | `var(--sc-kit--color--accent--soft)` |
+| `--sc-kit--stepper--connector--color` | Connector line color (pending) | `var(--sc-kit--color--border)` |
+| `--sc-kit--stepper--connector--color--completed` | Connector line color past a completed step | `var(--sc-kit--stepper--accent)` |
+| `--sc-kit--stepper--circle--font-size` | Indicator font size | per `size` preset |
+| `--sc-kit--stepper--title--font-size` | Title font size | per `size` preset |
+| `--sc-kit--stepper--description--font-size` | Description font size | per `size` preset |
+-->
+<style>.stepper {
+  --_stepper--circle-size: var(--sc-kit--stepper--circle--size, 1.75rem);
+  --_stepper--circle-font-size: var(--sc-kit--stepper--circle--font-size, var(--sc-kit--font-size--sm));
+  --_stepper--title-font-size: var(--sc-kit--stepper--title--font-size, var(--sc-kit--font-size--md));
+  --_stepper--description-font-size: var(--sc-kit--stepper--description--font-size, var(--sc-kit--font-size--sm));
+  --_stepper--accent: var(--sc-kit--stepper--accent, var(--sc-kit--color--accent));
+  --_stepper--accent-soft: var(--sc-kit--stepper--accent--soft, var(--sc-kit--color--accent--softer));
+  --_stepper--connector-color: var(--sc-kit--stepper--connector--color, var(--sc-kit--color--border));
+  --_stepper--connector-color-completed: var(--sc-kit--stepper--connector--color--completed, var(--_stepper--accent));
+  --_stepper--step-pad: var(--sc-kit--space--2);
+  --_stepper--connector-gap: 0.375rem;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+.stepper--sm {
+  --_stepper--circle-size: 1.25rem;
+  --_stepper--step-pad: 0.25rem;
+  --_stepper--circle-font-size: var(--sc-kit--font-size--xs);
+  --_stepper--title-font-size: var(--sc-kit--font-size--sm);
+  --_stepper--description-font-size: var(--sc-kit--font-size--xs);
+}
+.stepper--vertical {
+  flex-direction: column;
+  gap: var(--sc-kit--space--2);
+}
+.stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.stepper--horizontal-inline {
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+.stepper__item {
+  position: relative;
+}
+.stepper--horizontal .stepper__item {
+  flex: 1;
+  min-width: 0;
+}
+.stepper--horizontal-inline .stepper__item {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+.stepper--horizontal-inline .stepper__item--with-connector {
+  flex: 1 1 auto;
+}
+.stepper__item--completed {
+  --_stepper--connector-color: var(--_stepper--connector-color-completed);
+}
+.stepper__step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sc-kit--space--3);
+  padding: var(--_stepper--step-pad);
+  border-radius: var(--sc-kit--radius--md);
+  width: 100%;
+  color: inherit;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+}
+.stepper__item--clickable .stepper__step {
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.stepper__item--clickable .stepper__step:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
+.stepper__item--clickable .stepper__step:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.stepper--horizontal .stepper__step {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.stepper--horizontal-inline .stepper__step {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  flex: 0 0 auto;
+  width: auto;
+}
+.stepper--vertical .stepper__item--current .stepper__step {
+  background: var(--_stepper--accent-soft);
+  position: relative;
+  z-index: 1;
+}
+.stepper__circle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_stepper--circle-size);
+  height: var(--_stepper--circle-size);
+  border-radius: var(--sc-kit--radius--pill);
+  font-size: var(--_stepper--circle-font-size);
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+  --sc-kit--icon--size: calc(var(--_stepper--circle-size) - 0.5rem);
+}
+.stepper__item--completed .stepper__circle, .stepper__item--current .stepper__circle {
+  background: var(--_stepper--accent);
+  color: var(--sc-kit--color--text--on-accent);
+}
+.stepper__item--pending .stepper__circle {
+  background: var(--sc-kit--color--bg--panel);
+  color: var(--sc-kit--color--text--muted);
+  box-shadow: inset 0 0 0 1px var(--sc-kit--color--border--strong);
+}
+.stepper--vertical .stepper__item--with-connector::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--_stepper--step-pad) + var(--_stepper--circle-size) / 2 - 0.5px);
+  top: calc(var(--_stepper--step-pad) + var(--_stepper--circle-size) + var(--_stepper--connector-gap));
+  height: calc(100% - var(--_stepper--step-pad) - var(--_stepper--circle-size) - var(--_stepper--connector-gap) * 2 + var(--sc-kit--space--2));
+  width: 1px;
+  background: var(--_stepper--connector-color);
+}
+.stepper--horizontal .stepper__item--with-connector::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--_stepper--step-pad) + var(--_stepper--circle-size) / 2 - 0.5px);
+  left: calc(50% + var(--_stepper--circle-size) / 2 + var(--_stepper--connector-gap));
+  width: calc(100% - var(--_stepper--circle-size) - var(--_stepper--connector-gap) * 2);
+  height: 1px;
+  background: var(--_stepper--connector-color);
+}
+.stepper--horizontal-inline .stepper__item--with-connector::after {
+  content: "";
+  position: static;
+  flex: 1 1 auto;
+  height: 1px;
+  margin: 0 var(--sc-kit--space--3);
+  background: var(--_stepper--connector-color);
+}
+.stepper__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: 0.125rem;
+}
+.stepper--horizontal .stepper__content {
+  margin-top: var(--sc-kit--space--2);
+  flex: 0 0 auto;
+  width: 100%;
+}
+.stepper--horizontal-inline .stepper__content {
+  margin-top: 0;
+  flex: 0 0 auto;
+  width: auto;
+}
+.stepper__title {
+  display: inline-grid;
+  max-width: 100%;
+  font-size: var(--_stepper--title-font-size);
+  line-height: var(--sc-kit--leading--tight);
+}
+.stepper__title-text, .stepper__title-sizer {
+  grid-area: 1/1;
+  min-width: 0;
+}
+.stepper__title-sizer {
+  font-weight: var(--sc-kit--font-weight--semibold);
+  visibility: hidden;
+}
+.stepper__title-text {
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--sc-kit--color--text--secondary);
+}
+.stepper__item--completed .stepper__title-text {
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--primary);
+}
+.stepper__item--current .stepper__title-text {
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--_stepper--accent);
+}
+.stepper__item--pending .stepper__title-text {
+  color: var(--sc-kit--color--text--muted);
+}
+.stepper__description {
+  font-size: var(--_stepper--description-font-size);
+  color: var(--sc-kit--color--text--muted);
+  line-height: var(--sc-kit--leading--snug);
+}
+.stepper__item--current .stepper__description {
+  color: var(--sc-kit--color--text--secondary);
+}
+.stepper--horizontal .stepper__title-text, .stepper--horizontal .stepper__title-sizer, .stepper--horizontal .stepper__description {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stepper--horizontal-inline .stepper__title-text, .stepper--horizontal-inline .stepper__title-sizer, .stepper--horizontal-inline .stepper__description {
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,59 @@
+/** One step in the sequence. The indicator inside the circle defaults to the 1-based index (1, 2, 3, …); pass `label` to override. */
+export type Step = {
+    title: string;
+    description?: string;
+    label?: string | number;
+};
+/** Derived from each step's index relative to `current`. */
+export type StepStatus = 'completed' | 'current' | 'pending';
+type Props = {
+    steps: Step[];
+    /** 0-based index of the active step. @default 0 */
+    current?: number;
+    /**
+     * Layout direction.
+     * - `horizontal` (default) — circle on top, label below; each step takes equal width.
+     * - `horizontal-inline` — circle on the left of the label, all on one line; line connectors flex between steps. Use in tight chrome (dialogs, banded headers).
+     * - `vertical` — circle on the left of the label, steps stacked top-to-bottom.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'horizontal-inline' | 'vertical';
+    /**
+     * Visual scale.
+     * - `md` (default) — 28px circles, regular text.
+     * - `sm` — 20px circles, smaller text; pairs with `horizontal-inline` for tight chrome.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /** Render completed-step indicators as numbers or as checkmarks. @default 'numbered' */
+    completed?: 'numbered' | 'checkmark';
+    on?: {
+        /** When provided, completed steps become clickable. */
+        stepClick?: (index: number) => void;
+    };
+};
+/**
+ * Stepper — progress indicator for multi-step flows. Renders a list of steps with a circle indicator and
+ * a title / description per step. Status (completed / current / pending) is derived from each step's index
+ * relative to `current`. Pass `on.stepClick` to make completed steps clickable for backward navigation.
+ *
+ * Layouts:
+ * - `horizontal` (default) — circle stacked above label; full-page form headers.
+ * - `horizontal-inline` — circle beside label, line connectors flex between steps; tight chrome.
+ * - `vertical` — circle beside label, steps stacked top-to-bottom; sidebar checklists.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--stepper--circle--size` | Indicator circle size | per `size` preset (28 / 20px) |
+ * | `--sc-kit--stepper--accent` | Completed / current accent color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--stepper--accent--soft` | Vertical current-step pill background | `var(--sc-kit--color--accent--soft)` |
+ * | `--sc-kit--stepper--connector--color` | Connector line color (pending) | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--stepper--connector--color--completed` | Connector line color past a completed step | `var(--sc-kit--stepper--accent)` |
+ * | `--sc-kit--stepper--circle--font-size` | Indicator font size | per `size` preset |
+ * | `--sc-kit--stepper--title--font-size` | Title font size | per `size` preset |
+ * | `--sc-kit--stepper--description--font-size` | Description font size | per `size` preset |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Stepper, type Step, type StepStatus } from './cmp.stepper.svelte';

package/dist/ui/stepper/index.js

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

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

@@ -0,0 +1,221 @@
+<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

@@ -0,0 +1,17 @@
+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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare class StepperDialogLocalization {
+    get cancel(): string;
+    get back(): string;
+    get next(): string;
+    get finish(): string;
+}

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

@@ -0,0 +1,33 @@
+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',
+        no: 'Avbryt'
+    },
+    back: {
+        en: 'Back',
+        no: 'Tilbake'
+    },
+    next: {
+        en: 'Next',
+        no: 'Neste'
+    },
+    finish: {
+        en: 'Finish',
+        no: 'Fullfør'
+    }
+};

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,26 @@
+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' }
+    });
+};