@marianmeres/stuic 2.1.26 → 2.1.28

package/dist/components/Button/Button.svelte

@@ -8,7 +8,7 @@
 		border-button-border dark:border-button-border-dark
 		rounded-md
 		inline-flex items-center justify-center gap-x-2
-		px-3 py-2
+		px-3 py-2.5
 		select-none
 
 		hover:brightness-105
@@ -24,7 +24,7 @@
 
 	export const BUTTON_STUIC_PRESET_CLASSES: any = {
 		size: {
-			sm: `text-xs rounded-sm px-2 py-0.5`,
+			sm: `text-sm rounded-sm px-2 py-1`,
 			lg: `text-base rounded-md`,
 		},
 		variant: {

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\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-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_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/utils/body-scroll-locker.js

@@ -1,10 +1,14 @@
 import { createClog } from "@marianmeres/clog";
+import { isBrowser } from "./is-browser.js";
 const clog = createClog("BodyScroll").debug;
+const document = globalThis.document ?? {};
 /**
  * Helper for "locking" and "unlocking" body scroll (window.scrollY) position
  */
 export class BodyScroll {
     static lock() {
+        if (!isBrowser())
+            return;
         const data = document.body.dataset;
         // Only save the scroll position if it hasn't been saved already
         if (data.originalScrollY === undefined) {
@@ -27,6 +31,8 @@ export class BodyScroll {
         }
     }
     static unlock() {
+        if (!isBrowser())
+            return;
         const data = document.body.dataset;
         // Only proceed if scroll is currently locked
         if (data.scrollLockCount !== undefined) {

package/dist/utils/index.d.ts

@@ -13,6 +13,7 @@ export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
+export * from "./observe-exists.svelte.js";
 export * from "./omit-pick.js";
 export * from "./oscillate.js";
 export * from "./paint.js";

package/dist/utils/index.js

@@ -13,6 +13,7 @@ export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
+export * from "./observe-exists.svelte.js";
 export * from "./omit-pick.js";
 export * from "./oscillate.js";
 export * from "./paint.js";

package/dist/utils/observe-exists.svelte.d.ts

@@ -0,0 +1,8 @@
+/** Will observe DOM changes and triggers callback when element presence changes */
+export declare function observeExists(selector: string, options?: Partial<{
+    rootElement: HTMLElement;
+}>): {
+    readonly current: boolean;
+    disconnect(): void;
+    forceCheck(): void;
+};

package/dist/utils/observe-exists.svelte.js

@@ -0,0 +1,40 @@
+/** Will observe DOM changes and triggers callback when element presence changes */
+export function observeExists(selector, options = {}) {
+    if (!selector)
+        throw new TypeError("Expecting non empty selector");
+    const { rootElement = document.body } = options;
+    const ns = `[observeExists] [${selector}]`;
+    const clog = (...args) => console.debug(ns, ...args);
+    const check = () => rootElement.querySelector(selector) !== null;
+    let current = $state(check());
+    //
+    const observer = new MutationObserver((mutations) => {
+        let shouldCheck = false;
+        for (const mutation of mutations) {
+            if (mutation.type === "childList") {
+                // was something added or removed?
+                if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+                    shouldCheck = true;
+                    break;
+                }
+            }
+        }
+        if (shouldCheck)
+            current = check();
+    });
+    // start observing now
+    clog(`connecting...`);
+    observer.observe(rootElement, { childList: true, subtree: true });
+    return {
+        get current() {
+            return current;
+        },
+        disconnect() {
+            clog(`disconnecting...`);
+            observer.disconnect();
+        },
+        forceCheck() {
+            check();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.26",
+	"version": "2.1.28",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -41,22 +41,22 @@
 		"@marianmeres/icons-fns": "^4.4.0",
 		"@marianmeres/random-human-readable": "^1.6.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.43.5",
+		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",
-		"@tailwindcss/cli": "^4.1.13",
+		"@tailwindcss/cli": "^4.1.16",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/typography": "^0.5.19",
-		"@tailwindcss/vite": "^4.1.13",
+		"@tailwindcss/vite": "^4.1.16",
 		"dotenv": "^16.6.1",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.13",
-		"svelte": "^5.39.6",
-		"svelte-check": "^4.3.2",
-		"tailwindcss": "^4.1.13",
-		"typescript": "^5.9.2",
-		"vite": "^6.3.6",
+		"publint": "^0.3.15",
+		"svelte": "^5.43.2",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.16",
+		"typescript": "^5.9.3",
+		"vite": "^6.4.1",
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {