@marianmeres/stuic 2.58.0 → 2.60.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/AppShell.svelte

@@ -38,7 +38,7 @@
 		elFooter?: HTMLElement;
 	}
 
-	export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
+	export const APP_SHELL_MAIN_WIDTH = Symbol("APP_SHELL_MAIN_WIDTH");
 
 	/**
 	 * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
@@ -103,7 +103,7 @@
 
 	// pragmatic use case...
 	let mainWidth: number = $state(0);
-	setContext(MAIN_WIDTH, {
+	setContext(APP_SHELL_MAIN_WIDTH, {
 		get current() {
 			return mainWidth;
 		},

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

@@ -33,7 +33,7 @@ export interface Props {
     elSidebarRight?: HTMLElement;
     elFooter?: HTMLElement;
 }
-export declare const MAIN_WIDTH: unique symbol;
+export declare const APP_SHELL_MAIN_WIDTH: unique symbol;
 /**
  * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
  * It also returns a function which unsets the full height. So we can write:

package/dist/components/AppShell/AppShellSimple.svelte

@@ -9,6 +9,8 @@
 		railClass?: string;
 		asideClass?: string;
 		mainClass?: string;
+		// header support style as well (for iOS theming, seem to be better supported)
+		headerStyle?: string;
 		//
 		rail?: Snippet;
 		header?: Snippet;
@@ -21,7 +23,7 @@
 		elMain?: HTMLElement;
 	}
 
-	export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
+	export const APP_SHELL_SIMPLE_MAIN_WIDTH = Symbol("APP_SHELL_SIMPLE_MAIN_WIDTH");
 </script>
 
 <script lang="ts">
@@ -33,6 +35,8 @@
 		asideClass,
 		mainClass,
 		//
+		headerStyle = "",
+		//
 		rail,
 		header,
 		aside,
@@ -48,7 +52,7 @@
 
 	// pragmatic use case...
 	let mainWidth: number = $state(0);
-	setContext(MAIN_WIDTH, {
+	setContext(APP_SHELL_SIMPLE_MAIN_WIDTH, {
 		get current() {
 			return mainWidth;
 		},
@@ -61,6 +65,7 @@
 		bind:clientHeight={headerHeight}
 		data-shell="header"
 		class={twMerge("sticky top-0 z-10", headerClass)}
+		style={headerStyle}
 	>
 		{@render header()}
 	</header>
@@ -106,7 +111,7 @@
 	<main
 		bind:this={elMain}
 		data-shell="main"
-		class={twMerge("flex-1", mainClass)}
+		class={twMerge("flex-1 max-w-full", mainClass)}
 		bind:offsetWidth={mainWidth}
 	>
 		{@render children?.()}

package/dist/components/AppShell/AppShellSimple.svelte.d.ts

@@ -5,6 +5,7 @@ export interface Props {
     railClass?: string;
     asideClass?: string;
     mainClass?: string;
+    headerStyle?: string;
     rail?: Snippet;
     header?: Snippet;
     aside?: Snippet;
@@ -14,7 +15,7 @@ export interface Props {
     elAside?: HTMLElement;
     elMain?: HTMLElement;
 }
-export declare const MAIN_WIDTH: unique symbol;
+export declare const APP_SHELL_SIMPLE_MAIN_WIDTH: unique symbol;
 declare const AppShellSimple: import("svelte").Component<Props, {}, "elRail" | "elHeader" | "elAside" | "elMain">;
 type AppShellSimple = ReturnType<typeof AppShellSimple>;
 export default AppShellSimple;

package/dist/components/AppShell/index.d.ts

@@ -1,2 +1,2 @@
-export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
-export { default as AppShellSimple, type Props as AppShellSimpleProps, MAIN_WIDTH as APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
+export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, type Props as AppShellSimpleProps, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";

package/dist/components/AppShell/index.js

@@ -1,2 +1,2 @@
-export { default as AppShell, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
-export { default as AppShellSimple, MAIN_WIDTH as APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
+export { default as AppShell, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";

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.58.0",
+  "version": "2.60.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",