@starwind-ui/core 1.5.1 → 1.6.1

package/dist/index.js

@@ -14,16 +14,17 @@ var registry_default = {
     { name: "button", type: "component", version: "2.0.1", dependencies: [] },
     { name: "card", type: "component", version: "1.1.0", dependencies: [] },
     { name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
-    { name: "dialog", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "dropdown", type: "component", version: "1.0.1", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.1.3", dependencies: [] },
+    { name: "dropdown", type: "component", version: "1.0.3", dependencies: [] },
     { name: "input", type: "component", version: "1.1.1", dependencies: [] },
     { name: "label", type: "component", version: "1.1.1", dependencies: [] },
     { name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
-    { name: "select", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "select", type: "component", version: "1.3.1", dependencies: [] },
     { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "tabs", type: "component", version: "1.1.1", dependencies: [] },
+    { name: "table", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "tabs", type: "component", version: "1.2.0", dependencies: [] },
     { name: "textarea", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "tooltip", type: "component", version: "1.1.1", dependencies: [] }
+    { name: "tooltip", type: "component", version: "1.1.2", dependencies: [] }
   ]
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] }\n\t]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC,SAAW;AAAA,EACX,YAAc;AAAA,IACb,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EAClF;AACD;;;ADDA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n\t]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC,SAAW;AAAA,EACX,YAAc;AAAA,IACb,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EAClF;AACD;;;ADFA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}

package/dist/src/components/alert/Alert.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & VariantProps<typeof alert>;
 

package/dist/src/components/avatar/Avatar.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div">, VariantProps<typeof avatar> {}
 

package/dist/src/components/badge/Badge.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 interface Props
 	extends HTMLAttributes<"div">,

package/dist/src/components/breadcrumb/BreadcrumbLink.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"a"> & {
-  asChild?: boolean;
+	asChild?: boolean;
 };
 
 const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
@@ -11,10 +11,12 @@ const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
 const { class: className, asChild = false, ...rest } = Astro.props;
 ---
 
-{asChild ? (
-  <slot />
-) : (
-  <a class={breadcrumbLink({ class: className })} {...rest}>
-    <slot />
-  </a>
-)}
+{
+	asChild ? (
+		<slot />
+	) : (
+		<a class={breadcrumbLink({ class: className })} {...rest}>
+			<slot />
+		</a>
+	)
+}

package/dist/src/components/breadcrumb/BreadcrumbPage.astro

@@ -9,12 +9,12 @@ const breadcrumbPage = tv({ base: "text-foreground font-normal" });
 const { class: className, ...rest } = Astro.props;
 ---
 
-<span 
-  role="link"
-  aria-disabled="true"
-  aria-current="page"
-  class={breadcrumbPage({ class: className })} 
-  {...rest}
+<span
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={breadcrumbPage({ class: className })}
+	{...rest}
 >
-  <slot />
+	<slot />
 </span>

package/dist/src/components/breadcrumb/index.ts

@@ -1,10 +1,10 @@
 import Breadcrumb from "./Breadcrumb.astro";
-import BreadcrumbList from "./BreadcrumbList.astro";
 import BreadcrumbEllipsis from "./BreadcrumbEllipsis.astro";
 import BreadcrumbItem from "./BreadcrumbItem.astro";
 import BreadcrumbLink from "./BreadcrumbLink.astro";
-import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
+import BreadcrumbList from "./BreadcrumbList.astro";
 import BreadcrumbPage from "./BreadcrumbPage.astro";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
 
 export {
 	Breadcrumb,

package/dist/src/components/button/Button.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 interface Props
 	extends HTMLAttributes<"button">,

package/dist/src/components/checkbox/Checkbox.astro

@@ -1,7 +1,7 @@
 ---
 import Check from "@tabler/icons/outline/check.svg";
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"input">, "type"> &
 	VariantProps<typeof checkbox> & {

package/dist/src/components/dialog/Dialog.astro

@@ -90,7 +90,11 @@ const { class: className, ...rest } = Astro.props;
 			// Add click handlers to all close buttons
 			this.closeButtons?.forEach((button) => {
 				button.addEventListener("click", () => {
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				});
 			});
 
@@ -104,7 +108,11 @@ const { class: className, ...rest } = Astro.props;
 					e.clientY <= dialogDimensions.bottom;
 
 				if (!clickedInDialog) {
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				}
 			});
 
