@x33025/sveltely 0.0.4 → 0.0.6

package/dist/components/Dropdown/Dropdown.svelte

@@ -70,15 +70,20 @@
 	{#if isOpen}
 		<div
 			use:portal
-			class="dropdown-menu fixed z-50 rounded-md border border-gray-200 bg-white shadow-lg focus:outline-none"
+			class="dropdown-menu fixed z-50 border border-gray-200 focus:outline-none"
 			style="top: {menuCoords.top}px; {align === 'left'
 				? `left: ${menuCoords.left}px;`
-				: `right: ${window.innerWidth - menuCoords.left}px;`}"
+				: `right: ${window.innerWidth - menuCoords.left}px;`}; border-radius: var(--dropdown-border-radius); background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
 			role="menu"
 			aria-orientation="vertical"
 			tabindex="-1"
 		>
-			<div class="overflow-auto p-1" role="none" onclick={handleSelect}>
+			<div
+				class="overflow-auto"
+				style="padding: var(--dropdown-content-padding);"
+				role="none"
+				onclick={handleSelect}
+			>
 				{@render children()}
 			</div>
 		</div>

package/dist/components/NavigationStack/NavigationStack.svelte

@@ -50,7 +50,7 @@
 		</div>
 	{/if}
 
-	<div class="vstack">
+	<div class="vstack w-full">
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/style/index.css

@@ -12,20 +12,16 @@
 		@apply flex size-full min-h-0 flex-col;
 	}
 
-	.page {
-		@apply flex min-h-0 w-full flex-1 flex-col;
-	}
-
 	.center {
 		@apply items-center justify-center;
 	}
 
 	.vstack {
-		@apply flex min-h-0 flex-1 flex-col;
+		@apply flex h-full min-h-0 flex-col;
 	}
 
 	.hstack {
-		@apply flex min-w-0 flex-1 flex-row;
+		@apply flex w-full min-w-0 flex-row;
 	}
 
 	.spacer {
@@ -56,5 +52,11 @@
 		--sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
 		--sheet-blur: var(--blur-sm);
 		--sheet-shadow: var(--shadow-md);
+
+		--dropdown-border-radius: var(--radius-md);
+		--dropdown-content-padding: calc(var(--spacing));
+
+		--dropdown-background: var(--color-white);
+		--dropdown-shadow: var(--shadow-md);
 	}
 }

package/dist/style.css

@@ -301,9 +301,6 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -345,9 +342,6 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
@@ -417,10 +411,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -516,27 +506,20 @@
     min-height: calc(var(--spacing) * 0);
     flex-direction: column;
   }
-  .page {
-    display: flex;
-    min-height: calc(var(--spacing) * 0);
-    width: 100%;
-    flex: 1;
-    flex-direction: column;
-  }
   .center {
     align-items: center;
     justify-content: center;
   }
   .vstack {
     display: flex;
+    height: 100%;
     min-height: calc(var(--spacing) * 0);
-    flex: 1;
     flex-direction: column;
   }
   .hstack {
     display: flex;
+    width: 100%;
     min-width: calc(var(--spacing) * 0);
-    flex: 1;
     flex-direction: row;
   }
   .spacer {
@@ -568,6 +551,10 @@
     }
     --sheet-blur: var(--blur-sm);
     --sheet-shadow: var(--shadow-md);
+    --dropdown-border-radius: var(--radius-md);
+    --dropdown-content-padding: calc(var(--spacing));
+    --dropdown-background: var(--color-white);
+    --dropdown-shadow: var(--shadow-md);
   }
 }
 @property --tw-space-y-reverse {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",