@marianmeres/stuic 1.120.0 → 1.121.0

package/dist/actions/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { createStore } from '@marianmeres/store';
 import { derived, get as storeGet, writable, } from 'svelte/store';
-import { twMerge } from 'tailwind-merge';
+import { twMerge2 } from '../../utils/tw-merge2.js';
 import { windowSize } from '../../utils/window-size.js';
 import { _makeInVisible, _makeVisible } from './_make-visible.js';
 import { _setPosition } from './_set-position.js';
@@ -74,7 +74,7 @@ const _ensureDiv = (div, opts, log) => {
         classes = [TooltipConfig.presetBase, TooltipConfig.class, opts.class].join(' ');
     }
     // make sure these are never overwritten (must come last)
-    classes = twMerge(classes, 'fixed block transition-opacity')
+    classes = twMerge2(classes, 'fixed block transition-opacity')
         .split(/\s/)
         .filter(Boolean);
     div.classList.add(...classes);
@@ -101,7 +101,7 @@ const _ensureArrow = (arrow, opts, log) => {
         classes = [TooltipConfig.arrowPresetBase, TooltipConfig.arrowClass, opts.arrowClass].join(' ');
     }
     // make sure these are never overwritten (must come last)
-    classes = twMerge(classes, 'fixed block size-0 transition-opacity')
+    classes = twMerge2(classes, 'fixed block size-0 transition-opacity')
         .split(/\s/)
         .filter(Boolean);
     arrow.classList.add(...classes);

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -1,7 +1,7 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
 import { onMount } from "svelte";
-import { twMerge } from "tailwind-merge";
 import { focusTrap } from "../../actions/focus-trap.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Button from "../Button/Button.svelte";
 import Field from "../Input/Field.svelte";
 import FieldSelect from "../Input/FieldSelect.svelte";
@@ -24,14 +24,14 @@ export class AlertConfirmPromptConfig {
 				transition-all
 				shadow-xl
 				focus-within:outline-0 focus-within:ring-0
-					 bg-white
-				dark:bg-black 
+					 bg-neutral-50
+				dark:bg-neutral-950 
 
-				     text-black
-				dark:text-white
+				     text-neutral-950
+				dark:text-neutral-50
 
-				border border-white
-				dark:border-white/20
+				border border-neutral-50
+				dark:border-neutral-50/20
 			`,
     icon: `
 				size-12 sm:size-10
@@ -40,8 +40,8 @@ export class AlertConfirmPromptConfig {
 				flex flex-shrink-0 items-center justify-center 
 				rounded-full 
 
-				     bg-black/10      text-black/80
-				dark:bg-white/20 dark:text-white/80
+				     bg-neutral-950/10      text-neutral-950/80
+				dark:bg-neutral-50/20 dark:text-neutral-50/80
 			`,
     contentBlock: `mt-3 sm:mt-0 sm:flex-1`,
     title: `
@@ -67,8 +67,8 @@ export class AlertConfirmPromptConfig {
 				absolute inset-0 flex justify-center items-center
 				rounded-lg
 
-				     bg-white/75 
-				dark:bg-black/75
+				     bg-neutral-50/75 
+				dark:bg-neutral-950/75
 			`
   };
   // prettier-ignore
@@ -136,27 +136,27 @@ const _collectClasses = (o, k) => [
   o?.class?.[k] || ""
 ];
 $:
-  _dialogClass = twMerge(..._collectClasses(dialog, "dialog"));
+  _dialogClass = twMerge2(..._collectClasses(dialog, "dialog"));
 $:
-  _iconClass = twMerge(..._collectClasses(dialog, "icon"));
+  _iconClass = twMerge2(..._collectClasses(dialog, "icon"));
 $:
-  _contentBlockClass = twMerge(..._collectClasses(dialog, "contentBlock"));
+  _contentBlockClass = twMerge2(..._collectClasses(dialog, "contentBlock"));
 $:
-  _titleClass = twMerge(..._collectClasses(dialog, "title"));
+  _titleClass = twMerge2(..._collectClasses(dialog, "title"));
 $:
-  _contentClass = twMerge(..._collectClasses(dialog, "content"));
+  _contentClass = twMerge2(..._collectClasses(dialog, "content"));
 $:
-  _inputBoxClass = twMerge(..._collectClasses(dialog, "inputBox"));
+  _inputBoxClass = twMerge2(..._collectClasses(dialog, "inputBox"));
 $:
-  _inputFieldClass = twMerge(..._collectClasses(dialog, "inputField"));
+  _inputFieldClass = twMerge2(..._collectClasses(dialog, "inputField"));
 $:
-  _menuClass = twMerge(..._collectClasses(dialog, "menu"));
+  _menuClass = twMerge2(..._collectClasses(dialog, "menu"));
 $:
-  _menuLiClass = twMerge(AlertConfirmPromptConfig.preset.menuLi);
+  _menuLiClass = twMerge2(AlertConfirmPromptConfig.preset.menuLi);
 $:
-  _buttonClass = twMerge(..._collectClasses(dialog, "button"));
+  _buttonClass = twMerge2(..._collectClasses(dialog, "button"));
 $:
-  _spinnerBoxClass = twMerge(..._collectClasses(dialog, "spinnerBox"));
+  _spinnerBoxClass = twMerge2(..._collectClasses(dialog, "spinnerBox"));
 $:
   iconFn = dialog?.iconFn ?? defaultIcons?.[dialog?.variant];
 </script>

package/dist/components/AppShell/AppShell.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script>import { createEventDispatcher } from "svelte";
-import { twMerge } from "tailwind-merge";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 const dispatch = createEventDispatcher();
 let _class = "";
 export { _class as class };
@@ -78,14 +78,14 @@ $:
 	bind:this={shell}
 	{id}
 	data-shell="shell"
-	class={twMerge(`w-full h-full flex overflow-hidden ${_class}`)}
+	class={twMerge2(`w-full h-full flex overflow-hidden ${_class}`)}
 >
 	<!-- shell > rail -->
 	{#if $$slots.rail}
 		<div
 			bind:this={rail}
 			data-shell="rail"
-			class={twMerge(`flex-none overflow-x-hidden overflow-y-auto ${railClass}`)}
+			class={twMerge2(`flex-none overflow-x-hidden overflow-y-auto ${railClass}`)}
 		>
 			<slot name="rail" />
 		</div>
@@ -98,7 +98,7 @@ $:
 			<header
 				bind:this={header}
 				data-shell="header"
-				class={twMerge(`flex-none ${headerClass}`)}
+				class={twMerge2(`flex-none ${headerClass}`)}
 			>
 				<slot name="header" />
 			</header>
@@ -107,14 +107,14 @@ $:
 		<!-- shell > div > content -->
 		<div
 			data-shell="content"
-			class={twMerge(`flex-auto w-full h-full flex overflow-hidden ${contentClass}`)}
+			class={twMerge2(`flex-auto w-full h-full flex overflow-hidden ${contentClass}`)}
 		>
 			<!-- shell > div > content > sidebar-left -->
 			{#if $$slots.sidebarLeft}
 				<aside
 					bind:this={sidebarLeft}
 					data-shell="sidebar-left"
-					class={twMerge(
+					class={twMerge2(
 						`${_sidebarFlexCls} overflow-x-hidden overflow-y-auto w-auto ${sidebarLeftClass}`
 					)}
 				>
@@ -126,7 +126,7 @@ $:
 			<div
 				bind:this={page}
 				data-shell="page"
-				class={twMerge(`${_pageFlexCls} overflow-x-hidden flex flex-col ${pageClass}`)}
+				class={twMerge2(`${_pageFlexCls} overflow-x-hidden flex flex-col ${pageClass}`)}
 				style:scrollbar-gutter={scrollbarGutter}
 				on:scroll
 			>
@@ -135,7 +135,7 @@ $:
 					<header
 						bind:this={pageHeader}
 						data-shell="page-header"
-						class={twMerge(`flex-none ${pageHeaderClass}`)}
+						class={twMerge2(`flex-none ${pageHeaderClass}`)}
 					>
 						<slot name="pageHeader" />
 					</header>
@@ -145,7 +145,7 @@ $:
 				<main
 					bind:this={pageMain}
 					data-shell="page-main"
-					class={twMerge(`flex-auto ${pageMainClass}`)}
+					class={twMerge2(`flex-auto ${pageMainClass}`)}
 				>
 					<slot />
 				</main>
@@ -155,7 +155,7 @@ $:
 					<footer
 						bind:this={pageFooter}
 						data-shell="page-footer"
-						class={twMerge(`flex-none ${pageFooterClass}`)}
+						class={twMerge2(`flex-none ${pageFooterClass}`)}
 					>
 						<slot name="pageFooter" />
 					</footer>
@@ -167,7 +167,7 @@ $:
 				<aside
 					bind:this={sidebarRight}
 					data-shell="sidebar-right"
-					class={twMerge(
+					class={twMerge2(
 						`${_sidebarFlexCls} overflow-x-hidden overflow-y-auto ${sidebarRightClass}`
 					)}
 				>
@@ -181,7 +181,7 @@ $:
 			<footer
 				bind:this={footer}
 				data-shell="footer"
-				class={twMerge(`flex-none ${footerClass}`)}
+				class={twMerge2(`flex-none ${footerClass}`)}
 			>
 				<slot name="footer" />
 			</footer>

package/dist/components/Backdrop/Backdrop.svelte

@@ -7,9 +7,9 @@
 
 <script>import { createEventDispatcher } from "svelte";
 import { fade } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { focusTrap } from "../../actions/focus-trap.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 const dispatch = createEventDispatcher();
 export let useFocusTrap = true;
 export let focusTrapOptions = {};
@@ -33,7 +33,7 @@ $:
 <!-- prettier-ignore -->
 <div
 	bind:this={el}
-	class={twMerge(`
+	class={twMerge2(`
 		fixed inset-0 flex z-10 
 		${BackdropConfig.class} ${_class}
 	`.trim())}

package/dist/components/Button/Button.svelte

@@ -1,4 +1,4 @@
-<script context="module">import { twMerge } from "tailwind-merge";
+<script context="module">import { twMerge2 } from "../../utils/tw-merge2.js";
 export class ButtonConfig {
   static defaultSize = "md";
   static defaultShadow = false;
@@ -11,11 +11,10 @@ export class ButtonConfig {
 			active:brightness-[0.95]
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 			no-underline
-			border
+			border border-neutral-300  dark:border-neutral-500
 			
-			bg-neutral-200 text-black
-			dark:bg-neutral-600 dark:text-white
-			border-neutral-400 dark:border-neutral-500
+			     bg-neutral-200      text-neutral-950
+			dark:bg-neutral-600 dark:text-neutral-50
 		`.trim();
   static presetSquare = "p-0 aspect-square justify-center";
   static presetsRounded = {
@@ -26,11 +25,11 @@ export class ButtonConfig {
     xl: "rounded-lg"
   };
   static presetsShadow = {
-    xs: "shadow-sm dark:shadow-black",
-    sm: "shadow    dark:shadow-black",
-    md: "shadow    dark:shadow-black",
-    lg: "shadow-md dark:shadow-black",
-    xl: "shadow-md dark:shadow-black"
+    xs: "shadow-sm dark:shadow-neutral-950",
+    sm: "shadow    dark:shadow-neutral-950",
+    md: "shadow    dark:shadow-neutral-950",
+    lg: "shadow-md dark:shadow-neutral-950",
+    xl: "shadow-md dark:shadow-neutral-950"
   };
   static presetsSize = {
     xs: "px-2   py-0.5 leading-tight text-xs",
@@ -50,8 +49,8 @@ export class ButtonConfig {
   // to be defined at consumer level...
   static variant = {
     primary: `
-				     bg-stuic-primary           text-stuic-on-primary
-				dark:bg-stuic-primary-dark dark:text-stuic-on-primary-dark
+				     bg-stuic-primary             text-stuic-on-primary
+				dark:bg-stuic-primary-dark   dark:text-stuic-on-primary-dark
 			`.trim(),
     secondary: `
 				     bg-stuic-secondary           text-stuic-on-secondary
@@ -78,7 +77,7 @@ $:
     size = ButtonConfig.defaultSize;
 let buttonClass;
 $:
-  buttonClass = twMerge(
+  buttonClass = twMerge2(
     ButtonConfig.presetBase,
     // either full, or config, or none
     rounded ? rounded === "full" || square ? "rounded-full" : ButtonConfig.presetsRounded[size] : "",
@@ -100,6 +99,8 @@ $:
     //
     _class
   );
+$:
+  console.log(123, buttonClass.replace(/\s+/gi, " "));
 </script>
 
 {#if href}

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -1,5 +1,5 @@
 <script context="module">import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
 import X from "../X/X.svelte";
 const themes = {
@@ -32,8 +32,8 @@ const _PRESET = {
   box: `mb-4 rounded flex text-sm`,
   content: `flex-1 px-4 py-3`,
   dismiss: `
-			hover:bg-black/5 dark:hover:bg-black/20
-			focus-visible:bg-black/5 focus-visible:hover:bg-black/20 focus-visible:ring-0
+			hover:bg-neutral-950/5 dark:hover:bg-neutral-950/20
+			focus-visible:bg-neutral-950/5 focus-visible:hover:bg-neutral-950/20 focus-visible:ring-0
 			rounded rounded-l-none
 			px-3
 			flex items-center justify-center
@@ -79,16 +79,16 @@ const _collectClasses = (k, extra = "") => [
 <!-- {#if isNotEmpty(message)} -->
 {#if show}
 	<div
-		class={twMerge(_collectClasses('box', themes[theme] ?? themes.primary))}
+		class={twMerge2(_collectClasses('box', themes[theme] ?? themes.primary))}
 		transition:slide={{ duration }}
 	>
-		<div class={twMerge(_collectClasses('content'))}>
+		<div class={twMerge2(_collectClasses('content'))}>
 			<Thc thc={message} {forceAsHtml} />
 		</div>
 
 		{#if typeof onDismiss === 'function'}
-			<button class={twMerge(_collectClasses('dismiss'))} on:click={() => onDismiss()}>
-				<X class={twMerge(_collectClasses('x'))} strokeWidth={1.5} />
+			<button class={twMerge2(_collectClasses('dismiss'))} on:click={() => onDismiss()}>
+				<X class={twMerge2(_collectClasses('x'))} strokeWidth={1.5} />
 			</button>
 		{/if}
 	</div>

package/dist/components/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 import { createSwitchStore } from "@marianmeres/switch-store";
 import { createEventDispatcher } from "svelte";
 import { fly } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { onOutside } from "../../actions/on-outside.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Backdrop from "../Backdrop/Backdrop.svelte";
 export const createDrawerStore = (open = false) => createSwitchStore(open);
 </script>
@@ -55,7 +55,7 @@ $:
 
 {#if $drawer.isOpen}
 	<Backdrop
-		class={twMerge(`${_presetsClsBackdrop[position] || ''} ${backdropClass}`)}
+		class={twMerge2(`${_presetsClsBackdrop[position] || ''} ${backdropClass}`)}
 		on:escape
 		on:mousedown={(e) => dispatch('click_backdrop')}
 		{fadeInDuration}
@@ -79,7 +79,7 @@ $:
 				duration: transitionEnabled ? transitionDuration : 0,
 				...(_presetsAnim[position] || {}),
 			}}
-			class={twMerge(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`)}
+			class={twMerge2(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`)}
 			use:onOutside
 		>
 			<slot />

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -1,9 +1,9 @@
 <script>import { createClog } from "@marianmeres/clog";
 import { createEventDispatcher } from "svelte";
 import { get } from "svelte/store";
-import { twMerge } from "tailwind-merge";
 import { DevicePointer } from "../../utils/device-pointer.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import { windowSize } from "../../utils/window-size.js";
 const clog = createClog("HoverExpandableWidth");
 const dispatch = createEventDispatcher();
@@ -105,7 +105,7 @@ $:
 	on:mouseleave={() => _planDelayedExec(_shrink, delayOut)}
 	on:click
 	aria-expanded={_isExpanded}
-	class={twMerge(`overflow-x-hidden overflow-y-auto ${_class}`)}
+	class={twMerge2(`overflow-x-hidden overflow-y-auto ${_class}`)}
 	style="width: 100%; height: 100%; transition-duration: {duration}ms;"
 >
 	<slot

package/dist/components/Input/Field.svelte

@@ -1,7 +1,6 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
 import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { autogrow } from "../../actions/autogrow.js";
 import { trim } from "../../actions/trim.js";
 import { validate as validateAction } from "../../actions/validate.js";
@@ -37,8 +36,8 @@ const _PRESET = {
 			tracking-tight
 			focus:outline-0 focus-visible:ring-0
 			placeholder:tracking-tight
-			placeholder:text-black/35 dark:placeholder:text-white/35
-			text-black dark:text-white
+			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
+			text-neutral-950 dark:text-neutral-50
 		`,
   invalid: `border-stuic-primary`,
   validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
@@ -76,7 +75,8 @@ export class FieldConfig {
 }
 </script>
 
-<script>import PinInput from "./PinInput.svelte";
+<script>import { twMerge2 } from "../../utils/tw-merge2.js";
+import PinInput from "./PinInput.svelte";
 const clog = createClog("Field");
 const dispatch = createEventDispatcher();
 const setType = (el, t) => el.type = t;
@@ -125,33 +125,33 @@ const _collectClasses = (k, extra = "") => [
   classBySize?.[size]?.[k] || ""
 ];
 $:
-  _boxClass = twMerge(_collectClasses("box"));
+  _boxClass = twMerge2(_collectClasses("box"));
 $:
-  _labelClass = twMerge(
+  _labelClass = twMerge2(
     _collectClasses(
       "label",
       showAsterixOnRequired && required ? _collectClasses("asterix").join(" ") : ""
     )
   );
 $:
-  _wrapClass = twMerge(
+  _wrapClass = twMerge2(
     _collectClasses(
       "wrap",
       validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
     )
   );
 $:
-  _inputClass = twMerge(
+  _inputClass = twMerge2(
     "form-input",
     type === "textarea" ? "min-h-16" : "",
     _collectClasses("input")
   );
 $:
-  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
 $:
-  _descriptionClass = twMerge(_collectClasses("description"));
+  _descriptionClass = twMerge2(_collectClasses("description"));
 $:
-  _belowClass = twMerge(_collectClasses("below"));
+  _belowClass = twMerge2(_collectClasses("below"));
 </script>
 
 <div

package/dist/components/Input/FieldCheckbox.svelte

@@ -1,7 +1,7 @@
 <script context="module">import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { validate as validateAction } from "../../actions/validate.js";
 import { getId } from "../../utils/get-id.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc from "../Thc/Thc.svelte";
 const _emptyClasses = () => ({
   box: "",
@@ -73,20 +73,20 @@ const _collectClasses = (k, extra = "") => [
   classBySize?.[size]?.[k] || ""
 ];
 $:
-  _boxClass = twMerge(_collectClasses("box"));
+  _boxClass = twMerge2(_collectClasses("box"));
 $:
-  _inputClass = twMerge(
+  _inputClass = twMerge2(
     _collectClasses(
       "input",
       validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
     )
   );
 $:
-  _labelClass = twMerge(_collectClasses("label"));
+  _labelClass = twMerge2(_collectClasses("label"));
 $:
-  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
 $:
-  _descriptionClass = twMerge(_collectClasses("description"));
+  _descriptionClass = twMerge2(_collectClasses("description"));
 </script>
 
 <div class={_boxClass}>

package/dist/components/Input/FieldRadios.svelte

@@ -1,6 +1,6 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
-import { twMerge } from "tailwind-merge";
 import { getId } from "../../utils/get-id.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
 const _emptyClasses = () => ({
   group: "",
@@ -49,7 +49,7 @@ $:
 </script>
 
 {#if options.length}
-	<div class={twMerge(`gap-y-2 grid ${_class.group || ''}`)}>
+	<div class={twMerge2(`gap-y-2 grid ${_class.group || ''}`)}>
 		{#each _options as o, i}
 			<XFieldRadioInternal
 				bind:group={value}

package/dist/components/Input/FieldSelect.svelte

@@ -1,9 +1,9 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
 import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { validate as validateAction } from "../../actions/validate.js";
 import { getId } from "../../utils/get-id.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc from "../Thc/Thc.svelte";
 const _emptyClasses = () => ({
   box: "",
@@ -33,7 +33,7 @@ const _PRESET = {
 			bg-neutral-100 dark:bg-neutral-700
 			tracking-tight
 			focus:outline-0 focus-visible:ring-0
-			placeholder:text-black/35 dark:placeholder:text-white/35
+			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
 			placeholder:tracking-tight
 		`,
   invalid: `border-stuic-primary`,
@@ -126,29 +126,29 @@ const _collectClasses = (k, extra = "") => [
   classBySize?.[size]?.[k] || ""
 ];
 $:
-  _boxClass = twMerge(_collectClasses("box"));
+  _boxClass = twMerge2(_collectClasses("box"));
 $:
-  _labelClass = twMerge(
+  _labelClass = twMerge2(
     _collectClasses(
       "label",
       showAsterixOnRequired && required ? _collectClasses("asterix").join(" ") : ""
     )
   );
 $:
-  _wrapClass = twMerge(
+  _wrapClass = twMerge2(
     _collectClasses(
       "wrap",
       validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
     )
   );
 $:
-  _inputClass = twMerge("form-input", _collectClasses("input"));
+  _inputClass = twMerge2("form-input", _collectClasses("input"));
 $:
-  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
 $:
-  _descriptionClass = twMerge(_collectClasses("description"));
+  _descriptionClass = twMerge2(_collectClasses("description"));
 $:
-  _belowClass = twMerge(_collectClasses("below"));
+  _belowClass = twMerge2(_collectClasses("below"));
 </script>
 
 <div

package/dist/components/Input/Fieldset.svelte

@@ -1,4 +1,4 @@
-<script context="module">import { twMerge } from "tailwind-merge";
+<script context="module">import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc from "../Thc/Thc.svelte";
 const _PRESET = {
   box: `border border-neutral-200 p-4 pt-3 rounded-md`,
@@ -19,9 +19,9 @@ const _collectClasses = (k, extra = "") => [
 ];
 </script>
 
-<fieldset class={twMerge(_collectClasses('box'))}>
+<fieldset class={twMerge2(_collectClasses('box'))}>
 	{#if legend}
-		<legend class={twMerge(_collectClasses('legend'))}>
+		<legend class={twMerge2(_collectClasses('legend'))}>
 			<Thc thc={legend} forceAsHtml />
 		</legend>
 	{/if}

package/dist/components/Input/PinInput.svelte

@@ -1,12 +1,12 @@
 <script>import { createClog } from "@marianmeres/clog";
 import { iconBsEye } from "@marianmeres/icons-fns/bootstrap/iconBsEye.js";
 import { iconBsEyeSlash } from "@marianmeres/icons-fns/bootstrap/iconBsEyeSlash.js";
+import { iconBsX } from "@marianmeres/icons-fns/bootstrap/iconBsX.js";
 import { createEventDispatcher } from "svelte";
-import { twMerge } from "tailwind-merge";
 import { trim } from "../../actions/trim.js";
 import { validate as validateAction } from "../../actions/validate.js";
 import { getId } from "../../utils/get-id.js";
-import { iconBsX } from "@marianmeres/icons-fns/bootstrap/iconBsX.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 const dispatch = createEventDispatcher();
 const clog = createClog("PinInput");
 export let tabindex = 0;
@@ -66,8 +66,8 @@ const gridCols = [
 	<div class="absolute inset-0 grid {gridCols[length - 2]} pointer-events-none p-1 gap-1">
 		{#each _cells as c, idx (idx)}
 			<div
-				class={twMerge(
-					'flex items-center justify-center rounded bg-black/10 font-mono',
+				class={twMerge2(
+					'flex items-center justify-center rounded bg-neutral-950/10 font-mono',
 					pinCellClass
 				)}
 			>
@@ -86,8 +86,8 @@ const gridCols = [
 			{id}
 			type="text"
 			spellcheck="false"
-			class={twMerge(
-				'caret-black',
+			class={twMerge2(
+				'caret-neutral-950',
 				inputClass,
 				`font-mono text-transparent dark:text-transparent`
 			)}

package/dist/components/Input/XFieldRadioInternal.svelte

@@ -1,8 +1,8 @@
 <script context="module">import { createEventDispatcher } from "svelte";
 import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
 import { validate as validateAction } from "../../actions/validate.js";
 import { getId } from "../../utils/get-id.js";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc from "../Thc/Thc.svelte";
 import {
   FieldRadiosConfig
@@ -65,20 +65,20 @@ const _collectClasses = (k, extra = "") => [
   classBySize?.[size]?.[k] || ""
 ];
 $:
-  _boxClass = twMerge(_collectClasses("box"));
+  _boxClass = twMerge2(_collectClasses("box"));
 $:
-  _inputClass = twMerge(
+  _inputClass = twMerge2(
     _collectClasses(
       "input",
       validation && !validation.valid ? _collectClasses("invalid").join(" ") : ""
     )
   );
 $:
-  _labelClass = twMerge(_collectClasses("label"));
+  _labelClass = twMerge2(_collectClasses("label"));
 $:
-  _validationMessageClass = twMerge(_collectClasses("validationMessage"));
+  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
 $:
-  _descriptionClass = twMerge(_collectClasses("description"));
+  _descriptionClass = twMerge2(_collectClasses("description"));
 </script>
 
 <div class={_boxClass}>

package/dist/components/Notifications/Notifications.svelte

@@ -1,6 +1,6 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
 import { fade } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 import Thc from "../Thc/Thc.svelte";
 import X from "../X/X.svelte";
 import { notificationsDefaultIcons } from "./notifications-icons.js";
@@ -31,7 +31,7 @@ export class NotificationsConfig {
                     w-full max-w-sm
                     rounded-md
                     shadow-lg
-                    bg-neutral-700 text-white
+                    bg-neutral-700 text-neutral-50
                 `,
       count: `
                     absolute -top-2 -right-2 
@@ -39,7 +39,7 @@ export class NotificationsConfig {
                     flex items-center justify-center
                     px-2 py-1 rounded-full
                     leading-none text-xs
-                    bg-black text-white
+                    bg-neutral-950 text-neutral-50
                 `,
       icon: `
                     flex items-start justify-center
@@ -56,8 +56,8 @@ export class NotificationsConfig {
                     flex flex-col items-center justify-center
                     leading-none
                     px-3
-                    hover:bg-black/20
-                    focus-visible:bg-black/20 focus-visible:outline-none focus-visible:ring-0
+                    hover:bg-neutral-950/20
+                    focus-visible:bg-neutral-950/20 focus-visible:outline-none focus-visible:ring-0
                     group
                     rounded-tr-md rounded-br-md
                 `,
@@ -105,7 +105,7 @@ $:
 $:
   yMobile = Y_POSITIONS.includes(posYMobile) ? posYMobile : DEFAULT.posYMobile;
 $:
-  _wrapClass = twMerge(
+  _wrapClass = twMerge2(
     NotificationsConfig.preset.wrap,
     `flex flex-row inset-0 
         pointer-events-none bg-transparent`,
@@ -113,7 +113,7 @@ $:
     YMAP[y]
   );
 $:
-  _wrapInnerClass = twMerge(
+  _wrapInnerClass = twMerge2(
     NotificationsConfig.preset.wrapInner,
     `flex flex-col w-full 
         pointer-events-none bg-transparent`,
@@ -127,12 +127,12 @@ const _collectClasses = (n, k) => [
   classesByType?.[n.type]?.[k] || "",
   n.class?.[k] || ""
 ];
-const _boxClass = (n) => twMerge(..._collectClasses(n, "box"));
-const _countClass = (n) => twMerge(..._collectClasses(n, "count"));
-const _iconClass = (n) => twMerge(..._collectClasses(n, "icon"));
-const _contentClass = (n) => twMerge(..._collectClasses(n, "content"));
-const _buttonClass = (n) => twMerge(..._collectClasses(n, "button"));
-const _xClass = (n) => twMerge(..._collectClasses(n, "x"));
+const _boxClass = (n) => twMerge2(..._collectClasses(n, "box"));
+const _countClass = (n) => twMerge2(..._collectClasses(n, "count"));
+const _iconClass = (n) => twMerge2(..._collectClasses(n, "icon"));
+const _contentClass = (n) => twMerge2(..._collectClasses(n, "content"));
+const _buttonClass = (n) => twMerge2(..._collectClasses(n, "button"));
+const _xClass = (n) => twMerge2(..._collectClasses(n, "x"));
 const _iconFn = (o) => o.iconFn ?? defaultIcons?.[o.type];
 const _isFn = (v) => typeof v === "function";
 </script>

package/dist/components/Switch/Switch.svelte

@@ -1,5 +1,4 @@
-<script context="module">import { twMerge } from "tailwind-merge";
-export class SwitchConfig {
+<script context="module">export class SwitchConfig {
   static defaultSize = "md";
   static defaultVariant = void 0;
   static presetBase = `
@@ -12,7 +11,7 @@ export class SwitchConfig {
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 
 			bg-neutral-400 dark:bg-neutral-400
-			data-[checked=true]:bg-stuic-primary dark:data-[checked=true]:bg-stuic-primary
+			data-[checked=true]:bg-stuic-primary dark:data-[checked=true]:bg-stuic-primary-dark
 		`.trim();
   static presetsSize = {
     xs: "h-4 w-7",
@@ -30,8 +29,8 @@ export class SwitchConfig {
 			translate-x-1 rounded-full  
 			transition-all duration-100
 			shadow
-			bg-white dark:bg-white
-			text-black dark:text-black
+			bg-neutral-50 dark:bg-neutral-50
+			text-neutral-950 dark:text-neutral-950
 		`.trim();
   static presetsSizeDot = {
     // size + translate-x = width
@@ -48,6 +47,7 @@ export class SwitchConfig {
 </script>
 
 <script>import { createEventDispatcher } from "svelte";
+import { twMerge2 } from "../../utils/tw-merge2.js";
 let _class = "";
 export { _class as class };
 export let classDot = "";
@@ -67,7 +67,7 @@ $:
     size = SwitchConfig.defaultSize;
 let switchClass;
 $:
-  switchClass = twMerge(
+  switchClass = twMerge2(
     SwitchConfig.presetBase,
     SwitchConfig.presetsSize[size],
     SwitchConfig.class,
@@ -79,7 +79,7 @@ $:
   );
 let dotClass;
 $:
-  dotClass = twMerge(
+  dotClass = twMerge2(
     SwitchConfig.presetBaseDot,
     SwitchConfig.presetsSizeDot[size],
     SwitchConfig.classDot,

package/dist/components/X/X.svelte

@@ -1,4 +1,4 @@
-<script>import { twMerge } from "tailwind-merge";
+<script>import { twMerge2 } from "../../utils/tw-merge2.js";
 let _class = "";
 export { _class as class };
 export let strokeWidth = 2;
@@ -9,7 +9,7 @@ export let strokeWidth = 2;
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
-	class={twMerge(`inline size-6 ${_class}`)}
+	class={twMerge2(`inline size-6 ${_class}`)}
 >
 	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 </svg>

package/dist/index.d.ts

@@ -34,4 +34,5 @@ export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
 export { getId } from './utils/get-id.js';
 export { windowSize, breakpoint } from './utils/window-size.js';
+export { twMerge2, clsClean } from './utils/tw-merge2.js';
 export type { TW_COLORS } from './utils/tw-types.js';

package/dist/index.js

@@ -50,3 +50,4 @@ export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
 export { getId } from './utils/get-id.js';
 export { windowSize, breakpoint } from './utils/window-size.js';
+export { twMerge2, clsClean } from './utils/tw-merge2.js';

package/dist/utils/tw-merge2.d.ts

@@ -0,0 +1,2 @@
+export declare const clsClean: (s: string) => string;
+export declare const twMerge2: (...args: any[]) => string;

package/dist/utils/tw-merge2.js

@@ -0,0 +1,5 @@
+import { twMerge } from 'tailwind-merge';
+export const clsClean = (s) => `${s || ''}`.replace(/\s+/gi, ' ').trim();
+// twMerge does not seem to handle "\t" and/or "\n" within the input strings correctly,
+// so we need to do the cleanup ourselves
+export const twMerge2 = (...args) => twMerge(...args.map(clsClean));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.120.0",
+	"version": "1.121.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",