@marianmeres/stuic 2.1.6 → 2.1.8

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,5 +1,31 @@
 <script lang="ts" module>
-	const _instances = [];
+	interface BodyStyles {
+		position: string | null;
+		top: string | null;
+		width: string | null;
+		overflow: string | null;
+	}
+
+	function get_body_style(): BodyStyles {
+		// const style = window.getComputedStyle(document.body);
+		const style = document.body.style; // we want only explicitly defined, not computed
+		return {
+			position: style.position || null,
+			top: style.top || null,
+			width: style.width || null,
+			overflow: style.overflow || null,
+		};
+	}
+
+	function restore_body_styles(original: BodyStyles) {
+		(["position", "top", "width", "overflow"] as (keyof BodyStyles)[]).forEach((k) => {
+			if (original[k] !== null) {
+				document.body.style[k] = original[k];
+			} else {
+				document.body.style.removeProperty(k);
+			}
+		});
+	}
 </script>
 
 <script lang="ts">
@@ -11,7 +37,7 @@
 	} from "../../index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { PressedKeys, watch } from "runed";
-	import { type Snippet } from "svelte";
+	import { onDestroy, tick, type Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 
 	const clog = createClog("Backdrop").debug;
@@ -95,29 +121,33 @@
 	);
 
 	// lock body scroll when open and restore back
