@synopackageland/ui 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.16.0 (2026-10-25)
+
+Visual change: `Wizard`. Its props, slots, events and exposed methods keep working; the footer's Previous is now Back on the left.
+
+- `Wizard` is a window-sized layout: a step rail with numbered markers, done / current / upcoming states, a connecting line and a progress bar beside the step, or a stepper band above it when the wizard is under 600px wide (`stepper="auto" | "rail" | "header" | "none"`). The step scrolls between the band and a fixed footer: Back at the start; the step's `#actions`, Cancel and the one main action at the end.
+- `WizardStep` gets a hero: `icon` (a tile beside the headline) or the `#hero` slot (a picture or diagram on a stage), plus `description`, a short `label` for the step list, `next-label`, `next-disabled`, `show-next`, `show-back`, `lazy` and an `#actions` footer slot. `type="done"` is a closing step with a success mark that pops in once, Finish, and no Back or Cancel.
+- `WizardDialog`: the wizard in an app-local dialog, `xl` wide (860px) and 600px high, capped to the window; a phone-width window shows it as a bottom sheet with the band. Cancel closes it, Finish too unless `close-on-finish="false"`.
+- `Wizard` props `title`, `description` (above the rail) and `framed` (a wizard on a page). `show-steps` is deprecated; `false` still hides the step list. The `#footer` slot also receives `stepKey`.
+- A step changed with the focus in the wizard moves the focus to the new headline; steps slide in from the side they come from; reduced motion turns the motion off. A step mounted later with `v-if` keeps its document order in the step list.
+- `Dialog flush`: no body padding or scrolling, for content that scrolls itself.
+- New translated defaults "Back", "Finish" and "Steps" in all nine locales.
+- `ConnectionTopology` compact lanes stay on one line in a ~230px card: the compact frame gives its padding to the row and a lane that still wraps is centred.
+- Add [docs/wizard.md](docs/wizard.md).
+
 ## 0.15.1 (2026-10-25)
 
 - Defer responsive width updates to `requestAnimationFrame` so `CardGrid` and other components using `useElementWidth` avoid ResizeObserver delivery loops. Width changes are coalesced into one update per frame, and pending updates are cancelled when the component unmounts. (#53)

package/README.md

@@ -300,6 +300,14 @@ content from collapsing. In a DSM window, `<AppRoot dialog-bounds="viewport">`
 lets dialogs be dragged out of the window, within the browser viewport. See
 [docs/app-local-modal.md](docs/app-local-modal.md#floating-dialogs-in-a-dsm-window).
 
+### Wizard
+
+`WizardDialog` opens a multi-step setup in a large app-local dialog: a step
+rail (a stepper band under 600px), a hero, headline and one line per step, a
+scrolling step area and a fixed footer with Back on the left and one main
+action on the right. `Wizard` is the same layout for a `<Dialog flush>` of your
+own or a page (`framed`). See [docs/wizard.md](docs/wizard.md).
+
 ### Toast notifications
 
 Wrap your page with `ToastProvider` in `App.vue`:
@@ -922,7 +930,7 @@ validation time; imperative message-box default titles use the locale at opening
 See [the complete default-text and container audit](docs/component-defaults-0.5.7.md).
 
 `KeyValueRow` renders a `dl` with `dt`/`dd`; its default slot accepts rich values,
-including Link. `Wizard show-steps` shows registered step headlines and does not
+including Link. The `Wizard` step list shows the registered steps and does not
 permit jumping past guards. Its built-in accessible name, `footer` actions and
 step progress follow Provider locale; explicit overrides remain available. `RepeatRow` places wrapped cells
 inside `[data-repeat-fields]` and keeps its remove action beside the first control;

package/dist/components/composite/wizard/Wizard.vue.d.ts

@@ -1,4 +1,4 @@
-import { WizardFooterConfig, WizardStepChange } from './types';
+import { WizardFooterConfig, WizardStepChange, WizardStepper } from './types';
 type __VLS_Props = {
     /** Initial / external reset key. Internal navigation keeps working when the caller does not bind it back. */
     activeStepKey?: string;
@@ -6,14 +6,23 @@ type __VLS_Props = {
     /** Shows the Cancel action in the footer. */
     cancellable?: boolean;
     ariaLabel?: string;
+    /** The wizard's name, at the top of the step rail. */
+    title?: string;
+    /** One short line under the title in the step rail. */
+    description?: string;
+    /** Where the steps show; see `WizardStepper`. */
+    stepper?: WizardStepper;
+    /** @deprecated Use `stepper`. `false` is `stepper="none"`. */
     showSteps?: boolean;
+    /** Draws a border, rounded corners and a shadow, for a wizard placed on a page rather than in a dialog. */
+    framed?: boolean;
     progressText?: (current: number, total: number) => string;
 };
 declare function toNextStep(): Promise<void>;
 declare function toPreviousStep(): Promise<void>;
 declare function finish(): Promise<void>;
 declare function cancel(): void;
-declare var __VLS_1: {}, __VLS_9: {
+declare var __VLS_11: {}, __VLS_19: {
     nextStep: typeof toNextStep;
     previousStep: typeof toPreviousStep;
     finish: typeof finish;
@@ -21,11 +30,12 @@ declare var __VLS_1: {}, __VLS_9: {
     canGoPrevious: boolean;
     isLastStep: boolean;
     busy: boolean;
+    stepKey: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    footer?: (props: typeof __VLS_9) => any;
+    footer?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     activeStepKey: import('vue').ComputedRef<string>;
@@ -53,6 +63,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }>, {
     footer: WizardFooterConfig;
     cancellable: boolean;
+    stepper: WizardStepper;
+    showSteps: boolean;
+    framed: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/wizard/WizardDialog.vue.d.ts

@@ -0,0 +1,44 @@
+import { DialogSize } from '../../primitives/dialog/dialogSize';
+type __VLS_Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    description?: string;
+    size?: DialogSize;
+    width?: string;
+    /** The panel's height, capped to the room the window leaves. */
+    height?: string;
+    closeLabel?: string;
+    showClose?: boolean;
+    closeOnFinish?: boolean;
+};
+declare var __VLS_9: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    finished: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onFinished?: (() => any) | undefined;
+}>, {
+    size: DialogSize;
+    height: string;
+    defaultOpen: boolean;
+    open: boolean;
+    showClose: boolean;
+    closeOnFinish: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/composite/wizard/WizardStep.vue.d.ts

@@ -1,7 +1,10 @@
 import { WizardStepProps } from './types';
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    default?: () => unknown;
+    /** A picture or a diagram above the headline, in place of the icon tile. */
+    hero?: () => unknown;
+    /** Secondary actions drawn in the wizard footer, before Cancel and the main action, while this step shows. */
+    actions?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<WizardStepProps, {
     active: import('vue').ComputedRef<boolean>;
@@ -9,6 +12,10 @@ declare const __VLS_base: import('vue').DefineComponent<WizardStepProps, {
     footer: boolean;
     type: import('./types').WizardStepType;
     headline: string;
+    nextDisabled: boolean;
+    showNext: boolean;
+    showBack: boolean;
+    lazy: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/wizard/types.d.ts

@@ -1,12 +1,29 @@
-export type WizardStepType = 'normal' | 'welcome';
+import { Component } from 'vue';
+/**
+ * `'welcome'` is the entry step and only offers the forward action; `'done'`
+ * is the closing step: a success hero, no Back or Cancel, and Finish.
+ */
+export type WizardStepType = 'normal' | 'welcome' | 'done';
+/**
+ * Where the wizard shows its steps: a rail beside the step (`'rail'`), a
+ * stepper band above it (`'header'`), the rail when the wizard is at least
+ * 600px wide and the band below that (`'auto'`), or nowhere (`'none'`).
+ */
+export type WizardStepper = 'auto' | 'rail' | 'header' | 'none';
 /** A guard may return `false` (or resolve `false`) to block the step change. */
 export type MaybePromise<T> = T | Promise<T>;
 export type WizardStepProps = {
     /** Unique key the wizard uses to identify this step. */
     stepKey: string;
-    /** `'welcome'` is the entry step and only offers the forward action. */
     type?: WizardStepType;
+    /** The step's title, above its content. */
     headline?: string;
+    /** A shorter name for the step list; falls back to `headline`. */
+    label?: string;
+    /** One short line under the headline. */
+    description?: string;
+    /** An icon shown in a tile beside the headline; the `#hero` slot replaces it with a picture or a diagram. */
+    icon?: Component;
     /** Omitted on the final step: the forward button then becomes Apply. */
     nextStepKey?: string | (() => string);
     /** Omitted falls back to the step registered just before this one. */
@@ -19,12 +36,23 @@ export type WizardStepProps = {
     finished?: () => MaybePromise<void>;
     /** `false` hides the shared footer while this step is active. */
     footer?: boolean;
+    /** The forward button's label on this step. */
+    nextLabel?: string;
+    /** Disables the forward button, for a step that is not complete yet. */
+    nextDisabled?: boolean;
+    /** `false` hides the forward button, for a step that moves on by itself or through its own choices. */
+    showNext?: boolean;
+    /** `false` hides Back on this step. */
+    showBack?: boolean;
+    /** Renders the content only while the step is shown, instead of keeping it mounted for its form state. */
+    lazy?: boolean;
 };
 export type WizardFooterConfig = boolean | {
     startLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
     applyLabel?: string;
+    finishLabel?: string;
     cancelLabel?: string;
 };
 export type WizardStepChange = {

package/dist/components/composite/wizard/wizardContext.d.ts

@@ -1,12 +1,19 @@
-import { ComputedRef, InjectionKey, Ref } from 'vue';
+import { ComputedRef, InjectionKey, Ref, Slots } from 'vue';
 import { WizardStepProps } from './types';
 /** A mounted `WizardStep` as seen by its `Wizard`. `props` stays reactive. */
 export type WizardStepRegistration = {
     key: string;
     props: WizardStepProps;
+    /** The step's slots: the wizard draws `#actions` in its footer. */
+    slots: Slots;
+    /** The step's element, which orders a step mounted later (a `v-if`) among the others. */
+    element: () => HTMLElement | null | undefined;
 };
+/** Which way the wizard last moved, for the step's entrance. */
+export type WizardDirection = 'forward' | 'back' | undefined;
 export type WizardContext = {
     activeStepKey: ComputedRef<string | undefined>;
+    direction: Ref<WizardDirection>;
     steps: Ref<WizardStepRegistration[]>;
     busy: Ref<boolean>;
     register: (registration: WizardStepRegistration) => void;

package/dist/components/primitives/dialog/Dialog.vue.d.ts

@@ -17,6 +17,8 @@ type __VLS_Props = {
     closeLabel?: string;
     /** Hides the header close affordance for fixed-flow dialogs that own their dismiss path. */
     showClose?: boolean;
+    /** Drops the body's padding and scrolling, for content that lays out and scrolls itself (a `Wizard`). */
+    flush?: boolean;
 };
 declare var __VLS_14: {}, __VLS_71: {}, __VLS_79: {};
 type __VLS_Slots = {} & {
@@ -43,6 +45,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     defaultOpen: boolean;
     open: boolean;
+    flush: boolean;
     showClose: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/i18n/text.d.ts

@@ -89,6 +89,9 @@ export declare const englishUiText: {
     readonly Next: "Next";
     readonly Previous: "Previous";
     readonly "Step {step} of {total}": "Step {step} of {total}";
+    readonly Back: "Back";
+    readonly Finish: "Finish";
+    readonly Steps: "Steps";
     readonly "Password:": "Password:";
     readonly "Enter password": "Enter password";
     readonly "Unsaved changes": "Unsaved changes";

package/dist/index.d.ts

@@ -176,7 +176,8 @@ export type { LostChangeResult, MessageBox as MessageBoxController, MessageBoxBu
 export { messageBoxKey } from './components/composite/message-box/types';
 export { default as Wizard } from './components/composite/wizard/Wizard.vue';
 export { default as WizardStep } from './components/composite/wizard/WizardStep.vue';
-export type { WizardFooterConfig, WizardStepChange, WizardStepProps, WizardStepType } from './components/composite/wizard/types';
+export { default as WizardDialog } from './components/composite/wizard/WizardDialog.vue';
+export type { WizardFooterConfig, WizardStepChange, WizardStepProps, WizardStepType, WizardStepper } from './components/composite/wizard/types';
 export { default as AboutDialog } from './components/composite/about-dialog/AboutDialog.vue';
 export type { AboutCheckState, AboutVersionInfo } from './components/composite/about-dialog/types';
 export { default as AppRoot } from './components/app/app-root/AppRoot.vue';