Fix package.json + NavRow indicator

docs/routes/components/NavRow.md

@@ -35,22 +35,20 @@
 	import { NavRow } from 'omorphia'
 </script>
 
-<div class="card card--strip card--pad-x">
-	<NavRow
-		level={1}
-		links={[
-			{
-				href: '/Button',
-				label: 'Button',
-			},
-			{
-				href: '/Chips',
-				label: 'Chips',
-			},
-			{
-				href: '/NavRow',
-				label: 'NavRow',
-			},
-		]} />
-</div>
+<NavRow
+  level={1}
+  links={[
+    {
+      href: '/Button',
+      label: 'Button',
+    },
+    {
+      href: '/Chips',
+      label: 'Chips',
+    },
+    {
+      href: '/NavRow',
+      label: 'NavRow',
+    },
+  ]} />
 ```

package.json

@@ -31,8 +31,8 @@
 	},
 	"homepage": "https://omorphia.modrinth.com",
 	"exports": {
-		".": "./src/index",
-		"./utils": "./src//utils/index.ts",
+		".": "./index.js",
+		"./utils": "./src/utils/index.ts",
 		"./styles.postcss": "./src/styles.postcss",
 		"./plugins": "./src/plugins/index.js",
 		"./config/postcss": "./src/config/postcss.cjs",

src/components/Avatar.svelte

@@ -71,11 +71,13 @@
 			&-xs {
 				--size: 2.5rem;
 				box-shadow: var(--shadow-inset), var(--shadow-raised);
+				border-radius: var(--rounded-sm);
 			}
 
 			&-sm {
 				--size: 3rem;
 				box-shadow: var(--shadow-inset), var(--shadow-raised);
+				border-radius: var(--rounded-sm);
 			}
 
 			&-md {

src/components/NavRow.svelte

@@ -67,6 +67,7 @@
 	{/each}
 	<div
 		class="navigation__indicator"
+		style:visibility={indicatorReady && activeIndex !== -1 ? 'visible' : 'hidden'}
 		style:left={linkElements
 			.slice(0, activeIndex)
 			.map((element, index) => element.offsetWidth + 16)
@@ -86,7 +87,6 @@
 		&__link {
 			font-weight: var(--font-weight-bold);
 			color: var(--color-text-light);
-			transition: color 0.3s ease-in-out;
 			position: relative;
 
 			&.is-active {
@@ -101,11 +101,13 @@
 				width: 100%;
 				border-radius: var(--rounded-max);
 				height: 0.25rem;
-				transition: background-color 0.2s ease-in-out;
+				transition: opacity 0.2s ease-in-out;
+				background-color: var(--color-brand);
+				opacity: 0;
 			}
 
 			&:hover::after {
-				background-color: var(--color-brand-light);
+				opacity: 0.5;
 			}
 		}
 
@@ -127,11 +129,5 @@
 			transition: width 0.3s ease-out, left 0.3s ease-out;
 			visibility: hidden;
 		}
-
-		&:not(.static-indicator) {
-			.navigation__indicator {
-				visibility: visible;
-			}
-		}
 	}
 </style>