@marianmeres/stuic 3.59.0 → 3.61.0

package/dist/actions/onboarding/OnboardingShell.svelte

@@ -1,6 +1,9 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
+	import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
+
+	type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
 
 	export interface Props {
 		step: TourStepDef;
@@ -17,6 +20,12 @@
 		skip: () => void;
 		//
 		classControls?: string;
+		/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
+		showSteps?: boolean;
+		/** Override props for the prev button */
+		prevButtonProps?: ButtonOverrides;
+		/** Override props for the next/finish button */
+		nextButtonProps?: ButtonOverrides;
 	}
 </script>
 
@@ -38,6 +47,9 @@
 		prev,
 		skip,
 		classControls,
+		showSteps = true,
+		prevButtonProps,
+		nextButtonProps,
 	}: Props = $props();
 
 	const context: TourShellContext = $derived({
@@ -60,14 +72,23 @@
 	};
 
 	const ICON_SIZE = 24;
+
+	const _finishLabel = $derived(isLast ? (step.finishLabel ?? labels.finish) : "");
 </script>
 
 {#if shell}
 	{@render shell(context)}
 {:else}
 	<div class="stuic-onboarding-shell">
-		{#if step.title}
-			<div class="stuic-onboarding-title">{step.title}</div>
+		{#if step.title || showSteps}
+			<div class="stuic-onboarding-header">
+				{#if step.title}
+					<div class="stuic-onboarding-title">{step.title}</div>
+				{/if}
+				{#if showSteps}
+					<span class="stuic-onboarding-steps">{index + 1} / {total}</span>
+				{/if}
+			</div>
 		{/if}
 		{#if step.content}
 			<div class="stuic-onboarding-content">
@@ -75,32 +96,35 @@
 			</div>
 		{/if}
 		<div class="stuic-onboarding-footer">
-			<span class="stuic-onboarding-steps">{index + 1} / {total}</span>
+			{#if !isLast}
+				<button class="stuic-onboarding-btn-skip" onclick={skip}>
+					{step.skipLabel ?? labels.skip}
+				</button>
+			{/if}
 			<div class="stuic-onboarding-actions">
-				{#if !isLast}
-					<button class="stuic-onboarding-btn-skip" onclick={skip}>
-						{step.skipLabel ?? labels.skip}
-					</button>
-				{/if}
 				{#if !isFirst}
 					<Button
 						onclick={prev}
 						class={twMerge(BUTTON_CLS, classControls)}
 						{...BUTTON_PROPS}
+						{...prevButtonProps}
 					>
 						{@html iconChevronLeft({ size: ICON_SIZE })}
 					</Button>
 				{/if}
 				<Button
 					onclick={next}
-					class={twMerge(BUTTON_CLS, classControls)}
+					class={twMerge(BUTTON_CLS, _finishLabel && "pl-2 pr-3", classControls)}
 					{...BUTTON_PROPS}
+					aspect1={!_finishLabel}
 					intent="primary"
 					variant="solid"
+					{...nextButtonProps}
 				>
 					{@html isLast
 						? iconCheck({ size: ICON_SIZE })
 						: iconChevronRight({ size: ICON_SIZE })}
+					{#if _finishLabel}{_finishLabel}{/if}
 				</Button>
 			</div>
 		</div>

package/dist/actions/onboarding/OnboardingShell.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
+import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
+type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
 export interface Props {
     step: TourStepDef;
     /** 0-based index of this step */
@@ -14,6 +16,12 @@ export interface Props {
     prev: () => void;
     skip: () => void;
     classControls?: string;
+    /** Whether to show the step counter (e.g. "1 / 3"). Default: true */
+    showSteps?: boolean;
+    /** Override props for the prev button */
+    prevButtonProps?: ButtonOverrides;
+    /** Override props for the next/finish button */
+    nextButtonProps?: ButtonOverrides;
 }
 declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
 type OnboardingShell = ReturnType<typeof OnboardingShell>;

package/dist/actions/onboarding/index.css

@@ -23,6 +23,13 @@
 	border-radius: var(--stuic-onboarding-shell-radius, var(--stuic-radius));
 }
 
+.stuic-onboarding-header {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: calc(var(--spacing) * 2);
+}
+
 .stuic-onboarding-title {
 	font-weight: 600;
 	font-size: var(--stuic-onboarding-title-size);
@@ -50,6 +57,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--stuic-onboarding-footer-gap);
+	margin-left: auto;
 }
 
 .stuic-onboarding-btn-skip {

package/dist/actions/onboarding/onboarding.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { SpotlightPosition } from "../spotlight/spotlight.svelte.js";
 import type { THC } from "../../components/Thc/Thc.svelte";
+import { type Props as ShellProps } from "./OnboardingShell.svelte";
 /**
  * Definition of a single step in an onboarding tour.
  */
@@ -96,6 +97,12 @@ export interface TourOptions {
     indexOffset?: number;
     /** Overrides steps.length for display purposes (the `total` value passed to the shell) */
     totalSteps?: number;
+    /** Whether to show the step counter (e.g. "1 / 3") in the default shell. Default: true */
+    showSteps?: boolean;
+    /** Override props (variant, intent, size, roundedFull) for the prev button */
+    prevButtonProps?: ShellProps["prevButtonProps"];
+    /** Override props (variant, intent, size, roundedFull) for the next/finish button */
+    nextButtonProps?: ShellProps["nextButtonProps"];
 }
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.

package/dist/actions/onboarding/onboarding.svelte.js

@@ -1,5 +1,5 @@
 import { spotlight } from "../spotlight/spotlight.svelte.js";
-import OnboardingShell from "./OnboardingShell.svelte";
+import OnboardingShell, {} from "./OnboardingShell.svelte";
 import { StorageAbstraction } from "../../utils/storage-abstraction.js";
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.
@@ -45,7 +45,7 @@ export function createTour(options) {
         next: "Next",
         prev: "Back",
         skip: "Skip",
-        finish: "Finish",
+        finish: "",
         ...options.labels,
     };
     // Escape key listener — active only while tour is running
@@ -99,6 +99,9 @@ export function createTour(options) {
                 isLast: displayIndex === displayTotal - 1,
                 labels: resolvedLabels,
                 shell: options.shell,
+                showSteps: options.showSteps ?? true,
+                prevButtonProps: options.prevButtonProps,
+                nextButtonProps: options.nextButtonProps,
                 next,
                 prev,
                 skip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.59.0",
+  "version": "3.61.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",