@marianmeres/stuic 2.59.0 → 2.61.0

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

@@ -45,6 +45,26 @@ export type TooltipConfig = () => {
     onShow?: CallableFunction;
     onHide?: CallableFunction;
 };
+/**
+ * Globally enable or disable all tooltips.
+ * Useful for disabling tooltips on touch devices where they interfere with interactions.
+ *
+ * @param value - `true` to enable tooltips, `false` to disable
+ *
+ * @example
+ * ```ts
+ * // Disable tooltips on touch devices
+ * if ('ontouchstart' in window) {
+ *   setTooltipsEnabled(false);
+ * }
+ * ```
+ */
+export declare function setTooltipsEnabled(value: boolean): void;
+/**
+ * Get the current global tooltip enabled state.
+ * @returns `true` if tooltips are globally enabled, `false` otherwise
+ */
+export declare function getTooltipsEnabled(): boolean;
 /**
  * A Svelte action that displays a tooltip anchored to an element using CSS Anchor Positioning.
  *

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

@@ -48,6 +48,44 @@ const POSITION_MAP = {
     left: "left",
     right: "right",
 };
+// Global tooltip configuration - allows disabling all tooltips at runtime
+const globalTooltipConfig = $state({ enabled: true });
+// Touch device auto-detection (runs once on first tooltip init)
+let touchDetectionDone = false;
+function detectTouchDevice() {
+    if (touchDetectionDone)
+        return;
+    touchDetectionDone = true;
+    // Detect touch device and disable tooltips by default
+    const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+    if (isTouchDevice) {
+        globalTooltipConfig.enabled = false;
+    }
+}
+/**
+ * Globally enable or disable all tooltips.
+ * Useful for disabling tooltips on touch devices where they interfere with interactions.
+ *
+ * @param value - `true` to enable tooltips, `false` to disable
+ *
+ * @example
+ * ```ts
+ * // Disable tooltips on touch devices
+ * if ('ontouchstart' in window) {
+ *   setTooltipsEnabled(false);
+ * }
+ * ```
+ */
+export function setTooltipsEnabled(value) {
+    globalTooltipConfig.enabled = value;
+}
+/**
+ * Get the current global tooltip enabled state.
+ * @returns `true` if tooltips are globally enabled, `false` otherwise
+ */
+export function getTooltipsEnabled() {
+    return globalTooltipConfig.enabled;
+}
 /**
  * A Svelte action that displays a tooltip anchored to an element using CSS Anchor Positioning.
  *
@@ -88,6 +126,8 @@ export function tooltip(anchorEl, fn) {
     // the node has been mounted in the DOM
     if (!isTooltipSupported())
         return;
+    // Auto-detect touch device on first tooltip init
+    detectTouchDevice();
     //
     let tooltipEl;
     let hide_timer = null;
@@ -215,7 +255,7 @@ export function tooltip(anchorEl, fn) {
         on_hide = onHide;
         content = _content || anchorEl.getAttribute("aria-label");
         classTooltip = _classTooltip;
-        enabled = _enabled ?? true;
+        enabled = globalTooltipConfig.enabled && (_enabled ?? true);
         position = _position || "top";
         // this will be effective here only if currently in open state, otherwise noop
         set_content();

package/dist/components/AppShell/AppShellSimple.svelte

@@ -50,6 +50,9 @@
 
 	let headerHeight = $state(0);
 
+	// Safari was showing scrollbar so adding 1px extra which solves the problem
+	let topOffset = $derived(headerHeight + 1);
+
 	// pragmatic use case...
 	let mainWidth: number = $state(0);
 	setContext(APP_SHELL_SIMPLE_MAIN_WIDTH, {
@@ -77,7 +80,7 @@
 			bind:this={elRail}
 			data-shell="rail"
 			style:top="{headerHeight}px"
-			style:height="calc(100dvh - {headerHeight}px)"
+			style:height="calc(100dvh - {topOffset}px)"
 			class={twMerge(
 				"sticky shrink-0",
 				"flex flex-col items-center",
@@ -95,7 +98,7 @@
 			bind:this={elAside}
 			data-shell="aside"
 			style:top="{headerHeight}px"
-			style:height="calc(100dvh - {headerHeight}px)"
+			style:height="calc(100dvh - {topOffset}px)"
 			class={twMerge(
 				"sticky shrink-0",
 				"flex flex-col items-center",

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,6 +1,11 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { FocusTrapOptions } from "../../actions/focus-trap.js";
+	import { BodyScroll, focusTrap as focusTrapAction, twMerge } from "../../index.js";
+	import { createClog } from "@marianmeres/clog";
+	import { watch } from "runed";
+	import { onDestroy } from "svelte";
+	import { fade } from "svelte/transition";
 
 	export interface Props extends Record<string, any> {
 		class?: string;
@@ -11,6 +16,7 @@
 		el?: HTMLDivElement;
 		children?: Snippet;
 		onEscape?: () => void;
+		onBackdropClick?: () => void;
 		visible?: boolean;
 		noScrollLock?: boolean;
 	}
@@ -20,13 +26,7 @@
 </script>
 
 <script lang="ts">
-	import { BodyScroll, focusTrap as focusTrapAction, twMerge } from "../../index.js";
-	import { createClog } from "@marianmeres/clog";
-	import { watch } from "runed";
-	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
-
-	const clog = createClog("Backdrop").debug;
+	const clog = createClog("Backdrop", { color: "auto" });
 
 	let {
 		class: classProp,
@@ -37,6 +37,7 @@
 		el = $bindable(),
 		children,
 		onEscape,
+		onBackdropClick,
 		visible = $bindable(false),
 		noScrollLock,
 		...rest
@@ -152,6 +153,11 @@
 		in:fade={{ duration: fadeInDuration }}
 		out:fade={{ duration: fadeOutDuration }}
 		use:focusTrapAction={focusTrapOptions}
+		onmousedown={(e) => {
+			if (e.target === el && onBackdropClick) {
+				onBackdropClick();
+			}
+		}}
 		{...rest}
 	>
 		{@render children?.()}

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

@@ -9,6 +9,7 @@ export interface Props extends Record<string, any> {
     el?: HTMLDivElement;
     children?: Snippet;
     onEscape?: () => void;
+    onBackdropClick?: () => void;
     visible?: boolean;
     noScrollLock?: boolean;
 }

package/dist/components/Input/_internal/InputWrap.svelte

@@ -105,6 +105,7 @@
 		inputBox: {
 			size: {
 				sm: "text-sm",
+				lg: "p-1",
 			} as any,
 		},
 	};

package/dist/components/Modal/Modal.svelte

@@ -29,6 +29,8 @@
 		onEscape?: undefined | (() => void);
 		/** Disable body scroll lock when modal is open */
 		noScrollLock?: boolean;
