From 8515bbaf64b6e0d8ecb6cf1b09a5c46e4572d397 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:40:00 +0100
Subject: [PATCH 1/8] Update TabItem.astro

- Removed the class="" attribute and made the styles global
---
 packages/studiocms_ui/src/components/Tabs/TabItem.astro | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Tabs/TabItem.astro b/packages/studiocms_ui/src/components/Tabs/TabItem.astro
index 5b4bf46..2b58bfb 100644
--- a/packages/studiocms_ui/src/components/Tabs/TabItem.astro
+++ b/packages/studiocms_ui/src/components/Tabs/TabItem.astro
@@ -30,11 +30,10 @@ const { icon, label, color = 'primary' } = Astro.props;
   data-label={label}
   data-color={color}
   data-tab-id={id}
-  class=""
 >
   <slot />
 </sui-tab-item>
-<style>
+<style is:global>
   sui-tab-item {
     display: none;
     width: 100%;

From e55bdff1d283a072eb11f9cec61422ce62126789 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:45:30 +0000
Subject: [PATCH 2/8] Update logic for handling active tab classes

---
 .../src/components/Tabs/Tabs.astro             | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Tabs/Tabs.astro b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
index 033e2a6..7e12efb 100644
--- a/packages/studiocms_ui/src/components/Tabs/Tabs.astro
+++ b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
@@ -76,10 +76,20 @@ const extractTabInfoWithRegex = (input: string) => {
 const markTabAsActive = (tabId: string, html: string): string => {
 	if (!tabId) return html;
 
-	const updatedHtml = html.replace(
-		new RegExp(`(<sui-tab-item[^>]*data-tab-id="${tabId}"[^>]*class=")([^"]*)(")`, 'g'),
-		'$1$2 active$3'
-	);
+  const updatedHtml = html.replace(/<sui-tab-item[^>]*data-tab-id="([^"]*)"[^>]*>/g, (match, tabIdValue) => {
+    // Check if the tabId matches
+    if (tabIdValue === tabId) {
+      // Check if the element already has a class attribute
+      if (match.includes('class="')) {
+        // If class attribute exists, add 'active' to the class attribute
+        return match.replace(/(class="[^"]*)"/, '$1 active"');
+      } else {
+        // If class attribute does not exist, add it
+        return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
+      }
+    }
+    return match; // Return original if the tabId does not match
+  });
 
 	return updatedHtml;
 };

From 1b87c3a1fddc74ca5b26bb46ce7ee0a6366929f8 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:48:06 +0000
Subject: [PATCH 3/8] Update tab header styles

---
 packages/studiocms_ui/src/components/Tabs/Tabs.astro | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/studiocms_ui/src/components/Tabs/Tabs.astro b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
index 7e12efb..e81863e 100644
--- a/packages/studiocms_ui/src/components/Tabs/Tabs.astro
+++ b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
@@ -298,6 +298,9 @@ const containerId = generateID('sui-tabs-container');
     font-size: 0.875em;
     outline: 2px solid transparent;
     outline-offset: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .sui-tab-header * {

From 79b2b977bff603f5c211b21120b753b1a23767bb Mon Sep 17 00:00:00 2001
From: Louis Escher <louisescher@proton.me>
Date: Sat, 21 Dec 2024 14:00:18 +0100
Subject: [PATCH 4/8] Fix dividers with empty slots showing a placeholder

---
 docs/src/content/docs/docs/changelog.md            |  4 ++++
 packages/studiocms_ui/src/components/Divider.astro | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/src/content/docs/docs/changelog.md b/docs/src/content/docs/docs/changelog.md
index 45e93f9..b22c2f8 100644
--- a/docs/src/content/docs/docs/changelog.md
+++ b/docs/src/content/docs/docs/changelog.md
@@ -8,6 +8,10 @@ editUrl: false
 This document contains release notes for the `@studiocms/ui` package.
 For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
 
+## 0.3.1
+
+- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows
+
 ## 0.3.0
 
 - [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
diff --git a/packages/studiocms_ui/src/components/Divider.astro b/packages/studiocms_ui/src/components/Divider.astro
index 1f1ab29..ecf8081 100644
--- a/packages/studiocms_ui/src/components/Divider.astro
+++ b/packages/studiocms_ui/src/components/Divider.astro
@@ -9,11 +9,16 @@ interface Props {
 	background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
 }
 
+const hasDefaultSlot = Astro.slots.has('default');
+
 const { background = 'background-base' } = Astro.props;
 ---
 <div class="sui-divider-container">
   <hr class="sui-divider-line" />
-  <div class="sui-divider-content" style={`background-color: hsl(var(--${background}));`}>
+  <div 
+    class="sui-divider-content" 
+    style={`background-color: hsl(var(--${background})); padding: ${hasDefaultSlot ? '.25rem .5rem;' : '0'}`}
+  >
     <slot />
   </div>
 </div>
@@ -28,9 +33,8 @@ const { background = 'background-base' } = Astro.props;
 
   .sui-divider-line {
     position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     width: 100%;
     height: 1px;
     background-color: hsl(var(--border));
@@ -39,7 +43,6 @@ const { background = 'background-base' } = Astro.props;
   }
 
   .sui-divider-content {
-    padding: .25rem .5rem;
     z-index: 2;
     color: hsl(var(--text-muted));
   }

From 9974178a4ce34b69af402c71cc39f2e2c2f8ade4 Mon Sep 17 00:00:00 2001
From: Louis Escher <louisescher@proton.me>
Date: Sat, 21 Dec 2024 14:56:20 +0100
Subject: [PATCH 5/8] Add error handling for invalid tab variants and simplify
 active class logic

---
 packages/studiocms_ui/src/components/Tabs/Tabs.astro | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Tabs/Tabs.astro b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
index e81863e..351fba0 100644
--- a/packages/studiocms_ui/src/components/Tabs/Tabs.astro
+++ b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
@@ -1,4 +1,5 @@
 ---
+import { AstroError } from 'astro/errors';
 import { Icon } from '../../utils';
 import type { StudioCMSColorway } from '../../utils/colors';
 import { generateID } from '../../utils/generateID';
@@ -83,10 +84,10 @@ const markTabAsActive = (tabId: string, html: string): string => {
       if (match.includes('class="')) {
         // If class attribute exists, add 'active' to the class attribute
         return match.replace(/(class="[^"]*)"/, '$1 active"');
-      } else {
-        // If class attribute does not exist, add it
-        return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
       }
+
+      // If class attribute does not exist, add it
+      return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
     }
     return match; // Return original if the tabId does not match
   });