@@ -113,7 +121,11 @@ const { class: className, ...rest } = Astro.props;
 				if (e.key === "Escape") {
 					// prevent default dialog closing behavior so we can add closing animation
 					e.preventDefault();
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				}
 			});
 
@@ -130,7 +142,11 @@ const { class: className, ...rest } = Astro.props;
 					 */
 					if (form.method === "dialog") {
 						e.preventDefault();
-						this.close();
+						// Only close if this is the topmost dialog
+						const openDialogs = document.querySelectorAll("dialog[open]");
+						if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+							this.close();
+						}
 					}
 				});
 			});
@@ -153,7 +169,7 @@ const { class: className, ...rest } = Astro.props;
 			setTimeout(() => {
 				this.backdrop.classList.add("hidden");
 				this.dialog.close();
-			}, this.animationDuration - 10);
+			}, this.animationDuration);
 		}
 	}
 

package/dist/src/components/dialog/DialogContent.astro

@@ -13,8 +13,8 @@ type Props = HTMLAttributes<"dialog"> & {
 const dialogBackdrop = tv({
 	base: [
 		"starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
-		"data-[state=open]:animate-in data-[state=open]:fade-in-0",
-		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+		"data-[state=open]:animate-in fade-in",
+		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
 	],
 });
 
@@ -22,9 +22,9 @@ const dialogContent = tv({
 	base: [
 		"fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
 		"bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
-		"data-[state=open]:animate-in data-[state=closed]:animate-out",
-		"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2",
-		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-bottom-2",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
+		"fade-in zoom-in-95 slide-in-from-bottom-2",
+		"fade-out zoom-out-95 slide-out-to-bottom-2",
 	],
 });
 

package/dist/src/components/dropdown/Dropdown.astro

@@ -35,10 +35,13 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		private items: HTMLElement[] = [];
 		private currentFocusIndex: number = -1;
 		private isOpen: boolean = false;
+		private isClosing: boolean = false;
 		private animationDuration = 150;
 		private openOnHover: boolean;
 		private closeDelay: number;
 		private closeTimerRef: number | null = null;
+		private lastOpenSource: "keyboard" | "mouse" = "keyboard";
+		private lastCloseSource: "keyboard" | "mouse" = "keyboard";
 
 		constructor(dropdown: HTMLElement, dropdownIdx: number) {
 			this.dropdown = dropdown;
@@ -93,6 +96,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 			// Handle trigger click
 			this.trigger.addEventListener("click", (e) => {
 				e.preventDefault();
+				this.lastOpenSource = e.detail === 0 ? "keyboard" : "mouse";
 				this.toggleDropdown();
 			});
 
@@ -100,12 +104,15 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 			this.trigger.addEventListener("keydown", (e) => {
 				if (e.key === "Enter" || e.key === " ") {
 					e.preventDefault();
+					this.lastOpenSource = "keyboard";
 					this.toggleDropdown();
 				} else if (e.key === "Escape" && this.isOpen) {
 					e.preventDefault();
+					this.lastCloseSource = "keyboard";
 					this.closeDropdown();
 				} else if (this.isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
 					e.preventDefault();
+					this.lastOpenSource = "keyboard";
 					this.updateDropdownItems();
 					if (e.key === "ArrowDown") {
 						this.focusItem(0); // Focus first item when opening with arrow down
@@ -178,7 +185,9 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 			if (this.openOnHover) {
 				this.trigger.addEventListener("pointerenter", (e) => {
 					if (e.pointerType !== "mouse") return;
+					if (this.isClosing) return;
 					if (!this.isOpen) {
+						this.lastOpenSource = "mouse";
 						this.openDropdown();
 					} else {
 						// If the dropdown is already open, make sure to clear any close timer
@@ -189,6 +198,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 				this.dropdown.addEventListener("pointerleave", (e) => {
 					if (e.pointerType !== "mouse") return;
 					if (this.isOpen) {
+						this.lastCloseSource = "mouse";
 						this.closeDropdownDelayed();
 					}
 				});
@@ -264,6 +274,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		}
 
 		private openDropdown() {
+			if (this.isClosing) return;
 			if (!this.content || !this.trigger || this.trigger.disabled) return;
 
 			this.isOpen = true;
@@ -283,20 +294,28 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		private closeDropdown() {
 			if (!this.content || !this.trigger) return;
 
+			this.isClosing = true;
 			this.isOpen = false;
 			this.content.setAttribute("data-state", "closed");
 
-			// Set focus back on trigger
-			requestAnimationFrame(() => {
-				if (!this.trigger) return;
-				this.trigger.focus();
-			});
+			// Set focus back on trigger only if opened or closed by keyboard
+			if (
+				!this.openOnHover ||
+				this.lastOpenSource === "keyboard" ||
+				this.lastCloseSource === "keyboard"
+			) {
+				requestAnimationFrame(() => {
+					if (!this.trigger) return;
+					this.trigger.focus();
+				});
+			}
 
 			// Give the content time to animate before hiding
 			setTimeout(() => {
 				if (!this.content) return;
 				this.content.style.display = "none";
-			}, this.animationDuration - 10);
+				this.isClosing = false;
+			}, this.animationDuration);
 
 			this.trigger.setAttribute("aria-expanded", "false");
 

package/dist/src/components/dropdown/DropdownContent.astro

@@ -29,19 +29,19 @@ const dropdownContent = tv({
 	base: [
 		"starwind-dropdown-content",
 		"bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-		"animate-in fade-in-0 zoom-in-95",
-		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+		"data-[state=open]:animate-in fade-in zoom-in-95",
+		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
 		"absolute will-change-transform",
 	],
 	variants: {
 		side: {
-			bottom: "slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 top-full",
-			top: "slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 bottom-full",
+			bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+			top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
 		},
 		align: {
-			start: "slide-in-from-left-1 data-[state=closed]:slide-out-to-left-1 left-0",
+			start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
 			center: "left-1/2 -translate-x-1/2",
-			end: "slide-in-from-right-1 data-[state=closed]:slide-out-to-right-1 right-0",
+			end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
 		},
 	},
 	defaultVariants: {

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -13,7 +13,7 @@ const dropdownTrigger = tv({
 	base: [
 		"starwind-dropdown-trigger",
 		"inline-flex items-center justify-center",
-		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+		"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
 	],
 });
 
@@ -28,14 +28,13 @@ if (Astro.slots.has("default")) {
 
 {
 	asChild && hasChildren ? (
-		<div class="starwind-dropdown-trigger" data-as-child>
+		<div class={`starwind-dropdown-trigger ${className}`} data-as-child>
 			<slot />
 		</div>
 	) : (
 		<button
 			class={dropdownTrigger({ class: className })}
 			type="button"
-			role="button"
 			aria-haspopup="true"
 			aria-expanded="false"
 			data-state="closed"

package/dist/src/components/dropdown/index.ts

@@ -1,9 +1,9 @@
 import Dropdown from "./Dropdown.astro";
-import DropdownTrigger from "./DropdownTrigger.astro";
 import DropdownContent from "./DropdownContent.astro";
 import DropdownItem from "./DropdownItem.astro";
 import DropdownLabel from "./DropdownLabel.astro";
 import DropdownSeparator from "./DropdownSeparator.astro";
+import DropdownTrigger from "./DropdownTrigger.astro";
 
 export {
 	Dropdown,

package/dist/src/components/input/Input.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
 

package/dist/src/components/label/Label.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"label"> & VariantProps<typeof label>;
 

package/dist/src/components/select/Select.astro

@@ -2,15 +2,27 @@
 import type { HTMLAttributes } from "astro/types";
 
 type Props = HTMLAttributes<"div"> & {
+	/**
+	 * The name of the select field for form handling
+	 */
 	name?: string;
+	/**
+	 * The value of the item that should be selected by default
+	 */
+	defaultValue?: string;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	children: any;
 };
 
-const { class: className, name, ...rest } = Astro.props;
+const { class: className, name, defaultValue, ...rest } = Astro.props;
 ---
 
-<div class:list={["starwind-select", "relative", className]} data-name={name} {...rest}>
+<div
+	class:list={["starwind-select", "relative", className]}
+	data-name={name}
+	data-value={defaultValue}
+	{...rest}
+>
 	<slot />
 </div>
 
@@ -50,6 +62,7 @@ const { class: className, name, ...rest } = Astro.props;
 			this.setupAccessibility(selectIdx);
 			this.setupEvents();
 			this.setupSelectField();
+			this.setInitialState();
 		}
 
 		private setupSelectField() {
@@ -355,7 +368,7 @@ const { class: className, name, ...rest } = Astro.props;
 			setTimeout(() => {
 				if (!this.content) return;
 				this.content.style.display = "none";
-			}, this.animationDuration - 10);
+			}, this.animationDuration);
 
 			this.trigger.setAttribute("aria-expanded", "false");
 		}
@@ -398,6 +411,21 @@ const { class: className, name, ...rest } = Astro.props;
 			this.closeSelect();
 		}
 
+		/**
+		 * Sets the initial state based on the default value attribute
+		 */
+		private setInitialState(): void {
+			const defaultValue = this.select.dataset.value;
+			if (defaultValue) {
+				const item = this.content?.querySelector(`[data-value="${defaultValue}"]`);
+
+				if (item && item instanceof HTMLElement) {
+					this.handleSelection(item);
+					this.selectedItem = item;
+				}
+			}
+		}
+
 		/**
 		 * TODO: add position logic to avoid collisions with window boundary
 		 * It will need to switch to top or bottom depending on space available

package/dist/src/components/select/SelectContent.astro

@@ -8,6 +8,11 @@ type Props = HTMLAttributes<"div"> & {
 	 * @default bottom
 	 */
 	side?: "top" | "bottom";
+	/**
+	 * Alignment of the dropdown
+	 * @default start
+	 */
+	align?: "start" | "center" | "end";
 	/**
 	 * Offset distance in pixels
 	 * @default 4
@@ -24,18 +29,21 @@ const selectContent = tv({
 	base: [
 		"starwind-select-content",
 		"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
-		"fade-in-0 zoom-in-95 animate-in overflow-hidden will-change-transform",
-		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
-		"left-0",
+		"data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
+		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
 	],
 	variants: {
 		side: {
-			bottom:
-				"data-[side=bottom]:slide-in-from-top-4 data-[side=bottom]:top-(--select-content-offset)",
-			top: "data-[side=top]:slide-in-from-bottom-4 data-[side=top]:bottom-(--select-content-offset)",
+			bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+			top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
+		},
+		align: {
+			start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+			center: "left-1/2 -translate-x-1/2",
+			end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
 		},
 	},
-	defaultVariants: { side: "bottom" },
+	defaultVariants: { side: "bottom", align: "start" },
 });
 
 const selectContentInner = tv({
@@ -45,6 +53,7 @@ const selectContentInner = tv({
 const {
 	class: className,
 	side = "bottom",
+	align = "start",
 	sideOffset = 4,
 	animationDuration = 150,
 	...rest
@@ -52,16 +61,18 @@ const {
 ---
 
 <div
-	class={selectContent({ side, class: className })}
+	class={selectContent({ side, align, class: className })}
 	role="listbox"
 	data-side={side}
+	data-align={align}
 	data-state="closed"
 	tabindex="-1"
 	style={{
-		"--select-content-offset": `calc(100% + ${sideOffset}px)`,
 		// hide the content initially. Script will remove this
 		display: "none",
 		animationDuration: `${animationDuration}ms`,
+		marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+		marginBottom: side === "top" ? `${sideOffset}px` : undefined,
 	}}
 	{...rest}
 >

package/dist/src/components/table/Table.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
+
+const table = tv({
+	base: "w-full caption-bottom text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div data-table-container class="relative w-full overflow-x-auto">
+	<table data-table class={table({ class: className })} {...rest} role="table">
+		<slot />
+	</table>
+</div>

package/dist/src/components/table/TableBody.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tbody"> & VariantProps<typeof tableBody>;
+
+const tableBody = tv({
+	base: "[&_tr:last-child]:border-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tbody data-table-body class={tableBody({ class: className })} {...rest}>
+	<slot />
+</tbody>

package/dist/src/components/table/TableCaption.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
+
+const tableCaption = tv({
+	base: "text-muted-foreground mt-4 text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<caption data-table-caption class={tableCaption({ class: className })} {...rest}>
+	<slot />
+</caption>

package/dist/src/components/table/TableCell.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
+
+const tableCell = tv({
+	base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<td data-table-cell class={tableCell({ class: className })} {...rest}>
+	<slot />
+</td>

package/dist/src/components/table/TableFoot.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
+
+const tableFoot = tv({
+	base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tfoot data-table-foot class={tableFoot({ class: className })} {...rest}>
+	<slot />
+</tfoot>

package/dist/src/components/table/TableHead.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
+
+const tableHead = tv({
+	base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<th data-table-head class={tableHead({ class: className })} {...rest} role="columnheader">
+	<slot />
+</th>

package/dist/src/components/table/TableHeader.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
+
+const tableHeader = tv({
+	base: "[&_tr]:border-b",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<thead data-table-header class={tableHeader({ class: className })} {...rest}>
+	<slot />
+</thead>

package/dist/src/components/table/TableRow.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps, tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
+
+const tableRow = tv({
+	base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tr data-table-row class={tableRow({ class: className })} {...rest} role="row">
+	<slot />
+</tr>

package/dist/src/components/table/index.ts

@@ -0,0 +1,21 @@
+import Table from "./Table.astro";
+import TableBody from "./TableBody.astro";
+import TableCaption from "./TableCaption.astro";
+import TableCell from "./TableCell.astro";
+import TableFoot from "./TableFoot.astro";
+import TableHead from "./TableHead.astro";
+import TableHeader from "./TableHeader.astro";
+import TableRow from "./TableRow.astro";
+
+export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
+
+export default {
+	Root: Table,
+	Body: TableBody,
+	Caption: TableCaption,
+	Cell: TableCell,
+	Foot: TableFoot,
+	Head: TableHead,
+	Header: TableHeader,
+	Row: TableRow,
+};

package/dist/src/components/tabs/Tabs.astro

@@ -42,11 +42,15 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 		private storageKey: string;
 		private valueToTriggerMap: Map<string, HTMLButtonElement>;
 		private valueToContentMap: Map<string, HTMLElement>;
+		private parentHandler: TabsHandler | null = null;
 
-		constructor(tabs: HTMLElement, idx: number) {
+		constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
 			this.tabs = tabs;
-			this.triggers = Array.from(tabs.querySelectorAll("[data-tabs-trigger]"));
-			this.contents = Array.from(tabs.querySelectorAll("[data-tabs-content]"));
+			this.parentHandler = parentHandler;
+			this.triggers = Array.from(
+				tabs.querySelectorAll(":scope > [data-tabs-list] > [data-tabs-trigger]"),
+			);
+			this.contents = Array.from(tabs.querySelectorAll(":scope > [data-tabs-content]"));
 			this.tabsId = `starwind-tabs${idx}`;
 			this.syncKey = tabs.dataset.syncKey;
 			this.storageKey = this.syncKey
@@ -228,6 +232,20 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 				c.setAttribute("data-state", isActive ? "active" : "inactive");
 				c.hidden = !isActive;
 			});
+
+			// Initialize any nested tabs in the active content
+			if (content.hasAttribute("data-state") && content.getAttribute("data-state") === "active") {
+				const nestedTabs = content.querySelectorAll<HTMLElement>(".starwind-tabs");
+
+				nestedTabs.forEach((nestedTab, nestedIdx) => {
+					// Skip tabs that already have instances
+					if (!tabInstances.has(nestedTab)) {
+						const uniqueIdx = 1000 + nestedIdx;
+						const handler = new TabsHandler(nestedTab, uniqueIdx, this);
+						tabInstances.set(nestedTab, handler);
+					}
+				});
+			}
 		}
 	}
 
@@ -235,8 +253,11 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 	const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
 
 	const setupTabs = () => {
+		// First handle top-level tabs
 		document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs, idx) => {
-			if (!tabInstances.has(tabs)) {
+			// Skip tabs that are nested within other tab contents
+			const isNested = !!tabs.closest("[data-tabs-content]");
+			if (!isNested && !tabInstances.has(tabs)) {
 				tabInstances.set(tabs, new TabsHandler(tabs, idx));
 			}
 		});

package/dist/src/components/textarea/Textarea.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
 

package/dist/src/components/tooltip/Tooltip.astro

@@ -162,7 +162,7 @@ const {
 				setTimeout(() => {
 					if (!this.content) return;
 					this.content.style.display = "none";
-				}, this.animationDuration - 10);
+				}, this.animationDuration);
 				this.content.setAttribute("data-state", "closed");
 				return;
 			}
@@ -173,7 +173,7 @@ const {
 					setTimeout(() => {
 						if (!this.content) return;
 						this.content.style.display = "none";
-					}, this.animationDuration - 10);
+					}, this.animationDuration);
 					if (!this.content) return;
 					this.content.setAttribute("data-state", "closed");
 					this.closeTimerRef = null;

package/dist/src/components/tooltip/TooltipContent.astro

@@ -35,8 +35,8 @@ const tooltipContent = tv({
 		"starwind-tooltip-content",
 		"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm will-change-transform",
 		"bg-popover text-popover-foreground rounded-md border",
-		"animate-in fade-in-0 zoom-in-95",
-		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+		"animate-in fade-in zoom-in-95",
+		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
 	],
 	variants: {
 		side: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {