V0.3.2 (#33)

* Update TabItem.astro

- Removed the class="" attribute and made the styles global

* Update logic for handling active tab classes

* Update tab header styles

* Fix dividers with empty slots showing a placeholder

* Add error handling for invalid tab variants and simplify active class logic

* Add changeset

* Update packages/studiocms_ui/src/components/Tabs/TabItem.astro

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>

* Update Tabs.astro

---------

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>

.changeset/pink-zoos-push.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots

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

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));
   }

packages/studiocms_ui/src/components/Tabs/TabItem.astro

@@ -30,7 +30,6 @@ const { icon, label, color = 'primary' } = Astro.props;
   data-label={label}
   data-color={color}
   data-tab-id={id}
-  class=""
 >
   <slot />
 </sui-tab-item>

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';
@@ -76,10 +77,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"');
+      }
+
+      // 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;
 };
@@ -288,6 +299,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 * {