-	let _original: any = {};
+	let _original: BodyStyles = {
+		position: null,
+		top: null,
+		width: null,
+		overflow: null,
+	};
+
+	function _restore() {
+		const scrollY = document.body.style.top;
+		restore_body_styles(_original);
+		// Restore scroll position
+		window.scrollTo(0, parseInt(scrollY || "0") * -1);
+	}
+
 	$effect(() => {
 		if (noScrollLock) return;
 		if (visible) {
-			_original = window.getComputedStyle(document.body);
+			_original = get_body_style();
 			const scrollY = window.scrollY;
-
 			document.body.style.position = "fixed";
 			document.body.style.top = `-${scrollY}px`;
 			document.body.style.width = "100%";
 			document.body.style.overflow = "hidden";
 		} else {
-			const scrollY = document.body.style.top;
-
-			document.body.style.position = _original.position;
-			document.body.style.position = "";
-			document.body.style.top = "";
-			document.body.style.width = "";
-			document.body.style.overflow = "";
-
-			// Restore scroll position
-			window.scrollTo(0, parseInt(scrollY || "0") * -1);
+			_restore();
 		}
+		return _restore; // onDestroy as well
 	});
 
 	$effect(() => {

package/dist/components/Button/Button.svelte

@@ -9,10 +9,11 @@
 		rounded-md
 		inline-flex items-center justify-center gap-x-2
 		px-3 py-2
+		select-none
 
 		hover:brightness-105
 		active:brightness-95
-		disabled:hover:brightness-100
+		disabled:hover:brightness-100 disabled:opacity-50
 
 		focus:brightness-105
 		focus:border-button-border-focus focus:dark:border-button-border-focus-dark

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

@@ -1,4 +1,4 @@
-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\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100\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-3 py-2\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_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -1,6 +1,36 @@
+<script lang="ts" module>
+	interface BodyStyles {
+		position: string | null;
+		top: string | null;
+		width: string | null;
+		overflow: string | null;
+	}
+
+	function get_body_style(): BodyStyles {
+		// const style = window.getComputedStyle(document.body);
+		const style = document.body.style; // we want only explicitly defined, not computed
+		return {
+			position: style.position || null,
+			top: style.top || null,
+			width: style.width || null,
+			overflow: style.overflow || null,
+		};
+	}
+
+	function restore_body_styles(original: BodyStyles) {
+		(["position", "top", "width", "overflow"] as (keyof BodyStyles)[]).forEach((k) => {
+			if (original[k] !== null) {
+				document.body.style[k] = original[k];
+			} else {
+				document.body.style.removeProperty(k);
+			}
+		});
+	}
+</script>
+
 <script lang="ts">
 	import { onClickOutside } from "runed";
-	import { onMount, tick, type Snippet } from "svelte";
+	import { onDestroy, onMount, tick, type Snippet } from "svelte";
 	import { focusTrap } from "../../actions/focus-trap.js";
 	import { stopPropagation } from "../../utils/event-modifiers.js";
 	import { twMerge } from "../../utils/tw-merge.js";
@@ -76,29 +106,34 @@
 		() => !noClickOutsideClose && close()
 	);
 
-	let _original: any = {};
+	// lock body scroll when open and restore back
+	let _original: BodyStyles = {
+		position: null,
+		top: null,
+		width: null,
+		overflow: null,
+	};
+
+	function _restore() {
+		const scrollY = document.body.style.top;
+		restore_body_styles(_original);
+		// Restore scroll position
+		window.scrollTo(0, parseInt(scrollY || "0") * -1);
+	}
+
 	$effect(() => {
-		// if (noScrollLock) return;
 		if (visible) {
-			_original = window.getComputedStyle(document.body);
+			_original = get_body_style();
 			const scrollY = window.scrollY;
-
 			document.body.style.position = "fixed";
 			document.body.style.top = `-${scrollY}px`;
 			document.body.style.width = "100%";
 			document.body.style.overflow = "hidden";
 		} else {
-			const scrollY = document.body.style.top;
-
-			document.body.style.position = _original.position;
-			document.body.style.position = "";
-			document.body.style.top = "";
-			document.body.style.width = "";
-			document.body.style.overflow = "";
-
-			// Restore scroll position
-			window.scrollTo(0, parseInt(scrollY || "0") * -1);
+			_restore();
 		}
+		// also onDestroy (will also reset if nested... which is not desired, but ignoring currently)
+		return _restore;
 	});
 
 	// $inspect("Modal dialog mounted, is visible:", visible).with(clog);

package/dist/index.css

@@ -6,7 +6,7 @@
 @source "./";
 
 /* "components" looks like a better fit here, but forms plugin uses "utilities"
-so, since we need to override, sticking with that*/
+so, since we need to override, sticking with that */
 @layer utilities {
 	@import "./actions/tooltip/index.css";
 	@import "./components/Button/index.css";
@@ -29,6 +29,6 @@ so, since we need to override, sticking with that*/
 	[role="button"]:disabled,
 	input:disabled {
 		cursor: not-allowed !important;
-		opacity: 0.5 !important;
+		/* opacity: 0.5 !important; moved to Button itself, so it can be overridden */
 	}
 }

package/dist/utils/colors.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Converts a CSS HEX color string to an Oklch color string.
+ */
+export declare function hexToOklch(hex: string): string;
+/**
+ * Converts a sRGB (0-255) to an Oklch color string.
+ */
+export declare function rgbToOklch(rgb: {
+    r: number;
+    g: number;
+    b: number;
+}): string;
+/**
+ * Converts a HEX string to an RGB object.
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Converts sRGB (0-255) to linear RGB (0.0-1.0).
+ */
+export declare function srgbToLinearRgb({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Converts linear RGB (0.0-1.0) to Oklab.
+ */
+export declare function linearRgbToOklab({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): {
+    l: number;
+    a: number;
+    b: number;
+};
+/**
+ * Converts Oklab to Oklch.
+ */
+export declare function oklabToOklch({ l, a, b }: {
+    l: number;
+    a: number;
+    b: number;
+}): {
+    l: number;
+    c: number;
+    h: number;
+};

package/dist/utils/colors.js

@@ -0,0 +1,92 @@
+/**
+ * Converts a CSS HEX color string to an Oklch color string.
+ */
+export function hexToOklch(hex) {
+    // 1. Parse HEX to RGB
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        throw new Error("Invalid HEX color format.");
+    }
+    // 2. Convert sRGB (0-255) to oklab
+    return rgbToOklch(rgb);
+}
+/**
+ * Converts a sRGB (0-255) to an Oklch color string.
+ */
+export function rgbToOklch(rgb) {
+    // 1. Convert sRGB (0-255) to Linear RGB (0.0-1.0)
+    const linearRgb = srgbToLinearRgb(rgb);
+    // 2. Convert Linear RGB to Oklab
+    const oklab = linearRgbToOklab(linearRgb);
+    // 3. Convert Oklab to Oklch
+    const oklch = oklabToOklch(oklab);
+    // 4. Format as CSS string
+    // L is 0-1, formatted as 0-100%
+    // C is 0-0.4 (approx), formatted as a number
+    // h is 0-360, formatted as a number (degrees)
+    const l = (oklch.l * 100).toFixed(1);
+    const c = oklch.c.toFixed(3);
+    // Handle hue: NaN becomes 0
+    const h = isNaN(oklch.h) ? "0" : oklch.h.toFixed(1);
+    return `oklch(${l}% ${c} ${h})`;
+}
+/**
+ * Converts a HEX string to an RGB object.
+ */
+export function hexToRgb(hex) {
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+        return r + r + g + g + b + b;
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Converts sRGB (0-255) to linear RGB (0.0-1.0).
+ */
+export function srgbToLinearRgb({ r, g, b }) {
+    const convert = (val) => {
+        let v = val / 255;
+        return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    return {
+        r: convert(r),
+        g: convert(g),
+        b: convert(b),
+    };
+}
+/**
+ * Converts linear RGB (0.0-1.0) to Oklab.
+ */
+export function linearRgbToOklab({ r, g, b }) {
+    // Based on the conversion matrices from the Oklab color space specification
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return {
+        l: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    };
+}
+/**
+ * Converts Oklab to Oklch.
+ */
+export function oklabToOklch({ l, a, b }) {
+    const c = Math.sqrt(a * a + b * b);
+    let h = Math.atan2(b, a) * (180 / Math.PI);
+    // Normalize hue to be between 0 and 360
+    if (h < 0) {
+        h += 360;
+    }
+    return { l, c, h };
+}

package/dist/utils/index.d.ts

@@ -1,12 +1,11 @@
 export * from "./breakpoint.svelte.js";
+export * from "./colors.js";
 export * from "./debounce.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
-export * from "./hex-to-oklch.js";
-export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/dist/utils/index.js

@@ -1,12 +1,11 @@
 export * from "./breakpoint.svelte.js";
+export * from "./colors.js";
 export * from "./debounce.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
-export * from "./hex-to-oklch.js";
-export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.6",
+	"version": "2.1.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/utils/hex-to-oklch.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/hex-to-oklch.js

@@ -1,53 +0,0 @@
-"use strict";
-/**
- * Converts a hex color string to OKLCH
- * @param {string} hex - The hex color string (with or without leading #)
- * @returns {Object} An object with l (lightness), c (chroma), and h (hue) properties
- */
-function hexToOklch(hex) {
-    // Remove the hash if it exists
-    hex = hex.replace(/^#/, "");
-    // Handle both 3-digit and 6-digit formats
-    if (hex.length === 3) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    // Parse the hex values to RGB (0-1)
-    const r = parseInt(hex.substring(0, 2), 16) / 255;
-    const g = parseInt(hex.substring(2, 4), 16) / 255;
-    const b = parseInt(hex.substring(4, 6), 16) / 255;
-    // Convert RGB to linear RGB (removing gamma correction)
-    const linearR = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-    const linearG = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
-    const linearB = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
-    // Convert to XYZ
-    const x = 0.4124 * linearR + 0.3576 * linearG + 0.1805 * linearB;
-    const y = 0.2126 * linearR + 0.7152 * linearG + 0.0722 * linearB;
-    const z = 0.0193 * linearR + 0.1192 * linearG + 0.9505 * linearB;
-    // Convert XYZ to LMS (cone response)
-    const l = 0.819 * x + 0.3619 * y - 0.1289 * z;
-    const m = 0.0329 * x + 0.9293 * y + 0.0361 * z;
-    const s = 0.0482 * x + 0.2645 * y + 0.6886 * z;
-    // Apply non-linearity to LMS
-    const lp = Math.cbrt(l);
-    const mp = Math.cbrt(m);
-    const sp = Math.cbrt(s);
-    // Convert to Oklab
-    const L = 0.2104 * lp + 0.7936 * mp - 0.004 * sp;
-    const a = 1.9779 * lp - 2.4285 * mp + 0.4505 * sp;
-    const bb = 0.0259 * lp + 0.7827 * mp - 0.8086 * sp;
-    // Convert Oklab to Oklch
-    const C = Math.sqrt(a * a + bb * bb);
-    let h = (Math.atan2(bb, a) * 180) / Math.PI;
-    // Ensure hue is positive
-    if (h < 0) {
-        h += 360;
-    }
-    return {
-        l: parseFloat(L.toFixed(4)),
-        c: parseFloat(C.toFixed(4)),
-        h: parseFloat(h.toFixed(2)),
-    };
-}
-// Example usage:
-// const oklch = hexToOklch("#ff5733");
-// console.log(oklch); // Example output: { l: 0.6321, c: 0.1549, h: 27.23 }

package/dist/utils/hex-to-rgb.d.ts

@@ -1,6 +0,0 @@
-/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
-export declare function hexToRgb(hex: string): {
-    r: number;
-    g: number;
-    b: number;
-};

package/dist/utils/hex-to-rgb.js

@@ -1,12 +0,0 @@
-/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
-export function hexToRgb(hex) {
-    hex = hex.replace(/^#/, "");
-    // both 3-digit and 6-digit formats
-    if (hex.length === 3) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 4), 16);
-    const b = parseInt(hex.substring(4, 6), 16);
-    return { r, g, b };
-}