@gradio/tabs 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/tabs
 
+## 0.5.0
+
+### Features
+
+- [#11783](https://github.com/gradio-app/gradio/pull/11783) [`f407daf`](https://github.com/gradio-app/gradio/commit/f407daf8046f37e042ab8b86730ff0ab8d174bcf) - Add Walkthrough and Step compoents to facilitate multi-step workflows.  Thanks @pngwn!
+
+## 0.4.5
+
+### Fixes
+
+- [#11344](https://github.com/gradio-app/gradio/pull/11344) [`b961441`](https://github.com/gradio-app/gradio/commit/b961441780d70c82504141bd4deae7b3290c2227) - Fixes default tab label.  Thanks @dawoodkhan82!
+
 ## 0.4.4
 
 ### Fixes

package/Index.svelte

@@ -6,6 +6,7 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
 	import Tabs, { type Tab } from "./shared/Tabs.svelte";
+	import Walkthrough from "./shared/Walkthrough.svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -14,6 +15,7 @@
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
 	export let initial_tabs: Tab[] = [];
+	export let name: "tabs" | "walkthrough" = "tabs";
 	export let gradio:
 		| Gradio<{
 				change: never;
@@ -24,14 +26,28 @@
 	$: dispatch("prop_change", { selected });
 </script>
 
-<Tabs
-	{visible}
-	{elem_id}
-	{elem_classes}
-	bind:selected
-	on:change={() => gradio?.dispatch("change")}
-	on:select={(e) => gradio?.dispatch("select", e.detail)}
-	{initial_tabs}
->
-	<slot />
-</Tabs>
+{#if name === "walkthrough"}
+	<Walkthrough
+		{visible}
+		{elem_id}
+		{elem_classes}
+		bind:selected
+		on:change={() => gradio?.dispatch("change")}
+		on:select={(e) => gradio?.dispatch("select", e.detail)}
+		{initial_tabs}
+	>
+		<slot />
+	</Walkthrough>
+{:else}
+	<Tabs
+		{visible}
+		{elem_id}
+		{elem_classes}
+		bind:selected
+		on:change={() => gradio?.dispatch("change")}
+		on:select={(e) => gradio?.dispatch("select", e.detail)}
+		{initial_tabs}
+	>
+		<slot />
+	</Tabs>
+{/if}

package/Walkthrough.stories.svelte

@@ -0,0 +1,116 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Tabs from "./Index.svelte";
+	import TabItem from "../tabitem/Index.svelte";
+</script>
+
+<Meta title="Components/Walkthrough" component={Tabs} />
+
+<Template let:args>
+	<Tabs {...args} name="walkthrough">
+		<TabItem
+			order={0}
+			id="tab-1"
+			label="Image Tab"
+			gradio={undefined}
+			visible
+			interactive
+			elem_classes={["editor-tabitem"]}
+			scale={0}
+		>
+			<img
+				style="width: 200px;"
+				alt="Cheetah"
+				src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
+			/>
+		</TabItem>
+		<TabItem
+			order={1}
+			id="tab-2"
+			label="Hidden Tab"
+			gradio={undefined}
+			visible={false}
+			interactive
+			elem_classes={["editor-tabitem"]}
+			scale={0}
+		>
+			Secret Tab
+		</TabItem>
+		<TabItem
+			order={2}
+			id="tab-3"
+			label="Visible Tab"
+			gradio={undefined}
+			visible
+			interactive
+			elem_classes={["editor-tabitem"]}
+			scale={0}
+		>
+			Visible Tab
+		</TabItem>
+		<TabItem
+			order={3}
+			id="tab-4"
+			label="Visible Tab"
+			gradio={undefined}
+			visible
+			interactive
+			elem_classes={["editor-tabitem"]}
+			scale={0}
+		>
+			Visible Tab
+		</TabItem>
+	</Tabs>
+</Template>
+
+<Story name="Tabs Walkthrough" args={{}} />
+
+<Story name="TabsLastInvisible" args={{}}>
+	<Tabs selected="tab-1" gradio={undefined} name="walkthrough">
+		<TabItem
+			order={0}
+			id="tab-1"
+			label="This is visible tab 1"
+			gradio={undefined}
+			visible
+			interactive
+			scale={0}
+		></TabItem>
+		<TabItem
+			order={1}
+			id="tab-2"
+			label="This is visible tab 2"
+			gradio={undefined}
+			visible
+			interactive
+			scale={0}
+		></TabItem>
+		<TabItem
+			order={2}
+			id="tab-3"
+			label="This is visible tab 3"
+			gradio={undefined}
+			visible
+			interactive
+			scale={0}
+		></TabItem>
+		<TabItem
+			order={3}
+			id="tab-4"
+			label="This is invisible tab 4"
+			gradio={undefined}
+			visible={false}
+			interactive
+			scale={0}
+		></TabItem>
+		<TabItem
+			order={4}
+			id="tab-5"
+			label="This is invisible tab 5"
+			gradio={undefined}
+			visible={false}
+			interactive
+			scale={0}
+		></TabItem>
+	</Tabs>
+</Story>

package/dist/Index.svelte

@@ -3,25 +3,40 @@
 
 <script>import { createEventDispatcher } from "svelte";
 import Tabs, {} from "./shared/Tabs.svelte";
+import Walkthrough from "./shared/Walkthrough.svelte";
 const dispatch = createEventDispatcher();
 export let visible = true;
 export let elem_id = "";
 export let elem_classes = [];
 export let selected;
 export let initial_tabs = [];
+export let name = "tabs";
 export let gradio;
-$:
-  dispatch("prop_change", { selected });
+$: dispatch("prop_change", { selected });
 </script>
 
-<Tabs
-	{visible}
-	{elem_id}
-	{elem_classes}
-	bind:selected
-	on:change={() => gradio?.dispatch("change")}
-	on:select={(e) => gradio?.dispatch("select", e.detail)}
-	{initial_tabs}
->
-	<slot />
-</Tabs>
+{#if name === "walkthrough"}
+	<Walkthrough
+		{visible}
+		{elem_id}
+		{elem_classes}
+		bind:selected
+		on:change={() => gradio?.dispatch("change")}
+		on:select={(e) => gradio?.dispatch("select", e.detail)}
+		{initial_tabs}
+	>
+		<slot />
+	</Walkthrough>
+{:else}
+	<Tabs
+		{visible}
+		{elem_id}
+		{elem_classes}
+		bind:selected
+		on:change={() => gradio?.dispatch("change")}
+		on:select={(e) => gradio?.dispatch("select", e.detail)}
+		{initial_tabs}
+	>
+		<slot />
+	</Tabs>
+{/if}

package/dist/Index.svelte.d.ts

@@ -4,11 +4,12 @@ import type { Gradio, SelectData } from "@gradio/utils";
 import { type Tab } from "./shared/Tabs.svelte";
 declare const __propDef: {
     props: {
-        visible?: boolean | undefined;
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
+        visible?: boolean;
+        elem_id?: string;
+        elem_classes?: string[];
         selected: number | string;
-        initial_tabs?: Tab[] | undefined;
+        initial_tabs?: Tab[];
+        name?: "tabs" | "walkthrough";
         gradio: Gradio<{
             change: never;
             select: SelectData;
@@ -22,6 +23,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;

package/dist/shared/OverflowIcon.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/shared/Tabs.svelte

@@ -14,8 +14,7 @@ let visible_tabs = [...initial_tabs];
 let overflow_tabs = [];
 let overflow_menu_open = false;
 let overflow_menu;
-$:
-  has_tabs = tabs.length > 0;
+$: has_tabs = tabs.length > 0;
 let tab_nav_el;
 const selected_tab = writable(
   selected || tabs[0]?.id || false
@@ -28,6 +27,7 @@ let is_overflowing = false;
 let overflow_has_selected_tab = false;
 let tab_els = {};
 onMount(() => {
+  if (!tab_nav_el) return;
   const observer = new IntersectionObserver((entries) => {
     handle_menu_overflow();
   });
@@ -61,18 +61,15 @@ function change_tab(id) {
     overflow_menu_open = false;
   }
 }
-$:
-  tabs, selected !== null && change_tab(selected);
-$:
-  tabs, tab_nav_el, tab_els, handle_menu_overflow();
+$: tabs, selected !== null && change_tab(selected);
+$: tabs, tab_nav_el, tab_els, handle_menu_overflow();
 function handle_outside_click(event) {
   if (overflow_menu_open && overflow_menu && !overflow_menu.contains(event.target)) {
     overflow_menu_open = false;
   }
 }
 async function handle_menu_overflow() {
-  if (!tab_nav_el)
-    return;
+  if (!tab_nav_el) return;
   await tick();
   const tab_nav_size = tab_nav_el.getBoundingClientRect();
   let max_width = tab_nav_size.width;
@@ -81,11 +78,9 @@ async function handle_menu_overflow() {
   const offset = tab_nav_size.left;
   for (let i = tabs.length - 1; i >= 0; i--) {
     const tab = tabs[i];
-    if (!tab)
-      continue;
+    if (!tab) continue;
     const tab_rect = tab_sizes[tab.id];
-    if (!tab_rect)
-      continue;
+    if (!tab_rect) continue;
     if (tab_rect.right - offset < max_width) {
       last_visible_index = i;
       break;
@@ -96,24 +91,20 @@ async function handle_menu_overflow() {
   overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
   is_overflowing = overflow_tabs.length > 0;
 }
-$:
-  overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+$: overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
 function handle_overflow_has_selected_tab(selected_tab2) {
-  if (selected_tab2 === false)
-    return false;
+  if (selected_tab2 === false) return false;
   return overflow_tabs.some((t) => t?.id === selected_tab2);
 }
 function get_tab_sizes(tabs2, tab_els2) {
   const tab_sizes = {};
   tabs2.forEach((tab) => {
-    if (!tab)
-      return;
+    if (!tab) return;
     tab_sizes[tab.id] = tab_els2[tab.id]?.getBoundingClientRect();
   });
   return tab_sizes;
 }
-$:
-  tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
+$: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 </script>
 
 <svelte:window
@@ -157,7 +148,7 @@ $:
 								}
 							}}
 						>
-							{t.label}
+							{t?.label !== undefined ? t?.label : "Tab " + (i + 1)}
 						</button>
 					{/if}
 				{/each}

package/dist/shared/Tabs.svelte.d.ts

@@ -11,9 +11,9 @@ export interface Tab {
 import type { SelectData } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        visible?: boolean | undefined;
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
+        visible?: boolean;
+        elem_id?: string;
+        elem_classes?: string[];
         selected: number | string;
         initial_tabs: Tab[];
     };
@@ -26,6 +26,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TabsProps = typeof __propDef.props;
 export type TabsEvents = typeof __propDef.events;

package/dist/shared/Walkthrough.svelte

@@ -0,0 +1,410 @@
+<script context="module">import { TABS } from "./Tabs.svelte";
+</script>
+
+<script>import { setContext, createEventDispatcher, tick, onMount } from "svelte";
+import { writable } from "svelte/store";
+export let visible = true;
+export let elem_id = "";
+export let elem_classes = [];
+export let selected;
+export let initial_tabs;
+let tabs = [...initial_tabs];
+let stepper_container;
+let show_labels_for_all = true;
+let measurement_container;
+let step_buttons = [];
+let step_labels = [];
+let label_height = 0;
+let compact = false;
+let recompute_overflow = true;
+$: has_tabs = tabs.length > 0;
+const selected_tab = writable(
+  selected || tabs[0]?.id || false
+);
+const selected_tab_index = writable(
+  tabs.findIndex((t) => t?.id === selected) || 0
+);
+const dispatch = createEventDispatcher();
+async function check_overflow() {
+  if (!stepper_container || !measurement_container || !recompute_overflow)
+    return;
+  recompute_overflow = false;
+  await tick();
+  show_labels_for_all = true;
+  await tick();
+  const SEP_WIDTH = 50;
+  const button_width = step_buttons[0].getBoundingClientRect().width * step_buttons.length + SEP_WIDTH * (step_buttons.length - 1);
+  const containerWidth = stepper_container.getBoundingClientRect().width;
+  const does_it_fit = button_width < containerWidth;
+  if (!does_it_fit) {
+    show_labels_for_all = false;
+    compact = true;
+    return;
+  }
+  let max_height = 0;
+  let is_overlapping = false;
+  let last_right = 0;
+  for (const label of step_labels) {
+    const { height, width, left, right } = label.getBoundingClientRect();
+    if (height > max_height) {
+      max_height = height;
+    }
+    if (last_right && left - 10 < last_right && !is_overlapping) {
+      is_overlapping = true;
+    }
+    last_right = right;
+  }
+  label_height = max_height;
+  if (is_overlapping) {
+    show_labels_for_all = false;
+  }
+}
+let last_width = 0;
+onMount(() => {
+  check_overflow();
+  const observer = new ResizeObserver((entries) => {
+    if (entries[0].contentRect.width === last_width) return;
+    last_width = entries[0].contentRect.width;
+    compact = false;
+    recompute_overflow = true;
+    check_overflow();
+  });
+  if (stepper_container) {
+    observer.observe(stepper_container);
+  }
+  return () => {
+    observer.disconnect();
+  };
+});
+setContext(TABS, {
+  register_tab: (tab, order) => {
+    tabs[order] = tab;
+    if ($selected_tab === false && tab.visible && tab.interactive) {
+      $selected_tab = tab.id;
+      $selected_tab_index = order;
+    }
+    return order;
+  },
+  unregister_tab: (tab, order) => {
+    if ($selected_tab === tab.id) {
+      $selected_tab = tabs[0]?.id || false;
+    }
+    tabs[order] = null;
+  },
+  selected_tab,
+  selected_tab_index
+});
+function change_tab(id, index) {
+  const tab_to_activate = tabs.find((t) => t?.id === id);
+  if (id !== void 0 && tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
+    selected = id;
+    $selected_tab = id;
+    $selected_tab_index = tabs.findIndex((t) => t?.id === id);
+    dispatch("change");
+  }
+}
+$: tabs, selected !== null && change_tab(
+  selected,
+  tabs.findIndex((t) => t?.id === selected)
+);
+$: tabs, check_overflow();
+$: $selected_tab_index, check_overflow();
+$: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
+</script>
+
+<svelte:window on:resize={check_overflow} />
+
+<div
+	class="stepper {elem_classes.join(' ')}"
+	class:hide={!visible}
+	id={elem_id}
+	style:flex-grow={tab_scale}
+	class:compact
+>
+	{#if has_tabs}
+		{#if compact}
+			<p class="step-title">
+				<strong>Step {($selected_tab_index || 0) + 1}/{tabs.length}:</strong>
+				{tabs[$selected_tab_index]?.label || "Walkthrough"}
+			</p>
+		{/if}
+		<div
+			class="stepper-wrapper"
+			bind:this={stepper_container}
+			style:--label-height={label_height + "px"}
+		>
+			<div
+				class="stepper-container"
+				bind:this={measurement_container}
+				role="tablist"
+			>
+				{#each tabs as t, i}
+					{#if t?.visible}
+						<div class="step-item">
+							<button
+								bind:this={step_buttons[i]}
+								role="tab"
+								class="step-button"
+								class:active={t.id === $selected_tab}
+								class:completed={t.id < $selected_tab}
+								class:pending={t.id > $selected_tab}
+								aria-selected={t.id === $selected_tab}
+								aria-controls={t.elem_id}
+								disabled={!t.interactive || i > $selected_tab_index}
+								aria-disabled={!t.interactive || i > $selected_tab_index}
+								id={t.elem_id ? t.elem_id + "-button" : null}
+								data-tab-id={t.id}
+								on:click={() => {
+									if (i <= $selected_tab_index && t.id !== $selected_tab) {
+										change_tab(t.id, i);
+										dispatch("select", { value: t.label, index: i });
+									}
+								}}
+							>
+								<span class="step-number">
+									{#if t.id < $selected_tab}
+										<svg
+											width="12"
+											height="10"
+											viewBox="0 0 12 10"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<path
+												d="M1 5L4.5 8.5L11 1.5"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>
+									{:else}
+										{i + 1}
+									{/if}
+								</span>
+								{#if !compact}
+									<span
+										bind:this={step_labels[i]}
+										class="step-label"
+										class:visible={show_labels_for_all ||
+											i === $selected_tab_index}
+									>
+										{t?.label !== undefined ? t?.label : "Step " + (i + 1)}
+									</span>
+								{/if}
+							</button>
+						</div>
+						{#if i < tabs.length - 1 && !compact}
+							<div
+								class="step-connector"
+								class:completed={i < $selected_tab_index}
+							></div>
+						{/if}
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/if}
+	<slot />
+</div>
+
+<style>
+	.stepper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--layout-gap);
+	}
+
+	.compact.stepper {
+		gap: 0;
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.stepper-wrapper {
+		display: flex;
+		align-items: center;
+		position: relative;
+		padding-top: var(--size-4);
+		padding-bottom: calc(var(--label-height) + var(--size-4));
+	}
+
+	.compact .stepper-wrapper {
+		padding-top: var(--size-2);
+		padding-bottom: var(--size-6);
+	}
+
+	.stepper-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		width: 100%;
+		position: relative;
+		padding: var(--size-2);
+		gap: var(--size-1);
+	}
+
+	.compact .stepper-container {
+		justify-content: center;
+		gap: 2px;
+		padding: 0;
+	}
+
+	.step-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1 1 0;
+		position: relative;
+	}
+
+	.compact .step-item {
+		/* flex: 0 0 auto; */
+		width: 100%;
+	}
+
+	.step-button {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--size-1);
+
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		border-radius: var(--radius-md);
+		transition: background-color 0.2s ease;
+		font-size: var(--text-sm);
+		color: var(--body-text-color-subdued);
+		white-space: nowrap;
+		z-index: 1;
+		position: relative;
+	}
+
+	.compact .step-button {
+		padding: 0;
+		width: 100%;
+		border: none;
+	}
+
+	.compact .step-number {
+		height: 10px;
+		width: 100%;
+		border-radius: 0;
+		border: none;
+	}
+
+	.step-button:hover:not(:disabled) {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.step-button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.step-button.active {
+		color: var(--body-text-color);
+	}
+
+	.step-button.completed {
+		color: var(--body-text-color);
+	}
+
+	.step-button.pending {
+		color: var(--body-text-color-subdued);
+	}
+
+	.step-number {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		transition: background-color 0.2s ease;
+		flex-shrink: 0;
+	}
+
+	.active .step-number {
+		background-color: var(--color-accent);
+		color: white;
+		box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.1);
+	}
+
+	.completed .step-number {
+		background-color: var(--color-accent);
+		color: white;
+	}
+
+	.compact .completed .step-number {
+		color: transparent;
+	}
+
+	.compact .pending .step-number {
+		color: transparent;
+		background-color: var(--body-text-color-subdued);
+	}
+
+	.compact .active .step-number {
+		color: transparent;
+	}
+
+	.pending .step-number {
+		background-color: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+	}
+
+	.compact .step-item:last-child .step-number {
+		border-top-right-radius: var(--radius-xs);
+		border-bottom-right-radius: var(--radius-xs);
+	}
+	.compact .step-item:first-child .step-number {
+		border-top-left-radius: var(--radius-xs);
+		border-bottom-left-radius: var(--radius-xs);
+	}
+
+	.step-label {
+		font-size: var(--text-md);
+		line-height: 1.2;
+		text-align: center;
+		max-width: 120px;
+		position: absolute;
+		bottom: -20px;
+		display: none;
+	}
+
+	.step-label.visible {
+		display: block;
+	}
+
+	.step-connector {
+		width: 100%;
+		height: 2px;
+		background-color: var(--border-color-primary);
+		transition: background-color 0.3s ease;
+		z-index: 0;
+		transform: translate(0, 15px);
+	}
+
+	.step-connector.completed {
+		background-color: var(--color-accent);
+	}
+
+	:global(.dark) .pending .step-number {
+		background-color: var(--neutral-800);
+		color: var(--neutral-400);
+		border-color: var(--neutral-600);
+	}
+
+	:global(.dark) .step-connector {
+		background-color: var(--neutral-600);
+	}
+</style>

package/dist/shared/Walkthrough.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type Tab } from "./Tabs.svelte";
+import type { SelectData } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        visible?: boolean;
+        elem_id?: string;
+        elem_classes?: string[];
+        selected: number | string;
+        initial_tabs: Tab[];
+    };
+    events: {
+        change: CustomEvent<undefined>;
+        select: CustomEvent<SelectData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type WalkthroughProps = typeof __propDef.props;
+export type WalkthroughEvents = typeof __propDef.events;
+export type WalkthroughSlots = typeof __propDef.slots;
+export default class Walkthrough extends SvelteComponent<WalkthroughProps, WalkthroughEvents, WalkthroughSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -20,7 +20,7 @@
     "@gradio/utils": "^0.10.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.13.0"
+    "@gradio/preview": "^0.14.0"
   },
   "peerDependencies": {
     "svelte": "^4.0.0"

package/shared/Tabs.svelte

@@ -49,6 +49,7 @@
 	let tab_els: Record<string | number, HTMLElement> = {};
 
 	onMount(() => {
+		if (!tab_nav_el) return;
 		const observer = new IntersectionObserver((entries) => {
 			handle_menu_overflow();
 		});
@@ -201,7 +202,7 @@
 								}
 							}}
 						>
-							{t.label}
+							{t?.label !== undefined ? t?.label : "Tab " + (i + 1)}
 						</button>
 					{/if}
 				{/each}

package/shared/Walkthrough.svelte

@@ -0,0 +1,449 @@
+<script context="module" lang="ts">
+	import { TABS, type Tab } from "./Tabs.svelte";
+</script>
+
+<script lang="ts">
+	import { setContext, createEventDispatcher, tick, onMount } from "svelte";
+	import { writable } from "svelte/store";
+	import type { SelectData } from "@gradio/utils";
+
+	export let visible = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let selected: number | string;
+	export let initial_tabs: Tab[];
+
+	let tabs: (Tab | null)[] = [...initial_tabs];
+	let stepper_container: HTMLDivElement;
+	let show_labels_for_all = true;
+	let measurement_container: HTMLDivElement;
+	let step_buttons: HTMLButtonElement[] = [];
+	let step_labels: HTMLSpanElement[] = [];
+	let label_height = 0;
+	let compact = false;
+	let recompute_overflow = true;
+	$: has_tabs = tabs.length > 0;
+
+	const selected_tab = writable<false | number | string>(
+		selected || tabs[0]?.id || false
+	);
+	const selected_tab_index = writable<number>(
+		tabs.findIndex((t) => t?.id === selected) || 0
+	);
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		select: SelectData;
+	}>();
+
+	async function check_overflow(): Promise<void> {
+		if (!stepper_container || !measurement_container || !recompute_overflow)
+			return;
+		recompute_overflow = false;
+		await tick();
+
+		// First, show all labels to measure
+		show_labels_for_all = true;
+		await tick();
+
+		const SEP_WIDTH = 50;
+		const button_width =
+			step_buttons[0].getBoundingClientRect().width * step_buttons.length +
+			SEP_WIDTH * (step_buttons.length - 1);
+
+		const containerWidth = stepper_container.getBoundingClientRect().width;
+		const does_it_fit = button_width < containerWidth;
+
+		if (!does_it_fit) {
+			show_labels_for_all = false;
+			compact = true;
+			return;
+		}
+
+		let max_height = 0;
+		let is_overlapping = false;
+		let last_right = 0;
+
+		for (const label of step_labels) {
+			const { height, width, left, right } = label.getBoundingClientRect();
+			if (height > max_height) {
+				max_height = height;
+			}
+			if (last_right && left - 10 < last_right && !is_overlapping) {
+				is_overlapping = true;
+			}
+			last_right = right;
+		}
+		label_height = max_height;
+
+		if (is_overlapping) {
+			show_labels_for_all = false;
+		}
+	}
+
+	let last_width = 0;
+
+	onMount(() => {
+		check_overflow();
+
+		const observer = new ResizeObserver((entries) => {
+			if (entries[0].contentRect.width === last_width) return;
+			last_width = entries[0].contentRect.width;
+			compact = false;
+			recompute_overflow = true;
+			check_overflow();
+		});
+
+		if (stepper_container) {
+			observer.observe(stepper_container);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	setContext(TABS, {
+		register_tab: (tab: Tab, order: number) => {
+			tabs[order] = tab;
+
+			if ($selected_tab === false && tab.visible && tab.interactive) {
+				$selected_tab = tab.id;
+				$selected_tab_index = order;
+			}
+			return order;
+		},
+		unregister_tab: (tab: Tab, order: number) => {
+			if ($selected_tab === tab.id) {
+				$selected_tab = tabs[0]?.id || false;
+			}
+			tabs[order] = null;
+		},
+		selected_tab,
+		selected_tab_index
+	});
+
+	function change_tab(id: string | number | undefined, index: number): void {
+		const tab_to_activate = tabs.find((t) => t?.id === id);
+		if (
+			id !== undefined &&
+			tab_to_activate &&
+			tab_to_activate.interactive &&
+			tab_to_activate.visible &&
+			$selected_tab !== tab_to_activate.id
+		) {
+			selected = id;
+			$selected_tab = id;
+			$selected_tab_index = tabs.findIndex((t) => t?.id === id);
+			dispatch("change");
+		}
+	}
+
+	$: tabs,
+		selected !== null &&
+			change_tab(
+				selected,
+				tabs.findIndex((t) => t?.id === selected)
+			);
+	$: tabs, check_overflow();
+	$: $selected_tab_index, check_overflow();
+
+	$: tab_scale =
+		tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
+</script>
+
+<svelte:window on:resize={check_overflow} />
+
+<div
+	class="stepper {elem_classes.join(' ')}"
+	class:hide={!visible}
+	id={elem_id}
+	style:flex-grow={tab_scale}
+	class:compact
+>
+	{#if has_tabs}
+		{#if compact}
+			<p class="step-title">
+				<strong>Step {($selected_tab_index || 0) + 1}/{tabs.length}:</strong>
+				{tabs[$selected_tab_index]?.label || "Walkthrough"}
+			</p>
+		{/if}
+		<div
+			class="stepper-wrapper"
+			bind:this={stepper_container}
+			style:--label-height={label_height + "px"}
+		>
+			<div
+				class="stepper-container"
+				bind:this={measurement_container}
+				role="tablist"
+			>
+				{#each tabs as t, i}
+					{#if t?.visible}
+						<div class="step-item">
+							<button
+								bind:this={step_buttons[i]}
+								role="tab"
+								class="step-button"
+								class:active={t.id === $selected_tab}
+								class:completed={t.id < $selected_tab}
+								class:pending={t.id > $selected_tab}
+								aria-selected={t.id === $selected_tab}
+								aria-controls={t.elem_id}
+								disabled={!t.interactive || i > $selected_tab_index}
+								aria-disabled={!t.interactive || i > $selected_tab_index}
+								id={t.elem_id ? t.elem_id + "-button" : null}
+								data-tab-id={t.id}
+								on:click={() => {
+									if (i <= $selected_tab_index && t.id !== $selected_tab) {
+										change_tab(t.id, i);
+										dispatch("select", { value: t.label, index: i });
+									}
+								}}
+							>
+								<span class="step-number">
+									{#if t.id < $selected_tab}
+										<svg
+											width="12"
+											height="10"
+											viewBox="0 0 12 10"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<path
+												d="M1 5L4.5 8.5L11 1.5"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>
+									{:else}
+										{i + 1}
+									{/if}
+								</span>
+								{#if !compact}
+									<span
+										bind:this={step_labels[i]}
+										class="step-label"
+										class:visible={show_labels_for_all ||
+											i === $selected_tab_index}
+									>
+										{t?.label !== undefined ? t?.label : "Step " + (i + 1)}
+									</span>
+								{/if}
+							</button>
+						</div>
+						{#if i < tabs.length - 1 && !compact}
+							<div
+								class="step-connector"
+								class:completed={i < $selected_tab_index}
+							></div>
+						{/if}
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/if}
+	<slot />
+</div>
+
+<style>
+	.stepper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--layout-gap);
+	}
+
+	.compact.stepper {
+		gap: 0;
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.stepper-wrapper {
+		display: flex;
+		align-items: center;
+		position: relative;
+		padding-top: var(--size-4);
+		padding-bottom: calc(var(--label-height) + var(--size-4));
+	}
+
+	.compact .stepper-wrapper {
+		padding-top: var(--size-2);
+		padding-bottom: var(--size-6);
+	}
+
+	.stepper-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		width: 100%;
+		position: relative;
+		padding: var(--size-2);
+		gap: var(--size-1);
+	}
+
+	.compact .stepper-container {
+		justify-content: center;
+		gap: 2px;
+		padding: 0;
+	}
+
+	.step-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1 1 0;
+		position: relative;
+	}
+
+	.compact .step-item {
+		/* flex: 0 0 auto; */
+		width: 100%;
+	}
+
+	.step-button {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--size-1);
+
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		border-radius: var(--radius-md);
+		transition: background-color 0.2s ease;
+		font-size: var(--text-sm);
+		color: var(--body-text-color-subdued);
+		white-space: nowrap;
+		z-index: 1;
+		position: relative;
+	}
+
+	.compact .step-button {
+		padding: 0;
+		width: 100%;
+		border: none;
+	}
+
+	.compact .step-number {
+		height: 10px;
+		width: 100%;
+		border-radius: 0;
+		border: none;
+	}
+
+	.step-button:hover:not(:disabled) {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.step-button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.step-button.active {
+		color: var(--body-text-color);
+	}
+
+	.step-button.completed {
+		color: var(--body-text-color);
+	}
+
+	.step-button.pending {
+		color: var(--body-text-color-subdued);
+	}
+
+	.step-number {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		transition: background-color 0.2s ease;
+		flex-shrink: 0;
+	}
+
+	.active .step-number {
+		background-color: var(--color-accent);
+		color: white;
+		box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.1);
+	}
+
+	.completed .step-number {
+		background-color: var(--color-accent);
+		color: white;
+	}
+
+	.compact .completed .step-number {
+		color: transparent;
+	}
+
+	.compact .pending .step-number {
+		color: transparent;
+		background-color: var(--body-text-color-subdued);
+	}
+
+	.compact .active .step-number {
+		color: transparent;
+	}
+
+	.pending .step-number {
+		background-color: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+	}
+
+	.compact .step-item:last-child .step-number {
+		border-top-right-radius: var(--radius-xs);
+		border-bottom-right-radius: var(--radius-xs);
+	}
+	.compact .step-item:first-child .step-number {
+		border-top-left-radius: var(--radius-xs);
+		border-bottom-left-radius: var(--radius-xs);
+	}
+
+	.step-label {
+		font-size: var(--text-md);
+		line-height: 1.2;
+		text-align: center;
+		max-width: 120px;
+		position: absolute;
+		bottom: -20px;
+		display: none;
+	}
+
+	.step-label.visible {
+		display: block;
+	}
+
+	.step-connector {
+		width: 100%;
+		height: 2px;
+		background-color: var(--border-color-primary);
+		transition: background-color 0.3s ease;
+		z-index: 0;
+		transform: translate(0, 15px);
+	}
+
+	.step-connector.completed {
+		background-color: var(--color-accent);
+	}
+
+	:global(.dark) .pending .step-number {
+		background-color: var(--neutral-800);
+		color: var(--neutral-400);
+		border-color: var(--neutral-600);
+	}
+
+	:global(.dark) .step-connector {
+		background-color: var(--neutral-600);
+	}
+</style>