@marianmeres/stuic 3.4.2 → 3.4.3

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

@@ -1,5 +1,4 @@
 import type { THC } from "../../components/Thc/Thc.svelte";
-import "./index.css";
 /**
  * Open a popover by its registered ID.
  *

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

@@ -1,10 +1,10 @@
 import { mount, unmount } from "svelte";
 import { twMerge } from "../../utils/tw-merge.js";
 import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
+import { iconX } from "../../icons/index.js";
 import { BodyScroll } from "../../utils/body-scroll-locker.js";
 import PopoverContent from "./PopoverContent.svelte";
 //
-import "./index.css";
 // Registry of open popover hide functions for closeOthers feature
 const openPopovers = new Set();
 // Reactive state tracking which popovers are open by ID
@@ -415,20 +415,9 @@ export function popover(anchorEl, fn) {
             const closeBtn = document.createElement("button");
             closeBtn.setAttribute("type", "button");
             closeBtn.setAttribute("aria-label", "Close");
-            closeBtn.innerHTML = `<svg fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" style="width:1.25rem;height:1.25rem"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>`;
-            closeBtn.style.cssText = `
-				position: absolute;
-				top: 4px;
-				right: 4px;
-				background: black;
-				color: white;
-				border: none;
-				border-radius: 0.25rem;
-				cursor: pointer;
-				opacity: 0.6;
-				padding: 0.33rem;
-				line-height: 1;
-			`;
+            closeBtn.classList.add("stuic-close-button");
+            closeBtn.style.cssText = `position: absolute; top: 4px; right: 4px;`;
+            closeBtn.innerHTML = iconX();
             closeBtn.addEventListener("click", hide);
             popoverEl.appendChild(closeBtn);
         }

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

@@ -1,4 +1,3 @@
-import "./index.css";
 /**
  * Checks if the browser supports CSS Anchor Positioning for tooltips.
  *

package/dist/actions/tooltip/tooltip.svelte.js

@@ -1,7 +1,5 @@
 import { twMerge } from "../../utils/tw-merge.js";
 import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
-//
-import "./index.css";
 const TIMEOUT = 200;
 const TRANSITION = 200;
 /**

package/dist/components/Avatar/Avatar.svelte

@@ -60,10 +60,12 @@
 		el = $bindable(),
 	}: Props = $props();
 
+	const DEFAULT_ICON_SIZE = 24;
+
 	// Icon sizes for preset sizes (visual sizes are handled by CSS)
 	const ICON_SIZES: Record<string, number> = {
 		sm: 16,
-		md: 20,
+		md: DEFAULT_ICON_SIZE,
 		lg: 28,
 		xl: 32,
 		"2xl": 36,
@@ -159,7 +161,7 @@
 			return parseInt(match[1]) * 2;
 		}
 
-		return 20; // Default fallback
+		return DEFAULT_ICON_SIZE; // Default fallback
 	});
 
 	let colors = $derived(

package/dist/components/Avatar/index.css

@@ -24,7 +24,7 @@
 	--stuic-avatar-font-size-sm: var(--text-xs);
 
 	/* Size: md */
-	--stuic-avatar-size-md: calc(var(--spacing) * 10);
+	--stuic-avatar-size-md: calc(var(--spacing) * 11);
 	--stuic-avatar-font-size-md: var(--text-base);
 
 	/* Size: lg */

package/dist/components/Button/Button.svelte

@@ -37,7 +37,15 @@
 		el?: HTMLElement;
 		/** Optional tooltip configuration or direct content */
 		tooltip?: string | TooltipConfig;
-		/** Is this button a "X" button (this is a pragmatic convenience) */
+		/**
+		 * Is this button a "X" button (this is a pragmatic convenience).
+		 *
+		 * Note: this does NOT use the shared `.stuic-close-button` styling (see X/index.css)
+		 * because `<Button x>` is a general-purpose "button with an X icon" (tags, toolbars,
+		 * dialogs...), styled by the Button system (intent/variant/size). The `.stuic-close-button`
+		 * class is specifically for floating overlay dismiss controls (popover/dropdown fallback).
+		 * For that look, use: `<Button x unstyled class="stuic-close-button" />`
+		 */
 		x?: boolean | XProps;
 		/** Optional out-of-the-box spinner support  */
 		spinner?: boolean | THC;
@@ -92,9 +100,13 @@
 		return _tooltip ? _tooltip : () => ({ enabled: false });
 	});
 
+	const DEFAULT_X_CLS = "size-7 -m-2";
+
 	let _xProps: undefined | XProps = $derived.by(() => {
 		if (x) {
-			return typeof x === "boolean" ? {} : x;
+			const props = typeof x === "boolean" ? { class: "" } : { ...x };
+			props.class = twMerge(DEFAULT_X_CLS, props.class);
+			return props;
 		}
 	});
 

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

@@ -36,7 +36,15 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     el?: HTMLElement;
     /** Optional tooltip configuration or direct content */
     tooltip?: string | TooltipConfig;
