@starwind-ui/core 1.7.0 → 1.7.2

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/index.ts
-import { join } from "node:path";
-import { fileURLToPath } from "node:url";
+import { join } from "path";
+import { fileURLToPath } from "url";
 
 // src/registry.json
 var registry_default = {
@@ -14,7 +14,7 @@ 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.3", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.2.0", dependencies: [] },
     { name: "dropdown", type: "component", version: "1.0.3", dependencies: [] },
     { name: "dropzone", type: "component", version: "1.0.0", dependencies: [] },
     { name: "input", type: "component", version: "1.1.1", dependencies: [] },
@@ -22,7 +22,7 @@ var registry_default = {
     { name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
     { name: "progress", type: "component", version: "1.0.0", dependencies: [] },
     { name: "radio-group", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "select", type: "component", version: "1.3.2", dependencies: [] },
+    { name: "select", type: "component", version: "1.4.0", dependencies: [] },
     { name: "skeleton", type: "component", version: "1.0.0", dependencies: [] },
     { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
     { name: "table", type: "component", version: "1.0.0", 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\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: 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  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return 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  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.3\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.3.2\", \"dependencies\": [] },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACE,SAAW;AAAA,EACX,YAAc;AAAA,IACZ,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,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,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,eAAe,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACrF,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,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,EACnF;AACF;;;ADLA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGnF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC/D;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\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: 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  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return 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  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACE,SAAW;AAAA,EACX,YAAc;AAAA,IACZ,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,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,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,eAAe,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACrF,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,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,EACnF;AACF;;;ADLA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGnF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC/D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}

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

@@ -12,10 +12,11 @@ const { class: className, ...rest } = Astro.props;
 
 <script>
   class DialogHandler {
-    private trigger: HTMLButtonElement;
+    private triggers: HTMLButtonElement[] = [];
     private dialog: HTMLDialogElement;
-    private closeButtons: NodeListOf<HTMLButtonElement>;
+    private closeButtons: HTMLButtonElement[] = [];
     private backdrop: HTMLElement;
+    private dialogId: string;
     /**
      * The duration of the animation in milliseconds. This is used to calculate the
      * duration of close animation before hiding the dialog and backdrop
@@ -26,6 +27,14 @@ const { class: className, ...rest } = Astro.props;
       this.dialog = dialogWrapper.querySelector("dialog")!;
       this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop")!;
 
+      // if no ID was provided for the wrapper, generate one
+      if (dialogWrapper.id) {
+        this.dialogId = dialogWrapper.id;
+      } else {
+        this.dialogId = `starwind-dialog${dialogNumber}`;
+        dialogWrapper.id = this.dialogId;
+      }
+
       // animationDuration is set with inline styles through passed prop to DialogContent
       const animationDurationString = this.dialog.style.animationDuration;
       if (animationDurationString.endsWith("ms")) {
@@ -37,13 +46,25 @@ const { class: className, ...rest } = Astro.props;
         this.animationDuration = 200;
       }
 
-      // if trigger is set with asChild, use the first child element for trigger button
-      const tempTrigger = dialogWrapper.querySelector(".starwind-dialog-trigger") as HTMLElement;
-      if (tempTrigger?.hasAttribute("data-as-child")) {
-        this.trigger = tempTrigger.firstElementChild as HTMLButtonElement;
-      } else {
-        this.trigger = tempTrigger as HTMLButtonElement;
-      }
+      // Find internal triggers and handle them
+      const internalTriggers = dialogWrapper.querySelectorAll(".starwind-dialog-trigger");
+      internalTriggers.forEach((triggerElement) => {
+        const tempTrigger = triggerElement as HTMLElement;
+        let trigger: HTMLButtonElement;
+
+        if (tempTrigger?.hasAttribute("data-as-child")) {
+          trigger = tempTrigger.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = tempTrigger as HTMLButtonElement;
+        }
+
+        if (trigger) {
+          this.triggers.push(trigger);
+        }
+      });
+
+      // Find external triggers that target this dialog
+      this.findExternalTriggers();
 
       // if closeButtons are set with asChild, swap the wrapper with its first child
       const tempCloseButtons = dialogWrapper.querySelectorAll(
@@ -60,12 +81,13 @@ const { class: className, ...rest } = Astro.props;
         return button;
       });
 
-      this.closeButtons = dialogWrapper.querySelectorAll(
-        ".starwind-dialog-close",
-      ) as NodeListOf<HTMLButtonElement>;
+      // Convert NodeList to Array for consistency with triggers
+      this.closeButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-dialog-close"),
+      ) as HTMLButtonElement[];
 
-      // if any elements are not there, exit
-      if (!this.trigger || !this.dialog || !this.backdrop) return;
+      // if essential elements are not there, exit
+      if (!this.dialog || !this.backdrop) return;
 
       this.setupAccessibility(dialogNumber);
       this.setupEvents();
@@ -82,9 +104,40 @@ const { class: className, ...rest } = Astro.props;
       }
     }
 
+    /**
+     * Find all external triggers that target this dialog
+     */
+    private findExternalTriggers(): void {
+      const externalTriggers = document.querySelectorAll(
+        `.starwind-dialog-trigger[data-dialog-for="${this.dialogId}"]`,
+      );
+
+      externalTriggers.forEach((triggerElement) => {
+        // Skip if this is an internal trigger we already processed
+        const dialogWrapper = triggerElement.closest(".starwind-dialog");
+        if (dialogWrapper && dialogWrapper.id === this.dialogId) {
+          return;
+        }
+
+        let trigger: HTMLButtonElement;
+        if (triggerElement.hasAttribute("data-as-child")) {
+          trigger = triggerElement.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = triggerElement as HTMLButtonElement;
+        }
+
+        if (trigger && !this.triggers.includes(trigger)) {
+          this.triggers.push(trigger);
+        }
+      });
+    }
+
     private setupEvents(): void {
-      this.trigger?.addEventListener("click", () => {
-        this.open();
+      // Add click listeners to all triggers
+      this.triggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+          this.open();
+        });
       });
 
       // Add click handlers to all close buttons
@@ -189,3 +242,9 @@ const { class: className, ...rest } = Astro.props;
   setupDialogs();
   document.addEventListener("astro:after-swap", setupDialogs);
 </script>
+
+<style>
+  .overflow-hidden {
+    overflow: hidden;
+  }
+</style>

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

@@ -6,9 +6,14 @@ type Props = HTMLAttributes<"button"> & {
    * When true, the component will render its child element with a simple wrapper instead of a button component
    */
   asChild?: boolean;
+  /**
+   * Optional ID of the dialog to trigger. If not provided and the trigger is inside a Dialog component,
+   * it will automatically target that dialog. Required when used outside a Dialog component.
+   */
+  for?: string;
 };
 
-const { class: className, asChild = false, ...rest } = Astro.props;
+const { class: className, asChild = false, for: dialogFor, ...rest } = Astro.props;
 
 // Get the first child element if asChild is true
 let hasChildren = false;
@@ -19,7 +24,7 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class="starwind-dialog-trigger" data-as-child>
+    <div class="starwind-dialog-trigger" data-as-child data-dialog-for={dialogFor}>
       <slot />
     </div>
   ) : (
@@ -27,6 +32,7 @@ if (Astro.slots.has("default")) {
       type="button"
       aria-haspopup="dialog"
       class:list={["starwind-dialog-trigger", className]}
+      data-dialog-for={dialogFor}
       {...rest}
     >
       <slot />

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

@@ -3,14 +3,14 @@ import type { HTMLAttributes } from "astro/types";
 
 type Props = HTMLAttributes<"div"> & {
   /**
-   * The name of the select field for form handling
+   * The name for the hidden <select> element - used for standard 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;
 };
 
@@ -27,7 +27,7 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
 </div>
 
 <script>
-  import type { SelectChangeEvent } from "./SelectTypes";
+  import type { SelectChangeEvent, SelectEvent } from "./SelectTypes";
 
   class SelectHandler {
     private select: HTMLElement;
@@ -73,7 +73,10 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       selectField.tabIndex = -1;
       selectField.setAttribute("aria-hidden", "true");
       selectField.setAttribute("placeholder", "select");
-      selectField.name = this.select.getAttribute("data-name") || "";
+      const selectName = this.select.getAttribute("data-name");
+      if (selectName) {
+        selectField.name = selectName;
+      }
 
       // you can comment out this "sr-only" class line below if you want to see the native select in action
       selectField.classList.add("starwind-sr-only");
@@ -237,6 +240,22 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
 
       // passive resize listener to call setSize()
       window.addEventListener("resize", () => this.setSize(), { passive: true });
+
+      // Listen for programmatic selection events
+      document.addEventListener("starwind-select:select", (e: Event) => {
+        const selectEvent = e as SelectEvent;
+        const selectId = selectEvent.detail.selectId;
+        const selectName = selectEvent.detail.selectName;
+        const selectValue = selectEvent.detail.value;
+
+        // Check if this event is for this select
+        if (
+          (selectId && this.select.id === selectId) ||
+          (selectName && this.select.getAttribute("data-name") === selectName)
+        ) {
+          this.programmaticallySelect(selectValue);
+        }
+      });
     }
 
     private handleNavigationKeys(e: KeyboardEvent) {
@@ -438,6 +457,27 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       }
     }
 
+    /**
+     * Programmatically selects an option by value
+     */
+    private programmaticallySelect(value: string): void {
+      if (!this.content) return;
+
+      const item = this.content.querySelector(`[data-value="${value}"]`);
+      if (item instanceof HTMLElement) {
+        this.returnFocusOnClose = false;
+
+        // Update aria-selected attributes immediately
+        if (this.selectedItem) {
+          this.selectedItem.setAttribute("aria-selected", "false");
+        }
+        item.setAttribute("aria-selected", "true");
+
+        // Then call handleSelection which will update the rest
+        this.handleSelection(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/SelectTypes.ts

@@ -5,3 +5,9 @@ export interface SelectChangeEvent extends CustomEvent {
     label: string;
   };
 }
+
+export interface SelectEvent extends CustomEvent {
+  detail:
+    | { value: string; selectId: string; selectName?: string }
+    | { value: string; selectId?: string; selectName: string };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {
@@ -28,11 +28,11 @@
     "dist"
   ],
   "devDependencies": {
-    "astro": "^5.0.0",
-    "fs-extra": "^11.2.0",
-    "glob": "^10.3.10",
-    "tailwindcss": "^4.0.0",
-    "tsup": "^8.0.2"
+    "astro": "5.11.0",
+    "fs-extra": "11.3.0",
+    "glob": "11.0.3",
+    "tailwindcss": "4.1.11",
+    "tsup": "8.5.0"
   },
   "scripts": {
     "build": "pnpm clean && tsup",