@marianmeres/stuic 2.25.0 → 2.27.0

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

@@ -1,5 +1,31 @@
 import type { THC } from "../../components/Thc/Thc.svelte";
 import "./index.css";
+/**
+ * Open a popover by its registered ID.
+ *
+ * @param id - The popover ID to open
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * import { openPopover } from './';
+ * </script>
+ * <button onclick={() => openPopover('my-popover')}>Open</button>
+ * ```
+ */
+export declare function openPopover(id: string): void;
+/**
+ * Close a popover by its registered ID.
+ *
+ * @param id - The popover ID to close
+ */
+export declare function closePopover(id: string): void;
+/**
+ * Toggle a popover by its registered ID.
+ *
+ * @param id - The popover ID to toggle
+ */
+export declare function togglePopover(id: string): void;
 /**
  * Checks if the browser supports CSS Anchor Positioning for popovers.
  *
@@ -67,6 +93,8 @@ export interface PopoverOptions {
     debug?: boolean;
     /** Programmatically control open state (reactive) */
     open?: boolean;
+    /** Unique ID for registry-based programmatic control (use with openPopover/closePopover/togglePopover) */
+    id?: string;
 }
 /**
  * A Svelte action that displays a popover anchored to an element using CSS Anchor Positioning.

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

@@ -6,6 +6,54 @@ import PopoverContent from "./PopoverContent.svelte";
 import "./index.css";
 // Registry of open popover hide functions for closeOthers feature
 const openPopovers = new Set();
+// Registry of popovers by ID for programmatic control
+const popoverRegistry = new Map();
+// Track if an open was just requested (to prevent same-click outside close)
+let openRequestedThisCycle = false;
+/**
+ * Open a popover by its registered ID.
+ *
+ * @param id - The popover ID to open
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * import { openPopover } from './';
+ * </script>
+ * <button onclick={() => openPopover('my-popover')}>Open</button>
+ * ```
+ */
+export function openPopover(id) {
+    const entry = popoverRegistry.get(id);
+    if (entry) {
+        openRequestedThisCycle = true;
+        setTimeout(() => {
+            openRequestedThisCycle = false;
+        }, 0);
+        // Close all other open popovers first
+        openPopovers.forEach((hideFn) => {
+            if (hideFn !== entry.hide)
+                hideFn();
+        });
+        entry.show();
+    }
+}
+/**
+ * Close a popover by its registered ID.
+ *
+ * @param id - The popover ID to close
+ */
+export function closePopover(id) {
+    popoverRegistry.get(id)?.hide();
+}
+/**
+ * Toggle a popover by its registered ID.
+ *
+ * @param id - The popover ID to toggle
+ */
+export function togglePopover(id) {
+    popoverRegistry.get(id)?.toggle();
+}
 const SHOW_DELAY = 100;
 const HIDE_DELAY = 200;
 const TRANSITION = 200;
@@ -201,11 +249,20 @@ export function popover(anchorEl, fn) {
         if (popoverEl &&
             !popoverEl.contains(e.target) &&
             !anchorEl.contains(e.target)) {
+            // Skip if an open was just requested via registry (same click event)
+            if (openRequestedThisCycle) {
+                return;
+            }
             hide();
         }
     }
     function onClickTrigger(e) {
         e.stopPropagation();
+        // Close all other open popovers (since stopPropagation prevents onClickOutside from firing)
+        openPopovers.forEach((hideFn) => {
+            if (hideFn !== hide)
+                hideFn();
+        });
         if (isVisible)
             hide();
         else
@@ -409,8 +466,22 @@ export function popover(anchorEl, fn) {
             onShow: opts.onShow,
             onHide: opts.onHide,
             debug: opts.debug,
+            id: opts.id,
         };
         do_debug = !!opts.debug;
+        // Register in global registry if id provided
+        if (opts.id) {
+            popoverRegistry.set(opts.id, {
+                show,
+                hide,
+                toggle: () => {
+                    if (isVisible)
+                        hide();
+                    else
+                        show();
+                },
+            });
+        }
         // Update popover if visible
         if (isVisible && popoverEl) {
             // Update position (only in anchor positioning mode)
@@ -473,6 +544,10 @@ export function popover(anchorEl, fn) {
             clearTimers();
             // Unregister from open popovers
             openPopovers.delete(hide);
+            // Unregister from popover registry
+            if (currentOptions.id) {
+                popoverRegistry.delete(currentOptions.id);
+            }
             document.removeEventListener("keydown", onEscape);
             document.removeEventListener("click", onClickOutside);
         };

package/dist/components/Button/Button.svelte

@@ -43,8 +43,9 @@
 		border-button-border dark:border-button-border-dark
 		rounded-md
 		inline-flex items-center justify-center gap-x-2
-		px-3 py-2.5
+		px-4 py-3
 		select-none
+		min-h-[44px] min-w-[44px]
 
 		hover:brightness-105
 		active:brightness-95
@@ -59,7 +60,7 @@
 
 	export const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses = {
 		size: {
-			sm: `text-sm rounded-sm px-2 py-1`,
+			sm: `text-sm rounded-sm px-3 py-2 min-h-none min-w-none`,
 			lg: `text-base rounded-md`,
 		},
 		variant: {

package/dist/components/Button/Button.svelte.d.ts

@@ -31,7 +31,7 @@ export interface ButtonPresetClasses {
     shadow: string;
     inverse: string;
 }
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2.5\n\t\tselect-none\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-4 py-3\n\t\tselect-none\n\t\tmin-h-[44px] min-w-[44px]\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses;
 import "./index.css";
 import { type TooltipConfig } from "../../actions/index.js";

package/package.json

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