@marianmeres/stuic 2.19.0 → 2.21.0

package/dist/actions/popover/popover.svelte.d.ts

@@ -24,8 +24,11 @@ export declare function isPopoverSupported(): boolean;
 export type PopoverPosition = "top" | "top-left" | "top-right" | "top-span-left" | "top-span-right" | "bottom" | "bottom-left" | "bottom-right" | "bottom-span-left" | "bottom-span-right" | "left" | "right";
 /**
  * Trigger mode for the popover.
+ * - "click": Opens/closes on click (default)
+ * - "hover": Opens on hover/focus, closes on leave/blur
+ * - "hover-or-click": Hover primary, click as fallback (for touch devices)
  */
-export type PopoverTrigger = "click" | "hover";
+export type PopoverTrigger = "click" | "hover" | "hover-or-click";
 /**
  * Options for the popover action.
  */
@@ -36,7 +39,7 @@ export interface PopoverOptions {
     content?: THC | null;
     /** Preferred position relative to anchor */
     position?: PopoverPosition;
-    /** Trigger mode: "click" (default) or "hover" */
+    /** Trigger mode: "click" (default), "hover", or "hover-or-click" (both, click as touch fallback) */
     trigger?: PopoverTrigger;
     /** Delay before showing (ms), mainly for hover mode */
     showDelay?: number;
@@ -95,6 +98,18 @@ export interface PopoverOptions {
  *
  * @example
  * ```svelte
+ * <!-- Hover with click fallback (for touch devices) -->
+ * <button use:popover={() => ({
+ *   content: "Works on hover and touch!",
+ *   trigger: "hover-or-click",
+ *   position: "top"
+ * })}>
+ *   Hover or Tap
+ * </button>
+ * ```
+ *
+ * @example
+ * ```svelte
  * <!-- With component content -->
  * <button use:popover={() => ({
  *   content: { component: MyComponent, props: { foo: "bar" } }

package/dist/actions/popover/popover.svelte.js

@@ -117,6 +117,18 @@ function getStringContent(content) {
  *
  * @example
  * ```svelte
+ * <!-- Hover with click fallback (for touch devices) -->
+ * <button use:popover={() => ({
+ *   content: "Works on hover and touch!",
+ *   trigger: "hover-or-click",
+ *   position: "top"
+ * })}>
+ *   Hover or Tap
+ * </button>
+ * ```
+ *
+ * @example
+ * ```svelte
  * <!-- With component content -->
  * <button use:popover={() => ({
  *   content: { component: MyComponent, props: { foo: "bar" } }
@@ -191,11 +203,18 @@ export function popover(anchorEl, fn) {
     }
     function onClickTrigger(e) {
         e.stopPropagation();
-        if (isVisible) {
-            hide();
+        const trigger = currentOptions.trigger || "click";
+        if (trigger === "hover-or-click") {
+            // Click only opens, doesn't close (fallback for touch)
+            if (!isVisible)
+                show();
         }
         else {
-            show();
+            // Normal click toggle behavior
+            if (isVisible)
+                hide();
+            else
+                show();
         }
     }
     // Render content into popover element
@@ -324,10 +343,8 @@ export function popover(anchorEl, fn) {
             popoverEl.addEventListener("mouseenter", cancelHide);
             popoverEl.addEventListener("mouseleave", scheduleHide);
         }
-        // For click mode with closeOnClickOutside
-        if (currentOptions.trigger === "click" &&
-            currentOptions.closeOnClickOutside !== false &&
-            useAnchorPositioning) {
+        // For click or hover mode with closeOnClickOutside
+        if (currentOptions.closeOnClickOutside !== false && useAnchorPositioning) {
             // Delay adding click listener to avoid immediate close
             setTimeout(() => {
                 document.addEventListener("click", onClickOutside);
@@ -418,12 +435,19 @@ export function popover(anchorEl, fn) {
         if (trigger === "click") {
             anchorEl.addEventListener("click", onClickTrigger);
         }
-        else {
-            // hover mode
+        else if (trigger === "hover") {
+            anchorEl.addEventListener("mouseenter", scheduleShow);
+            anchorEl.addEventListener("mouseleave", scheduleHide);
+            anchorEl.addEventListener("focus", scheduleShow);
+            anchorEl.addEventListener("blur", scheduleHide);
+        }
+        else if (trigger === "hover-or-click") {
+            // Both: hover primary, click fallback for touch
             anchorEl.addEventListener("mouseenter", scheduleShow);
             anchorEl.addEventListener("mouseleave", scheduleHide);
             anchorEl.addEventListener("focus", scheduleShow);
             anchorEl.addEventListener("blur", scheduleHide);
+            anchorEl.addEventListener("click", onClickTrigger);
         }
         return () => {
             anchorEl.removeEventListener("click", onClickTrigger);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.19.0",
+  "version": "2.21.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",