From 2ae35cf847a90fc253f03a114c9f9bbf27e14f13 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 26 Jan 2026 18:01:08 -0800
Subject: [PATCH] tabs: supported padded mode with spacing-layout

---
 src/lib/Tabs.svelte     | 18 +++++++++++++++---
 src/routes/+page.svelte |  1 +
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
index f9e6d65..39696bb 100644
--- a/src/lib/Tabs.svelte
+++ b/src/lib/Tabs.svelte
@@ -1,3 +1,8 @@
+<!--
+	Documents the purpose, API, and usage details of the selected component.
+	Include key props, expected behavior, and any important notes for consumers.
+-->
+
 <script lang="ts" module>
 	export type TabPage = {
 		title: string;
@@ -14,12 +19,16 @@
 
 	interface Props {
 		pages: TabPage[];
+		/** Currently active tab index (default: 0) */
 		activeIndex?: number;
+		/** Callback fired when the active tab changes */
 		onchange?: (event: { index: number; tab: TabPage }) => void;
+		/** Applies layout padding to the tab header & content areas (default: false) */
+		padded?: boolean;
 		class?: ClassValue | null;
 	}
 
-	let { pages, activeIndex = 0, onchange, class: classValue }: Props = $props();
+	let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props();
 
 	let primaryContainerEl: HTMLDivElement;
 	let tabContainerEl: HTMLDivElement;
@@ -88,7 +97,10 @@
 <div bind:this={primaryContainerEl} class={[classValue]}>
 	<div
 		bind:this={tabContainerEl}
-		class={['border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2']}
+		class={[
+			'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2',
+			padded && 'px-layout'
+		]}
 	>
 		{#each pages as page, i (page.title)}
 			{@const active = activeIndex === i}
@@ -122,7 +134,7 @@
 
 	{#key activeIndex}
 		<div
-			class={[]}
+			class={[padded && 'px-layout']}
 			in:flyX={{ direction: activeIndex > prevIndex ? 1 : -1, duration: 180, delay: 181 }}
 			out:flyX={{ direction: activeIndex > prevIndex ? -1 : 1, duration: 180 }}
 			onoutrostart={lockHeight}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 053f3d0..a7fd585 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -429,6 +429,7 @@
 	<p class="title">Tabs</p>
 
 	<Tabs
+		padded={true}
 		pages={[
 			{
 				title: 'Dashboard',