-    /** Is this button a "X" button (this is a pragmatic convenience) */
+    /**
+     * Is this button a "X" button (this is a pragmatic convenience).
+     *
+     * Note: this does NOT use the shared `.stuic-close-button` styling (see X/index.css)
+     * because `<Button x>` is a general-purpose "button with an X icon" (tags, toolbars,
+     * dialogs...), styled by the Button system (intent/variant/size). The `.stuic-close-button`
+     * class is specifically for floating overlay dismiss controls (popover/dropdown fallback).
+     * For that look, use: `<Button x unstyled class="stuic-close-button" />`
+     */
     x?: boolean | XProps;
     /** Optional out-of-the-box spinner support  */
     spinner?: boolean | THC;

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -533,7 +533,12 @@
 		}
 	});
 
-	// Runtime viewport overflow detection
+	// Runtime viewport overflow detection.
+	// Known issue: Safari (as of 18.x) does not honor CSS position-try-fallbacks
+	// for anchor-positioned elements, so this JS check + centered modal fallback
+	// is the actual mechanism that handles overflow on Safari/iOS.
+	// On Chrome/Android, CSS position-try-fallbacks (defined in index.css) handles
+	// overflow natively and this check rarely fires.
 	$effect(() => {
 		if (!isOpen || !dropdownEl || forceFallback || runtimeFallback) return;
 		if (!isAnchorPositioningSupported()) return;
@@ -842,25 +847,13 @@
 					<button
 						type="button"
 						aria-label="Close"
-						class="stuic-dropdown-menu-close absolute right-0 top-0 pointer-events-auto"
+						class="stuic-close-button absolute right-0 top-0 pointer-events-auto"
 						onclick={() => {
 							isOpen = false;
 							triggerEl?.focus();
 						}}
 					>
-						<svg
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="2.5"
-							stroke="currentColor"
-							class="w-5 h-5"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M6 18 18 6M6 6l12 12"
-							/>
-						</svg>
+						{@html iconX()}
 					</button>
 				</div>
 			{/if}

package/dist/components/DropdownMenu/index.css

@@ -56,12 +56,6 @@
 	--stuic-dropdown-menu-backdrop-bg: rgb(0 0 0 / 0.25);
 	--stuic-dropdown-menu-backdrop-z-index: 40;
 
-	/* Close button (fallback mode) */
-	--stuic-dropdown-menu-close-bg: var(--stuic-color-foreground);
-	--stuic-dropdown-menu-close-text: var(--stuic-color-background);
-	--stuic-dropdown-menu-close-opacity: 0.6;
-	--stuic-dropdown-menu-close-opacity-hover: 1;
-
 	/* Expandable section indent */
 	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
 
@@ -196,25 +190,6 @@
 		transition-property: opacity;
 	}
 
-	/* =============================================================================
-	   CLOSE BUTTON (Fallback Mode)
-	   ============================================================================= */
-
-	.stuic-dropdown-menu-close {
-		background: var(--stuic-dropdown-menu-close-bg);
-		color: var(--stuic-dropdown-menu-close-text);
-		opacity: var(--stuic-dropdown-menu-close-opacity);
-		border-radius: var(--stuic-dropdown-menu-radius);
-		padding: calc(var(--spacing) * 2);
-		cursor: pointer;
-		line-height: 1;
-		transition: opacity var(--stuic-dropdown-menu-transition);
-	}
-
-	.stuic-dropdown-menu-close:hover {
-		opacity: var(--stuic-dropdown-menu-close-opacity-hover);
-	}
-
 	/* =============================================================================
 	   EXPANDABLE SECTION
 	   ============================================================================= */

package/dist/components/X/index.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   CLOSE BUTTON - Shared "floating X dismiss" for fallback/modal contexts
+   Override globally: :root { --stuic-close-button-radius: 0.25rem; }
+   Override locally:  .my-component .stuic-close-button { --stuic-close-button-opacity: 0.8; }
+   ============================================================================= */
+
+:root {
+	--stuic-close-button-bg: var(--stuic-color-foreground);
+	--stuic-close-button-text: var(--stuic-color-background);
+	--stuic-close-button-opacity: 0.6;
+	--stuic-close-button-opacity-hover: 1;
+	--stuic-close-button-radius: 9999px;
+	--stuic-close-button-padding: calc(var(--spacing) * 2);
+	--stuic-close-button-min-size: 44px;
+	--stuic-close-button-transition: 150ms;
+	--stuic-close-button-icon-size: 1.75rem;
+}
+
+@layer components {
+	.stuic-close-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--stuic-close-button-bg);
+		color: var(--stuic-close-button-text);
+		opacity: var(--stuic-close-button-opacity);
+		border: none;
+		border-radius: var(--stuic-close-button-radius);
+		padding: var(--stuic-close-button-padding);
+		cursor: pointer;
+		line-height: 1;
+		min-height: var(--stuic-close-button-min-size);
+		min-width: var(--stuic-close-button-min-size);
+		transition: opacity var(--stuic-close-button-transition);
+	}
+
+	.stuic-close-button:hover {
+		opacity: var(--stuic-close-button-opacity-hover);
+	}
+
+	.stuic-close-button svg {
+		width: var(--stuic-close-button-icon-size);
+		height: var(--stuic-close-button-icon-size);
+	}
+}

package/dist/index.css

@@ -48,6 +48,11 @@ In practice:
 @import "./components/TabbedMenu/index.css";
 @import "./components/ThemePreview/index.css";
 @import "./components/TwCheck/index.css";
+@import "./components/X/index.css";
+
+/* Action CSS */
+@import "./actions/popover/index.css";
+@import "./actions/tooltip/index.css";
 
 /* Base styles for STUIC components */
 @layer base {

package/package.json

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