@synopackageland/ui 0.16.4 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.17.0 (2026-10-26)
+
+Visual change: `Wizard` and `WizardDialog` follow DSM's wizard window. Props, slots, events and exposed methods keep working except where noted.
+
+- `Wizard` has a fixed header: the wizard's name small (`title`), the current step's `headline` large, and a compact progress bar (a segment per step) with "Step n of total" beside it, then one line. The step no longer repeats its headline; it opens with its hero and its `description`. The header's title takes the focus on a step change and is described by the progress.
+- The footer keeps the main action last at the right edge on every step: the step's `#actions` at the start, then Cancel (when `cancellable`), Back and the main action together at the end. Back was at the start.
+- `stepper`: `auto` / `bar` is the header bar; `rail` lists the steps beside the step from `rail-min-width` (the bar below it); `header` (0.16's numbered band) now means the bar. `Wizard description` is deprecated and no longer shown.
+- `WizardDialog`: no Cancel in the footer (`cancellable` defaults to `false`); the close button sits beside the wizard's name in one header band. Closing it, with the button or Escape, emits `cancel`. It opens like a DSM modal window: a light scrim instead of the dark mask, a soft glow all round (`--ui-shadow-modal`), rounder corners, and a press outside neither closes it nor reaches the app.
+- `Dialog scrim` (`dim` | `light` | `none`), `close-on-outside` and `header-divider`, for a window-like dialog of your own. New tokens `--ui-overlay-light` and `--ui-shadow-modal`, light and dark.
+- A quiet text action at the start of the wizard's footer (a ghost `#actions` button) shows its whole label; it was cut by the offset that lines it up with the step. A step scrolls a focused card into view with a small gap above and below.
+- `Dialog` opens with the focus on the first visible field or button; a focusable element in a hidden part (a wizard's later step) no longer sends it to the close button.
+- `pnpm check:wizard`: a real-browser check of `WizardDialog` at 960x600 and 1280x800, light and dark.
+
 ## 0.16.4 (2026-10-25)
 
 - `ConnectionTopology` compact lanes no longer switch between wrap levels without end in a tight lane (a row of three cards at DPR 2): Chrome can report the track sizes of the last drawn frame right after a lane's words change, so the fit is now a first guess that each lane checks once drawn, wrapping a level more or less, and never back to a level it was drawn failing at.

package/README.md

@@ -302,11 +302,13 @@ lets dialogs be dragged out of the window, within the browser viewport. See
 
 ### 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).
+`WizardDialog` opens a multi-step setup in a large app-local dialog, built like
+DSM's wizards: a fixed header with the wizard's name, the step's title and a
+compact progress bar; a scrolling step with its hero and one line; and a fixed
+footer with Back and the one main action together at the end. The app behind
+takes a light scrim, and a press on it does not close the wizard. `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
 

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

@@ -3,25 +3,25 @@ type __VLS_Props = {
     /** Initial / external reset key. Internal navigation keeps working when the caller does not bind it back. */
     activeStepKey?: string;
     footer?: WizardFooterConfig;
-    /** Shows the Cancel action in the footer. */
+    /** Shows Cancel in the footer, beside Back. A wizard in a dialog leaves it to the header's close button. */
     cancellable?: boolean;
     ariaLabel?: string;
-    /** The wizard's name, at the top of the step rail. */
+    /** The wizard's name, small above the step title. `WizardDialog` puts it in the dialog header instead. */
     title?: string;
-    /** One short line under the title in the step rail. */
+    /** @deprecated Not shown since 0.17; put the line in the first step's `description`. */
     description?: string;
-    /** Where the steps show; see `WizardStepper`. */
+    /** How the header shows the progress; 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;
     /** On a page: takes the height left below it in its scroll container, so
-     * the rail, the band and the footer stay in view and only the step scrolls. */
+     * the header and the footer stay in view and only the step scrolls. */
     fit?: boolean;
     /** The least height `fit` takes; in a shorter window the page scrolls instead. */
     fitMinHeight?: number;
-    /** With `stepper="auto"`, the wizard width from which the rail shows; narrower shows the band. */
+    /** With `stepper="rail"`, the wizard width from which the rail shows; narrower shows the bar. */
     railMinWidth?: number;
     progressText?: (current: number, total: number) => string;
 };
@@ -29,7 +29,7 @@ declare function toNextStep(): Promise<void>;
 declare function toPreviousStep(): Promise<void>;
 declare function finish(): Promise<void>;
 declare function cancel(): void;
-declare var __VLS_11: {}, __VLS_19: {
+declare var __VLS_6: {}, __VLS_14: {
     nextStep: typeof toNextStep;
     previousStep: typeof toPreviousStep;
     finish: typeof finish;
@@ -40,9 +40,9 @@ declare var __VLS_11: {}, __VLS_19: {
     stepKey: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    footer?: (props: typeof __VLS_19) => any;
+    footer?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     activeStepKey: import('vue').ComputedRef<string>;

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

@@ -1,7 +1,7 @@
 import { WizardStepProps } from './types';
 type __VLS_Slots = {
     default?: () => unknown;
-    /** A picture or a diagram above the headline, in place of the icon tile. */
+    /** A picture or a diagram at the top of the step, 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;

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

@@ -5,24 +5,25 @@ import { Component } from 'vue';
  */
 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'`).
+ * How the wizard shows its progress: a segmented bar beside the step title in
+ * the header (`'auto'`, `'bar'`), a rail listing the steps beside the step
+ * from `railMinWidth` and the bar below that (`'rail'`), or only the
+ * "Step n of total" line (`'none'`). `'header'` is the bar, kept for 0.16.
  */
-export type WizardStepper = 'auto' | 'rail' | 'header' | 'none';
+export type WizardStepper = 'auto' | 'bar' | '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;
     type?: WizardStepType;
-    /** The step's title, above its content. */
+    /** The step's title, shown large in the wizard header while the step shows. */
     headline?: string;
     /** A shorter name for the step list; falls back to `headline`. */
     label?: string;
-    /** One short line under the headline. */
+    /** One short line at the top of the step, under its hero. */
     description?: string;
-    /** An icon shown in a tile beside the headline; the `#hero` slot replaces it with a picture or a diagram. */
+    /** An icon shown in a tile beside the description; 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);

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

@@ -16,6 +16,8 @@ export type WizardContext = {
     direction: Ref<WizardDirection>;
     steps: Ref<WizardStepRegistration[]>;
     busy: Ref<boolean>;
+    /** The id of the header's step title, which labels the shown step. */
+    headingId: string;
     register: (registration: WizardStepRegistration) => void;
     unregister: (key: string) => void;
 };

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

@@ -19,14 +19,20 @@ type __VLS_Props = {
     showClose?: boolean;
     /** Drops the body's padding and scrolling, for content that lays out and scrolls itself (a `Wizard`). */
     flush?: boolean;
+    /** `false` drops the line under the header, for content whose own header continues it (a `Wizard`'s step title). */
+    headerDivider?: boolean;
+    /** `false` keeps the dialog open when the user presses outside it, as DSM's modal windows do; Escape still closes it. */
+    closeOnOutside?: boolean;
+    /** The mask over the app behind: `dim` (default), `light` (a faint tint, as DSM leaves the window behind a wizard) or `none`. It blocks presses in each case. */
+    scrim?: 'dim' | 'light' | 'none';
 };
-declare var __VLS_14: {}, __VLS_71: {}, __VLS_79: {};
+declare var __VLS_14: {}, __VLS_73: {}, __VLS_81: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_71) => any;
+    default?: (props: typeof __VLS_73) => any;
 } & {
-    footer?: (props: typeof __VLS_79) => any;
+    footer?: (props: typeof __VLS_81) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
@@ -47,6 +53,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     open: boolean;
     flush: boolean;
     showClose: boolean;
+    headerDivider: boolean;
+    closeOnOutside: boolean;
+    scrim: "dim" | "light" | "none";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;