@marianmeres/stuic 2.20.0 → 2.21.1

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,12 +203,10 @@ export function popover(anchorEl, fn) {
     }
     function onClickTrigger(e) {
         e.stopPropagation();
-        if (isVisible) {
+        if (isVisible)
             hide();
-        }
-        else {
+        else
             show();
-        }
     }
     // Render content into popover element
     function renderContent() {
@@ -416,13 +426,20 @@ 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);
             anchorEl.removeEventListener("mouseenter", scheduleShow);

package/package.json

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