improve tab padding controls

src/lib/Tabs.svelte

@@ -23,22 +23,17 @@
 		activeIndex?: number;
 		/** Callback fired when the active tab changes */
 		onchange?: (event: { index: number; tab: TabPage }) => void;
-		/** Applies layout padding to the tab header (default: false) */
-		padHeader?: boolean;
-		/** Applies layout padding to the content areas (default: false) */
-		padContent?: 'padding' | 'margin' | 'none';
+		/**
+		 * Controls padding of content areas. True applies padding to content
+		 * and header, false applies no padding (default), and 'content' and
+		 * 'header' apply padding to their respective areas only.
+		 */
+		padded?: boolean | 'content' | 'header';
 		/** Additional classes applied to the outer container */
 		class?: ClassValue | null;
 	}
 
-	let {
-		pages,
-		activeIndex = 0,
-		onchange,
-		padHeader = false,
-		padContent = 'none',
-		class: classValue
-	}: Props = $props();
+	let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props();
 
 	let primaryContainerEl: HTMLDivElement;
 	let tabContainerEl: HTMLDivElement;
@@ -109,7 +104,7 @@
 		bind:this={tabContainerEl}
 		class={[
 			'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2',
-			padHeader && 'px-layout'
+			padded === true || padded === 'header' ? 'px-layout' : ''
 		]}
 	>
 		{#each pages as page, i (page.title)}
@@ -144,7 +139,7 @@
 
 	{#key activeIndex}
 		<div
-			class={[padContent === 'padding' && 'px-layout', padContent === 'margin' && 'mx-layout']}
+			class={[padded === true || padded === 'content' ? 'px-layout' : '']}
 			in:flyX={{ direction: activeIndex > prevIndex ? 1 : -1, duration: 180, delay: 181 }}
 			out:flyX={{ direction: activeIndex > prevIndex ? -1 : 1, duration: 180 }}
 			onoutrostart={lockHeight}

src/routes/+page.svelte

@@ -448,7 +448,7 @@
 	<p class="title">Tabs</p>
 
 	<Tabs
-		padded={true}
+		padded
 		pages={[
 			{
 				title: 'Dashboard',