flowbite-svelte 0.25.20 → 0.25.21

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.25.21](https://github.com/themesberg/flowbite-svelte/compare/v0.25.20...v0.25.21) (2022-08-27)
+
+
+### Bug Fixes
+
+* add relative class to Hr component ([d8c6fbf](https://github.com/themesberg/flowbite-svelte/commit/d8c6fbf367a43b7c13ea55a56ae9c9f0b94fa96e))
+
 ### [0.25.20](https://github.com/themesberg/flowbite-svelte/compare/v0.25.19...v0.25.20) (2022-08-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.20",
+  "version": "0.25.21",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/typography/Hr.svelte

@@ -4,23 +4,20 @@ export let width = 'w-full';
 export let height = 'h-px';
 export let divClass = 'inline-flex justify-center items-center w-full';
 export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
-export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900';
-export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white dark:bg-gray-900';
+export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+export let middleBgColor = 'dark:bg-gray-900';
 let horizontalClass = classNames(hrClass, width, height, $$props.class);
+let classDiv = classNames(divClass, $$slots && 'relative', $$props.classDiv);
+let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass);
 </script>
 
 {#if $$slots}
-	<div class={classNames(divClass, $$props.classDiv)}>
+	<div class={classDiv}>
 		<hr class={horizontalClass} />
-		{#if icon}
-			<div class={iconDivClass}>
-				<slot />
-			</div>
-		{:else}
-			<span class={textSpanClass}>
-				<slot />
-			</span>
-		{/if}
+		<div class={middleClass}>
+			<slot />
+		</div>
 	</div>
 {:else}
 	<hr class={horizontalClass} />

package/typography/Hr.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         hrClass?: string;
         iconDivClass?: string;
         textSpanClass?: string;
+        middleBgColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;