@marianmeres/stuic 2.66.0 → 3.0.0

package/dist/components/Modal/README.md

@@ -118,6 +118,35 @@ By default, Modal is:
 - **Mobile**: Full screen with 1rem margins from viewport edges
 - **Desktop (md+)**: Centered, max-width 768px, auto height with max 80vh
 
+## CSS Variables
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-modal-bg` | `--stuic-color-surface` | Modal background color |
+| `--stuic-modal-text` | `--stuic-color-surface-foreground` | Modal text color |
+| `--stuic-modal-radius` | `--radius-md` | Border radius (desktop only) |
+
+### Customization Examples
+
+```css
+/* Global override */
+:root {
+  --stuic-modal-bg: var(--stuic-color-background);
+  --stuic-modal-radius: var(--radius-lg);
+}
+```
+
+```svelte
+<!-- Local override -->
+<Modal style="--stuic-modal-bg: var(--stuic-color-muted);">
+  Content with muted background
+</Modal>
+```
+
+Note: Modal inherits backdrop styling from ModalDialog. See ModalDialog documentation for backdrop customization (`--stuic-modal-dialog-backdrop`).
+
 ## Relationship to ModalDialog
 
 Modal is a higher-level component built on `ModalDialog`. It provides:

package/dist/components/Modal/index.css

@@ -0,0 +1,36 @@
+/* ============================================================================
+   MODAL COMPONENT TOKENS
+   Override globally: :root { --stuic-modal-radius: 0; }
+   Override locally:  <Modal style="--stuic-modal-radius: var(--radius-lg);">
+   ============================================================================ */
+
+:root {
+	/* Background & text - reference theme tokens */
+	--stuic-modal-bg: var(--stuic-color-surface);
+	--stuic-modal-text: var(--stuic-color-surface-foreground);
+
+	/* Border radius (desktop only - mobile is fullscreen) */
+	--stuic-modal-radius: var(--radius-md);
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+.stuic-modal {
+	background: var(--stuic-modal-bg);
+	color: var(--stuic-modal-text);
+	border-radius: 0; /* Mobile: fullscreen, no radius */
+}
+
+@media (min-width: 48rem) {
+	/* md breakpoint */
+	.stuic-modal {
+		border-radius: var(--stuic-modal-radius);
+	}
+}
+
+/* Thin scrollbar for main content area */
+.stuic-modal .main {
+	scrollbar-width: thin;
+}

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -137,7 +137,7 @@
 			"fixed inset-4 m-auto size-auto",
 			"flex justify-center items-center",
 			"focus:outline-none focus-visible:outline-none",
-			"bg-transparent backdrop:bg-black/40",
+			"bg-transparent",
 			classDialog
 		)}
 		onclick={(e) => {
@@ -181,28 +181,9 @@
 			onpointerdown={stopPropagation()}
 			onclick={stopPropagation()}
 			data-type={type}
-			class={twMerge(
-				`box relative size-full overflow-auto
-				text-black dark:text-white bg-white dark:bg-neutral-800`,
-				classProp
-			)}
+			class={twMerge("box relative size-full overflow-auto", classProp)}
 		>
 			{@render children?.()}
 		</div>
 	</dialog>
 {/if}
-
-<style>
-	dialog[open]::backdrop {
-		animation: fadeIn 0.15s ease-out;
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-</style>

package/dist/components/ModalDialog/README.md

@@ -108,6 +108,41 @@ A modal component using the native HTML `<dialog>` element with `showModal()`. P
 </script>
 ```
 
+## CSS Variables
+
+### Component Tokens
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-modal-dialog-radius` | `--radius-lg` | Border radius of content box |
+| `--stuic-modal-dialog-transition` | `150ms` | Animation/transition duration |
+| `--stuic-modal-dialog-backdrop` | `rgb(0 0 0 / 0.4)` | Backdrop overlay color |
+| `--stuic-modal-dialog-bg` | `--stuic-color-surface` | Content box background |
+| `--stuic-modal-dialog-text` | `--stuic-color-surface-foreground` | Content box text color |
+| `--stuic-modal-dialog-shadow` | `--shadow-xl` | Content box shadow |
+
+### Customization Examples
+
+```css
+/* Global override - all dialogs */
+:root {
+  --stuic-modal-dialog-radius: 0;
+  --stuic-modal-dialog-backdrop: rgb(0 0 0 / 0.7);
+}
+```
+
+```svelte
+<!-- Local override - single dialog -->
+<ModalDialog
+  bind:this={dialog}
+  style="--stuic-modal-dialog-radius: 9999px;"
+>
+  Content with pill-shaped radius
+</ModalDialog>
+```
+
 ## Relationship to Modal
 
 `Modal` is a higher-level component built on top of `ModalDialog`.

package/dist/components/ModalDialog/index.css

@@ -0,0 +1,57 @@
+/* ============================================================================
+   MODAL DIALOG COMPONENT TOKENS
+   Override globally: :root { --stuic-modal-dialog-radius: 0; }
+   Override locally:  <ModalDialog style="--stuic-modal-dialog-radius: 9999px;">
+   ============================================================================ */
+
+:root {
+	/* Core customization */
+	--stuic-modal-dialog-radius: var(--radius-lg);
+	--stuic-modal-dialog-transition: 150ms;
+
+	/* Backdrop */
+	--stuic-modal-dialog-backdrop: rgb(0 0 0 / 0.4);
+
+	/* Content box - reference theme tokens */
+	--stuic-modal-dialog-bg: var(--stuic-color-surface);
+	--stuic-modal-dialog-text: var(--stuic-color-surface-foreground);
+
+	/* Optional shadow for elevation */
+	--stuic-modal-dialog-shadow: var(--shadow-xl);
+}
+
+/* ============================================================================
+   BACKDROP STYLES
+   ============================================================================ */
+
+.stuic-modal-dialog::backdrop {
+	background: var(--stuic-modal-dialog-backdrop);
+}
+
+/* ============================================================================
+   CONTENT BOX STYLES
+   ============================================================================ */
+
+.stuic-modal-dialog .box {
+	background: var(--stuic-modal-dialog-bg);
+	color: var(--stuic-modal-dialog-text);
+	border-radius: var(--stuic-modal-dialog-radius);
+	box-shadow: var(--stuic-modal-dialog-shadow);
+}
+
+/* ============================================================================
+   ANIMATIONS
+   ============================================================================ */
+
+.stuic-modal-dialog[open]::backdrop {
+	animation: stuic-modal-dialog-fadeIn var(--stuic-modal-dialog-transition) ease-out;
+}
+
+@keyframes stuic-modal-dialog-fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

package/dist/components/Notifications/Notifications.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-	import type { TW_COLORS } from "../../types.js";
 	import type { NotificationsStack } from "./notifications-stack.svelte.js";
 	import { notificationsDefaultIcons } from "./notifications-icons.js";
 
@@ -15,39 +14,34 @@
 		posXMobile?: NOTIFICATIONS_POSX;
 		posY?: NOTIFICATIONS_POSY;
 		posYMobile?: NOTIFICATIONS_POSY;
-		themeInfo?: TW_COLORS;
-		themeError?: TW_COLORS;
-		themeWarn?: TW_COLORS;
-		themeSuccess?: TW_COLORS;
-		noTheme?: boolean;
 		noIcons?: boolean;
+		noProgress?: boolean;
+		noXButton?: boolean;
+		forceAsHtml?: boolean;
+		ariaCloseLabel?: string;
+		duration?: number;
+		iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
+		// Class overrides
+		class?: string;
 		classWrapY?: string;
 		classWrapX?: string;
-		class?: string;
 		classNotifCount?: string;
 		classNotifIcon?: string;
 		classNotifContent?: string;
-		classNotifButton?: string;
-		classNotifButtonX?: string;
-		buttonXStrokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
 		classProgress?: string;
 		classProgressBar?: string;
-		forceAsHtml?: boolean;
-		ariaCloseLabel?: string;
-		duration?: number;
-		noProgress?: boolean;
-		noXButton?: boolean;
-		iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
+		el?: HTMLDivElement;
 	}
 </script>
 
 <script lang="ts">
 	import { fade } from "svelte/transition";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import X from "../X/X.svelte";
 	import "./index.css";
-	import type { Notification, NotificationType } from "./notifications-stack.svelte.js";
+	import type { Notification } from "./notifications-stack.svelte.js";
 	import Progress from "../Progress/Progress.svelte";
 
 	const DEFAULT: {
@@ -81,33 +75,23 @@
 		posY = DEFAULT.posY,
 		posYMobile = DEFAULT.posYMobile,
 		//
-		themeInfo = "neutral",
-		themeError = "red",
-		themeWarn = "yellow",
-		themeSuccess = "green",
-		// use truthy `noTheme` if manual css-only var customization is needed
-		noTheme,
 		noIcons,
+		noProgress,
+		noXButton,
+		forceAsHtml,
+		ariaCloseLabel = "Close",
+		duration = 200,
+		iconFns = {},
 		//
+		class: classNotifBox,
 		classWrapY,
 		classWrapX,
-		class: classNotifBox,
 		classNotifCount,
 		classNotifIcon,
 		classNotifContent,
-		classNotifButton,
-		classNotifButtonX,
-		buttonXStrokeWidth = 3,
-		//
 		classProgress,
 		classProgressBar,
-		//
-		forceAsHtml,
-		ariaCloseLabel = "Close",
-		duration = 200,
-		noProgress,
-		noXButton,
-		iconFns = {},
+		el = $bindable(),
 	}: Props = $props();
 
 	let popoverEl: HTMLDivElement | null = $state(null);
@@ -128,79 +112,6 @@
 		return (_iconFns?.[n.type] as any)?.();
 	};
 
-	const _classWrapX = `
-        fixed z-50 flex flex-row inset-0
-        pointer-events-none bg-transparent`;
-
-	const _classWrapY = `
-        p-4 space-y-4
-        flex flex-col inset-0
-        w-full sm:w-auto
-        pointer-events-none bg-transparent`;
-
-	const _classNotifBox = `
-        relative flex
-        pointer-events-auto
-        w-full sm:w-sm max-w-full sm:max-w-sm
-        rounded-lg
-        shadow-lg
-        border border-notif-border dark:border-notif-border-dark
-        bg-notif-bg text-notif-text
-        dark:bg-notif-bg-dark dark:text-notif-text-dark`;
-
-	const _classNotifCount = `
-        absolute -top-2 -right-2
-        w-auto h-auto
-        flex items-center justify-center
-        px-2 py-1 rounded-full
-        leading-none text-xs
-        bg-neutral-950 text-neutral-50`;
-
-	const _classNotifIcon = `
-        flex items-center justify-center
-        pt-4 pr-0 pb-4 pl-4
-        text-neutral-200`;
-
-	const _classNotifContent = `
-        flex-1
-        flex flex-col justify-center
-        tracking-tight
-        pl-4 pr-1 py-3`;
-
-	const _classNotifButton = `
-        flex flex-col items-center justify-center
-        leading-none
-        px-3
-        hover:bg-neutral-950/10
-        focus-visible:bg-neutral-950/10 focus-visible:outline-none focus-visible:ring-0
-        group
-        rounded-tr-md rounded-br-md`;
-
-	const _classNotifButtonX = `opacity-75 group-hover:opacity-100`;
-
-	const _classProgress = `absolute inset-0 size-full bg-transparent rounded-tl-md rounded-bl-md`;
-	const _classProgressBar = `bg-white/10 dark:bg-white/10 size-full rounded-tl-md rounded-bl-md`;
-
-	const _buildTheme = (type: NotificationType) => {
-		if (noTheme) return "";
-		let theme =
-			{
-				info: themeInfo,
-				error: themeError,
-				success: themeSuccess,
-				warn: themeWarn,
-			}[type] || "info";
-		return [
-			`--color-notif-bg: var(--color-bg-${type}, var(--color-${theme}-700));`,
-			`--color-notif-text: var(--color-text-${type}, var(--color-${theme}-50));`,
-			`--color-notif-border: var(--color-border-${type}, var(--color-${theme}-800));`,
-			//
-			`--color-notif-bg-dark: var(--color-bg-dark-${type}, var(--color-${theme}-800));`,
-			`--color-notif-text-dark: var(--color-text-dark-${type}, var(--color-${theme}-200));`,
-			`--color-notif-border-dark: var(--color-border-dark-${type}, var(--color-${theme}-700));`,
-		].join("");
-	};
-
 	// Manage popover visibility based on notifications
 	$effect(() => {
 		if (!popoverEl) return;
@@ -227,39 +138,48 @@
 >
 	<div
 		class={twMerge(
-			"stuic-notifs wrap-x",
-			_classWrapX,
+			"stuic-notifs fixed z-50 flex flex-row inset-0 pointer-events-none bg-transparent",
 			XMAP[x],
 			XMAP_M[xMobile],
 			classWrapX
 		)}
 	>
-		<div class={twMerge("wrap-y", _classWrapY, YMAP_M[yMobile], YMAP[y], classWrapY)}>
+		<div
+			class={twMerge(
+				"flex flex-col inset-0 w-full sm:w-auto pointer-events-none bg-transparent",
+				"p-4",
+				YMAP_M[yMobile],
+				YMAP[y],
+				classWrapY
+			)}
+			style="gap: var(--stuic-notification-gap);"
+		>
 			{#each notifications.stack as n (n.id)}
 				{@const iconHtml = maybeIcon(n)}
 				{@const showXButton = !noXButton || n.ttl > 1000}
 				<div
-					class={twMerge("box", _classNotifBox, classNotifBox)}
+					bind:this={el}
+					class={twMerge("stuic-notification", classNotifBox)}
+					data-type={n.type}
 					transition:fade|global={{ duration }}
 					role="alert"
-					style={_buildTheme(n.type)}
 				>
 					{#if n.ttl && !noProgress}
 						<Progress
 							progress={100 - n._ttlProgress * 100}
-							class={twMerge(_classProgress, classProgress)}
-							classBar={twMerge(_classProgressBar, classProgressBar)}
+							class={twMerge("progress", classProgress)}
+							classBar={twMerge("progress-bar", classProgressBar)}
 							styleBar="transition-duration: {notifications.options.disposeInterval}ms;"
 						/>
 					{/if}
 
 					{#if n.count > 1}
-						<div class={twMerge("count", _classNotifCount, classNotifCount)}>
+						<div class={twMerge("count", classNotifCount)}>
 							{n.count}
 						</div>
 					{/if}
 					{#if !noIcons && iconHtml}
-						<div class={twMerge("icon", _classNotifIcon, classNotifIcon)}>
+						<div class={twMerge("icon hidden! sm:block!", classNotifIcon)}>
 							{@html iconHtml}
 						</div>
 					{/if}
@@ -267,9 +187,8 @@
 					<div
 						class={twMerge(
 							"content",
-							_classNotifContent,
-							classNotifContent,
-							!showXButton && "pr-4"
+							!showXButton && "no-close-button",
+							classNotifContent
 						)}
 					>
 						<Thc
@@ -281,9 +200,9 @@
 					</div>
 
 					{#if showXButton}
-						<button
-							type="button"
-							class={twMerge("button", _classNotifButton, classNotifButton)}
+						<Button
+							unstyled
+							class="close-button"
 							aria-label={ariaCloseLabel}
 							onclick={(e) => {
 								e.preventDefault();
@@ -292,11 +211,8 @@
 								notifications.removeById(n.id);
 							}}
 						>
-							<X
-								class={twMerge("x", _classNotifButtonX, classNotifButtonX)}
-								strokeWidth={buttonXStrokeWidth}
-							/>
-						</button>
+							<X />
+						</Button>
 					{/if}
 				</div>
 			{/each}

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

@@ -1,4 +1,3 @@
-import type { TW_COLORS } from "../../types.js";
 import type { NotificationsStack } from "./notifications-stack.svelte.js";
 import { notificationsDefaultIcons } from "./notifications-icons.js";
 declare const X_POSITIONS: readonly ["left", "center", "right"];
@@ -11,31 +10,24 @@ export interface Props {
     posXMobile?: NOTIFICATIONS_POSX;
     posY?: NOTIFICATIONS_POSY;
     posYMobile?: NOTIFICATIONS_POSY;
-    themeInfo?: TW_COLORS;
-    themeError?: TW_COLORS;
-    themeWarn?: TW_COLORS;
-    themeSuccess?: TW_COLORS;
-    noTheme?: boolean;
     noIcons?: boolean;
+    noProgress?: boolean;
+    noXButton?: boolean;
+    forceAsHtml?: boolean;
+    ariaCloseLabel?: string;
+    duration?: number;
+    iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
+    class?: string;
     classWrapY?: string;
     classWrapX?: string;
-    class?: string;
     classNotifCount?: string;
     classNotifIcon?: string;
     classNotifContent?: string;
-    classNotifButton?: string;
-    classNotifButtonX?: string;
-    buttonXStrokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
     classProgress?: string;
     classProgressBar?: string;
-    forceAsHtml?: boolean;
-    ariaCloseLabel?: string;
-    duration?: number;
-    noProgress?: boolean;
-    noXButton?: boolean;
-    iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
+    el?: HTMLDivElement;
 }
 import "./index.css";
-declare const Notifications: import("svelte").Component<Props, {}, "">;
+declare const Notifications: import("svelte").Component<Props, {}, "el">;
 type Notifications = ReturnType<typeof Notifications>;
 export default Notifications;