@@ -103,6 +104,10 @@ const {
 	align = 'left',
 } = Astro.props;
 
+if (variant !== 'default' && variant !== 'starlight') {
+  throw new AstroError('Invalid variant provided. Must be either `default` or `starlight`.');
+}
+
 const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
 
 const tabContents = await Astro.slots.render('default');

From 7326ff99ea6b10348dcf6efbf19c3407aa301f73 Mon Sep 17 00:00:00 2001
From: Louis Escher <louisescher@proton.me>
Date: Sat, 21 Dec 2024 15:41:23 +0100
Subject: [PATCH 6/8] Add changeset

---
 .changeset/pink-zoos-push.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pink-zoos-push.md

diff --git a/.changeset/pink-zoos-push.md b/.changeset/pink-zoos-push.md
new file mode 100644
index 0000000..4f836eb
--- /dev/null
+++ b/.changeset/pink-zoos-push.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots

From c757e58c9ba43fde45536fa6600063c3cd224040 Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Sun, 22 Dec 2024 00:25:05 +0100
Subject: [PATCH 7/8] Update
 packages/studiocms_ui/src/components/Tabs/TabItem.astro

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>
---
 packages/studiocms_ui/src/components/Tabs/TabItem.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/studiocms_ui/src/components/Tabs/TabItem.astro b/packages/studiocms_ui/src/components/Tabs/TabItem.astro
index 2b58bfb..b0c12a7 100644
--- a/packages/studiocms_ui/src/components/Tabs/TabItem.astro
+++ b/packages/studiocms_ui/src/components/Tabs/TabItem.astro
@@ -33,7 +33,7 @@ const { icon, label, color = 'primary' } = Astro.props;
 >
   <slot />
 </sui-tab-item>
-<style is:global>
+<style>
   sui-tab-item {
     display: none;
     width: 100%;

From cccfe07282f65366dd2796bcc54c45b9ff50e77b Mon Sep 17 00:00:00 2001
From: Louis Escher <66965600+louisescher@users.noreply.github.com>
Date: Sun, 22 Dec 2024 00:25:45 +0100
Subject: [PATCH 8/8] Update Tabs.astro

---
 packages/studiocms_ui/src/components/Tabs/Tabs.astro | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/studiocms_ui/src/components/Tabs/Tabs.astro b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
index 351fba0..5c22c61 100644
--- a/packages/studiocms_ui/src/components/Tabs/Tabs.astro
+++ b/packages/studiocms_ui/src/components/Tabs/Tabs.astro
@@ -104,10 +104,6 @@ const {
 	align = 'left',
 } = Astro.props;
 
-if (variant !== 'default' && variant !== 'starlight') {
-  throw new AstroError('Invalid variant provided. Must be either `default` or `starlight`.');
-}
-
 const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
 
 const tabContents = await Astro.slots.render('default');