@marianmeres/stuic 3.43.3 → 3.44.0

package/dist/actions/onboarding/OnboardingShell.svelte

@@ -15,13 +15,30 @@
 		next: () => void;
 		prev: () => void;
 		skip: () => void;
+		//
+		classControls?: string;
 	}
 </script>
 
 <script lang="ts">
 	import Thc from "../../components/Thc/Thc.svelte";
+	import Button from "../../components/Button/Button.svelte";
+	import { iconChevronLeft, iconChevronRight, iconCheck } from "../../icons/index.js";
+	import { twMerge } from "../../utils/tw-merge.js";
 
-	let { step, index, total, isFirst, isLast, labels, shell, next, prev, skip }: Props = $props();
+	let {
+		step,
+		index,
+		total,
+		isFirst,
+		isLast,
+		labels,
+		shell,
+		next,
+		prev,
+		skip,
+		classControls,
+	}: Props = $props();
 
 	const context: TourShellContext = $derived({
 		step,
@@ -33,6 +50,16 @@
 		prev,
 		skip,
 	});
+
+	const BUTTON_CLS = "p-0";
+
+	const BUTTON_PROPS = {
+		aspect1: true,
+		variant: "soft",
+		roundedFull: true,
+	};
+
+	const ICON_SIZE = 24;
 </script>
 
 {#if shell}
@@ -56,15 +83,25 @@
 					</button>
 				{/if}
 				{#if !isFirst}
-					<button class="stuic-onboarding-btn-prev" onclick={prev}>
-						{step.prevLabel ?? labels.prev}
-					</button>
+					<Button
+						onclick={prev}
+						class={twMerge(BUTTON_CLS, classControls)}
+						{...BUTTON_PROPS}
+					>
+						{@html iconChevronLeft({ size: ICON_SIZE })}
+					</Button>
 				{/if}
-				<button class="stuic-onboarding-btn-next" onclick={next}>
-					{isLast
-						? (step.finishLabel ?? labels.finish)
-						: (step.nextLabel ?? labels.next)}
-				</button>
+				<Button
+					onclick={next}
+					class={twMerge(BUTTON_CLS, classControls)}
+					{...BUTTON_PROPS}
+					intent="primary"
+					variant="solid"
+				>
+					{@html isLast
+						? iconCheck({ size: ICON_SIZE })
+						: iconChevronRight({ size: ICON_SIZE })}
+				</Button>
 			</div>
 		</div>
 	</div>

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

@@ -13,6 +13,7 @@ export interface Props {
     next: () => void;
     prev: () => void;
     skip: () => void;
+    classControls?: string;
 }
 declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
 type OnboardingShell = ReturnType<typeof OnboardingShell>;

package/dist/actions/onboarding/index.css

@@ -1,23 +1,19 @@
 /* Onboarding shell tokens */
 :root {
+	--stuic-onboarding-shell-bg: var(--stuic-color-background, #fff);
 	--stuic-onboarding-shell-padding: calc(var(--spacing) * 3);
 	--stuic-onboarding-shell-gap: calc(var(--spacing) * 2);
 	--stuic-onboarding-shell-min-width: 200px;
 	--stuic-onboarding-shell-max-width: 320px;
 	--stuic-onboarding-title-size: var(--text-base);
 	--stuic-onboarding-content-size: var(--text-sm);
-	--stuic-onboarding-footer-gap: calc(var(--spacing) * 1.5);
+	--stuic-onboarding-footer-gap: calc(var(--spacing) * 3);
 	--stuic-onboarding-steps-size: var(--text-xs);
-	--stuic-onboarding-btn-padding-x: calc(var(--spacing) * 2.5);
-	--stuic-onboarding-btn-padding-y: calc(var(--spacing) * 1);
-	--stuic-onboarding-btn-radius: calc(var(--spacing) * 1);
 	--stuic-onboarding-btn-font-size: var(--text-xs);
-	--stuic-onboarding-btn-primary-bg: var(--stuic-color-primary, #737373);
-	--stuic-onboarding-btn-primary-fg: var(--stuic-color-primary-foreground, #fff);
-	--stuic-onboarding-btn-secondary-bg: oklch(from currentColor l c h / 0.08);
 }
 
 .stuic-onboarding-shell {
+	background: var(--stuic-onboarding-shell-bg);
 	display: flex;
 	flex-direction: column;
 	gap: var(--stuic-onboarding-shell-gap);
@@ -41,9 +37,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: calc(var(--spacing) * 2);
-	padding-top: calc(var(--spacing) * 2);
-	margin-top: calc(var(--spacing) * 1);
-	border-top: 1px solid var(--stuic-spotlight-annotation-border, rgba(0, 0, 0, 0.1));
+	margin-top: calc(var(--spacing) * 2);
 }
 
 .stuic-onboarding-steps {
@@ -57,37 +51,14 @@
 	gap: var(--stuic-onboarding-footer-gap);
 }
 
-/* Shared button base */
-.stuic-onboarding-btn-skip,
-.stuic-onboarding-btn-prev,
-.stuic-onboarding-btn-next {
+.stuic-onboarding-btn-skip {
 	font-size: var(--stuic-onboarding-btn-font-size);
-	padding: var(--stuic-onboarding-btn-padding-y) var(--stuic-onboarding-btn-padding-x);
-	border-radius: var(--stuic-onboarding-btn-radius);
 	line-height: 1.5;
+	opacity: 0.45;
 	transition:
 		opacity 0.15s,
 		filter 0.15s;
-}
-
-.stuic-onboarding-btn-skip {
-	opacity: 0.45;
 	&:hover {
 		opacity: 0.85;
 	}
 }
-
-.stuic-onboarding-btn-prev {
-	background: var(--stuic-onboarding-btn-secondary-bg);
-	&:hover {
-		filter: brightness(0.9);
-	}
-}
-
-.stuic-onboarding-btn-next {
-	background: var(--stuic-onboarding-btn-primary-bg);
-	color: var(--stuic-onboarding-btn-primary-fg);
-	&:hover {
-		filter: brightness(0.9);
-	}
-}

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

@@ -164,6 +164,8 @@ export function createTour(options) {
     }
     // -- Public API ---------------------------------------------------------------------
     function start() {
+        if (active)
+            return;
         if (store && store.has(options.storageKey))
             return;
         options.onStart?.();

package/dist/components/AssetsPreview/_internal/AssetsPreviewContent.svelte

@@ -530,9 +530,9 @@
 			<div
 				class={SLIDE_PANEL_CLASS}
 				style="transition-duration: {slidePhase === 'sliding' ? slideDuration : 0}ms;"
-				class:translate-x-0={slidePhase === 'setup'}
-				class:-translate-x-full={slidePhase === 'sliding' && slideDirection === 'next'}
-				class:translate-x-full={slidePhase === 'sliding' && slideDirection === 'prev'}
+				class:translate-x-0={slidePhase === "setup"}
+				class:-translate-x-full={slidePhase === "sliding" && slideDirection === "next"}
+				class:translate-x-full={slidePhase === "sliding" && slideDirection === "prev"}
 			>
 				{@render staticAssetPanel(outgoingAsset)}
 			</div>
@@ -542,9 +542,9 @@
 		<div
 			class={SLIDE_PANEL_CLASS}
 			style="transition-duration: {slidePhase === 'sliding' ? slideDuration : 0}ms;"
-			class:translate-x-0={slidePhase === 'idle' || slidePhase === 'sliding'}
-			class:translate-x-full={slidePhase === 'setup' && slideDirection === 'next'}
-			class:-translate-x-full={slidePhase === 'setup' && slideDirection === 'prev'}
+			class:translate-x-0={slidePhase === "idle" || slidePhase === "sliding"}
+			class:translate-x-full={slidePhase === "setup" && slideDirection === "next"}
+			class:-translate-x-full={slidePhase === "setup" && slideDirection === "prev"}
 		>
 			{#if previewAsset.isImage}
 				<div
@@ -608,12 +608,17 @@
 							class="absolute inset-0 flex items-center justify-center pointer-events-none"
 							transition:fade={{ duration: 150 }}
 						>
-							<SpinnerCircleOscillate class="size-10 text-(--stuic-color-muted-foreground)" />
+							<SpinnerCircleOscillate
+								class="size-10 text-(--stuic-color-muted-foreground)"
+							/>
 						</div>
 					{/if}
 				</div>
 			{:else}
-				<div use:swipeable class="w-full h-full flex flex-col items-center justify-center">
+				<div
+					use:swipeable
+					class="w-full h-full flex flex-col items-center justify-center"
+				>
 					<div>
 						{@html getAssetIcon(previewAsset.ext)({
 							size: 32,
@@ -629,7 +634,12 @@
 	</div>
 
 	{#if assets?.length > 1 && !noPrevNext}
-		<div class={twMerge("absolute inset-0 flex justify-between pointer-events-none", prevNextBottom ? "items-end pb-4" : "items-center")}>
+		<div
+			class={twMerge(
+				"absolute inset-0 flex justify-between pointer-events-none",
+				prevNextBottom ? "items-end pb-4" : "items-center"
+			)}
+		>
 			<Button
 				class={twMerge(BUTTON_CLS, "ml-4", classControls)}
 				onclick={previous}
@@ -705,7 +715,10 @@
 					type="button"
 					onclick={(e) => {
 						e.preventDefault();
-						forceDownload(resolveUrl(String(previewAsset.url.original), baseUrl), previewAsset?.name || "");
+						forceDownload(
+							resolveUrl(String(previewAsset.url.original), baseUrl),
+							previewAsset?.name || ""
+						);
 					}}
 					aria-label={t("download")}
 					tooltip={t("download")}

package/package.json

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