+		/** Fires when the backdrop is clicked "directly" */
+		onBackdropClick?: undefined | (() => void);
 	}
 </script>
 
@@ -59,6 +61,7 @@
 		focusTrap = true,
 		onEscape,
 		noScrollLock = false,
+		onBackdropClick,
 	}: Props = $props();
 
 	let backdrop: Backdrop = $state()!;
@@ -94,6 +97,7 @@
 	fadeOutDuration={transitionDuration}
 	{onEscape}
 	{noScrollLock}
+	{onBackdropClick}
 >
 	<div
 		bind:this={el}

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

@@ -27,6 +27,8 @@ export interface Props {
     onEscape?: undefined | (() => void);
     /** Disable body scroll lock when modal is open */
     noScrollLock?: boolean;
+    /** Fires when the backdrop is clicked "directly" */
+    onBackdropClick?: undefined | (() => void);
 }
 declare const Modal: import("svelte").Component<Props, {
     close: () => void;

package/dist/index.css

@@ -1,4 +1,11 @@
-@import "tailwindcss";
+/*
+	Tailwind import removed here because it causes CSS cascade/layer issues in WebKit browsers
+	(Safari, iOS Chrome) when consumers also import Tailwind. The double import can result in
+	Tailwind's preflight styles (like border-style: solid) not being applied correctly.
+	Consumers of STUIC should import Tailwind at their own app level.
+*/
+/* @import "tailwindcss"; */
+
 @plugin '@tailwindcss/forms';
 
 @custom-variant dark (&:where(.dark, .dark *));

package/package.json

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