@marianmeres/stuic 3.58.0 → 3.60.0

package/dist/actions/onboarding/OnboardingShell.svelte

@@ -17,6 +17,8 @@
 		skip: () => void;
 		//
 		classControls?: string;
+		/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
+		showSteps?: boolean;
 	}
 </script>
 
@@ -38,6 +40,7 @@
 		prev,
 		skip,
 		classControls,
+		showSteps = true,
 	}: Props = $props();
 
 	const context: TourShellContext = $derived({
@@ -60,14 +63,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,13 +87,12 @@
 			</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}
@@ -93,14 +104,16 @@
 				{/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"
 				>
 					{@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

@@ -14,6 +14,8 @@ export interface Props {
     prev: () => void;
     skip: () => void;
     classControls?: string;
+    /** Whether to show the step counter (e.g. "1 / 3"). Default: true */
+    showSteps?: boolean;
 }
 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

@@ -96,6 +96,8 @@ 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;
 }
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.

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

@@ -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,7 @@ export function createTour(options) {
                 isLast: displayIndex === displayTotal - 1,
                 labels: resolvedLabels,
                 shell: options.shell,
+                showSteps: options.showSteps ?? true,
                 next,
                 prev,
                 skip,

package/dist/components/PricingTable/PricingTable.svelte

@@ -276,8 +276,8 @@
 							</Button>
 						{:else if tier.ctaLabel}
 							<Button
-								intent={tier.ctaIntent ?? (tier.highlighted ? "primary" : undefined)}
-								variant={tier.ctaVariant ?? (tier.highlighted ? "solid" : "outline")}
+								intent={tier.ctaIntent ?? "primary"}
+								variant={tier.ctaVariant ?? "solid"}
 								href={tier.ctaHref}
 								onclick={tier.ctaOnClick
 									? () => tier.ctaOnClick!(tier, billingPeriod)

package/dist/components/PricingTable/index.css

@@ -53,6 +53,17 @@
 			transform var(--stuic-pricing-table-transition, var(--stuic-transition));
 	}
 
+	/* ============================================================================
+	   TIER CARD HOVER
+	   ============================================================================ */
+
+	.stuic-pricing-table-tier:not([data-disabled]):hover {
+		border-color: var(
+			--stuic-pricing-table-tier-border-color-hover,
+			var(--stuic-color-primary)
+		);
+	}
+
 	/* ============================================================================
 	   HIGHLIGHTED TIER
 	   ============================================================================ */

package/package.json

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