From afeb5450ffa9a363e98d7fb56ba8c74390a943e9 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 9 Mar 2024 19:01:57 +0100
Subject: [PATCH 01/17] init svelte tabGroup

---
 .../src/lib/components/Tab/Tab.svelte         |  0
 .../src/lib/components/Tab/TabAnchor.svelte   |  0
 .../src/lib/components/Tab/TabGroup.svelte    | 56 ++++++++++++++++++
 .../src/lib/components/Tab/types.ts           | 57 +++++++++++++++++++
 packages/skeleton-svelte/src/lib/index.ts     |  3 +
 .../skeleton-svelte/src/routes/+layout.svelte |  1 +
 .../src/routes/components/tabs/+page.svelte   | 19 +++++++
 7 files changed, 136 insertions(+)
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/Tab.svelte
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/types.ts
 create mode 100644 packages/skeleton-svelte/src/routes/components/tabs/+page.svelte

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tab.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tab.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
new file mode 100644
index 000000000..8e481c9e8
--- /dev/null
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { TabGroupProps } from './types.js';
+
+	let {
+		// A11Y
+		listLabelledBy = '',
+		panelLabelledBy = '',
+		// Root
+		base = '',
+		spaceY = 'space-y-4',
+		classes = '',
+		// Tab list
+		listBase = 'flex overflow-x-auto hide-scrollbar',
+		listJustify = 'justify-start',
+		listBorder = 'border-b border-surface-400-600',
+		listClasses = '',
+		// Tab panel
+		panelBase = '',
+		panelClasses = '',
+		// Tab Children
+		tabBase = 'flex-none',
+		tabActive = 'border-b-2 border-surface-950-50',
+		tabBackground = 'hover:bg-surface-400-600',
+		tabPadding = 'px-4 py-2',
+		tabRounded = 'rounded-tl-container rounded-tr-container',
+		tabSpacingY = 'space-y-1',
+		tabClasses = '',
+		// Snippets
+		children,
+		panel
+	} = $props<TabGroupProps>();
+
+	setContext('base', tabBase);
+	setContext('active', tabActive);
+	setContext('background', tabBackground);
+	setContext('padding', tabPadding);
+	setContext('rounded', tabRounded);
+	setContext('spacingY', tabSpacingY);
+	setContext('classes', tabClasses);
+</script>
+
+<!-- @component A Tab parent component. -->
+
+<div class="{base} {spaceY} {classes}" data-testid="tab-group">
+	{#if children}
+		<div class="{listBase} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
+			{@render children()}
+		</div>
+	{/if}
+	{#if panel}
+		<div class="{panelBase} {panelClasses}" role="tabpanel" aria-labelledby={panelLabelledBy}>
+			{@render panel()}
+		</div>
+	{/if}
+</div>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
new file mode 100644
index 000000000..4d74f3180
--- /dev/null
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+
+// TabGroup ---
+
+export interface TabGroupProps {
+	// A11Y ---
+	/** Sets the tab list snippet element's A11y labelledby. */
+	listLabelledBy?: string;
+	/** Sets the tab panel snippet element's A11y labelledby. */
+	panelLabelledBy?: string;
+
+	// Root ---
+	/** Sets base styles. */
+	base?: string;
+	/** Set vertical spacing styles. */
+	spaceY?: string;
+	/** Provide arbitrary CSS classes. */
+	classes?: string;
+
+	// Tab list ---
+	/** Sets the list snippet element's base styles. */
+	listBase?: string;
+	/** Sets the list snippet element's justification styles. */
+	listJustify?: string;
+	/** Sets the list snippet element's border styles. */
+	listBorder?: string;
+	/** Provide arbitrary CSS classes to the list snippet. */
+	listClasses?: string;
+
+	// Tab panel ---
+	/** Sets the tab panel snippet element's base styles. */
+	panelBase?: string;
+	/** Provide arbitrary CSS classes to the tab panel snippet. */
+	panelClasses?: string;
+
+	// Tab Children
+	/** Sets the children tabs base styles. */
+	tabBase?: string;
+	/** Sets the children tabs active styles. */
+	tabActive?: string;
+	/** Sets the children tabs background styles. */
+	tabBackground?: string;
+	/** Sets the children tabs padding styles. */
+	tabPadding?: string;
+	/** Sets the children tabs rounded styles. */
+	tabRounded?: string;
+	/** Sets the children tabs vertical spacing styles. */
+	tabSpacingY?: string;
+	/** Provide arbitrary CSS classes to the children tabs. */
+	tabClasses?: string;
+
+	// Snippets ---
+	/** The tab list slot. */
+	children?: Snippet;
+	/** The tab panel slot. */
+	panel?: Snippet;
+}
diff --git a/packages/skeleton-svelte/src/lib/index.ts b/packages/skeleton-svelte/src/lib/index.ts
index 76ffea1f2..d4a3c8228 100644
--- a/packages/skeleton-svelte/src/lib/index.ts
+++ b/packages/skeleton-svelte/src/lib/index.ts
@@ -5,3 +5,6 @@ export { default as Accordion } from './components/Accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as AppBar } from './components/AppBar/AppBar.svelte';
+export { default as TabGroup } from './components/Tab/TabGroup.svelte';
+export { default as Tab } from './components/Tab/Tab.svelte';
+export { default as TabAnchor } from './components/Tab/TabAnchor.svelte';
diff --git a/packages/skeleton-svelte/src/routes/+layout.svelte b/packages/skeleton-svelte/src/routes/+layout.svelte
index 2d7e36a9f..b8dbb285c 100644
--- a/packages/skeleton-svelte/src/routes/+layout.svelte
+++ b/packages/skeleton-svelte/src/routes/+layout.svelte
@@ -15,6 +15,7 @@
 				<a class="anchor" href="/components/accordions">Accordions</a>
 				<a class="anchor" href="/components/avatars">Avatars</a>
 				<a class="anchor" href="/components/app-bars">App Bars</a>
+				<a class="anchor" href="/components/tabs">Tabs</a>
 			</nav>
 		</div>
 	</div>
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
new file mode 100644
index 000000000..3cc64af48
--- /dev/null
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import TabGroup from '$lib/components/Tab/TabGroup.svelte';
+
+	let tabSet: number = 0;
+</script>
+
+<h1 class="h1">Tabs</h1>
+<TabGroup>
+	test
+	{#snippet panel()}
+		{#if tabSet === 0}
+			(tab panel 1 contents)
+		{:else if tabSet === 1}
+			(tab panel 2 contents)
+		{:else if tabSet === 2}
+			(tab panel 3 contents)
+		{/if}
+	{/snippet}
+</TabGroup>

From 37ac3b07bd76a7f2b77d194e777bbef7ec7285de Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 13 Mar 2024 20:52:08 +0100
Subject: [PATCH 02/17] re-init tabs parent component

---
 packages/skeleton-svelte/src/app.html         | 24 ++++----
 .../src/lib/components/Tab/TabAnchor.svelte   |  0
 .../src/lib/components/Tab/TabGroup.svelte    | 56 ------------------
 .../src/lib/components/Tab/Tabs.svelte        | 57 +++++++++++++++++++
 .../Tab/{Tab.svelte => TabsControl.svelte}    |  0
 .../src/lib/components/Tab/types.ts           | 42 ++++++++------
 packages/skeleton-svelte/src/lib/index.ts     |  5 +-
 .../src/routes/components/tabs/+page.svelte   | 23 ++++----
 8 files changed, 104 insertions(+), 103 deletions(-)
 delete mode 100644 packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte
 delete mode 100644 packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
 rename packages/skeleton-svelte/src/lib/components/Tab/{Tab.svelte => TabsControl.svelte} (100%)

diff --git a/packages/skeleton-svelte/src/app.html b/packages/skeleton-svelte/src/app.html
index 9a76d7554..0e6cfae73 100644
--- a/packages/skeleton-svelte/src/app.html
+++ b/packages/skeleton-svelte/src/app.html
@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
+		<title>skeleton-svelte</title>
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
 
-<head>
-	<meta charset="utf-8" />
-	<title>skeleton-svelte</title>
-	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover" data-theme="cerberus">
-	<div>%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+	<body data-sveltekit-preload-data="hover" data-theme="cerberus">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabAnchor.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
deleted file mode 100644
index 8e481c9e8..000000000
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabGroup.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import type { TabGroupProps } from './types.js';
-
-	let {
-		// A11Y
-		listLabelledBy = '',
-		panelLabelledBy = '',
-		// Root
-		base = '',
-		spaceY = 'space-y-4',
-		classes = '',
-		// Tab list
-		listBase = 'flex overflow-x-auto hide-scrollbar',
-		listJustify = 'justify-start',
-		listBorder = 'border-b border-surface-400-600',
-		listClasses = '',
-		// Tab panel
-		panelBase = '',
-		panelClasses = '',
-		// Tab Children
-		tabBase = 'flex-none',
-		tabActive = 'border-b-2 border-surface-950-50',
-		tabBackground = 'hover:bg-surface-400-600',
-		tabPadding = 'px-4 py-2',
-		tabRounded = 'rounded-tl-container rounded-tr-container',
-		tabSpacingY = 'space-y-1',
-		tabClasses = '',
-		// Snippets
-		children,
-		panel
-	} = $props<TabGroupProps>();
-
-	setContext('base', tabBase);
-	setContext('active', tabActive);
-	setContext('background', tabBackground);
-	setContext('padding', tabPadding);
-	setContext('rounded', tabRounded);
-	setContext('spacingY', tabSpacingY);
-	setContext('classes', tabClasses);
-</script>
-
-<!-- @component A Tab parent component. -->
-
-<div class="{base} {spaceY} {classes}" data-testid="tab-group">
-	{#if children}
-		<div class="{listBase} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
-			{@render children()}
-		</div>
-	{/if}
-	{#if panel}
-		<div class="{panelBase} {panelClasses}" role="tabpanel" aria-labelledby={panelLabelledBy}>
-			{@render panel()}
-		</div>
-	{/if}
-</div>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
new file mode 100644
index 000000000..2ef1550bf
--- /dev/null
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { TabsProps } from './types.js';
+
+	let {
+		// A11Y
+		listLabelledBy = '',
+		panelLabelledBy = '',
+		// Root
+		base = '',
+		spaceY = 'space-y-4',
+		classes = '',
+		// Tab list
+		listBase = 'flex overflow-x-auto hide-scrollbar',
+		listWidth = 'w-fit',
+		listJustify = 'justify-start',
+		listBorder = 'border-b border-surface-50-950',
+		listClasses = '',
+		// Tab panel
+		panelBase = '',
+		panelClasses = '',
+		// Tab Controls
+		controlsBase = 'flex-none',
+		controlsActive = 'border-b-2 border-surface-950-50',
+		controlsBackground = 'hover:bg-surface-400-600',
+		controlsPadding = 'px-4 py-2',
+		controlsRounded = 'rounded-tl-container rounded-tr-container',
+		controlsSpacingY = 'space-y-1',
+		controlsClasses = '',
+		// Snippets
+		list,
+		panel
+	} = $props<TabsProps>();
+
+	setContext('base', controlsBase);
+	setContext('active', controlsActive);
+	setContext('background', controlsBackground);
+	setContext('padding', controlsPadding);
+	setContext('rounded', controlsRounded);
+	setContext('spacingY', controlsSpacingY);
+	setContext('classes', controlsClasses);
+</script>
+
+<!-- @component A Tab parent component. -->
+
+<div class="{base} {spaceY} {classes}" data-testid="tab-group">
+	{#if list}
+		<div class="{listBase} {listWidth} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
+			{@render list()}
+		</div>
+	{/if}
+	{#if panel}
+		<div class="{panelBase} {panelClasses}" role="tabpanel" aria-labelledby={panelLabelledBy}>
+			{@render panel()}
+		</div>
+	{/if}
+</div>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tab.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
similarity index 100%
rename from packages/skeleton-svelte/src/lib/components/Tab/Tab.svelte
rename to packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 4d74f3180..712c177d7 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 
-// TabGroup ---
+// Tabs ---
 
-export interface TabGroupProps {
+export interface TabsProps {
 	// A11Y ---
 	/** Sets the tab list snippet element's A11y labelledby. */
 	listLabelledBy?: string;
@@ -20,6 +20,8 @@ export interface TabGroupProps {
 	// Tab list ---
 	/** Sets the list snippet element's base styles. */
 	listBase?: string;
+	/** Sets the list snippet element's width styles. */
+	listWidth?: string;
 	/** Sets the list snippet element's justification styles. */
 	listJustify?: string;
 	/** Sets the list snippet element's border styles. */
@@ -33,25 +35,29 @@ export interface TabGroupProps {
 	/** Provide arbitrary CSS classes to the tab panel snippet. */
 	panelClasses?: string;
 
-	// Tab Children
-	/** Sets the children tabs base styles. */
-	tabBase?: string;
-	/** Sets the children tabs active styles. */
-	tabActive?: string;
-	/** Sets the children tabs background styles. */
-	tabBackground?: string;
-	/** Sets the children tabs padding styles. */
-	tabPadding?: string;
-	/** Sets the children tabs rounded styles. */
-	tabRounded?: string;
-	/** Sets the children tabs vertical spacing styles. */
-	tabSpacingY?: string;
-	/** Provide arbitrary CSS classes to the children tabs. */
-	tabClasses?: string;
+	// Tab Controls
+	/** Sets the children controls base styles. */
+	controlsBase?: string;
+	/** Sets the children controls active styles. */
+	controlsActive?: string;
+	/** Sets the children controls background styles. */
+	controlsBackground?: string;
+	/** Sets the children controls padding styles. */
+	controlsPadding?: string;
+	/** Sets the children controls rounded styles. */
+	controlsRounded?: string;
+	/** Sets the children controls vertical spacing styles. */
+	controlsSpacingY?: string;
+	/** Provide arbitrary CSS classes to the children controls. */
+	controlsClasses?: string;
 
 	// Snippets ---
 	/** The tab list slot. */
-	children?: Snippet;
+	list?: Snippet;
 	/** The tab panel slot. */
 	panel?: Snippet;
 }
+
+// TabControl ---
+
+export interface TabControl {}
diff --git a/packages/skeleton-svelte/src/lib/index.ts b/packages/skeleton-svelte/src/lib/index.ts
index d4a3c8228..fa15e0c19 100644
--- a/packages/skeleton-svelte/src/lib/index.ts
+++ b/packages/skeleton-svelte/src/lib/index.ts
@@ -5,6 +5,5 @@ export { default as Accordion } from './components/Accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as AppBar } from './components/AppBar/AppBar.svelte';
-export { default as TabGroup } from './components/Tab/TabGroup.svelte';
-export { default as Tab } from './components/Tab/Tab.svelte';
-export { default as TabAnchor } from './components/Tab/TabAnchor.svelte';
+export { default as Tabs } from './components/Tab/Tabs.svelte';
+export { default as TabsControl } from './components/Tab/TabsControl.svelte';
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 3cc64af48..8e3a0c8f9 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-	import TabGroup from '$lib/components/Tab/TabGroup.svelte';
-
-	let tabSet: number = 0;
+	import Tabs from '$lib/components/Tab/Tabs.svelte';
+	import TabsControl from '$lib/components/Tab/TabsControl.svelte';
 </script>
 
 <h1 class="h1">Tabs</h1>
-<TabGroup>
-	test
+<Tabs>
+	{#snippet list()}
+		<TabsControl></TabsControl>
+		<TabsControl></TabsControl>
+		<TabsControl></TabsControl>
+	{/snippet}
 	{#snippet panel()}
-		{#if tabSet === 0}
-			(tab panel 1 contents)
-		{:else if tabSet === 1}
-			(tab panel 2 contents)
-		{:else if tabSet === 2}
-			(tab panel 3 contents)
-		{/if}
+	<div>test</div>
 	{/snippet}
-</TabGroup>
+</Tabs>

From 7819679feb5aa97443459acb4fd2ae867e559aed Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Fri, 15 Mar 2024 22:46:06 +0100
Subject: [PATCH 03/17] init tabs control

---
 .../lib/components/Accordion/Accordion.svelte |   2 +-
 .../components/Accordion/AccordionItem.svelte |   2 +-
 .../src/lib/components/AppBar/AppBar.svelte   |   2 +-
 .../src/lib/components/Avatar/Avatar.svelte   |   2 +-
 .../src/lib/components/Tab/Tabs.svelte        |  16 +-
 .../src/lib/components/Tab/TabsControl.svelte |  47 ++++++
 .../src/lib/components/Tab/index.ts           |   4 +
 .../src/lib/components/Tab/types.ts           |  57 ++++++-
 packages/skeleton-svelte/src/lib/index.ts     |   3 +-
 .../src/routes/components/tabs/+page.svelte   | 150 +++++++++++++++++-
 10 files changed, 265 insertions(+), 20 deletions(-)
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/index.ts

diff --git a/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte b/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte
index b4243d771..7bf082e66 100644
--- a/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte
@@ -18,7 +18,7 @@
 		children,
 		iconOpen,
 		iconClosed
-	} = $props<AccordionProps>();
+	}: AccordionProps = $props();
 
 	// Context
 	setContext('selected', new State<string[]>([]));
diff --git a/packages/skeleton-svelte/src/lib/components/Accordion/AccordionItem.svelte b/packages/skeleton-svelte/src/lib/components/Accordion/AccordionItem.svelte
index e5b236fa1..02d140155 100644
--- a/packages/skeleton-svelte/src/lib/components/Accordion/AccordionItem.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Accordion/AccordionItem.svelte
@@ -33,7 +33,7 @@
 		control,
 		controlLead,
 		panel
-	} = $props<AccordionItemProps>();
+	}: AccordionItemProps = $props();
 
 	// Context
 	const selected = getContext<State<string[]>>('selected');
diff --git a/packages/skeleton-svelte/src/lib/components/AppBar/AppBar.svelte b/packages/skeleton-svelte/src/lib/components/AppBar/AppBar.svelte
index 234ad31ae..6cc9d59e1 100644
--- a/packages/skeleton-svelte/src/lib/components/AppBar/AppBar.svelte
+++ b/packages/skeleton-svelte/src/lib/components/AppBar/AppBar.svelte
@@ -38,7 +38,7 @@
 		lead,
 		trail,
 		headline
-	} = $props<AppBarProps>();
+	}: AppBarProps = $props();
 </script>
 
 <!-- @component A header element for the top of a page layout. -->
diff --git a/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte b/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte
index 0e581df74..0137cc783 100644
--- a/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte
@@ -19,7 +19,7 @@
 		imageClasses = '',
 		// Snippets
 		children
-	} = $props<AvatarProps>();
+	}: AvatarProps = $props();
 </script>
 
 <!-- @component An image with a fallback for representing the user. -->
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 2ef1550bf..42404099f 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -12,7 +12,7 @@
 		classes = '',
 		// Tab list
 		listBase = 'flex overflow-x-auto hide-scrollbar',
-		listWidth = 'w-fit',
+		listSpaceX = 'space-x-4',
 		listJustify = 'justify-start',
 		listBorder = 'border-b border-surface-50-950',
 		listClasses = '',
@@ -20,24 +20,30 @@
 		panelBase = '',
 		panelClasses = '',
 		// Tab Controls
-		controlsBase = 'flex-none',
-		controlsActive = 'border-b-2 border-surface-950-50',
+		controlsBase = 'flex',
+		controlsJustify = 'justify-center',
+		controlsActive = 'border-b-2 border-surface-950-50 text-surface-950-50',
+		controlsInactive = 'text-surface-600-400 fill-surface-600-400',
 		controlsBackground = 'hover:bg-surface-400-600',
 		controlsPadding = 'px-4 py-2',
 		controlsRounded = 'rounded-tl-container rounded-tr-container',
 		controlsSpacingY = 'space-y-1',
+		controlsCursor = 'cursor-pointer',
 		controlsClasses = '',
 		// Snippets
 		list,
 		panel
-	} = $props<TabsProps>();
+	}: TabsProps = $props();
 
 	setContext('base', controlsBase);
+	setContext('justify', controlsJustify);
 	setContext('active', controlsActive);
+	setContext('inactive', controlsInactive);
 	setContext('background', controlsBackground);
 	setContext('padding', controlsPadding);
 	setContext('rounded', controlsRounded);
 	setContext('spacingY', controlsSpacingY);
+	setContext('cursor', controlsCursor);
 	setContext('classes', controlsClasses);
 </script>
 
@@ -45,7 +51,7 @@
 
 <div class="{base} {spaceY} {classes}" data-testid="tab-group">
 	{#if list}
-		<div class="{listBase} {listWidth} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
+		<div class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
 			{@render list()}
 		</div>
 	{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index e69de29bb..3276e47a9 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { TabsControlProps } from './types.js';
+
+	let {
+		name,
+		group,
+		title = '',
+		// A11y
+		controls = '',
+		// Root
+		base = getContext<string>('base'),
+		justify = getContext<string>('justify'),
+		active = getContext<string>('active'),
+		inactive = getContext<string>('inactive'),
+		background = getContext<string>('background'),
+		padding = getContext<string>('padding'),
+		rounded = getContext<string>('rounded'),
+		spacingY = getContext<string>('spacingY'),
+		cursor = getContext<string>('cursor'),
+		classes = getContext<string>('classes'),
+		// Tab
+		tabBase = 'flex',
+		tabSpaceX = 'space-x-1',
+		tabClasses = '',
+		// Snippets
+		children
+	}: TabsControlProps = $props();
+
+	const rxSelected = $derived(group === name);
+	const rxActive = $derived(rxSelected ? active : inactive);
+</script>
+
+<!-- @component A Tab Control component. -->
+
+<label class="{base} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
+	<div aria-controls={controls} tabindex="0" data-testid="tabs-control" role="tab">
+		<div class="h-0 w-0 flex-none overflow-hidden">
+			<input type="radio" bind:group {name} value={name} tabindex="-1" />
+		</div>
+		{#if children}
+			<div class="{tabBase} {tabSpaceX} {tabClasses}">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</label>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/index.ts b/packages/skeleton-svelte/src/lib/components/Tab/index.ts
new file mode 100644
index 000000000..a7ea8f646
--- /dev/null
+++ b/packages/skeleton-svelte/src/lib/components/Tab/index.ts
@@ -0,0 +1,4 @@
+import Tabs from './Tabs.svelte';
+import Control from './TabsControl.svelte';
+
+export default Object.assign(Tabs, { Control });
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 712c177d7..8645beaa6 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -20,10 +20,10 @@ export interface TabsProps {
 	// Tab list ---
 	/** Sets the list snippet element's base styles. */
 	listBase?: string;
-	/** Sets the list snippet element's width styles. */
-	listWidth?: string;
 	/** Sets the list snippet element's justification styles. */
 	listJustify?: string;
+	/** Sets the list snippet element's horizontal spacing styles. */
+	listSpaceX?: string;
 	/** Sets the list snippet element's border styles. */
 	listBorder?: string;
 	/** Provide arbitrary CSS classes to the list snippet. */
@@ -38,8 +38,12 @@ export interface TabsProps {
 	// Tab Controls
 	/** Sets the children controls base styles. */
 	controlsBase?: string;
+	/** Sets the children controls Justification styles. */
+	controlsJustify?: string;
 	/** Sets the children controls active styles. */
 	controlsActive?: string;
+	/** Sets the children controls inactive styles. */
+	controlsInactive?: string;
 	/** Sets the children controls background styles. */
 	controlsBackground?: string;
 	/** Sets the children controls padding styles. */
@@ -48,6 +52,8 @@ export interface TabsProps {
 	controlsRounded?: string;
 	/** Sets the children controls vertical spacing styles. */
 	controlsSpacingY?: string;
+	/** Sets the children controls cursor styles. */
+	controlsCursor?: string;
 	/** Provide arbitrary CSS classes to the children controls. */
 	controlsClasses?: string;
 
@@ -60,4 +66,49 @@ export interface TabsProps {
 
 // TabControl ---
 
-export interface TabControl {}
+export interface TabsControlProps {
+	/** Provide the tab control name. */
+	name: string;
+	/** Provide the tab control radio group. */
+	group: string;
+	/** Provide a hoverable title attribute. */
+	title?: string;
+
+	// A11y ---
+	/** Sets ARIA controls value to define which panel this tab controls. */
+	controls?: string;
+
+	// Root ---
+	/** Sets base styles. */
+	base?: string;
+	/** Sets background styles. */
+	background?: string;
+	/** Sets justification styles. */
+	justify?: string;
+	/** Sets the active control styles. */
+	active?: string;
+	/** Sets the inactive control styles. */
+	inactive?: string;
+	/** Sets padding styles. */
+	padding?: string;
+	/** Sets rounded styles. */
+	rounded?: string;
+	/** Sets vertical spacing styles. */
+	spacingY?: string;
+	/** Sets cursor styles. */
+	cursor?: string;
+	/** Provide arbitrary CSS classes. */
+	classes?: string;
+
+	// Tab
+	/** Sets the tab content base styles */
+	tabBase?: string;
+	/** Sets the tab content horizontal spacing styles. */
+	tabSpaceX?: string;
+	/** Provide arbitrary CSS classes to the tab content. */
+	tabClasses?: string;
+
+	// Snippets ---
+	/** The default child slot. */
+	children?: Snippet;
+}
diff --git a/packages/skeleton-svelte/src/lib/index.ts b/packages/skeleton-svelte/src/lib/index.ts
index fa15e0c19..c9e458a4c 100644
--- a/packages/skeleton-svelte/src/lib/index.ts
+++ b/packages/skeleton-svelte/src/lib/index.ts
@@ -5,5 +5,4 @@ export { default as Accordion } from './components/Accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as AppBar } from './components/AppBar/AppBar.svelte';
-export { default as Tabs } from './components/Tab/Tabs.svelte';
-export { default as TabsControl } from './components/Tab/TabsControl.svelte';
+export { default as Tabs } from './components/Tab/index.js';
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 8e3a0c8f9..10c6ec147 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -1,16 +1,154 @@
 <script lang="ts">
-	import Tabs from '$lib/components/Tab/Tabs.svelte';
-	import TabsControl from '$lib/components/Tab/TabsControl.svelte';
+	import { Tabs } from '$lib/index.js';
+
+	let group = $state('flight');
 </script>
 
 <h1 class="h1">Tabs</h1>
 <Tabs>
 	{#snippet list()}
-		<TabsControl></TabsControl>
-		<TabsControl></TabsControl>
-		<TabsControl></TabsControl>
+		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+	{/snippet}
+	{#snippet panel()}
+		<div>PlaceHolder</div>
+	{/snippet}
+</Tabs>
+
+<h3 class="h3">With Icon</h3>
+<Tabs>
+	{#snippet list()}
+		<Tabs.Control bind:group name="flight" title="flight">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-plane"
+				><path
+					d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"
+				/></svg
+			>
+			<span>Flight</span>
+		</Tabs.Control>
+		<Tabs.Control bind:group name="hotel" title="hotel">
+			<span>Hotel</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-hotel"
+				><path d="M10 22v-6.57" /><path d="M12 11h.01" /><path d="M12 7h.01" /><path d="M14 15.43V22" /><path
+					d="M15 16a5 5 0 0 0-6 0"
+				/><path d="M16 11h.01" /><path d="M16 7h.01" /><path d="M8 11h.01" /><path d="M8 7h.01" /><rect
+					x="4"
+					y="2"
+					width="16"
+					height="20"
+					rx="2"
+				/></svg
+			>
+		</Tabs.Control>
+		<Tabs.Control bind:group name="explore" title="explore">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-box"
+				><path
+					d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+				/><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg
+			>
+			<span>Explore</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-box"
+				><path
+					d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+				/><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg
+			>
+		</Tabs.Control>
+		<Tabs.Control bind:group name="skull" title="Skeleton">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-skull"
+				><circle cx="9" cy="12" r="1" /><circle cx="15" cy="12" r="1" /><path d="M8 20v2h8v-2" /><path d="m12.5 17-.5-1-.5 1h1z" /><path
+					d="M16 20a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20"
+				/></svg
+			>
+		</Tabs.Control>
+	{/snippet}
+	{#snippet panel()}
+		<div>PlaceHolder</div>
+	{/snippet}
+</Tabs>
+
+<h3 class="h3">Stretched</h3>
+<Tabs controlsClasses="w-full">
+	{#snippet list()}
+		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+	{/snippet}
+	{#snippet panel()}
+		<div>PlaceHolder</div>
+	{/snippet}
+</Tabs>
+
+<h3 class="h3">Justify center</h3>
+<Tabs listJustify="justify-center">
+	{#snippet list()}
+		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+	{/snippet}
+	{#snippet panel()}
+		<div>PlaceHolder</div>
+	{/snippet}
+</Tabs>
+
+<h3 class="h3">Justify End</h3>
+<Tabs listJustify="justify-end">
+	{#snippet list()}
+		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-	<div>test</div>
+		<div>PlaceHolder</div>
 	{/snippet}
 </Tabs>

From 9e0ae6cf826982852e71e909763d22ef114649a5 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 16 Mar 2024 16:50:44 +0100
Subject: [PATCH 04/17] init tabsPanel

---
 .../src/lib/components/Tab/Tabs.svelte        | 11 ++++-
 .../src/lib/components/Tab/TabsControl.svelte | 17 +++++--
 .../src/lib/components/Tab/TabsPanel.svelte   | 20 ++++++++
 .../src/lib/components/Tab/index.ts           |  3 +-
 .../src/lib/components/Tab/types.ts           | 47 +++++++++++++++++--
 .../src/routes/components/tabs/+page.svelte   | 23 ++++++---
 6 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 42404099f..6c6ac35e4 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -21,21 +21,26 @@
 		panelClasses = '',
 		// Tab Controls
 		controlsBase = 'flex',
+		controlsText = 'hover:text-primary-600-400',
 		controlsJustify = 'justify-center',
 		controlsActive = 'border-b-2 border-surface-950-50 text-surface-950-50',
 		controlsInactive = 'text-surface-600-400 fill-surface-600-400',
-		controlsBackground = 'hover:bg-surface-400-600',
+		controlsBackground = '',
 		controlsPadding = 'px-4 py-2',
-		controlsRounded = 'rounded-tl-container rounded-tr-container',
+		controlsRounded = '',
 		controlsSpacingY = 'space-y-1',
 		controlsCursor = 'cursor-pointer',
 		controlsClasses = '',
+		// Tab Panels
+		panelsBase = '',
+		panelsClasses = '',
 		// Snippets
 		list,
 		panel
 	}: TabsProps = $props();
 
 	setContext('base', controlsBase);
+	setContext('text', controlsText);
 	setContext('justify', controlsJustify);
 	setContext('active', controlsActive);
 	setContext('inactive', controlsInactive);
@@ -45,6 +50,8 @@
 	setContext('spacingY', controlsSpacingY);
 	setContext('cursor', controlsCursor);
 	setContext('classes', controlsClasses);
+	setContext('panelBase', panelsBase);
+	setContext('panelClasses', panelsClasses);
 </script>
 
 <!-- @component A Tab parent component. -->
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 3276e47a9..49c96d666 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -10,6 +10,7 @@
 		controls = '',
 		// Root
 		base = getContext<string>('base'),
+		text = getContext<string>('text'),
 		justify = getContext<string>('justify'),
 		active = getContext<string>('active'),
 		inactive = getContext<string>('inactive'),
@@ -20,9 +21,14 @@
 		cursor = getContext<string>('cursor'),
 		classes = getContext<string>('classes'),
 		// Tab
-		tabBase = 'flex',
-		tabSpaceX = 'space-x-1',
+		tabBase = '',
+		tabRounded = 'rounded-container',
+		tabOutline = 'focus:outline focus:outline-primary-600-400 focus:outline-offset-4',
 		tabClasses = '',
+		// Tab Content
+		contentBase = 'flex',
+		contentSpaceX = 'space-x-1',
+		contentClasses = '',
 		// Snippets
 		children
 	}: TabsControlProps = $props();
@@ -33,13 +39,14 @@
 
 <!-- @component A Tab Control component. -->
 
-<label class="{base} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
-	<div aria-controls={controls} tabindex="0" data-testid="tabs-control" role="tab">
+<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
+	<div aria-controls={controls} tabindex="0" data-testid="tabs-control" role="tab" 
+		 class="{tabBase} {tabRounded} {tabOutline} {tabClasses}">
 		<div class="h-0 w-0 flex-none overflow-hidden">
 			<input type="radio" bind:group {name} value={name} tabindex="-1" />
 		</div>
 		{#if children}
-			<div class="{tabBase} {tabSpaceX} {tabClasses}">
+			<div class="{contentBase} {contentSpaceX} {contentClasses}">
 				{@render children()}
 			</div>
 		{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
new file mode 100644
index 000000000..fa77c6d67
--- /dev/null
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import type { TabsPanelProps } from "./types.js";
+
+    let {
+        value,
+        group,
+        // Root
+        base = getContext<string>('panelBase'),
+        classes = getContext<string>('panelClasses'),
+        // Snippets
+        children,
+    }: TabsPanelProps = $props();
+</script>
+
+{#if value === group && children}
+    <div class="{base} {classes}">
+        {@render children()}
+    </div>
+{/if}
\ No newline at end of file
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/index.ts b/packages/skeleton-svelte/src/lib/components/Tab/index.ts
index a7ea8f646..976fa47fa 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/index.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/index.ts
@@ -1,4 +1,5 @@
 import Tabs from './Tabs.svelte';
 import Control from './TabsControl.svelte';
+import Panel from './TabsPanel.svelte';
 
-export default Object.assign(Tabs, { Control });
+export default Object.assign(Tabs, { Control, Panel });
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 8645beaa6..b39c24f76 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -38,6 +38,8 @@ export interface TabsProps {
 	// Tab Controls
 	/** Sets the children controls base styles. */
 	controlsBase?: string;
+	/** Sets the children controls text styles. */
+	controlsText?: string;
 	/** Sets the children controls Justification styles. */
 	controlsJustify?: string;
 	/** Sets the children controls active styles. */
@@ -57,6 +59,12 @@ export interface TabsProps {
 	/** Provide arbitrary CSS classes to the children controls. */
 	controlsClasses?: string;
 
+	// Tab Panels
+	/** Set the children panels base styles. */
+	panelsBase?: string;
+	/** Provide arbitrary CSS classes to the children panels. */
+	panelsClasses?: string;
+
 	// Snippets ---
 	/** The tab list slot. */
 	list?: Snippet;
@@ -81,6 +89,8 @@ export interface TabsControlProps {
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
+	/** Sets text styles. */
+	text?: string;
 	/** Sets background styles. */
 	background?: string;
 	/** Sets justification styles. */
@@ -100,13 +110,42 @@ export interface TabsControlProps {
 	/** Provide arbitrary CSS classes. */
 	classes?: string;
 
-	// Tab
-	/** Sets the tab content base styles */
+	// Tab ---
+	/** Sets the tab base styles. */
 	tabBase?: string;
+	/** Sets the tab rounded styles. */
+	tabRounded?: string;
+	/** Sets the tab outline styles. */
+	tabOutline?: string;
+	/** Provide arbitrary CSS classes for the tab. */
+	tabClasses?: string;
+
+	// Tab Content
+	/** Sets the tab content base styles */
+	contentBase?: string;
 	/** Sets the tab content horizontal spacing styles. */
-	tabSpaceX?: string;
+	contentSpaceX?: string;
 	/** Provide arbitrary CSS classes to the tab content. */
-	tabClasses?: string;
+	contentClasses?: string;
+
+	// Snippets ---
+	/** The default child slot. */
+	children?: Snippet;
+}
+
+// TabPanel ---
+
+export interface TabsPanelProps {
+	/** Provide the tab panel value. */
+	value: string;
+	/** Provide the tab control radio group. */
+	group: string;
+
+	// Root ---
+	/** Sets base styles. */
+	base?: string;
+	/** Provide arbitrary CSS classes. */
+	classes?: string;
 
 	// Snippets ---
 	/** The default child slot. */
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 10c6ec147..4fa88634e 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -12,7 +12,9 @@
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-		<div>PlaceHolder</div>
+		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>
 
@@ -94,7 +96,7 @@
 				/><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg
 			>
 		</Tabs.Control>
-		<Tabs.Control bind:group name="skull" title="Skeleton">
+		<Tabs.Control bind:group name="skeleton" title="Skeleton">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="24"
@@ -113,7 +115,10 @@
 		</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-		<div>PlaceHolder</div>
+		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="skeleton">Skeleton Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>
 
@@ -125,7 +130,9 @@
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-		<div>PlaceHolder</div>
+		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>
 
@@ -137,7 +144,9 @@
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-		<div>PlaceHolder</div>
+		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>
 
@@ -149,6 +158,8 @@
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
-		<div>PlaceHolder</div>
+		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>

From d6338cced631608c64367c5a5c8641a24903c927 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 16 Mar 2024 18:29:03 +0100
Subject: [PATCH 05/17] applied  ARIA guidelines

---
 .../src/lib/components/Tab/Tabs.svelte        | 23 +++++--
 .../src/lib/components/Tab/TabsControl.svelte | 60 ++++++++++++++++++-
 .../src/lib/components/Tab/TabsPanel.svelte   | 31 +++++-----
 .../src/lib/components/Tab/types.ts           |  6 --
 .../src/routes/components/tabs/+page.svelte   | 20 +++++++
 5 files changed, 110 insertions(+), 30 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 6c6ac35e4..f22a7b3ac 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -31,9 +31,6 @@
 		controlsSpacingY = 'space-y-1',
 		controlsCursor = 'cursor-pointer',
 		controlsClasses = '',
-		// Tab Panels
-		panelsBase = '',
-		panelsClasses = '',
 		// Snippets
 		list,
 		panel
@@ -50,8 +47,16 @@
 	setContext('spacingY', controlsSpacingY);
 	setContext('cursor', controlsCursor);
 	setContext('classes', controlsClasses);
-	setContext('panelBase', panelsBase);
-	setContext('panelClasses', panelsClasses);
+
+	let panelElem: HTMLDivElement | undefined = $state(undefined);
+	let panelTabIndex = $state(0);
+	// if the tabpanel doesn't contain focusable element, it will be focusable following the ARIA guidelines.
+	$effect(() => {
+		if (!panelElem) return;
+		const hasFocusableElements =
+			panelElem.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').length > 0;
+		panelTabIndex = hasFocusableElements ? -1 : 0;
+	});
 </script>
 
 <!-- @component A Tab parent component. -->
@@ -63,7 +68,13 @@
 		</div>
 	{/if}
 	{#if panel}
-		<div class="{panelBase} {panelClasses}" role="tabpanel" aria-labelledby={panelLabelledBy}>
+		<div
+			bind:this={panelElem}
+			class="{panelBase} {panelClasses}"
+			role="tabpanel"
+			aria-labelledby={panelLabelledBy}
+			tabindex={panelTabIndex}
+		>
 			{@render panel()}
 		</div>
 	{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 49c96d666..9dc815454 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -35,15 +35,69 @@
 
 	const rxSelected = $derived(group === name);
 	const rxActive = $derived(rxSelected ? active : inactive);
+
+	let elemInput: HTMLInputElement;
+
+	function onTabKeyDown(event: KeyboardEvent) {
+		if (!['Enter', 'Space', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
+
+		event.preventDefault();
+
+		if (['Enter', 'Space'].includes(event.code)) {
+			elemInput.click();
+			return;
+		}
+
+		const currTab = elemInput.closest('[role="tab"]');
+		if (!currTab) return;
+
+		const tabList = elemInput.closest('[role="tablist"]');
+		if (!tabList) return;
+
+		const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+		const currIndex = tabs.indexOf(currTab);
+
+		let nextIndex = -1;
+		switch (event.code) {
+			case 'ArrowRight':
+				nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+				break;
+			case 'ArrowLeft':
+				nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+				break;
+			case 'Home':
+				nextIndex = 0;
+				break;
+			case 'End':
+				nextIndex = tabs.length - 1;
+				break;
+		}
+
+		if (nextIndex < 0) return;
+
+		const nextTab = tabs![nextIndex!];
+		const nextTabInput = nextTab?.querySelector('input');
+		if (nextTabInput) {
+			nextTabInput.click();
+			(nextTab as HTMLDivElement).focus();
+		}
+	}
 </script>
 
 <!-- @component A Tab Control component. -->
 
 <label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
-	<div aria-controls={controls} tabindex="0" data-testid="tabs-control" role="tab" 
-		 class="{tabBase} {tabRounded} {tabOutline} {tabClasses}">
+	<div
+		aria-controls={controls}
+		tabindex={rxSelected ? 0 : -1}
+		aria-selected={rxSelected}
+		data-testid="tabs-control"
+		role="tab"
+		class="{tabBase} {tabRounded} {tabOutline} {tabClasses}"
+		onkeydown={onTabKeyDown}
+	>
 		<div class="h-0 w-0 flex-none overflow-hidden">
-			<input type="radio" bind:group {name} value={name} tabindex="-1" />
+			<input bind:this={elemInput} type="radio" bind:group {name} value={name} tabindex="-1" />
 		</div>
 		{#if children}
 			<div class="{contentBase} {contentSpaceX} {contentClasses}">
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
index fa77c6d67..ceab54b78 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { getContext } from "svelte";
-	import type { TabsPanelProps } from "./types.js";
+	import type { TabsPanelProps } from './types.js';
 
-    let {
-        value,
-        group,
-        // Root
-        base = getContext<string>('panelBase'),
-        classes = getContext<string>('panelClasses'),
-        // Snippets
-        children,
-    }: TabsPanelProps = $props();
+	let {
+		value,
+		group,
+		// Root
+		base = '',
+		classes = '',
+		// Snippets
+		children
+	}: TabsPanelProps = $props();
 </script>
 
+<!-- @component A Tab Panel component. -->
+
 {#if value === group && children}
-    <div class="{base} {classes}">
-        {@render children()}
-    </div>
-{/if}
\ No newline at end of file
+	<div class="{base} {classes}">
+		{@render children()}
+	</div>
+{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index b39c24f76..d23d9ed1d 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -59,12 +59,6 @@ export interface TabsProps {
 	/** Provide arbitrary CSS classes to the children controls. */
 	controlsClasses?: string;
 
-	// Tab Panels
-	/** Set the children panels base styles. */
-	panelsBase?: string;
-	/** Provide arbitrary CSS classes to the children panels. */
-	panelsClasses?: string;
-
 	// Snippets ---
 	/** The tab list slot. */
 	list?: Snippet;
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 4fa88634e..e985a991b 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -163,3 +163,23 @@
 		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 	{/snippet}
 </Tabs>
+
+<h3 class="h3">With focusable content</h3>
+<Tabs>
+	{#snippet list()}
+		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+	{/snippet}
+	{#snippet panel()}
+		<Tabs.Panel bind:group value="flight">
+			<button type="button" class="btn preset-filled-primary-500">Book a Flight</button>
+		</Tabs.Panel>
+		<Tabs.Panel bind:group value="hotel">
+			<button type="button" class="btn preset-filled-primary-500">See Hotels near you</button>
+		</Tabs.Panel>
+		<Tabs.Panel bind:group value="explore">
+			<button type="button" class="btn preset-filled-primary-500">Explore</button>
+		</Tabs.Panel>
+	{/snippet}
+</Tabs>

From a4a8ea3acb6334a86ae2171c02cc43f967766f6a Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 16 Mar 2024 19:35:07 +0100
Subject: [PATCH 06/17] implemented events

---
 .../src/lib/components/Tab/Tabs.svelte        | 11 +++++++
 .../src/lib/components/Tab/TabsControl.svelte | 11 ++++++-
 .../src/lib/components/Tab/types.ts           | 29 +++++++++++++++++--
 .../src/routes/components/tabs/+page.svelte   | 10 +++++--
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index f22a7b3ac..7e4bf3adf 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -31,6 +31,12 @@
 		controlsSpacingY = 'space-y-1',
 		controlsCursor = 'cursor-pointer',
 		controlsClasses = '',
+		// Events
+		onclick = () => {},
+		onkeypress = () => {},
+		onkeydown = () => {},
+		onkeyup = () => {},
+		onchange = () => {},
 		// Snippets
 		list,
 		panel
@@ -47,6 +53,11 @@
 	setContext('spacingY', controlsSpacingY);
 	setContext('cursor', controlsCursor);
 	setContext('classes', controlsClasses);
+	setContext('onclick', onclick);
+	setContext('onkeypress', onkeypress);
+	setContext('onkeydown', onkeydown);
+	setContext('onkeyup', onkeyup);
+	setContext('onchange', onchange);
 
 	let panelElem: HTMLDivElement | undefined = $state(undefined);
 	let panelTabIndex = $state(0);
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 9dc815454..464a2cf51 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -29,6 +29,12 @@
 		contentBase = 'flex',
 		contentSpaceX = 'space-x-1',
 		contentClasses = '',
+		// Events
+		onclick = getContext<(event: MouseEvent) => {}>('onclick'),
+		onkeypress = getContext<(event: KeyboardEvent) => {}>('onkeypress'),
+		onkeydown = getContext<(event: KeyboardEvent) => {}>('onkeydown'),
+		onkeyup = getContext<(event: KeyboardEvent) => {}>('onkeyup'),
+		onchange = getContext<(group: string) => {}>('onchange'),
 		// Snippets
 		children
 	}: TabsControlProps = $props();
@@ -39,6 +45,7 @@
 	let elemInput: HTMLInputElement;
 
 	function onTabKeyDown(event: KeyboardEvent) {
+		onkeydown(event);
 		if (!['Enter', 'Space', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
 
 		event.preventDefault();
@@ -95,9 +102,11 @@
 		role="tab"
 		class="{tabBase} {tabRounded} {tabOutline} {tabClasses}"
 		onkeydown={onTabKeyDown}
+		{onkeypress}
+		{onkeyup}
 	>
 		<div class="h-0 w-0 flex-none overflow-hidden">
-			<input bind:this={elemInput} type="radio" bind:group {name} value={name} tabindex="-1" />
+			<input bind:this={elemInput} type="radio" bind:group {name} value={name} onchange={() => onchange(group)} {onclick} tabindex="-1" />
 		</div>
 		{#if children}
 			<div class="{contentBase} {contentSpaceX} {contentClasses}">
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index d23d9ed1d..39c2a0e90 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -35,7 +35,7 @@ export interface TabsProps {
 	/** Provide arbitrary CSS classes to the tab panel snippet. */
 	panelClasses?: string;
 
-	// Tab Controls
+	// Tab Controls ---
 	/** Sets the children controls base styles. */
 	controlsBase?: string;
 	/** Sets the children controls text styles. */
@@ -59,6 +59,19 @@ export interface TabsProps {
 	/** Provide arbitrary CSS classes to the children controls. */
 	controlsClasses?: string;
 
+	// Events ---
+	/** Triggers on Tab Control click. */
+	onclick?: (event: MouseEvent) => void;
+	/** Triggers on Tab Control key press. */
+	onkeypress?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control key down. */
+	onkeydown?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control key up. */
+	onkeyup?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control group change. */
+	onchange?: (group: string) => void;
+
+
 	// Snippets ---
 	/** The tab list slot. */
 	list?: Snippet;
@@ -114,7 +127,7 @@ export interface TabsControlProps {
 	/** Provide arbitrary CSS classes for the tab. */
 	tabClasses?: string;
 
-	// Tab Content
+	// Tab Content ---
 	/** Sets the tab content base styles */
 	contentBase?: string;
 	/** Sets the tab content horizontal spacing styles. */
@@ -122,6 +135,18 @@ export interface TabsControlProps {
 	/** Provide arbitrary CSS classes to the tab content. */
 	contentClasses?: string;
 
+	// Events ---
+	/** Triggers on Tab Control click. */
+	onclick?: (event: MouseEvent) => void;
+	/** Triggers on Tab Control key press. */
+	onkeypress?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control key down. */
+	onkeydown?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control key up. */
+	onkeyup?: (event: KeyboardEvent) => void;
+	/** Triggers on Tab Control group change. */
+	onchange?: (group: string) => void;
+
 	// Snippets ---
 	/** The default child slot. */
 	children?: Snippet;
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index e985a991b..0fc191fcf 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -5,9 +5,15 @@
 </script>
 
 <h1 class="h1">Tabs</h1>
-<Tabs>
+<Tabs onclick={() => console.log('onclick for all tabs.')}
+	  onkeypress={() => console.log('onkeypress for all tabs.')}
+	  onchange={(group) => console.log('onchange for all tabs, group:', group)}>
 	{#snippet list()}
-		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="flight" 
+				      onclick={() => console.log('onclick only flight tab.')}
+					  onkeypress={() => console.log('onkeypress only flight tab.')}
+					  onchange={(group) => console.log('onchange only flight tab, group:', group)}
+		>Flight</Tabs.Control>
 		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}

From 696442004a93182fbe1d84a66a76d1e26bdf94c6 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 16 Mar 2024 19:42:52 +0100
Subject: [PATCH 07/17] using better html symantics

---
 packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte   | 4 ++--
 .../skeleton-svelte/src/lib/components/Tab/TabsControl.svelte | 4 ++--
 .../skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 7e4bf3adf..bea62d7cb 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -74,9 +74,9 @@
 
 <div class="{base} {spaceY} {classes}" data-testid="tab-group">
 	{#if list}
-		<div class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
+		<ul class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
 			{@render list()}
-		</div>
+		</ul>
 	{/if}
 	{#if panel}
 		<div
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 464a2cf51..df4ea9aa8 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -94,7 +94,7 @@
 <!-- @component A Tab Control component. -->
 
 <label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
-	<div
+	<li
 		aria-controls={controls}
 		tabindex={rxSelected ? 0 : -1}
 		aria-selected={rxSelected}
@@ -113,5 +113,5 @@
 				{@render children()}
 			</div>
 		{/if}
-	</div>
+	</li>
 </label>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
index ceab54b78..a202a2c15 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -15,7 +15,7 @@
 <!-- @component A Tab Panel component. -->
 
 {#if value === group && children}
-	<div class="{base} {classes}">
+	<section class="{base} {classes}">
 		{@render children()}
-	</div>
+	</section>
 {/if}

From 6842522b17e1b17cb5ac8392fce76c926d1e2723 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Sat, 16 Mar 2024 20:09:35 +0100
Subject: [PATCH 08/17] implement RTL changes

---
 .../src/lib/components/Tab/TabsControl.svelte | 13 +++++--
 .../src/lib/components/Tab/types.ts           |  1 -
 .../src/routes/components/tabs/+page.svelte   | 36 ++++++++++++++-----
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index df4ea9aa8..7271742be 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -61,16 +61,25 @@
 		const tabList = elemInput.closest('[role="tablist"]');
 		if (!tabList) return;
 
+		const isRTL = getComputedStyle(tabList).direction === 'rtl';
 		const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
 		const currIndex = tabs.indexOf(currTab);
 
 		let nextIndex = -1;
 		switch (event.code) {
 			case 'ArrowRight':
-				nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+				if (isRTL) {
+					nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+				} else {
+					nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+				}
 				break;
 			case 'ArrowLeft':
-				nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+				if (isRTL) {
+					nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+				} else {
+					nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+				}
 				break;
 			case 'Home':
 				nextIndex = 0;
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 39c2a0e90..2fa6ea4dd 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -71,7 +71,6 @@ export interface TabsProps {
 	/** Triggers on Tab Control group change. */
 	onchange?: (group: string) => void;
 
-
 	// Snippets ---
 	/** The tab list slot. */
 	list?: Snippet;
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 0fc191fcf..518157574 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -5,15 +5,19 @@
 </script>
 
 <h1 class="h1">Tabs</h1>
-<Tabs onclick={() => console.log('onclick for all tabs.')}
-	  onkeypress={() => console.log('onkeypress for all tabs.')}
-	  onchange={(group) => console.log('onchange for all tabs, group:', group)}>
+<Tabs
+	onclick={() => console.log('onclick for all tabs.')}
+	onkeypress={() => console.log('onkeypress for all tabs.')}
+	onchange={(group) => console.log('onchange for all tabs, group:', group)}
+>
 	{#snippet list()}
-		<Tabs.Control bind:group name="flight" 
-				      onclick={() => console.log('onclick only flight tab.')}
-					  onkeypress={() => console.log('onkeypress only flight tab.')}
-					  onchange={(group) => console.log('onchange only flight tab, group:', group)}
-		>Flight</Tabs.Control>
+		<Tabs.Control
+			bind:group
+			name="flight"
+			onclick={() => console.log('onclick only flight tab.')}
+			onkeypress={() => console.log('onkeypress only flight tab.')}
+			onchange={(group) => console.log('onchange only flight tab, group:', group)}>Flight</Tabs.Control
+		>
 		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 	{/snippet}
@@ -189,3 +193,19 @@
 		</Tabs.Panel>
 	{/snippet}
 </Tabs>
+
+<h3 class="h3">RTL</h3>
+<div dir="rtl">
+	<Tabs>
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+		{/snippet}
+		{#snippet panel()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
+</div>

From 93a2153fe24d4b79a2bf1abb643fdecef20d53d7 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Mon, 18 Mar 2024 18:55:41 +0100
Subject: [PATCH 09/17] renamed rxSelected to selected

---
 .../src/lib/components/Tab/TabsControl.svelte             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 7271742be..665d6cc4e 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -39,8 +39,8 @@
 		children
 	}: TabsControlProps = $props();
 
-	const rxSelected = $derived(group === name);
-	const rxActive = $derived(rxSelected ? active : inactive);
+	const selected = $derived(group === name);
+	const rxActive = $derived(selected ? active : inactive);
 
 	let elemInput: HTMLInputElement;
 
@@ -105,8 +105,8 @@
 <label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
 	<li
 		aria-controls={controls}
-		tabindex={rxSelected ? 0 : -1}
-		aria-selected={rxSelected}
+		tabindex={selected ? 0 : -1}
+		aria-selected={selected}
 		data-testid="tabs-control"
 		role="tab"
 		class="{tabBase} {tabRounded} {tabOutline} {tabClasses}"

From c0dacc5ffc2b519b7710f0492d3d080f05431eff Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Mon, 25 Mar 2024 20:16:12 +0100
Subject: [PATCH 10/17] removed context props

---
 .../src/lib/components/Tab/Tabs.svelte        | 39 +-------
 .../src/lib/components/Tab/TabsControl.svelte | 32 +++----
 .../src/lib/components/Tab/types.ts           | 36 --------
 .../src/routes/components/tabs/+page.svelte   | 24 +++--
 sites/next.skeleton.dev/README.md             |  1 -
 .../src/components/docs/Lightswitch.astro     | 58 ++++++------
 .../src/content/components/react/avatars.mdx  |  1 -
 .../content/components/svelte/app-bars.mdx    |  1 -
 .../src/content/design/colors.mdx             | 42 +++++----
 .../src/content/design/presets.mdx            |  9 +-
 .../resources/contribute/components.mdx       | 38 ++++----
 .../resources/contribute/documentation.mdx    | 26 +++---
 .../resources/contribute/get-started.mdx      | 70 +++++++--------
 .../src/examples/tailwind/forms/Example.astro | 58 ++++++------
 .../tailwind/forms/ExampleSelection.astro     | 48 +++++-----
 .../src/layouts/LayoutDoc.astro               | 89 ++++++++++---------
 sites/themes.skeleton.dev/.prettierrc         |  6 +-
 sites/themes.skeleton.dev/README.md           |  2 +-
 sites/themes.skeleton.dev/package.json        |  2 +-
 sites/themes.skeleton.dev/src/app.html        | 24 +++--
 sites/themes.skeleton.dev/tailwind.config.cjs |  4 +-
 21 files changed, 268 insertions(+), 342 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index bea62d7cb..1bf0fab0a 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -7,58 +7,23 @@
 		listLabelledBy = '',
 		panelLabelledBy = '',
 		// Root
-		base = '',
+		base = 'w-fit',
 		spaceY = 'space-y-4',
 		classes = '',
 		// Tab list
 		listBase = 'flex overflow-x-auto hide-scrollbar',
 		listSpaceX = 'space-x-4',
 		listJustify = 'justify-start',
-		listBorder = 'border-b border-surface-50-950',
+		listBorder = 'border-b border-surface-100-900',
 		listClasses = '',
 		// Tab panel
 		panelBase = '',
 		panelClasses = '',
-		// Tab Controls
-		controlsBase = 'flex',
-		controlsText = 'hover:text-primary-600-400',
-		controlsJustify = 'justify-center',
-		controlsActive = 'border-b-2 border-surface-950-50 text-surface-950-50',
-		controlsInactive = 'text-surface-600-400 fill-surface-600-400',
-		controlsBackground = '',
-		controlsPadding = 'px-4 py-2',
-		controlsRounded = '',
-		controlsSpacingY = 'space-y-1',
-		controlsCursor = 'cursor-pointer',
-		controlsClasses = '',
-		// Events
-		onclick = () => {},
-		onkeypress = () => {},
-		onkeydown = () => {},
-		onkeyup = () => {},
-		onchange = () => {},
 		// Snippets
 		list,
 		panel
 	}: TabsProps = $props();
 
-	setContext('base', controlsBase);
-	setContext('text', controlsText);
-	setContext('justify', controlsJustify);
-	setContext('active', controlsActive);
-	setContext('inactive', controlsInactive);
-	setContext('background', controlsBackground);
-	setContext('padding', controlsPadding);
-	setContext('rounded', controlsRounded);
-	setContext('spacingY', controlsSpacingY);
-	setContext('cursor', controlsCursor);
-	setContext('classes', controlsClasses);
-	setContext('onclick', onclick);
-	setContext('onkeypress', onkeypress);
-	setContext('onkeydown', onkeydown);
-	setContext('onkeyup', onkeyup);
-	setContext('onchange', onchange);
-
 	let panelElem: HTMLDivElement | undefined = $state(undefined);
 	let panelTabIndex = $state(0);
 	// if the tabpanel doesn't contain focusable element, it will be focusable following the ARIA guidelines.
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 665d6cc4e..825b4a5bc 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -9,17 +9,17 @@
 		// A11y
 		controls = '',
 		// Root
-		base = getContext<string>('base'),
-		text = getContext<string>('text'),
-		justify = getContext<string>('justify'),
-		active = getContext<string>('active'),
-		inactive = getContext<string>('inactive'),
-		background = getContext<string>('background'),
-		padding = getContext<string>('padding'),
-		rounded = getContext<string>('rounded'),
-		spacingY = getContext<string>('spacingY'),
-		cursor = getContext<string>('cursor'),
-		classes = getContext<string>('classes'),
+		base = 'flex',
+		text = 'hover:text-primary-600-400',
+		justify = 'justify-center',
+		active = 'border-b-2 border-surface-950-50 text-surface-950-50',
+		inactive = 'text-surface-600-400 fill-surface-600-400',
+		background = '',
+		padding = 'px-4 py-2',
+		rounded = '',
+		spacingY = 'space-y-1',
+		cursor = 'cursor-pointer',
+		classes = '',
 		// Tab
 		tabBase = '',
 		tabRounded = 'rounded-container',
@@ -30,11 +30,11 @@
 		contentSpaceX = 'space-x-1',
 		contentClasses = '',
 		// Events
-		onclick = getContext<(event: MouseEvent) => {}>('onclick'),
-		onkeypress = getContext<(event: KeyboardEvent) => {}>('onkeypress'),
-		onkeydown = getContext<(event: KeyboardEvent) => {}>('onkeydown'),
-		onkeyup = getContext<(event: KeyboardEvent) => {}>('onkeyup'),
-		onchange = getContext<(group: string) => {}>('onchange'),
+		onclick = () => {},
+		onkeypress = () => {},
+		onkeydown = () => {},
+		onkeyup = () => {},
+		onchange = () => {},
 		// Snippets
 		children
 	}: TabsControlProps = $props();
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 2fa6ea4dd..8169018a7 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -35,42 +35,6 @@ export interface TabsProps {
 	/** Provide arbitrary CSS classes to the tab panel snippet. */
 	panelClasses?: string;
 
-	// Tab Controls ---
-	/** Sets the children controls base styles. */
-	controlsBase?: string;
-	/** Sets the children controls text styles. */
-	controlsText?: string;
-	/** Sets the children controls Justification styles. */
-	controlsJustify?: string;
-	/** Sets the children controls active styles. */
-	controlsActive?: string;
-	/** Sets the children controls inactive styles. */
-	controlsInactive?: string;
-	/** Sets the children controls background styles. */
-	controlsBackground?: string;
-	/** Sets the children controls padding styles. */
-	controlsPadding?: string;
-	/** Sets the children controls rounded styles. */
-	controlsRounded?: string;
-	/** Sets the children controls vertical spacing styles. */
-	controlsSpacingY?: string;
-	/** Sets the children controls cursor styles. */
-	controlsCursor?: string;
-	/** Provide arbitrary CSS classes to the children controls. */
-	controlsClasses?: string;
-
-	// Events ---
-	/** Triggers on Tab Control click. */
-	onclick?: (event: MouseEvent) => void;
-	/** Triggers on Tab Control key press. */
-	onkeypress?: (event: KeyboardEvent) => void;
-	/** Triggers on Tab Control key down. */
-	onkeydown?: (event: KeyboardEvent) => void;
-	/** Triggers on Tab Control key up. */
-	onkeyup?: (event: KeyboardEvent) => void;
-	/** Triggers on Tab Control group change. */
-	onchange?: (group: string) => void;
-
 	// Snippets ---
 	/** The tab list slot. */
 	list?: Snippet;
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 518157574..0aecf1d67 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -5,18 +5,14 @@
 </script>
 
 <h1 class="h1">Tabs</h1>
-<Tabs
-	onclick={() => console.log('onclick for all tabs.')}
-	onkeypress={() => console.log('onkeypress for all tabs.')}
-	onchange={(group) => console.log('onchange for all tabs, group:', group)}
->
+<Tabs>
 	{#snippet list()}
 		<Tabs.Control
 			bind:group
 			name="flight"
-			onclick={() => console.log('onclick only flight tab.')}
-			onkeypress={() => console.log('onkeypress only flight tab.')}
-			onchange={(group) => console.log('onchange only flight tab, group:', group)}>Flight</Tabs.Control
+			onclick={() => console.log('onclick')}
+			onkeypress={() => console.log('onkeypress')}
+			onchange={(group) => console.log('onchange, group:', group)}>Flight</Tabs.Control
 		>
 		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
 		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
@@ -133,11 +129,11 @@
 </Tabs>
 
 <h3 class="h3">Stretched</h3>
-<Tabs controlsClasses="w-full">
+<Tabs base="w-full">
 	{#snippet list()}
-		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+		<Tabs.Control bind:group name="flight" classes="w-full">Flight</Tabs.Control>
+		<Tabs.Control bind:group name="hotel" classes="w-full">Hotel</Tabs.Control>
+		<Tabs.Control bind:group name="explore" classes="w-full">Explore</Tabs.Control>
 	{/snippet}
 	{#snippet panel()}
 		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
@@ -147,7 +143,7 @@
 </Tabs>
 
 <h3 class="h3">Justify center</h3>
-<Tabs listJustify="justify-center">
+<Tabs base="w-full" listJustify="justify-center">
 	{#snippet list()}
 		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
 		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
@@ -161,7 +157,7 @@
 </Tabs>
 
 <h3 class="h3">Justify End</h3>
-<Tabs listJustify="justify-end">
+<Tabs base="w-full" listJustify="justify-end">
 	{#snippet list()}
 		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
 		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
diff --git a/sites/next.skeleton.dev/README.md b/sites/next.skeleton.dev/README.md
index f78859430..64d8af8e6 100644
--- a/sites/next.skeleton.dev/README.md
+++ b/sites/next.skeleton.dev/README.md
@@ -39,4 +39,3 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview`         | Preview your build locally, before deploying     |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
-
diff --git a/sites/next.skeleton.dev/src/components/docs/Lightswitch.astro b/sites/next.skeleton.dev/src/components/docs/Lightswitch.astro
index 7ea526077..3f37455de 100644
--- a/sites/next.skeleton.dev/src/components/docs/Lightswitch.astro
+++ b/sites/next.skeleton.dev/src/components/docs/Lightswitch.astro
@@ -2,39 +2,39 @@
 // Lightswitch
 // Ref: https://docs.astro.build/en/tutorial/6-islands/2/
 
-import { SunMoon } from 'lucide-react'
+import { SunMoon } from 'lucide-react';
 ---
 
 <button id="lightswitch" title="Toggle dark mode.">
-    <SunMoon size={24} />
+	<SunMoon size={24} />
 </button>
 
 <script is:inline>
-    const darkMode = (() => {
-        if (typeof localStorage !== 'undefined' && localStorage.getItem('darkMode')) {
-            return localStorage.getItem('darkMode')
-        }
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark'
-        }
-        return 'light'
-    })()
-
-    if (darkMode === 'light') {
-        document.documentElement.classList.remove('dark')
-    } else {
-        document.documentElement.classList.add('dark')
-    }
-
-    window.localStorage.setItem('darkMode', darkMode)
-
-    const handleToggleClick = () => {
-        const element = document.documentElement
-        element.classList.toggle('dark')
-
-        const isDark = element.classList.contains('dark')
-        localStorage.setItem('darkMode', isDark ? 'dark' : 'light')
-    }
-
-    document.getElementById('lightswitch').addEventListener('click', handleToggleClick)
+	const darkMode = (() => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('darkMode')) {
+			return localStorage.getItem('darkMode');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	})();
+
+	if (darkMode === 'light') {
+		document.documentElement.classList.remove('dark');
+	} else {
+		document.documentElement.classList.add('dark');
+	}
+
+	window.localStorage.setItem('darkMode', darkMode);
+
+	const handleToggleClick = () => {
+		const element = document.documentElement;
+		element.classList.toggle('dark');
+
+		const isDark = element.classList.contains('dark');
+		localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
+	};
+
+	document.getElementById('lightswitch').addEventListener('click', handleToggleClick);
 </script>
diff --git a/sites/next.skeleton.dev/src/content/components/react/avatars.mdx b/sites/next.skeleton.dev/src/content/components/react/avatars.mdx
index 4e906e37c..6d265771f 100644
--- a/sites/next.skeleton.dev/src/content/components/react/avatars.mdx
+++ b/sites/next.skeleton.dev/src/content/components/react/avatars.mdx
@@ -24,4 +24,3 @@ When the `src` prop is _undefined_, default children will show. This can be used
 <Avatar>SK</Avatar>
 <Avatar>💀</Avatar>
 ```
-
diff --git a/sites/next.skeleton.dev/src/content/components/svelte/app-bars.mdx b/sites/next.skeleton.dev/src/content/components/svelte/app-bars.mdx
index ec089a924..563f4285c 100644
--- a/sites/next.skeleton.dev/src/content/components/svelte/app-bars.mdx
+++ b/sites/next.skeleton.dev/src/content/components/svelte/app-bars.mdx
@@ -43,4 +43,3 @@ Use Tailwind's [responsive design](https://tailwindcss.com/docs/responsive-desig
 		<Code code={ExampleResponsiveRaw} lang="svelte" />
 	</Fragment>
 </Preview>
-
diff --git a/sites/next.skeleton.dev/src/content/design/colors.mdx b/sites/next.skeleton.dev/src/content/design/colors.mdx
index 26cadf050..5f77025f9 100644
--- a/sites/next.skeleton.dev/src/content/design/colors.mdx
+++ b/sites/next.skeleton.dev/src/content/design/colors.mdx
@@ -445,21 +445,21 @@ Available to all supported properties and colors via `.{property}-{color}-{shade
 ```
 
 <div class="grid grid-cols-2 lg:grid-cols-7">
-    {palette.map(color => (
-        <div class="text-center space-y-4">
-            <small class="opacity-60">{color.name}</small>
-            <div class="grid grid-rows-11">
-                {/* Loop Ramp */}
-                {color.ramp.map(shade => (
-                    <div class={`${shade.base} py-2 flex justify-center items-center`}>
-                        <strong class:list={[ shade.contrast, { underline: shade.value === 500 }, 'text-sm' ]} >
-                            {shade.value}
-                        </strong>
-                    </div>
-                ))}
-            </div>
-        </div>
-    ))}
+	{palette.map((color) => (
+		<div class="text-center space-y-4">
+			<small class="opacity-60">{color.name}</small>
+			<div class="grid grid-rows-11">
+				{/* Loop Ramp */}
+				{color.ramp.map((shade) => (
+					<div class={`${shade.base} py-2 flex justify-center items-center`}>
+						<strong class:list={[shade.contrast, { underline: shade.value === 500 }, 'text-sm']}>
+							{shade.value}
+						</strong>
+					</div>
+				))}
+			</div>
+		</div>
+	))}
 </div>
 
 ## Pairings
@@ -473,9 +473,13 @@ Available to all supported properties and colors via `.{property}-{color}-{base}
 ```
 
 <div class="grid grid-cols-6 grid-rows-2 space-x-2">
-    <div class="row-span-3 bg-primary-500 py-2 flex justify-center items-center">
-        <strong class="text-primary-contrast-500 text-sm text-center">500<br />Default</strong>
-    </div>
+	<div class="row-span-3 bg-primary-500 py-2 flex justify-center items-center">
+		<strong class="text-primary-contrast-500 text-sm text-center">
+			500
+			<br />
+			Default
+		</strong>
+	</div>
 	<div class="col-span-5 grid grid-cols-5 gap-2">
 		<div class="bg-primary-400 py-2 flex justify-center items-center">
 			<strong class="text-primary-contrast-400 text-sm">400</strong>
@@ -512,8 +516,8 @@ Available to all supported properties and colors via `.{property}-{color}-{base}
 	</div>
 </div>
 
-
 {/* Live Preview */}
+
 <div class="grid grid-cols-11 grid-rows-2 gap-2">
 	{/* --- */}
 	<div class="bg-surface-500/5 col-span-5 flex justify-center items-center">Forward</div>
diff --git a/sites/next.skeleton.dev/src/content/design/presets.mdx b/sites/next.skeleton.dev/src/content/design/presets.mdx
index 8386fb449..277b23c8d 100644
--- a/sites/next.skeleton.dev/src/content/design/presets.mdx
+++ b/sites/next.skeleton.dev/src/content/design/presets.mdx
@@ -31,8 +31,7 @@ export const components = componentSet;
 		</div>
 	</Fragment>
 	<Fragment slot="code">
-		```css
-		.preset-filled-{color}-{shade}-{shade}
+		```css .preset-filled-{color}-{shade}-{shade}
 		```
 	</Fragment>
 </Preview>
@@ -53,8 +52,7 @@ export const components = componentSet;
 		</div>
 	</Fragment>
 	<Fragment slot="code">
-		```css
-		.preset-tonal-{color}
+		```css .preset-tonal-{color}
 		```
 	</Fragment>
 </Preview>
@@ -81,8 +79,7 @@ export const components = componentSet;
 		</div>
 	</Fragment>
 	<Fragment slot="code">
-		```css
-		.preset-outlined-{color}-{shade}-{shade}
+		```css .preset-outlined-{color}-{shade}-{shade}
 		```
 	</Fragment>
 </Preview>
diff --git a/sites/next.skeleton.dev/src/content/resources/contribute/components.mdx b/sites/next.skeleton.dev/src/content/resources/contribute/components.mdx
index e16c3f598..5c81f07a7 100644
--- a/sites/next.skeleton.dev/src/content/resources/contribute/components.mdx
+++ b/sites/next.skeleton.dev/src/content/resources/contribute/components.mdx
@@ -77,28 +77,28 @@ let {
 } = $props<ExampleProps>();
 ```
 
-- **Functional** - these should be single instance props that directly affect the functionality of the component.
-- **Style** - contain and accept Tailwind utility classes to affect the style of the component.
-- **Event** - provide callback functions for external event handlers.
-- **Children** - contain reference to React children, Svelte Snippets, or similar.
+-   **Functional** - these should be single instance props that directly affect the functionality of the component.
+-   **Style** - contain and accept Tailwind utility classes to affect the style of the component.
+-   **Event** - provide callback functions for external event handlers.
+-   **Children** - contain reference to React children, Svelte Snippets, or similar.
 
 ### Style Prop Conventions
 
 Style props implement sementic naming conventions to enable specificity and avoid naming conflicts. These are organized into three specific categories. Each should be maintained in the following order.
 
-- `base` - houses the base utility classes, which enables faux-headless styling.
-    - Replaces: `cBase` class definitions from Skeleton v2.
-    - Parent base props are not prefixed, which helps maintain parity cross-framework
-    - Child base props are prefixed: `titleBase`, `panelBase`, `controlBase`.
-- `{property}` - individual style props that houses one or more “swappable” utility classes.
-    - Naming should follow Tailwind convention, except for single letter descriptors (ex: use `padding` instead of `p`).
-    - Parent props are not prefixed: `background`, `margin`, `border`.
-    - Child props are prefixed: `titleBg`, `controlMargin`, `panelBorder`.
-- `classes` - allows you to extend or override the class list with an arbitrary set of utility classes.
-    - Replaces the inconsistent use of `slotX` and `regionX` classes in Skeleton v2.
-	- Uses `classes` (plural) to avoid conflict with the standard `class` attribute.
-    - Parent instances are not prefixed: `classes`
-    - Child instances are prefixed: `titleClasses`, `controlClasses`, `panelClasses`
+-   `base` - houses the base utility classes, which enables faux-headless styling.
+    -   Replaces: `cBase` class definitions from Skeleton v2.
+    -   Parent base props are not prefixed, which helps maintain parity cross-framework
+    -   Child base props are prefixed: `titleBase`, `panelBase`, `controlBase`.
+-   `{property}` - individual style props that houses one or more “swappable” utility classes.
+    -   Naming should follow Tailwind convention, except for single letter descriptors (ex: use `padding` instead of `p`).
+    -   Parent props are not prefixed: `background`, `margin`, `border`.
+    -   Child props are prefixed: `titleBg`, `controlMargin`, `panelBorder`.
+-   `classes` - allows you to extend or override the class list with an arbitrary set of utility classes.
+    -   Replaces the inconsistent use of `slotX` and `regionX` classes in Skeleton v2.
+    -   Uses `classes` (plural) to avoid conflict with the standard `class` attribute.
+        -   Parent instances are not prefixed: `classes`
+        -   Child instances are prefixed: `titleClasses`, `controlClasses`, `panelClasses`
 
 Here's what this might look like in practice.
 
@@ -264,8 +264,8 @@ Finally, make sure components are included in the package export list.
 Found in `/src/lib/index.ts`.
 
 ```ts
-export { Foo } from "../components/Foo/Foo.jsx";
-export { Bar } from "../components/Bar/Bar.jsx";
+export { Foo } from '../components/Foo/Foo.jsx';
+export { Bar } from '../components/Bar/Bar.jsx';
 ```
 
 ### Svelte
diff --git a/sites/next.skeleton.dev/src/content/resources/contribute/documentation.mdx b/sites/next.skeleton.dev/src/content/resources/contribute/documentation.mdx
index bdd81b735..1a3f1dc49 100644
--- a/sites/next.skeleton.dev/src/content/resources/contribute/documentation.mdx
+++ b/sites/next.skeleton.dev/src/content/resources/contribute/documentation.mdx
@@ -15,12 +15,12 @@ The Skeleton documentation is created using [Astro](https://astro.build/).
 
 Review the full list of integrations in `astro.config.mjs`.
 
-- [React](https://docs.astro.build/en/guides/integrations-guide/react/)
-- [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/)
-- [Tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)
-- [MDX (Markdown)](https://docs.astro.build/en/guides/markdown-content/)
-- [Prettier](https://docs.astro.build/en/editor-setup/#prettier)
-- [Expressive Code](https://expressive-code.com/)
+-   [React](https://docs.astro.build/en/guides/integrations-guide/react/)
+-   [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/)
+-   [Tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)
+-   [MDX (Markdown)](https://docs.astro.build/en/guides/markdown-content/)
+-   [Prettier](https://docs.astro.build/en/editor-setup/#prettier)
+-   [Expressive Code](https://expressive-code.com/)
 
 ## App Structure
 
@@ -48,9 +48,9 @@ Navigate the app structure within the `/src` directory. This includes the follow
 
 Similar to standard pages, but split into multiple parts. This represents the header and tabbed sections.
 
-* `/content/common/{feature}.mdx` - contains the frontmatter metadata for the page header information.
-* `/content/react/{feature}.mdx` - provide usage instruction for the React component only.
-* `/content/svelte/{feature}.mdx` - provide usage instruction for the Svelte component only.
+-   `/content/common/{feature}.mdx` - contains the frontmatter metadata for the page header information.
+-   `/content/react/{feature}.mdx` - provide usage instruction for the React component only.
+-   `/content/svelte/{feature}.mdx` - provide usage instruction for the Svelte component only.
 
 ## MDX Markdown
 
@@ -68,7 +68,8 @@ export const components = componentSet {/* <-- ADD THIS! */}
 {/* (content) */}
 ```
 
-{/*
+{/\*
+
 ### Common MDX Content
 
 > NOTE: This technique is NOT recommended.
@@ -78,10 +79,12 @@ Please be aware it is technically possible to pull shared MDX content from `/con
 ```ts
 import * as Common from '@content/components/common/avatars.mdx';
 ```
+
 ```html
 <Common.Content />
 ```
-*/}
+
+\*/}
 
 ## Global Components
 
@@ -150,6 +153,7 @@ This application implements [Astro-Icon](https://www.astroicon.dev/) for local c
 ```ts
 import { Icon } from 'astro-icon/components';
 ```
+
 ```tsx
 <Icon name="skeleton" size={24} />
 <Icon name="react" size={24} />
diff --git a/sites/next.skeleton.dev/src/content/resources/contribute/get-started.mdx b/sites/next.skeleton.dev/src/content/resources/contribute/get-started.mdx
index a5c936263..7ddc10e05 100644
--- a/sites/next.skeleton.dev/src/content/resources/contribute/get-started.mdx
+++ b/sites/next.skeleton.dev/src/content/resources/contribute/get-started.mdx
@@ -39,42 +39,42 @@ Skeleton makes use of [PNPM](https://pnpm.io/) and [PNPM workspaces](https://pnp
 
 Public facing websites that are deployed to Vercel.
 
-| Path                          | Description                                         |
-| ----------------------------- | --------------------------------------------------- |
-| `/sites/skeleton.dev`         | The production skeleton.dev documentation website.  |
-| `/sites/next.skeleton.dev`    | The temporary Next/v3 documentation website.        |
-| `/sites/themes.skeleton.dev`  | The Skeleton themes generator website               |
+| Path                         | Description                                        |
+| ---------------------------- | -------------------------------------------------- |
+| `/sites/skeleton.dev`        | The production skeleton.dev documentation website. |
+| `/sites/next.skeleton.dev`   | The temporary Next/v3 documentation website.       |
+| `/sites/themes.skeleton.dev` | The Skeleton themes generator website              |
 
 ### Packages
 
 Modular Skeleton packages distributed via NPM.
 
-| Path                             | Description                                                          |
-| -------------------------------- | -------------------------------------------------------------------- |
-| `/packages/skeleton`             | The Skeleton core package, containing the Tailwind plugin.           |
-| `/packages/skeleton-react`       | The Skeleton React package, containing Skeleton React components.    |
-| `/packages/skeleton-svelte`      | The Skeleton Svelte package, containing Skeleton Svelte components.  |
-| `/packages/create-skeleton-app`  | The Skeleton onboarding CLI application.                             |
+| Path                            | Description                                                         |
+| ------------------------------- | ------------------------------------------------------------------- |
+| `/packages/skeleton`            | The Skeleton core package, containing the Tailwind plugin.          |
+| `/packages/skeleton-react`      | The Skeleton React package, containing Skeleton React components.   |
+| `/packages/skeleton-svelte`     | The Skeleton Svelte package, containing Skeleton Svelte components. |
+| `/packages/create-skeleton-app` | The Skeleton onboarding CLI application.                            |
 
 ## Branch
 
 Skeleton uses two primary branches. All pull requests should be created from and to the `dev` branch.
 
-| Branch   | Description                                            | Pull Requests                                   |
-| -------- | ------------------------------------------------------ | ----------------------------------------------- |
-| `dev`    | Represents the bleeding edge developement branch.      | <Check size={16} className='inline' /> Allowed  |
-| `master` | Represents the release branch of the all projects.     | <X size={16} className='inline' /> Never        |
+| Branch   | Description                                        | Pull Requests                                  |
+| -------- | -------------------------------------------------- | ---------------------------------------------- |
+| `dev`    | Represents the bleeding edge developement branch.  | <Check size={16} className='inline' /> Allowed |
+| `master` | Represents the release branch of the all projects. | <X size={16} className='inline' /> Never       |
 
 ### PR Branch Conventions
 
 Please use the following naming convention when creating your pull request.
 
-| Branch     | Role                                   |
-| ---------- | -------------------------------------- |
-| `docs/*`   | When updating the documentation site.  |
-| `feat/*`   | When implementing a new feature.       |
-| `chore/*`  | When implementing small changes.       |
-| `bugfix/*` | When implementing feature bugfixes.    |
+| Branch     | Role                                  |
+| ---------- | ------------------------------------- |
+| `docs/*`   | When updating the documentation site. |
+| `feat/*`   | When implementing a new feature.      |
+| `chore/*`  | When implementing small changes.      |
+| `bugfix/*` | When implementing feature bugfixes.   |
 
 Keep branch names short and semantic, using dashes to seperate words.
 
@@ -93,19 +93,19 @@ bugfix/accordion-render-issue
 4. Follow the instructions when prompted.
 5. Changeset are added to the `/.changeset` directory.
 
-Changesets use semantic version. We recommend the following convention. 
+Changesets use semantic version. We recommend the following convention.
 
-| Version     | Role                                         |
-| ----------- | ---------------------------------------------|
-| `major`     | Do not use. Reserved for maintainers.        |
-| `minor`     | For notable changes, such as a new features. |
-| `patch`     | For small changes, such as a typo.           |
+| Version | Role                                         |
+| ------- | -------------------------------------------- |
+| `major` | Do not use. Reserved for maintainers.        |
+| `minor` | For notable changes, such as a new features. |
+| `patch` | For small changes, such as a typo.           |
 
 Changeset descriptions will appear verbatim on the [Changelog](https://github.com/skeletonlabs/skeleton/blob/dev/packages/skeleton/CHANGELOG.md). Keep it short, semantic, and prefix this like branch names.
 
 ```mdx
 ---
-"@skeletonlabs/skeleton-svelte": minor
+'@skeletonlabs/skeleton-svelte': minor
 ---
 
 feat: Added a new `background` component prop.
@@ -136,10 +136,10 @@ pnpm test
 
 We recommend the following extensions for VS Code:
 
-- [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
-- [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
-- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
-- [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
-- [PostCSS](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
-- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Vitest](https://marketplace.visualstudio.com/items?itemName=vitest.explorer)
\ No newline at end of file
+-   [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
+-   [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+-   [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
+-   [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+-   [PostCSS](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
+-   [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+-   [Vitest](https://marketplace.visualstudio.com/items?itemName=vitest.explorer)
diff --git a/sites/next.skeleton.dev/src/examples/tailwind/forms/Example.astro b/sites/next.skeleton.dev/src/examples/tailwind/forms/Example.astro
index 1d3657879..6e2324011 100644
--- a/sites/next.skeleton.dev/src/examples/tailwind/forms/Example.astro
+++ b/sites/next.skeleton.dev/src/examples/tailwind/forms/Example.astro
@@ -1,30 +1,32 @@
 <form class="card preset-filled-surface-100-900 p-4 w-full max-w-md space-y-4">
-    <fieldset class="space-y-4">
-        {/* Input */}
-        <label class="label">
-            <span class="label-text">Input</span>
-            <input class="input" type="text" placeholder="Input" />
-        </label>
-        {/* Select */}
-        <label class="label">
-            <span class="label-text">Select</span>
-            <select class="select">
-                <option value="1">Option 1</option>
-                <option value="2">Option 2</option>
-                <option value="3">Option 3</option>
-                <option value="4">Option 4</option>
-                <option value="5">Option 5</option>
-            </select>
-        </label>
-        {/* Textarea */}
-        <label class="label">
-            <span class="label-text">Textarea</span>
-            <textarea class="textarea rounded-container" rows="4" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit."
-            ></textarea>
-        </label>
-    </fieldset>
-    <fieldset class="flex justify-end">
-        {/* Button */}
-        <button type="button" class="btn preset-outlined-surface-300-700">Submit</button>
-    </fieldset>
+	<fieldset class="space-y-4">
+		{/* Input */}
+		<label class="label">
+			<span class="label-text">Input</span>
+			<input class="input" type="text" placeholder="Input" />
+		</label>
+		{/* Select */}
+		<label class="label">
+			<span class="label-text">Select</span>
+			<select class="select">
+				<option value="1">Option 1</option>
+				<option value="2">Option 2</option>
+				<option value="3">Option 3</option>
+				<option value="4">Option 4</option>
+				<option value="5">Option 5</option>
+			</select>
+		</label>
+		{/* Textarea */}
+		<label class="label">
+			<span class="label-text">Textarea</span>
+			<textarea
+				class="textarea rounded-container"
+				rows="4"
+				placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit."></textarea>
+		</label>
+	</fieldset>
+	<fieldset class="flex justify-end">
+		{/* Button */}
+		<button type="button" class="btn preset-outlined-surface-300-700">Submit</button>
+	</fieldset>
 </form>
diff --git a/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleSelection.astro b/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleSelection.astro
index c56aca4ca..bdedcafd9 100644
--- a/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleSelection.astro
+++ b/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleSelection.astro
@@ -1,26 +1,26 @@
 <form class="w-full max-w-md mx-auto space-y-4">
-    {/* Default */}
-    <select class="select">
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-        <option value="4">Option 4</option>
-        <option value="5">Option 5</option>
-    </select>
-    {/* Size */}
-    <select class="select rounded-container" size="4" value="1">
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-        <option value="4">Option 4</option>
-        <option value="5">Option 5</option>
-    </select>
-    {/* Mutiple */}
-    <select class="select rounded-container" multiple value={['1', '2']}>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-        <option value="4">Option 4</option>
-        <option value="5">Option 5</option>
-    </select>
+	{/* Default */}
+	<select class="select">
+		<option value="1">Option 1</option>
+		<option value="2">Option 2</option>
+		<option value="3">Option 3</option>
+		<option value="4">Option 4</option>
+		<option value="5">Option 5</option>
+	</select>
+	{/* Size */}
+	<select class="select rounded-container" size="4" value="1">
+		<option value="1">Option 1</option>
+		<option value="2">Option 2</option>
+		<option value="3">Option 3</option>
+		<option value="4">Option 4</option>
+		<option value="5">Option 5</option>
+	</select>
+	{/* Mutiple */}
+	<select class="select rounded-container" multiple value={['1', '2']}>
+		<option value="1">Option 1</option>
+		<option value="2">Option 2</option>
+		<option value="3">Option 3</option>
+		<option value="4">Option 4</option>
+		<option value="5">Option 5</option>
+	</select>
 </form>
diff --git a/sites/next.skeleton.dev/src/layouts/LayoutDoc.astro b/sites/next.skeleton.dev/src/layouts/LayoutDoc.astro
index 02d6cecde..2b8f40c62 100644
--- a/sites/next.skeleton.dev/src/layouts/LayoutDoc.astro
+++ b/sites/next.skeleton.dev/src/layouts/LayoutDoc.astro
@@ -59,48 +59,49 @@ const urls = {
 ---
 
 <LayoutRoot {...layoutProps}>
-    <!-- Header -->
-    <Header />
-    <!-- Page -->
-    <div class="container mx-auto grid grid-cols-1 xl:grid-cols-[200px_minmax(0px,_1fr)_290px]">
-        <!-- Navigation -->
-        <aside class="hidden xl:block self-start sticky top-0 max-h-screen overflow-y-auto p-4 xl:px-0 py-10">
-            <Navigation />
-        </aside>
-        <!-- Main -->
-        <main class="self-start p-4 xl:p-10 xl:pb-48 space-y-8" id="_top">
-            <!-- Breadcrumbs -->
-            <Breadcrumbs />
-            <!-- Header -->
-            <header class="space-y-2">
-                <h1 class="h1">{frontmatter.title ?? '(title)'}</h1>
-                <p class="opacity-60 type-scale-4">{frontmatter.description ?? '(description)'}</p>
-            </header>
-            <!-- Chips -->
-            <ChipsBar {frontmatter} {urls} />
-            <!-- Framework Tabs -->
-            <FrameworkPicker />
-            <!-- Content -->
-            <article class="space-y-8">
-                <slot />
-            </article>
-            <!-- API Reference -->
-            <!-- TODO: add API tables here -->
-        </main>
-        <!-- Sidebar -->
-        <aside class="hidden xl:block self-start sticky top-0 max-h-screen overflow-y-auto p-4 xl:p-10 xl:pl-0">
-            <!-- TODO: add Carbon Ads here -->
-            <!-- Table of Components -->
-            <TableOfContents {headings} />
-        </aside>
-    </div>
-    <!-- Footer -->
-    <footer class="preset-filled-surface-100-900 p-4 xl:p-10">
-        <div class="container mx-auto flex justify-center gap-4">
-            <Icon name="skeleton" size={20} />
-            <p class="type-scale-1 opacity-60">
-                Built by <a class="underline" href="https://www.skeletonlabs.co/" target="_blank">Skeleton Labs</a> and our amazing community.
-            </p>
-        </div>
-    </footer>
+	<!-- Header -->
+	<Header />
+	<!-- Page -->
+	<div class="container mx-auto grid grid-cols-1 xl:grid-cols-[200px_minmax(0px,_1fr)_290px]">
+		<!-- Navigation -->
+		<aside class="hidden xl:block self-start sticky top-0 max-h-screen overflow-y-auto p-4 xl:px-0 py-10">
+			<Navigation />
+		</aside>
+		<!-- Main -->
+		<main class="self-start p-4 xl:p-10 xl:pb-48 space-y-8" id="_top">
+			<!-- Breadcrumbs -->
+			<Breadcrumbs />
+			<!-- Header -->
+			<header class="space-y-2">
+				<h1 class="h1">{frontmatter.title ?? '(title)'}</h1>
+				<p class="opacity-60 type-scale-4">{frontmatter.description ?? '(description)'}</p>
+			</header>
+			<!-- Chips -->
+			<ChipsBar {frontmatter} {urls} />
+			<!-- Framework Tabs -->
+			<FrameworkPicker />
+			<!-- Content -->
+			<article class="space-y-8">
+				<slot />
+			</article>
+			<!-- API Reference -->
+			<!-- TODO: add API tables here -->
+		</main>
+		<!-- Sidebar -->
+		<aside class="hidden xl:block self-start sticky top-0 max-h-screen overflow-y-auto p-4 xl:p-10 xl:pl-0">
+			<!-- TODO: add Carbon Ads here -->
+			<!-- Table of Components -->
+			<TableOfContents {headings} />
+		</aside>
+	</div>
+	<!-- Footer -->
+	<footer class="preset-filled-surface-100-900 p-4 xl:p-10">
+		<div class="container mx-auto flex justify-center gap-4">
+			<Icon name="skeleton" size={20} />
+			<p class="type-scale-1 opacity-60">
+				Built by <a class="underline" href="https://www.skeletonlabs.co/" target="_blank">Skeleton Labs</a> and our
+				amazing community.
+			</p>
+		</div>
+	</footer>
 </LayoutRoot>
diff --git a/sites/themes.skeleton.dev/.prettierrc b/sites/themes.skeleton.dev/.prettierrc
index 71025450d..19cb34e49 100644
--- a/sites/themes.skeleton.dev/.prettierrc
+++ b/sites/themes.skeleton.dev/.prettierrc
@@ -3,9 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 120,
-	"plugins": [
-		"prettier-plugin-svelte"
-	],
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -14,4 +12,4 @@
 			}
 		}
 	]
-}
\ No newline at end of file
+}
diff --git a/sites/themes.skeleton.dev/README.md b/sites/themes.skeleton.dev/README.md
index 07ad29c1c..356f4e038 100644
--- a/sites/themes.skeleton.dev/README.md
+++ b/sites/themes.skeleton.dev/README.md
@@ -1,3 +1,3 @@
 # themes.skeleton.dev
 
-The theme builder for Skeleton
\ No newline at end of file
+The theme builder for Skeleton
diff --git a/sites/themes.skeleton.dev/package.json b/sites/themes.skeleton.dev/package.json
index 89899d90c..8d1b07093 100644
--- a/sites/themes.skeleton.dev/package.json
+++ b/sites/themes.skeleton.dev/package.json
@@ -44,4 +44,4 @@
 		"chroma-js": "^2.4.2",
 		"lucide-svelte": "^0.341.0"
 	}
-}
\ No newline at end of file
+}
diff --git a/sites/themes.skeleton.dev/src/app.html b/sites/themes.skeleton.dev/src/app.html
index 92b6c6cbc..f86646cfb 100644
--- a/sites/themes.skeleton.dev/src/app.html
+++ b/sites/themes.skeleton.dev/src/app.html
@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+		<title>Themes - Skeleton</title>
+	</head>
 
-<head>
-	<meta charset="utf-8" />
-	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	%sveltekit.head%
-	<title>Themes - Skeleton</title>
-</head>
-
-<body data-sveltekit-preload-data="hover" data-theme="next">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+	<body data-sveltekit-preload-data="hover" data-theme="next">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/sites/themes.skeleton.dev/tailwind.config.cjs b/sites/themes.skeleton.dev/tailwind.config.cjs
index 0c30f3450..a4d014b85 100644
--- a/sites/themes.skeleton.dev/tailwind.config.cjs
+++ b/sites/themes.skeleton.dev/tailwind.config.cjs
@@ -1,7 +1,7 @@
 // import { skeleton } from '../../packages/skeleton/dist/plugin/index.cjs'
 // NOTE: do not delete the above comment. It's required for local HMR on plugin changes.
 
-import { skeleton } from "@skeletonlabs/skeleton/plugin";
+import { skeleton } from '@skeletonlabs/skeleton/plugin';
 import forms from '@tailwindcss/forms';
 
 /** @type {import('tailwindcss').Config}*/
@@ -14,7 +14,7 @@ const config = {
 	plugins: [
 		forms,
 		// NOTE: do not load a theme if you wish to have live previews
-		skeleton(),
+		skeleton()
 		// To set a hardcoded theme, use the following:
 		// skeleton({
 		// 	themes: {

From 69982d3b971f0862dc3ed4d1bf95ed46bb9baabe Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 27 Mar 2024 19:38:17 +0100
Subject: [PATCH 11/17] mini style changes

---
 .../src/lib/components/Tab/TabsControl.svelte         | 11 ++++++-----
 .../skeleton-svelte/src/lib/components/Tab/types.ts   |  4 ++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 825b4a5bc..803f9305c 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
 	import type { TabsControlProps } from './types.js';
 
 	let {
@@ -22,8 +21,10 @@
 		classes = '',
 		// Tab
 		tabBase = '',
+		tabBackground = 'focus:preset-filled-primary-50-950',
+		tabPadding = 'p-2',
 		tabRounded = 'rounded-container',
-		tabOutline = 'focus:outline focus:outline-primary-600-400 focus:outline-offset-4',
+		tabOutline = 'focus:outline focus:outline-primary-600-400 !outline-2',
 		tabClasses = '',
 		// Tab Content
 		contentBase = 'flex',
@@ -48,13 +49,13 @@
 		onkeydown(event);
 		if (!['Enter', 'Space', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
 
-		event.preventDefault();
-
 		if (['Enter', 'Space'].includes(event.code)) {
 			elemInput.click();
 			return;
 		}
 
+		event.preventDefault();
+
 		const currTab = elemInput.closest('[role="tab"]');
 		if (!currTab) return;
 
@@ -109,7 +110,7 @@
 		aria-selected={selected}
 		data-testid="tabs-control"
 		role="tab"
-		class="{tabBase} {tabRounded} {tabOutline} {tabClasses}"
+		class="{tabBase} {tabBackground} {tabPadding} {tabRounded} {tabOutline} {tabClasses}"
 		onkeydown={onTabKeyDown}
 		{onkeypress}
 		{onkeyup}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 8169018a7..ce9a470d2 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -83,6 +83,10 @@ export interface TabsControlProps {
 	// Tab ---
 	/** Sets the tab base styles. */
 	tabBase?: string;
+	/** Sets the tab background styles. */
+	tabBackground?: string;
+	/** Sets the tab padding styles. */
+	tabPadding?: string;
 	/** Sets the tab rounded styles. */
 	tabRounded?: string;
 	/** Sets the tab outline styles. */

From 18c5c37b791dfa37d19a7b2e3fea15327bff802c Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 27 Mar 2024 19:45:59 +0100
Subject: [PATCH 12/17] moved a11y props

---
 .../src/lib/components/Tab/Tabs.svelte               |  7 +------
 .../src/lib/components/Tab/TabsControl.svelte        |  3 ++-
 .../src/lib/components/Tab/TabsPanel.svelte          |  4 +++-
 .../skeleton-svelte/src/lib/components/Tab/types.ts  | 12 ++++++------
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 1bf0fab0a..622a0a30c 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
 	import type { TabsProps } from './types.js';
 
 	let {
-		// A11Y
-		listLabelledBy = '',
-		panelLabelledBy = '',
 		// Root
 		base = 'w-fit',
 		spaceY = 'space-y-4',
@@ -39,7 +35,7 @@
 
 <div class="{base} {spaceY} {classes}" data-testid="tab-group">
 	{#if list}
-		<ul class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist" aria-labelledby={listLabelledBy}>
+		<ul class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist">
 			{@render list()}
 		</ul>
 	{/if}
@@ -48,7 +44,6 @@
 			bind:this={panelElem}
 			class="{panelBase} {panelClasses}"
 			role="tabpanel"
-			aria-labelledby={panelLabelledBy}
 			tabindex={panelTabIndex}
 		>
 			{@render panel()}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 803f9305c..9de3458cd 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -6,6 +6,7 @@
 		group,
 		title = '',
 		// A11y
+		labelledBy = '',
 		controls = '',
 		// Root
 		base = 'flex',
@@ -103,7 +104,7 @@
 
 <!-- @component A Tab Control component. -->
 
-<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" {title}>
+<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" aria-labelledby={labelledBy} {title}>
 	<li
 		aria-controls={controls}
 		tabindex={selected ? 0 : -1}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
index a202a2c15..075fbc7c2 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -4,6 +4,8 @@
 	let {
 		value,
 		group,
+		//A11y
+		labelledBy,
 		// Root
 		base = '',
 		classes = '',
@@ -15,7 +17,7 @@
 <!-- @component A Tab Panel component. -->
 
 {#if value === group && children}
-	<section class="{base} {classes}">
+	<section class="{base} {classes}" aria-labelledby={labelledBy}>
 		{@render children()}
 	</section>
 {/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index ce9a470d2..7a02f9af5 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -3,12 +3,6 @@ import type { Snippet } from 'svelte';
 // Tabs ---
 
 export interface TabsProps {
-	// A11Y ---
-	/** Sets the tab list snippet element's A11y labelledby. */
-	listLabelledBy?: string;
-	/** Sets the tab panel snippet element's A11y labelledby. */
-	panelLabelledBy?: string;
-
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
@@ -53,6 +47,8 @@ export interface TabsControlProps {
 	title?: string;
 
 	// A11y ---
+	/** Sets the A11y labelledby. */
+	labelledBy?: string;
 	/** Sets ARIA controls value to define which panel this tab controls. */
 	controls?: string;
 
@@ -127,6 +123,10 @@ export interface TabsPanelProps {
 	/** Provide the tab control radio group. */
 	group: string;
 
+	// A11y ---
+	/** Sets the A11y labelledby. */
+	labelledBy?: string;
+
 	// Root ---
 	/** Sets base styles. */
 	base?: string;

From c3ad466cba452697e77115566060fbd65c488a90 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 27 Mar 2024 19:47:40 +0100
Subject: [PATCH 13/17] corrected a11y prop name

---
 .../skeleton-svelte/src/lib/components/Tab/TabsControl.svelte | 4 ++--
 packages/skeleton-svelte/src/lib/components/Tab/types.ts      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 9de3458cd..9d5925864 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -6,7 +6,7 @@
 		group,
 		title = '',
 		// A11y
-		labelledBy = '',
+		label = '',
 		controls = '',
 		// Root
 		base = 'flex',
@@ -104,7 +104,7 @@
 
 <!-- @component A Tab Control component. -->
 
-<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" aria-labelledby={labelledBy} {title}>
+<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" aria-label={label} {title}>
 	<li
 		aria-controls={controls}
 		tabindex={selected ? 0 : -1}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 7a02f9af5..09a072102 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -47,8 +47,8 @@ export interface TabsControlProps {
 	title?: string;
 
 	// A11y ---
-	/** Sets the A11y labelledby. */
-	labelledBy?: string;
+	/** Sets the A11y label. */
+	label?: string;
 	/** Sets ARIA controls value to define which panel this tab controls. */
 	controls?: string;
 

From d47e9f7b657483e43ed407df547750e9e9b7f566 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 27 Mar 2024 19:49:27 +0100
Subject: [PATCH 14/17] update data-testId

---
 packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 622a0a30c..b2fd77407 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -33,7 +33,7 @@
 
 <!-- @component A Tab parent component. -->
 
-<div class="{base} {spaceY} {classes}" data-testid="tab-group">
+<div class="{base} {spaceY} {classes}" data-testid="tabs">
 	{#if list}
 		<ul class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist">
 			{@render list()}

From 532c7e8307770573e33edb52965ba14120e449ff Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <mahmoud.alhalaby@gmail.cim>
Date: Wed, 27 Mar 2024 20:29:57 +0100
Subject: [PATCH 15/17] applied some code suggestions

---
 .../src/lib/components/Tab/Tabs.svelte             |  7 +++----
 .../src/lib/components/Tab/TabsControl.svelte      | 14 +++++++-------
 .../src/lib/components/Tab/TabsPanel.svelte        |  5 ++---
 .../src/lib/components/Tab/types.ts                | 10 ++--------
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index b2fd77407..2f409b2f6 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -13,7 +13,6 @@
 		listBorder = 'border-b border-surface-100-900',
 		listClasses = '',
 		// Tab panel
-		panelBase = '',
 		panelClasses = '',
 		// Snippets
 		list,
@@ -35,14 +34,14 @@
 
 <div class="{base} {spaceY} {classes}" data-testid="tabs">
 	{#if list}
-		<ul class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist">
+		<div class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist">
 			{@render list()}
-		</ul>
+		</div>
 	{/if}
 	{#if panel}
 		<div
 			bind:this={panelElem}
-			class="{panelBase} {panelClasses}"
+			class="{panelClasses}"
 			role="tabpanel"
 			tabindex={panelTabIndex}
 		>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index 9d5925864..b6f8b8aa2 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -4,8 +4,8 @@
 	let {
 		name,
 		group,
-		title = '',
 		// A11y
+		title = '',
 		label = '',
 		controls = '',
 		// Root
@@ -21,7 +21,6 @@
 		cursor = 'cursor-pointer',
 		classes = '',
 		// Tab
-		tabBase = '',
 		tabBackground = 'focus:preset-filled-primary-50-950',
 		tabPadding = 'p-2',
 		tabRounded = 'rounded-container',
@@ -48,13 +47,13 @@
 
 	function onTabKeyDown(event: KeyboardEvent) {
 		onkeydown(event);
-		if (!['Enter', 'Space', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
-
+		
 		if (['Enter', 'Space'].includes(event.code)) {
 			elemInput.click();
 			return;
 		}
 
+		if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
 		event.preventDefault();
 
 		const currTab = elemInput.closest('[role="tab"]');
@@ -105,17 +104,18 @@
 <!-- @component A Tab Control component. -->
 
 <label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" aria-label={label} {title}>
-	<li
+	<div
 		aria-controls={controls}
 		tabindex={selected ? 0 : -1}
 		aria-selected={selected}
 		data-testid="tabs-control"
 		role="tab"
-		class="{tabBase} {tabBackground} {tabPadding} {tabRounded} {tabOutline} {tabClasses}"
+		class="{tabBackground} {tabPadding} {tabRounded} {tabOutline} {tabClasses}"
 		onkeydown={onTabKeyDown}
 		{onkeypress}
 		{onkeyup}
 	>
+		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 		<div class="h-0 w-0 flex-none overflow-hidden">
 			<input bind:this={elemInput} type="radio" bind:group {name} value={name} onchange={() => onchange(group)} {onclick} tabindex="-1" />
 		</div>
@@ -124,5 +124,5 @@
 				{@render children()}
 			</div>
 		{/if}
-	</li>
+	</div>
 </label>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
index 075fbc7c2..ceb1360b7 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -7,7 +7,6 @@
 		//A11y
 		labelledBy,
 		// Root
-		base = '',
 		classes = '',
 		// Snippets
 		children
@@ -17,7 +16,7 @@
 <!-- @component A Tab Panel component. -->
 
 {#if value === group && children}
-	<section class="{base} {classes}" aria-labelledby={labelledBy}>
+	<div class="{classes}" aria-labelledby={labelledBy}>
 		{@render children()}
-	</section>
+	</div>
 {/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index 09a072102..af13a9522 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -24,8 +24,6 @@ export interface TabsProps {
 	listClasses?: string;
 
 	// Tab panel ---
-	/** Sets the tab panel snippet element's base styles. */
-	panelBase?: string;
 	/** Provide arbitrary CSS classes to the tab panel snippet. */
 	panelClasses?: string;
 
@@ -43,10 +41,10 @@ export interface TabsControlProps {
 	name: string;
 	/** Provide the tab control radio group. */
 	group: string;
+	
+	// A11y ---
 	/** Provide a hoverable title attribute. */
 	title?: string;
-
-	// A11y ---
 	/** Sets the A11y label. */
 	label?: string;
 	/** Sets ARIA controls value to define which panel this tab controls. */
@@ -77,8 +75,6 @@ export interface TabsControlProps {
 	classes?: string;
 
 	// Tab ---
-	/** Sets the tab base styles. */
-	tabBase?: string;
 	/** Sets the tab background styles. */
 	tabBackground?: string;
 	/** Sets the tab padding styles. */
@@ -128,8 +124,6 @@ export interface TabsPanelProps {
 	labelledBy?: string;
 
 	// Root ---
-	/** Sets base styles. */
-	base?: string;
 	/** Provide arbitrary CSS classes. */
 	classes?: string;
 

From 46707b6788a00efb09fa55686705ea1cb5a05a34 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Wed, 27 Mar 2024 18:01:02 -0500
Subject: [PATCH 16/17] Audit and changes

---
 packages/skeleton-svelte/src/app.html         |  24 +-
 .../src/lib/components/Tab/Tabs.svelte        |  35 +-
 .../src/lib/components/Tab/TabsControl.svelte |  62 ++--
 .../src/lib/components/Tab/TabsPanel.svelte   |   5 +-
 .../src/lib/components/Tab/types.ts           |  44 ++-
 .../src/routes/components/tabs/+page.svelte   | 317 ++++++++----------
 packages/skeleton/src/plugin/base/core.css    |   4 +
 7 files changed, 214 insertions(+), 277 deletions(-)

diff --git a/packages/skeleton-svelte/src/app.html b/packages/skeleton-svelte/src/app.html
index 0e6cfae73..9a76d7554 100644
--- a/packages/skeleton-svelte/src/app.html
+++ b/packages/skeleton-svelte/src/app.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html lang="en" class="dark">
-	<head>
-		<meta charset="utf-8" />
-		<title>skeleton-svelte</title>
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
 
-	<body data-sveltekit-preload-data="hover" data-theme="cerberus">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
+<head>
+	<meta charset="utf-8" />
+	<title>skeleton-svelte</title>
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" data-theme="cerberus">
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 2f409b2f6..632f843b8 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -3,49 +3,30 @@
 
 	let {
 		// Root
-		base = 'w-fit',
+		base = 'w-full',
 		spaceY = 'space-y-4',
 		classes = '',
-		// Tab list
+		// Tab List
 		listBase = 'flex overflow-x-auto hide-scrollbar',
-		listSpaceX = 'space-x-4',
+		listGap = 'gap-4',
 		listJustify = 'justify-start',
-		listBorder = 'border-b border-surface-100-900',
+		listBorder = 'border-b border-surface-200-800',
 		listClasses = '',
-		// Tab panel
-		panelClasses = '',
 		// Snippets
 		list,
-		panel
+		panels
 	}: TabsProps = $props();
-
-	let panelElem: HTMLDivElement | undefined = $state(undefined);
-	let panelTabIndex = $state(0);
-	// if the tabpanel doesn't contain focusable element, it will be focusable following the ARIA guidelines.
-	$effect(() => {
-		if (!panelElem) return;
-		const hasFocusableElements =
-			panelElem.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').length > 0;
-		panelTabIndex = hasFocusableElements ? -1 : 0;
-	});
 </script>
 
 <!-- @component A Tab parent component. -->
 
 <div class="{base} {spaceY} {classes}" data-testid="tabs">
 	{#if list}
-		<div class="{listBase} {listSpaceX} {listJustify} {listBorder} {listClasses}" role="tablist">
+		<div class="{listBase} {listGap} {listJustify} {listBorder} {listClasses}" role="tablist">
 			{@render list()}
 		</div>
 	{/if}
-	{#if panel}
-		<div
-			bind:this={panelElem}
-			class="{panelClasses}"
-			role="tabpanel"
-			tabindex={panelTabIndex}
-		>
-			{@render panel()}
-		</div>
+	{#if panels}
+		{@render panels()}
 	{/if}
 </div>
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index b6f8b8aa2..b315db9f6 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -9,26 +9,23 @@
 		label = '',
 		controls = '',
 		// Root
-		base = 'flex',
-		text = 'hover:text-primary-600-400',
+		base = 'group flex items-center border-b-2',
+		active = 'text-surface-950-50 border-surface-950-50',
+		inactive = 'text-surface-600-400 fill-surface-600-400 border-transparent',
+		text = 'type-scale-3',
 		justify = 'justify-center',
-		active = 'border-b-2 border-surface-950-50 text-surface-950-50',
-		inactive = 'text-surface-600-400 fill-surface-600-400',
 		background = '',
-		padding = 'px-4 py-2',
+		padding = 'pb-2',
 		rounded = '',
-		spacingY = 'space-y-1',
+		gap = 'gap-1',
 		cursor = 'cursor-pointer',
 		classes = '',
-		// Tab
-		tabBackground = 'focus:preset-filled-primary-50-950',
-		tabPadding = 'p-2',
-		tabRounded = 'rounded-container',
-		tabOutline = 'focus:outline focus:outline-primary-600-400 !outline-2',
-		tabClasses = '',
-		// Tab Content
-		contentBase = 'flex',
-		contentSpaceX = 'space-x-1',
+		// Content
+		contentBase = 'w-full flex justify-center items-center gap-4 focus:-outline-offset-2',
+		contentBg = 'group-hover:preset-tonal-primary',
+		contentPadding = 'p-2 px-4',
+		contentGap = 'gap-2',
+		contentRounded = 'rounded-container',
 		contentClasses = '',
 		// Events
 		onclick = () => {},
@@ -45,27 +42,30 @@
 
 	let elemInput: HTMLInputElement;
 
-	function onTabKeyDown(event: KeyboardEvent) {
+	function onKeyDown(event: KeyboardEvent) {
+		// Fire Event Handler
 		onkeydown(event);
-		
-		if (['Enter', 'Space'].includes(event.code)) {
-			elemInput.click();
-			return;
-		}
 
+		// If select key events
 		if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.code)) return;
+
+		// Prevent default behavior
 		event.preventDefault();
 
+		// Find the closest tab/tablelist
 		const currTab = elemInput.closest('[role="tab"]');
 		if (!currTab) return;
-
 		const tabList = elemInput.closest('[role="tablist"]');
 		if (!tabList) return;
 
+		// Get RTL mode
 		const isRTL = getComputedStyle(tabList).direction === 'rtl';
+		// Get list of tab elements
 		const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+		// Get a reference to the current tab
 		const currIndex = tabs.indexOf(currTab);
 
+		// Determine the index of the next tab
 		let nextIndex = -1;
 		switch (event.code) {
 			case 'ArrowRight':
@@ -89,9 +89,9 @@
 				nextIndex = tabs.length - 1;
 				break;
 		}
-
 		if (nextIndex < 0) return;
 
+		// Set Active Tab
 		const nextTab = tabs![nextIndex!];
 		const nextTabInput = nextTab?.querySelector('input');
 		if (nextTabInput) {
@@ -103,24 +103,26 @@
 
 <!-- @component A Tab Control component. -->
 
-<label class="{base} {text} {justify} {rxActive} {background} {padding} {rounded} {spacingY} {cursor} {classes}" aria-label={label} {title}>
+<label class="{base} {rxActive} {text} {justify} {background} {padding} {rounded} {gap} {cursor} {classes}" aria-label={label} {title}>
+	<!-- NOTE: do not add additional classes to this <div> -->
 	<div
-		aria-controls={controls}
+		class="size-full"
 		tabindex={selected ? 0 : -1}
+		aria-controls={controls}
 		aria-selected={selected}
 		data-testid="tabs-control"
 		role="tab"
-		class="{tabBackground} {tabPadding} {tabRounded} {tabOutline} {tabClasses}"
-		onkeydown={onTabKeyDown}
+		onkeydown={onKeyDown}
 		{onkeypress}
 		{onkeyup}
 	>
-		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
+		<!-- Keep these classes on wrapping element -->
 		<div class="h-0 w-0 flex-none overflow-hidden">
-			<input bind:this={elemInput} type="radio" bind:group {name} value={name} onchange={() => onchange(group)} {onclick} tabindex="-1" />
+			<input bind:group bind:this={elemInput} type="radio" {name} value={name} onchange={() => onchange(group)} {onclick} tabindex="-1" />
 		</div>
+		<!-- Content -->
 		{#if children}
-			<div class="{contentBase} {contentSpaceX} {contentClasses}">
+			<div class="{contentBase} {contentBg} {contentPadding} {contentGap} {contentRounded} {contentClasses}">
 				{@render children()}
 			</div>
 		{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
index ceb1360b7..eb907128e 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsPanel.svelte
@@ -2,9 +2,10 @@
 	import type { TabsPanelProps } from './types.js';
 
 	let {
+		id,
 		value,
 		group,
-		//A11y
+		// A11y
 		labelledBy,
 		// Root
 		classes = '',
@@ -16,7 +17,7 @@
 <!-- @component A Tab Panel component. -->
 
 {#if value === group && children}
-	<div class="{classes}" aria-labelledby={labelledBy}>
+	<div {id} role="tabpanel" tabindex="0" aria-labelledby={labelledBy} class={classes}>
 		{@render children()}
 	</div>
 {/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index af13a9522..a57675569 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -6,7 +6,7 @@ export interface TabsProps {
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
-	/** Set vertical spacing styles. */
+	/** Set vertical spacing between list and panels. */
 	spaceY?: string;
 	/** Provide arbitrary CSS classes. */
 	classes?: string;
@@ -16,8 +16,8 @@ export interface TabsProps {
 	listBase?: string;
 	/** Sets the list snippet element's justification styles. */
 	listJustify?: string;
-	/** Sets the list snippet element's horizontal spacing styles. */
-	listSpaceX?: string;
+	/** Sets the list snippet element's gap spacing. */
+	listGap?: string;
 	/** Sets the list snippet element's border styles. */
 	listBorder?: string;
 	/** Provide arbitrary CSS classes to the list snippet. */
@@ -31,7 +31,7 @@ export interface TabsProps {
 	/** The tab list slot. */
 	list?: Snippet;
 	/** The tab panel slot. */
-	panel?: Snippet;
+	panels?: Snippet;
 }
 
 // TabControl ---
@@ -41,7 +41,7 @@ export interface TabsControlProps {
 	name: string;
 	/** Provide the tab control radio group. */
 	group: string;
-	
+
 	// A11y ---
 	/** Provide a hoverable title attribute. */
 	title?: string;
@@ -53,7 +53,7 @@ export interface TabsControlProps {
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
-	/** Sets text styles. */
+	/** Sets text size styles. */
 	text?: string;
 	/** Sets background styles. */
 	background?: string;
@@ -67,31 +67,25 @@ export interface TabsControlProps {
 	padding?: string;
 	/** Sets rounded styles. */
 	rounded?: string;
-	/** Sets vertical spacing styles. */
-	spacingY?: string;
+	/** Sets vertical gap styles. */
+	gap?: string;
 	/** Sets cursor styles. */
 	cursor?: string;
 	/** Provide arbitrary CSS classes. */
 	classes?: string;
 
 	// Tab ---
-	/** Sets the tab background styles. */
-	tabBackground?: string;
-	/** Sets the tab padding styles. */
-	tabPadding?: string;
-	/** Sets the tab rounded styles. */
-	tabRounded?: string;
-	/** Sets the tab outline styles. */
-	tabOutline?: string;
-	/** Provide arbitrary CSS classes for the tab. */
-	tabClasses?: string;
-
-	// Tab Content ---
-	/** Sets the tab content base styles */
+	/** Sets tab content base styles. */
 	contentBase?: string;
-	/** Sets the tab content horizontal spacing styles. */
-	contentSpaceX?: string;
-	/** Provide arbitrary CSS classes to the tab content. */
+	/** Sets the tab content background styles. */
+	contentBg?: string;
+	/** Sets the tab content padding styles. */
+	contentPadding?: string;
+	/** Sets the tab content gap styles. */
+	contentGap?: string;
+	/** Sets the tab content rounded styles. */
+	contentRounded?: string;
+	/** Provide arbitrary CSS classes for the tab content. */
 	contentClasses?: string;
 
 	// Events ---
@@ -114,6 +108,8 @@ export interface TabsControlProps {
 // TabPanel ---
 
 export interface TabsPanelProps {
+	/** Provide a unique ID. */
+	id?: string;
 	/** Provide the tab panel value. */
 	value: string;
 	/** Provide the tab control radio group. */
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index 0aecf1d67..f11d587c6 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -2,206 +2,157 @@
 	import { Tabs } from '$lib/index.js';
 
 	let group = $state('flight');
+
+	let icons = {
+		flight:
+			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plane size-4" ><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z" /></svg>',
+		hotel:
+			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hotel size-4" ><path d="M10 22v-6.57" /><path d="M12 11h.01" /><path d="M12 7h.01" /><path d="M14 15.43V22" /><path d="M15 16a5 5 0 0 0-6 0" /><path d="M16 11h.01" /><path d="M16 7h.01" /><path d="M8 11h.01" /><path d="M8 7h.01" /><rect x="4" y="2" width="16" height="20" rx="2" /></svg>',
+		cube: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box size-4" ><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg>'
+	};
 </script>
 
-<h1 class="h1">Tabs</h1>
-<Tabs>
-	{#snippet list()}
-		<Tabs.Control
-			bind:group
-			name="flight"
-			onclick={() => console.log('onclick')}
-			onkeypress={() => console.log('onkeypress')}
-			onchange={(group) => console.log('onchange, group:', group)}>Flight</Tabs.Control
-		>
-		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-	{/snippet}
-</Tabs>
+<div class="space-y-10">
+	<h1 class="h1">Tabs</h1>
 
-<h3 class="h3">With Icon</h3>
-<Tabs>
-	{#snippet list()}
-		<Tabs.Control bind:group name="flight" title="flight">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-plane"
-				><path
-					d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"
-				/></svg
-			>
-			<span>Flight</span>
-		</Tabs.Control>
-		<Tabs.Control bind:group name="hotel" title="hotel">
-			<span>Hotel</span>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-hotel"
-				><path d="M10 22v-6.57" /><path d="M12 11h.01" /><path d="M12 7h.01" /><path d="M14 15.43V22" /><path
-					d="M15 16a5 5 0 0 0-6 0"
-				/><path d="M16 11h.01" /><path d="M16 7h.01" /><path d="M8 11h.01" /><path d="M8 7h.01" /><rect
-					x="4"
-					y="2"
-					width="16"
-					height="20"
-					rx="2"
-				/></svg
-			>
-		</Tabs.Control>
-		<Tabs.Control bind:group name="explore" title="explore">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-box"
-				><path
-					d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
-				/><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg
-			>
-			<span>Explore</span>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-box"
-				><path
-					d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
-				/><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg
-			>
-		</Tabs.Control>
-		<Tabs.Control bind:group name="skeleton" title="Skeleton">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-skull"
-				><circle cx="9" cy="12" r="1" /><circle cx="15" cy="12" r="1" /><path d="M8 20v2h8v-2" /><path d="m12.5 17-.5-1-.5 1h1z" /><path
-					d="M16 20a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20"
-				/></svg
+	<Tabs>
+		{#snippet list()}
+			<Tabs.Control
+				bind:group
+				name="flight"
+				onclick={() => console.log('onclick')}
+				onkeypress={() => console.log('onkeypress')}
+				onchange={(group) => console.log('onchange, group:', group)}>Flight</Tabs.Control
 			>
-		</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="skeleton">Skeleton Panel</Tabs.Panel>
-	{/snippet}
-</Tabs>
+			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
 
-<h3 class="h3">Stretched</h3>
-<Tabs base="w-full">
-	{#snippet list()}
-		<Tabs.Control bind:group name="flight" classes="w-full">Flight</Tabs.Control>
-		<Tabs.Control bind:group name="hotel" classes="w-full">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore" classes="w-full">Explore</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-	{/snippet}
-</Tabs>
+	<h3 class="h3">With Icon</h3>
+	<Tabs>
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight" title="flight">
+				{@html icons.flight}
+				<span>Flight</span>
+			</Tabs.Control>
+			<Tabs.Control bind:group name="hotel" title="hotel">
+				{@html icons.hotel}
+				<span>Hotel</span>
+			</Tabs.Control>
+			<Tabs.Control bind:group name="explore" title="explore">
+				{@html icons.cube}
+				<span>Explore</span>
+			</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="skeleton">Skeleton Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
 
-<h3 class="h3">Justify center</h3>
-<Tabs base="w-full" listJustify="justify-center">
-	{#snippet list()}
-		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-	{/snippet}
-</Tabs>
+	<h3 class="h3">Icon Only</h3>
+	<Tabs>
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight" title="flight">
+				{@html icons.flight}
+			</Tabs.Control>
+			<Tabs.Control bind:group name="hotel" title="hotel">
+				{@html icons.hotel}
+			</Tabs.Control>
+			<Tabs.Control bind:group name="explore" title="explore">
+				{@html icons.cube}
+			</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
 
-<h3 class="h3">Justify End</h3>
-<Tabs base="w-full" listJustify="justify-end">
-	{#snippet list()}
-		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-	{/snippet}
-</Tabs>
+	<h3 class="h3">Stretched</h3>
+	<Tabs base="w-full">
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight" classes="w-full">Flight</Tabs.Control>
+			<Tabs.Control bind:group name="hotel" classes="w-full">Hotel</Tabs.Control>
+			<Tabs.Control bind:group name="explore" classes="w-full">Explore</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
 
-<h3 class="h3">With focusable content</h3>
-<Tabs>
-	{#snippet list()}
-		<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-		<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-		<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-	{/snippet}
-	{#snippet panel()}
-		<Tabs.Panel bind:group value="flight">
-			<button type="button" class="btn preset-filled-primary-500">Book a Flight</button>
-		</Tabs.Panel>
-		<Tabs.Panel bind:group value="hotel">
-			<button type="button" class="btn preset-filled-primary-500">See Hotels near you</button>
-		</Tabs.Panel>
-		<Tabs.Panel bind:group value="explore">
-			<button type="button" class="btn preset-filled-primary-500">Explore</button>
-		</Tabs.Panel>
-	{/snippet}
-</Tabs>
+	<h3 class="h3">Justify Center</h3>
+	<Tabs base="w-full" listJustify="justify-center">
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+		{/snippet}
+	</Tabs>
 
-<h3 class="h3">RTL</h3>
-<div dir="rtl">
-	<Tabs>
+	<h3 class="h3">Justify End</h3>
+	<Tabs base="w-full" listJustify="justify-end">
 		{#snippet list()}
 			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
 			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
 			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
 		{/snippet}
-		{#snippet panel()}
+		{#snippet panels()}
 			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
 			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
 			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 		{/snippet}
 	</Tabs>
+
+	<h3 class="h3">Focusable Content</h3>
+	<Tabs>
+		{#snippet list()}
+			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+		{/snippet}
+		{#snippet panels()}
+			<Tabs.Panel bind:group value="flight">
+				<button type="button" class="btn preset-filled-primary-500">Book a Flight</button>
+			</Tabs.Panel>
+			<Tabs.Panel bind:group value="hotel">
+				<button type="button" class="btn preset-filled-primary-500">See Hotels near you</button>
+			</Tabs.Panel>
+			<Tabs.Panel bind:group value="explore">
+				<button type="button" class="btn preset-filled-primary-500">Explore</button>
+			</Tabs.Panel>
+		{/snippet}
+	</Tabs>
+
+	<h3 class="h3">RTL</h3>
+	<div dir="rtl">
+		<Tabs>
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+				<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+				<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</div>
 </div>
diff --git a/packages/skeleton/src/plugin/base/core.css b/packages/skeleton/src/plugin/base/core.css
index 98ce461e5..4355cda54 100644
--- a/packages/skeleton/src/plugin/base/core.css
+++ b/packages/skeleton/src/plugin/base/core.css
@@ -44,6 +44,10 @@ html {
 	Source: http://www.outlinenone.com/
 */
 
+*:focus {
+	@apply outline-primary-500;
+}
+
 /* Disabled States --- */
 
 .disabled,

From b78f01dde93c34df2f25b90381bd370a3b76b294 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Thu, 28 Mar 2024 16:55:47 -0500
Subject: [PATCH 17/17] Second round audit changes

---
 packages/skeleton-react/tailwind.config.js    |   9 +-
 .../src/lib/components/Tab/Tabs.svelte        |   9 +-
 .../src/lib/components/Tab/TabsControl.svelte |  44 +--
 .../src/lib/components/Tab/types.ts           |  29 +-
 .../src/routes/components/tabs/+page.svelte   | 271 +++++++++---------
 packages/skeleton-svelte/tailwind.config.js   |   9 +-
 packages/skeleton/src/plugin/base/core.css    |   4 -
 7 files changed, 205 insertions(+), 170 deletions(-)

diff --git a/packages/skeleton-react/tailwind.config.js b/packages/skeleton-react/tailwind.config.js
index ce5c4bc78..18b0b626a 100644
--- a/packages/skeleton-react/tailwind.config.js
+++ b/packages/skeleton-react/tailwind.config.js
@@ -2,7 +2,7 @@
 // NOTE: do not delete the above comment. It's required for local HMR on plugin changes.
 
 import { skeleton } from "@skeletonlabs/skeleton/plugin";
-import { cerberus } from "@skeletonlabs/skeleton/themes";
+import * as themes from "@skeletonlabs/skeleton/themes";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -13,7 +13,12 @@ export default {
 	},
 	plugins: [
 		skeleton({
-			themes: [cerberus],
+			themes: [
+				themes.cerberus,
+				themes.catppuccin,
+				themes.pine,
+				themes.rose,
+			]
 		}),
 	],
 };
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
index 632f843b8..a51921cd3 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/Tabs.svelte
@@ -2,15 +2,16 @@
 	import type { TabsProps } from './types.js';
 
 	let {
+		id,
 		// Root
 		base = 'w-full',
 		spaceY = 'space-y-4',
 		classes = '',
 		// Tab List
-		listBase = 'flex overflow-x-auto hide-scrollbar',
-		listGap = 'gap-4',
+		listBase = 'flex',
 		listJustify = 'justify-start',
-		listBorder = 'border-b border-surface-200-800',
+		listGap = 'gap-2',
+		listBorder = 'border-b-[1px] border-surface-200-800',
 		listClasses = '',
 		// Snippets
 		list,
@@ -20,7 +21,7 @@
 
 <!-- @component A Tab parent component. -->
 
-<div class="{base} {spaceY} {classes}" data-testid="tabs">
+<div {id} class="{base} {spaceY} {classes}" data-testid="tabs">
 	{#if list}
 		<div class="{listBase} {listGap} {listJustify} {listBorder} {listClasses}" role="tablist">
 			{@render list()}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
index b315db9f6..25b1209eb 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
+++ b/packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
@@ -2,30 +2,33 @@
 	import type { TabsControlProps } from './types.js';
 
 	let {
+		id,
 		name,
 		group,
+		title,
 		// A11y
-		title = '',
 		label = '',
 		controls = '',
 		// Root
-		base = 'group flex items-center border-b-2',
+		base = 'group',
 		active = 'text-surface-950-50 border-surface-950-50',
-		inactive = 'text-surface-600-400 fill-surface-600-400 border-transparent',
-		text = 'type-scale-3',
-		justify = 'justify-center',
+		inactive = 'text-surface-600-400 border-transparent',
+		flex = 'flex justify-center items-center',
 		background = '',
+		border = 'border-b-[1px]',
+		text = 'type-scale-3',
 		padding = 'pb-2',
 		rounded = '',
 		gap = 'gap-1',
 		cursor = 'cursor-pointer',
 		classes = '',
 		// Content
-		contentBase = 'w-full flex justify-center items-center gap-4 focus:-outline-offset-2',
+		contentBase = 'w-full',
+		contentFlex = 'flex justify-center items-center',
+		contentGap = 'gap-2',
 		contentBg = 'group-hover:preset-tonal-primary',
 		contentPadding = 'p-2 px-4',
-		contentGap = 'gap-2',
-		contentRounded = 'rounded-container',
+		contentRounded = 'rounded',
 		contentClasses = '',
 		// Events
 		onclick = () => {},
@@ -42,7 +45,7 @@
 
 	let elemInput: HTMLInputElement;
 
-	function onKeyDown(event: KeyboardEvent) {
+	function onKeyDownHandler(event: KeyboardEvent) {
 		// Fire Event Handler
 		onkeydown(event);
 
@@ -71,16 +74,16 @@
 			case 'ArrowRight':
 				if (isRTL) {
 					nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
-				} else {
-					nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+					break;
 				}
+				nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
 				break;
 			case 'ArrowLeft':
 				if (isRTL) {
 					nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
-				} else {
-					nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+					break;
 				}
+				nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
 				break;
 			case 'Home':
 				nextIndex = 0;
@@ -103,16 +106,21 @@
 
 <!-- @component A Tab Control component. -->
 
-<label class="{base} {rxActive} {text} {justify} {background} {padding} {rounded} {gap} {cursor} {classes}" aria-label={label} {title}>
+<label
+	{id}
+	class="{base} {rxActive} {flex} {background} {border} {text} {padding} {rounded} {gap} {cursor} {classes}"
+	aria-label={label}
+	{title}
+>
 	<!-- NOTE: do not add additional classes to this <div> -->
 	<div
 		class="size-full"
-		tabindex={selected ? 0 : -1}
+		role="tab"
 		aria-controls={controls}
 		aria-selected={selected}
 		data-testid="tabs-control"
-		role="tab"
-		onkeydown={onKeyDown}
+		tabindex={selected ? 0 : -1}
+		onkeydown={onKeyDownHandler}
 		{onkeypress}
 		{onkeyup}
 	>
@@ -122,7 +130,7 @@
 		</div>
 		<!-- Content -->
 		{#if children}
-			<div class="{contentBase} {contentBg} {contentPadding} {contentGap} {contentRounded} {contentClasses}">
+			<div class="{contentBase} {contentFlex} {contentGap} {contentBg} {contentPadding} {contentRounded} {contentClasses}">
 				{@render children()}
 			</div>
 		{/if}
diff --git a/packages/skeleton-svelte/src/lib/components/Tab/types.ts b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
index a57675569..0e4cfaa9a 100644
--- a/packages/skeleton-svelte/src/lib/components/Tab/types.ts
+++ b/packages/skeleton-svelte/src/lib/components/Tab/types.ts
@@ -3,6 +3,9 @@ import type { Snippet } from 'svelte';
 // Tabs ---
 
 export interface TabsProps {
+	/** Provide a unique ID. */
+	id?: string;
+
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
@@ -37,14 +40,16 @@ export interface TabsProps {
 // TabControl ---
 
 export interface TabsControlProps {
+	/** Provide a unique ID. */
+	id?: string;
 	/** Provide the tab control name. */
 	name: string;
 	/** Provide the tab control radio group. */
 	group: string;
-
-	// A11y ---
 	/** Provide a hoverable title attribute. */
 	title?: string;
+
+	// A11y ---
 	/** Sets the A11y label. */
 	label?: string;
 	/** Sets ARIA controls value to define which panel this tab controls. */
@@ -53,16 +58,18 @@ export interface TabsControlProps {
 	// Root ---
 	/** Sets base styles. */
 	base?: string;
-	/** Sets text size styles. */
-	text?: string;
-	/** Sets background styles. */
-	background?: string;
-	/** Sets justification styles. */
-	justify?: string;
 	/** Sets the active control styles. */
 	active?: string;
 	/** Sets the inactive control styles. */
 	inactive?: string;
+	/** Sets flex styles. */
+	flex?: string;
+	/** Sets background styles. */
+	background?: string;
+	/** Sets border styles. */
+	border?: string;
+	/** Sets text size styles. */
+	text?: string;
 	/** Sets padding styles. */
 	padding?: string;
 	/** Sets rounded styles. */
@@ -77,12 +84,14 @@ export interface TabsControlProps {
 	// Tab ---
 	/** Sets tab content base styles. */
 	contentBase?: string;
+	/** Sets tab content flex styles. */
+	contentFlex?: string;
+	/** Sets the tab content gap styles. */
+	contentGap?: string;
 	/** Sets the tab content background styles. */
 	contentBg?: string;
 	/** Sets the tab content padding styles. */
 	contentPadding?: string;
-	/** Sets the tab content gap styles. */
-	contentGap?: string;
 	/** Sets the tab content rounded styles. */
 	contentRounded?: string;
 	/** Provide arbitrary CSS classes for the tab content. */
diff --git a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
index f11d587c6..eadb09033 100644
--- a/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
+++ b/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -13,136 +13,109 @@
 </script>
 
 <div class="space-y-10">
-	<h1 class="h1">Tabs</h1>
-
-	<Tabs>
-		{#snippet list()}
-			<Tabs.Control
-				bind:group
-				name="flight"
-				onclick={() => console.log('onclick')}
-				onkeypress={() => console.log('onkeypress')}
-				onchange={(group) => console.log('onchange, group:', group)}>Flight</Tabs.Control
-			>
-			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">With Icon</h3>
-	<Tabs>
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight" title="flight">
-				{@html icons.flight}
-				<span>Flight</span>
-			</Tabs.Control>
-			<Tabs.Control bind:group name="hotel" title="hotel">
-				{@html icons.hotel}
-				<span>Hotel</span>
-			</Tabs.Control>
-			<Tabs.Control bind:group name="explore" title="explore">
-				{@html icons.cube}
-				<span>Explore</span>
-			</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="skeleton">Skeleton Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">Icon Only</h3>
-	<Tabs>
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight" title="flight">
-				{@html icons.flight}
-			</Tabs.Control>
-			<Tabs.Control bind:group name="hotel" title="hotel">
-				{@html icons.hotel}
-			</Tabs.Control>
-			<Tabs.Control bind:group name="explore" title="explore">
-				{@html icons.cube}
-			</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">Stretched</h3>
-	<Tabs base="w-full">
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight" classes="w-full">Flight</Tabs.Control>
-			<Tabs.Control bind:group name="hotel" classes="w-full">Hotel</Tabs.Control>
-			<Tabs.Control bind:group name="explore" classes="w-full">Explore</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">Justify Center</h3>
-	<Tabs base="w-full" listJustify="justify-center">
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">Justify End</h3>
-	<Tabs base="w-full" listJustify="justify-end">
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">Focusable Content</h3>
-	<Tabs>
-		{#snippet list()}
-			<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
-			<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
-			<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
-		{/snippet}
-		{#snippet panels()}
-			<Tabs.Panel bind:group value="flight">
-				<button type="button" class="btn preset-filled-primary-500">Book a Flight</button>
-			</Tabs.Panel>
-			<Tabs.Panel bind:group value="hotel">
-				<button type="button" class="btn preset-filled-primary-500">See Hotels near you</button>
-			</Tabs.Panel>
-			<Tabs.Panel bind:group value="explore">
-				<button type="button" class="btn preset-filled-primary-500">Explore</button>
-			</Tabs.Panel>
-		{/snippet}
-	</Tabs>
-
-	<h3 class="h3">RTL</h3>
-	<div dir="rtl">
+	<header>
+		<h1 class="h1">Tabs</h1>
+	</header>
+	<section class="space-y-4">
+		<h2 class="h2">Preview</h2>
+		<Tabs>
+			{#snippet list()}
+				<Tabs.Control
+					bind:group
+					name="flight"
+					onclick={() => console.log('onclick')}
+					onkeypress={() => console.log('onkeypress')}
+					onchange={(group) => console.log('onchange, group:', group)}>Flight</Tabs.Control
+				>
+				<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+				<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">With Icon</h2>
+		<Tabs>
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight" title="flight">
+					{@html icons.flight}
+					<span>Flight</span>
+				</Tabs.Control>
+				<Tabs.Control bind:group name="hotel" title="hotel">
+					{@html icons.hotel}
+					<span>Hotel</span>
+				</Tabs.Control>
+				<Tabs.Control bind:group name="explore" title="explore">
+					{@html icons.cube}
+					<span>Explore</span>
+				</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="skeleton">Skeleton Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">Icon Only</h2>
 		<Tabs>
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight" title="flight">
+					{@html icons.flight}
+				</Tabs.Control>
+				<Tabs.Control bind:group name="hotel" title="hotel">
+					{@html icons.hotel}
+				</Tabs.Control>
+				<Tabs.Control bind:group name="explore" title="explore">
+					{@html icons.cube}
+				</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">Stretched</h2>
+		<Tabs base="w-full">
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight" classes="w-full">Flight</Tabs.Control>
+				<Tabs.Control bind:group name="hotel" classes="w-full">Hotel</Tabs.Control>
+				<Tabs.Control bind:group name="explore" classes="w-full">Explore</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">Justify Center</h2>
+		<Tabs base="w-full" listJustify="justify-center">
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+				<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+				<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">Justify End</h2>
+		<Tabs base="w-full" listJustify="justify-end">
 			{#snippet list()}
 				<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
 				<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
@@ -154,5 +127,43 @@
 				<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
 			{/snippet}
 		</Tabs>
-	</div>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">Focusable Content</h2>
+		<Tabs>
+			{#snippet list()}
+				<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+				<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+				<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+			{/snippet}
+			{#snippet panels()}
+				<Tabs.Panel bind:group value="flight">
+					<button type="button" class="btn preset-filled">Book a Flight</button>
+				</Tabs.Panel>
+				<Tabs.Panel bind:group value="hotel">
+					<button type="button" class="btn preset-filled">See Hotels near you</button>
+				</Tabs.Panel>
+				<Tabs.Panel bind:group value="explore">
+					<button type="button" class="btn preset-filled">Explore</button>
+				</Tabs.Panel>
+			{/snippet}
+		</Tabs>
+	</section>
+	<section class="space-y-4">
+		<h2 class="h2">RTL</h2>
+		<div dir="rtl">
+			<Tabs>
+				{#snippet list()}
+					<Tabs.Control bind:group name="flight">Flight</Tabs.Control>
+					<Tabs.Control bind:group name="hotel">Hotel</Tabs.Control>
+					<Tabs.Control bind:group name="explore">Explore</Tabs.Control>
+				{/snippet}
+				{#snippet panels()}
+					<Tabs.Panel bind:group value="flight">Flight Panel</Tabs.Panel>
+					<Tabs.Panel bind:group value="hotel">Hotel Panel</Tabs.Panel>
+					<Tabs.Panel bind:group value="explore">Explore Panel</Tabs.Panel>
+				{/snippet}
+			</Tabs>
+		</div>
+	</section>
 </div>
diff --git a/packages/skeleton-svelte/tailwind.config.js b/packages/skeleton-svelte/tailwind.config.js
index 90488dec5..9ad0b2e39 100644
--- a/packages/skeleton-svelte/tailwind.config.js
+++ b/packages/skeleton-svelte/tailwind.config.js
@@ -2,7 +2,7 @@
 // NOTE: do not delete the above comment. It's required for local HMR on plugin changes.
 
 import { skeleton } from '@skeletonlabs/skeleton/plugin';
-import { cerberus } from '@skeletonlabs/skeleton/themes';
+import * as themes from "@skeletonlabs/skeleton/themes";
 
 /** @type {import('tailwindcss').Config}*/
 export default {
@@ -13,7 +13,12 @@ export default {
 	},
 	plugins: [
 		skeleton({
-			themes: [cerberus]
+			themes: [
+				themes.cerberus,
+				themes.catppuccin,
+				themes.pine,
+				themes.rose,
+			]
 		})
 	]
 };
diff --git a/packages/skeleton/src/plugin/base/core.css b/packages/skeleton/src/plugin/base/core.css
index 4355cda54..98ce461e5 100644
--- a/packages/skeleton/src/plugin/base/core.css
+++ b/packages/skeleton/src/plugin/base/core.css
@@ -44,10 +44,6 @@ html {
 	Source: http://www.outlinenone.com/
 */
 
-*:focus {
-	@apply outline-primary-500;
-}
-
 /* Disabled States --- */
 
 .disabled,