@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/Nav/index.css

@@ -0,0 +1,318 @@
+/* =============================================================================
+   NAV COMPONENT TOKENS
+   Override globally: :root { --stuic-nav-radius: 0; }
+   Override locally:  <Nav style="--stuic-nav-radius: 9999px;">
+   ============================================================================= */
+
+:root {
+	/* Structure tokens */
+	--stuic-nav-radius: var(--radius-md);
+	--stuic-nav-transition: 150ms;
+	--stuic-nav-gap: 0.5rem;
+
+	/* Children indent */
+	--stuic-nav-children-indent: 1rem;
+	--stuic-nav-children-gap: 0.25rem;
+
+	/* Section title (static header above group) */
+	--stuic-nav-section-title-padding-x: 0.5rem;
+	--stuic-nav-section-title-padding-y: 0.25rem;
+	--stuic-nav-section-title-font-size: var(--text-xs);
+	--stuic-nav-section-title-font-weight: 600;
+	--stuic-nav-section-title-opacity: 0.5;
+	--stuic-nav-section-title-letter-spacing: 0.05em;
+
+	/* Title/header (collapsible group header) */
+	--stuic-nav-group-title-padding-x: 0.5rem;
+	--stuic-nav-group-title-padding-y: 0.5rem;
+	--stuic-nav-group-title-font-size: var(--text-sm);
+	--stuic-nav-group-title-font-weight: 700;
+	--stuic-nav-group-title-opacity: 0.75;
+	--stuic-nav-group-title-height: 2.125rem; /* 34px */
+
+	/* Item sizing */
+	--stuic-nav-item-padding-x: 0.5rem;
+	--stuic-nav-item-padding-y: 0.5rem;
+	--stuic-nav-item-height: 2.125rem; /* 34px */
+	--stuic-nav-item-font-size: var(--text-sm);
+
+	/* Touch-friendly modifier */
+	--stuic-nav-item-height-touch: 2.75rem; /* 44px */
+	--stuic-nav-item-padding-y-touch: 0.75rem;
+	--stuic-nav-group-title-height-touch: 2.75rem;
+
+	/* Collapsed mode */
+	--stuic-nav-item-size-collapsed: 2.125rem;
+	--stuic-nav-item-size-collapsed-touch: 2.75rem; /* 44px */
+
+	/* Icon */
+	--stuic-nav-icon-opacity: 0.75;
+
+	/* Chevron */
+	--stuic-nav-chevron-opacity: 0.5;
+
+	/* Color tokens: Base state */
+	--stuic-nav-item-bg: transparent;
+	--stuic-nav-item-text: inherit;
+
+	/* Color tokens: Hover state */
+	--stuic-nav-item-bg-hover: rgb(0 0 0 / 0.1);
+	--stuic-nav-item-text-hover: inherit;
+
+	/* Color tokens: Active state */
+	--stuic-nav-item-bg-active: var(--stuic-color-primary);
+	--stuic-nav-item-text-active: var(--stuic-color-primary-foreground);
+
+	/* Color tokens: Focused state (keyboard navigation) */
+	--stuic-nav-item-bg-focus: var(--stuic-color-primary);
+	--stuic-nav-item-text-focus: var(--stuic-color-primary-foreground);
+}
+
+@layer components {
+	/* =============================================================================
+	   BASE CONTAINER
+	   ============================================================================= */
+
+	.stuic-nav {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-nav-children-gap);
+	}
+
+	/* Center items horizontally when collapsed */
+	.stuic-nav[data-collapsed] {
+		align-items: center;
+	}
+
+	/* =============================================================================
+	   SECTION TITLE (static header above group)
+	   ============================================================================= */
+
+	.stuic-nav-section-title {
+		/* Layout */
+		display: block;
+		width: 100%;
+
+		/* Padding */
+		padding: var(--stuic-nav-section-title-padding-y)
+			var(--stuic-nav-section-title-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-section-title-font-size);
+		font-weight: var(--stuic-nav-section-title-font-weight);
+		letter-spacing: var(--stuic-nav-section-title-letter-spacing);
+		line-height: 1;
+
+		/* Visual */
+		opacity: var(--stuic-nav-section-title-opacity);
+
+		/* Non-interactive */
+		user-select: none;
+	}
+
+	/* Collapsed mode: hide title but preserve space */
+	.stuic-nav-section-title[data-collapsed] {
+		visibility: hidden;
+	}
+
+	/* =============================================================================
+	   GROUP TITLE/HEADER (collapsible)
+	   ============================================================================= */
+
+	.stuic-nav-group-title {
+		/* Layout */
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-nav-gap);
+		width: 100%;
+		height: var(--stuic-nav-group-title-height);
+
+		/* Padding */
+		padding: var(--stuic-nav-group-title-padding-y)
+			var(--stuic-nav-group-title-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-group-title-font-size);
+		font-weight: var(--stuic-nav-group-title-font-weight);
+		text-align: left;
+		line-height: 1;
+
+		/* Visual */
+		opacity: var(--stuic-nav-group-title-opacity);
+		border-radius: var(--stuic-nav-radius);
+		background: transparent;
+		border: none;
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-nav-group-title:hover {
+		background: var(--stuic-nav-item-bg-hover);
+	}
+
+	.stuic-nav-group-title:focus {
+		outline: none;
+	}
+
+	.stuic-nav-group-title:focus-visible {
+		background: var(--stuic-nav-item-bg-hover);
+	}
+
+	/* Touch-friendly title */
+	.stuic-nav-group-title[data-touch-friendly] {
+		height: var(--stuic-nav-group-title-height-touch);
+		padding-top: var(--stuic-nav-item-padding-y-touch);
+		padding-bottom: var(--stuic-nav-item-padding-y-touch);
+	}
+
+	/* =============================================================================
+	   CHILDREN CONTAINER
+	   ============================================================================= */
+
+	.stuic-nav-children {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-nav-children-gap);
+		padding-left: var(--stuic-nav-children-indent);
+		list-style: none;
+		margin: 0;
+	}
+
+	/* No indent in collapsed mode */
+	.stuic-nav[data-collapsed] .stuic-nav-children {
+		padding-left: 0;
+	}
+
+	/* =============================================================================
+	   ITEM STYLES
+	   ============================================================================= */
+
+	.stuic-nav-item {
+		/* Layout */
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-nav-gap);
+		width: 100%;
+		height: var(--stuic-nav-item-height);
+
+		/* Padding */
+		padding: var(--stuic-nav-item-padding-y)
+			var(--stuic-nav-item-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-item-font-size);
+		text-align: left;
+		text-decoration: none;
+		line-height: 1;
+
+		/* Visual */
+		border-radius: var(--stuic-nav-radius);
+		background: var(--stuic-nav-item-bg);
+		color: var(--stuic-nav-item-text);
+		border: none;
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition:
+			background var(--stuic-nav-transition),
+			color var(--stuic-nav-transition);
+	}
+
+	/* Icon opacity */
+	.stuic-nav-item > span:first-child {
+		opacity: var(--stuic-nav-icon-opacity);
+	}
+
+	/* =============================================================================
+	   ITEM STATE STYLES
+	   ============================================================================= */
+
+	/* Hover state */
+	.stuic-nav-item:hover:not(:disabled):not([data-active]) {
+		background: var(--stuic-nav-item-bg-hover);
+		color: var(--stuic-nav-item-text-hover);
+	}
+
+	/* Focus styles */
+	.stuic-nav-item:focus {
+		outline: none;
+	}
+
+	.stuic-nav-item:focus-visible:not([data-active]) {
+		background: var(--stuic-nav-item-bg-focus);
+		color: var(--stuic-nav-item-text-focus);
+	}
+
+	/* Active/Selected state */
+	.stuic-nav-item[data-active] {
+		background: var(--stuic-nav-item-bg-active);
+		color: var(--stuic-nav-item-text-active);
+	}
+
+	/* Active state: make icon full opacity */
+	.stuic-nav-item[data-active] > span:first-child {
+		opacity: 1;
+	}
+
+	/* Focused state (keyboard navigation) */
+	.stuic-nav-item[data-focused]:not([data-active]) {
+		background: var(--stuic-nav-item-bg-focus);
+		color: var(--stuic-nav-item-text-focus);
+	}
+
+	/* Disabled state */
+	.stuic-nav-item:disabled,
+	.stuic-nav-item[data-disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* =============================================================================
+	   TOUCH-FRIENDLY MODIFIER
+	   ============================================================================= */
+
+	.stuic-nav-item[data-touch-friendly] {
+		height: var(--stuic-nav-item-height-touch);
+		padding-top: var(--stuic-nav-item-padding-y-touch);
+		padding-bottom: var(--stuic-nav-item-padding-y-touch);
+	}
+
+	/* =============================================================================
+	   COLLAPSED MODE
+	   ============================================================================= */
+
+	.stuic-nav-item[data-collapsed] {
+		/* Center content */
+		justify-content: center;
+		width: var(--stuic-nav-item-size-collapsed);
+		height: var(--stuic-nav-item-size-collapsed);
+		padding: 0.375rem;
+	}
+
+	/* Collapsed + touch-friendly: minimum 44x44 */
+	.stuic-nav-item[data-collapsed][data-touch-friendly] {
+		width: var(--stuic-nav-item-size-collapsed-touch);
+		height: var(--stuic-nav-item-size-collapsed-touch);
+	}
+
+	/* Expanding transition state - shift content left */
+	.stuic-nav-item[data-expanding] {
+		padding-left: var(--stuic-nav-item-padding-x);
+		justify-content: flex-start;
+	}
+
+	/* =============================================================================
+	   CHEVRON STYLES
+	   ============================================================================= */
+
+	.stuic-nav-group-title > span:first-child,
+	.stuic-nav-item[data-collapsed] > span:first-child {
+		opacity: var(--stuic-nav-chevron-opacity);
+	}
+}

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

@@ -0,0 +1 @@
+export { default as Nav, type Props as NavProps, type NavItem, type NavGroup, NAV_BASE_CLASSES, NAV_SECTION_TITLE_CLASSES, NAV_GROUP_TITLE_CLASSES, NAV_ITEM_CLASSES, NAV_CHILDREN_CLASSES, } from "./Nav.svelte";

package/dist/components/Nav/index.js

@@ -0,0 +1 @@
+export { default as Nav, NAV_BASE_CLASSES, NAV_SECTION_TITLE_CLASSES, NAV_GROUP_TITLE_CLASSES, NAV_ITEM_CLASSES, NAV_CHILDREN_CLASSES, } from "./Nav.svelte";

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,33 @@
 		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 +74,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 +111,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 +137,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 h-full", classProgress)}
+							classBar={twMerge("progress-bar bg-black/5", 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 +186,8 @@
 					<div
 						class={twMerge(
 							"content",
-							_classNotifContent,
-							classNotifContent,
-							!showXButton && "pr-4"
+							!showXButton && "no-close-button",
+							classNotifContent
 						)}
 					>
 						<Thc
@@ -281,9 +199,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 +210,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,23 @@ 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;