@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/CommandMenu/README.md

@@ -93,6 +93,45 @@ The command menu uses `ModalDialog` internally with top-aligned positioning:
 - **Mobile**: Input at top of screen with 1rem margins from edges
 - **Desktop (md+)**: Input positioned at ~20% from top, max-width 768px, centered horizontally
 
+## CSS Variables
+
+All styling can be customized via CSS variables. Define them on a parent element or in `:root` to override defaults.
+
+### Structure Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-command-menu-transition` | `150ms` | Transition duration for hover/focus states |
+| `--stuic-command-menu-options-max-height` | `15rem` | Maximum height of options container |
+
+### Color Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-command-menu-divider-color` | `var(--stuic-color-border)` | Border color between input and options |
+| `--stuic-command-menu-group-header-color` | `var(--stuic-color-muted-foreground)` | Option group header text color |
+| `--stuic-command-menu-group-header-font-size` | `var(--text-xs)` | Option group header font size |
+
+### Custom Theme Example
+
+```svelte
+<div style="
+  --stuic-command-menu-divider-color: var(--color-blue-200);
+">
+  <CommandMenu ... />
+</div>
+```
+
+### Global Theme Override
+
+```css
+/* In your app.css */
+:root {
+  --stuic-command-menu-options-max-height: 20rem;
+  --stuic-command-menu-group-header-color: var(--color-indigo-500);
+}
+```
+
 ## Keyboard Navigation
 
 - **Arrow Up/Down**: Navigate options

package/dist/components/CommandMenu/index.css

@@ -1,3 +1,48 @@
-/* Override ListItemButton defaults for CommandMenu context */
-.stuic-command-menu-options .stuic-list-item-button {
+/* =============================================================================
+   COMMAND MENU COMPONENT TOKENS
+   Override globally: :root { --stuic-command-menu-divider-color: red; }
+   Override locally:  <div style="--stuic-command-menu-divider-color: blue;">
+   ============================================================================= */
+
+:root {
+	/* Structure */
+	--stuic-command-menu-transition: 150ms;
+	--stuic-command-menu-options-max-height: 15rem;
+
+	/* Colors */
+	--stuic-command-menu-divider-color: var(--stuic-color-border);
+	--stuic-command-menu-group-header-color: var(--stuic-color-muted-foreground);
+	--stuic-command-menu-group-header-font-size: var(--text-xs);
+
+	/* Muted/placeholder states (align with FieldOptions) */
+	--stuic-command-menu-muted-text: var(--stuic-color-muted-foreground);
+}
+
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
+
+	/* Options container */
+	.stuic-command-menu-options {
+		scrollbar-width: thin;
+		max-height: var(--stuic-command-menu-options-max-height);
+		border-top-color: var(--stuic-command-menu-divider-color);
+	}
+
+	/* Option group header */
+	.stuic-command-menu-group-header {
+		color: var(--stuic-command-menu-group-header-color);
+		font-size: var(--stuic-command-menu-group-header-font-size);
+	}
+
+	/* Muted elements (search icon) */
+	.stuic-command-menu-muted {
+		color: var(--stuic-command-menu-muted-text);
+	}
+
+	/* Placeholder/loading states (spinner) */
+	.stuic-command-menu-placeholder {
+		color: var(--stuic-command-menu-muted-text);
+	}
 }

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -1,92 +1,94 @@
 <script lang="ts" module>
-	import type { TW_COLORS } from "../../types.js";
 	import type { THC } from "../Thc/Thc.svelte";
 
+	export type MessageIntent = "destructive" | "warning" | "success" | "info";
+
 	export interface Props {
 		class?: string;
 		classContent?: string;
-		classDismiss?: string;
-		classX?: string;
-		message: THC | Error;
-		theme?: TW_COLORS;
+		classIcon?: string;
+		message: THC | Error | undefined | null;
+		intent?: MessageIntent;
 		forceAsHtml?: boolean;
 		duration?: number;
 		onDismiss?: (() => void) | null | false;
+		withIcon?: boolean;
+		iconFn?: (() => string) | false;
 	}
 </script>
 
 <script lang="ts">
 	import { slide } from "svelte/transition";
-	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
-	import X from "../X/X.svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import Button from "../Button/Button.svelte";
+	import {
+		iconAlertWarning,
+		iconAlertSuccess,
+		iconAlertInfo,
+		iconAlertError,
+	} from "../../icons/index.js";
 
-	import "./index.css";
+
+	const INTENT_ICONS: Record<MessageIntent, () => string> = {
+		destructive: () => iconAlertError({ size: 29 }),
+		warning: () => iconAlertWarning({ size: 29 }),
+		success: () => iconAlertSuccess({ size: 29 }),
+		info: () => iconAlertInfo({ size: 29 }),
+	};
 
 	let {
 		class: classProps,
 		classContent,
-		classDismiss,
-		classX,
+		classIcon,
 		message,
-		theme,
+		intent,
 		forceAsHtml = true,
 		duration = 150,
 		onDismiss = () => (message = ""),
+		withIcon,
+		iconFn,
 	}: Props = $props();
 
-	let _message = $derived(`${message}`);
+	let _message = $derived(message ? String(message) : "");
 	let _show = $derived(isTHCNotEmpty(_message));
+
+	let _iconHtml = $derived.by(() => {
+		if (iconFn === false) return "";
+		if (typeof iconFn === "function") return iconFn();
+		if (withIcon && intent) return INTENT_ICONS[intent]?.();
+		return "";
+	});
 </script>
 
 {#if _show}
 	<div
-		class={twMerge(
-			"stuic-dismissible-message",
-			`mb-4 rounded flex text-sm 
-            bg-dismiss-bg dark:bg-dismiss-bg-dark 
-            border-dismiss-border dark:border-dismiss-border-dark 
-            text-dismiss-text dark:text-dismiss-text-dark`,
-			classProps
-		)}
-		style={theme
-			? `
-                    --color-dismiss-bg: var(--color-${theme}-100);
-                    --color-dismiss-bg-dark: var(--color-${theme}-700);
-
-                    --color-dismiss-text: var(--color-${theme}-800);
-                    --color-dismiss-text-dark: var(--color-${theme}-50);
-
-                    --color-dismiss-border: var(--color-${theme}-500);
-                    --color-dismiss-border-dark: var(--color-${theme}-500);
-                `
-			: ``}
+		class={twMerge("stuic-dismissible-message", "mb-4", classProps)}
+		data-intent={intent}
 		transition:slide={{ duration }}
 	>
-		<div class={twMerge("content", "flex-1 px-4 py-3", classContent)}>
+		{#if _iconHtml}
+			<div class={twMerge("icon", classIcon)}>
+				{@html _iconHtml}
+			</div>
+		{/if}
+
+		<div class={twMerge("content", classContent)}>
 			<Thc thc={_message} {forceAsHtml} />
 		</div>
 
 		{#if typeof onDismiss === "function"}
-			<button
-				onclick={() => onDismiss()}
-				class={twMerge(
-					"dismiss",
-					`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
-                    group`,
-					classDismiss
-				)}
-				type="button"
-			>
-				<X
-					class={twMerge("x", "opacity-75 group-hover:opacity-100", classX)}
-					strokeWidth={1.5}
+			<div class="dismiss">
+				<Button
+					x
+					class="text-inherit!"
+					variant="ghost"
+					roundedFull
+					size="sm"
+					type="button"
+					onclick={() => onDismiss()}
 				/>
-			</button>
+			</div>
 		{/if}
 	</div>
 {/if}

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

@@ -1,17 +1,17 @@
-import type { TW_COLORS } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
+export type MessageIntent = "destructive" | "warning" | "success" | "info";
 export interface Props {
     class?: string;
     classContent?: string;
-    classDismiss?: string;
-    classX?: string;
-    message: THC | Error;
-    theme?: TW_COLORS;
+    classIcon?: string;
+    message: THC | Error | undefined | null;
+    intent?: MessageIntent;
     forceAsHtml?: boolean;
     duration?: number;
     onDismiss?: (() => void) | null | false;
+    withIcon?: boolean;
+    iconFn?: (() => string) | false;
 }
-import "./index.css";
 declare const DismissibleMessage: import("svelte").Component<Props, {}, "">;
 type DismissibleMessage = ReturnType<typeof DismissibleMessage>;
 export default DismissibleMessage;

package/dist/components/DismissibleMessage/README.md

@@ -1,20 +1,18 @@
 # DismissibleMessage
 
-A dismissible alert/message component with color themes and slide transition.
+A dismissible alert/message component with semantic intents and slide transition.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `message` | `THC \| Error` | - | Message content (string, HTML, or Error object) |
-| `theme` | `TW_COLORS` | - | Tailwind color theme (e.g., `"red"`, `"green"`, `"blue"`) |
+| `intent` | `"destructive" \| "warning" \| "success" \| "info"` | - | Semantic color intent |
 | `forceAsHtml` | `boolean` | `true` | Render message as HTML |
 | `duration` | `number` | `150` | Slide transition duration (ms) |
 | `onDismiss` | `(() => void) \| null \| false` | - | Dismiss callback (set to `false` to hide X button) |
 | `class` | `string` | - | CSS for container |
 | `classContent` | `string` | - | CSS for content area |
-| `classDismiss` | `string` | - | CSS for dismiss button |
-| `classX` | `string` | - | CSS for X icon |
 
 ## Usage
 
@@ -22,7 +20,7 @@ A dismissible alert/message component with color themes and slide transition.
 
 ```svelte
 <script lang="ts">
-  import { DismissibleMessage } from 'stuic';
+  import { DismissibleMessage } from '@marianmeres/stuic';
 
   let message = $state('This is an important notice.');
 </script>
@@ -33,27 +31,41 @@ A dismissible alert/message component with color themes and slide transition.
 />
 ```
 
-### With Theme Colors
+### With Semantic Intents
 
 ```svelte
 <script lang="ts">
-  import { DismissibleMessage } from 'stuic';
+  import { DismissibleMessage } from '@marianmeres/stuic';
 
   let error = $state('Something went wrong!');
   let success = $state('Operation completed successfully.');
 </script>
 
+<!-- Error/destructive message -->
 <DismissibleMessage
   message={error}
-  theme="red"
+  intent="destructive"
   onDismiss={() => error = ''}
 />
 
+<!-- Success message -->
 <DismissibleMessage
   message={success}
-  theme="green"
+  intent="success"
   onDismiss={() => success = ''}
 />
+
+<!-- Warning message -->
+<DismissibleMessage
+  message="Please review your changes"
+  intent="warning"
+/>
+
+<!-- Info message -->
+<DismissibleMessage
+  message="New features are available"
+  intent="info"
+/>
 ```
 
 ### Non-Dismissible
@@ -61,7 +73,7 @@ A dismissible alert/message component with color themes and slide transition.
 ```svelte
 <DismissibleMessage
   message="This message cannot be dismissed."
-  theme="blue"
+  intent="info"
   onDismiss={false}
 />
 ```
@@ -84,8 +96,78 @@ A dismissible alert/message component with color themes and slide transition.
 {#if error}
   <DismissibleMessage
     message={error}
-    theme="red"
+    intent="destructive"
     onDismiss={() => error = null}
   />
 {/if}
 ```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dismissible-message-radius` | `var(--radius-md)` | Border radius |
+| `--stuic-dismissible-message-padding-x` | `calc(var(--spacing) * 4)` | Horizontal padding |
+| `--stuic-dismissible-message-padding-y` | `calc(var(--spacing) * 3)` | Vertical padding |
+| `--stuic-dismissible-message-border-width` | `1px` | Border width |
+| `--stuic-dismissible-message-transition` | `150ms` | Color transition duration |
+
+### Customization Examples
+
+```css
+/* Global override */
+:root {
+  --stuic-dismissible-message-radius: var(--radius-lg);
+  --stuic-dismissible-message-padding-x: calc(var(--spacing) * 6);
+}
+```
+
+```svelte
+<!-- Inline override -->
+<DismissibleMessage
+  message="Custom styled message"
+  style="--stuic-dismissible-message-radius: 9999px;"
+/>
+```
+
+### Intent Colors
+
+Intent colors are derived from the global STUIC design tokens:
+
+| Intent | Token Used |
+|--------|------------|
+| `destructive` | `--stuic-color-destructive` |
+| `warning` | `--stuic-color-warning` |
+| `success` | `--stuic-color-success` |
+| `info` | `--stuic-color-info` |
+
+Customize these in your theme file to change all components at once.
+
+## Data Attributes
+
+The component uses data attributes for CSS targeting:
+
+- `data-intent` - The intent value (when set)
+
+```css
+/* Custom styling for specific intent */
+.stuic-dismissible-message[data-intent="destructive"] {
+  font-weight: bold;
+}
+```
+
+## Migration from v2
+
+The `theme` prop has been replaced with `intent`:
+
+| Old (v2) | New (v3) |
+|----------|----------|
+| `theme="red"` | `intent="destructive"` |
+| `theme="orange"` | `intent="warning"` |
+| `theme="green"` | `intent="success"` |
+| `theme="blue"` | `intent="info"` |
+| No theme | No intent (default) |
+
+The `classDismiss` and `classX` props have been removed.

package/dist/components/DismissibleMessage/index.css

@@ -1,11 +1,131 @@
-/* prettier-ignore */
-@theme inline {
-	--color-dismiss-bg: var(--color-dismiss-bg, var(--color-neutral-200));
-	--color-dismiss-bg-dark: var(--color-dismiss-bg-dark, var(--color-neutral-700));
+/* =============================================================================
+   DISMISSIBLE MESSAGE COMPONENT TOKENS
+   Override globally: :root { --stuic-dismissible-message-radius: 0; }
+   Override locally:  style="--stuic-dismissible-message-radius: 9999px;"
+   ============================================================================= */
 
-	--color-dismiss-text: var(--color-dismiss-text, var(--color-neutral-700));
-	--color-dismiss-text-dark: var(--color-dismiss-text-dark, var(--color-neutral-200));
+:root {
+	--stuic-dismissible-message-radius: var(--radius-md);
+	--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
+	--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
+	--stuic-dismissible-message-border-width: 1px;
+	--stuic-dismissible-message-transition: 150ms;
+}
+
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
+
+	.stuic-dismissible-message {
+		display: flex;
+		align-items: center;
+		border-width: var(--stuic-dismissible-message-border-width);
+		border-style: solid;
+		border-radius: var(--stuic-dismissible-message-radius);
+		transition:
+			background var(--stuic-dismissible-message-transition),
+			border-color var(--stuic-dismissible-message-transition);
+
+		/* Colors via internal vars set by intent */
+		background: var(--_bg);
+		color: var(--_text);
+		border-color: var(--_border);
+	}
+
+	/* Content area */
+	.stuic-dismissible-message > .content {
+		flex: 1;
+		padding: var(--stuic-dismissible-message-padding-y)
+			var(--stuic-dismissible-message-padding-x);
+	}
+
+	/* Icon container (left side) */
+	.stuic-dismissible-message > .icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		padding-left: var(--stuic-dismissible-message-padding-x);
+		color: var(--_text);
+		opacity: 0.85;
+	}
+
+	.stuic-dismissible-message > .icon svg {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	/* Dismiss button container */
+	.stuic-dismissible-message > .dismiss {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: calc(var(--stuic-dismissible-message-padding-y) * 0.75);
+	}
+
+	/* Dismiss button inherits message text color */
+	.stuic-dismissible-message > .dismiss .stuic-button {
+		color: var(--_text);
+	}
+
+	/* =============================================================================
+	   DEFAULT (NO INTENT): NEUTRAL MUTED APPEARANCE
+	   ============================================================================= */
+
+	.stuic-dismissible-message:not([data-intent]) {
+		--_bg: var(--stuic-color-muted);
+		--_text: var(--stuic-color-muted-foreground);
+		--_border: var(--stuic-color-border);
+	}
+
+	/* =============================================================================
+	   INTENT COLOR MAPPING (SOFT STYLE)
+	   Each intent uses a soft/tinted appearance appropriate for messages.
+	   ============================================================================= */
+
+	/* Destructive: error messages */
+	.stuic-dismissible-message[data-intent="destructive"] {
+		--_bg: color-mix(in srgb, var(--stuic-color-destructive) 15%, transparent);
+		/* --_text: var(--stuic-color-destructive); */
+		--_text: color-mix(in srgb, var(--stuic-color-destructive), black 15%);
+		--_border: color-mix(in srgb, var(--stuic-color-destructive) 30%, transparent);
+	}
+
+	/* Warning: caution messages */
+	.stuic-dismissible-message[data-intent="warning"] {
+		--_bg: color-mix(in srgb, var(--stuic-color-warning) 15%, transparent);
+		/* --_text: var(--stuic-color-warning); */
+		--_text: color-mix(in srgb, var(--stuic-color-warning), black 15%);
+		--_border: color-mix(in srgb, var(--stuic-color-warning) 30%, transparent);
+	}
+
+	/* Success: confirmation messages */
+	.stuic-dismissible-message[data-intent="success"] {
+		--_bg: color-mix(in srgb, var(--stuic-color-success) 15%, transparent);
+		/* --_text: var(--stuic-color-success); */
+		--_text: color-mix(in srgb, var(--stuic-color-success), black 15%);
+		--_border: color-mix(in srgb, var(--stuic-color-success) 30%, transparent);
+	}
+
+	/* Info: informational messages */
+	.stuic-dismissible-message[data-intent="info"] {
+		--_bg: color-mix(in srgb, var(--stuic-color-info) 15%, transparent);
+		/* --_text: var(--stuic-color-info); */
+		--_text: color-mix(in srgb, var(--stuic-color-info), black 15%);
+		--_border: color-mix(in srgb, var(--stuic-color-info) 30%, transparent);
+	}
+
+	/* =============================================================================
+	   DARK MODE ADJUSTMENTS
+	   Increase color intensity for better visibility in dark mode.
+	   ============================================================================= */
 
-	--color-dismiss-border: var(--color-dismiss-border, var(--color-neutral-500));
-	--color-dismiss-border-dark: var(--color-dismiss-border-dark, var(--color-neutral-500));
+	.dark .stuic-dismissible-message[data-intent="destructive"],
+	.dark .stuic-dismissible-message[data-intent="warning"],
+	.dark .stuic-dismissible-message[data-intent="success"],
+	.dark .stuic-dismissible-message[data-intent="info"] {
+		--_bg: color-mix(in srgb, var(--_text) 20%, transparent);
+		--_border: color-mix(in srgb, var(--_text) 40%, transparent);
+	}
 }

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

@@ -1 +1 @@
-export { default as DismissibleMessage, type Props as DismissibleMessageProps, } from "./DismissibleMessage.svelte";
+export { default as DismissibleMessage, type Props as DismissibleMessageProps, type MessageIntent as DismissibleMessageIntent, } from "./DismissibleMessage.svelte";

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -205,49 +205,17 @@
 		);
 	}
 
-	export const DROPDOWN_MENU_BASE_CLASSES = `stuic-dropdown-menu relative inline-block`;
-
-	export const DROPDOWN_MENU_TRIGGER_CLASSES = `
-		inline-flex items-center justify-center gap-2
-		px-3 py-2
-		rounded-md border
-		bg-white dark:bg-neutral-800
-		text-neutral-900 dark:text-neutral-100
-		border-neutral-200 dark:border-neutral-700
-		hover:brightness-95 dark:hover:brightness-110
-		cursor-pointer
-		`;
-	// focus-visible:outline-2 focus-visible:outline-offset-2
-
-	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `
-		stuic-dropdown-menu-dropdown
-		bg-white dark:bg-neutral-800
-		text-neutral-900 dark:text-neutral-100
-		border border-neutral-200 dark:border-neutral-700
-		rounded-md shadow-sm
-		p-1
-		overflow-y-auto
-		z-50
-		min-w-48
-	`;
-
-	export const DROPDOWN_MENU_DIVIDER_CLASSES = `
-		h-px my-1
-		bg-neutral-200 dark:bg-neutral-700
-	`;
-
-	export const DROPDOWN_MENU_HEADER_CLASSES = `
-		px-2 py-1.5
-		text-xs font-semibold uppercase tracking-wide
-		text-neutral-500 dark:text-neutral-400
-		select-none
-	`;
-
-	export const DROPDOWN_MENU_BACKDROP_CLASSES = `
-		stuic-dropdown-menu-backdrop
-		fixed inset-0 bg-black/25
-		z-40
-	`;
+	export const DROPDOWN_MENU_BASE_CLASSES = `stuic-dropdown-menu`;
+
+	export const DROPDOWN_MENU_TRIGGER_CLASSES = `stuic-dropdown-menu-trigger`;
+
+	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `stuic-dropdown-menu-dropdown`;
+
+	export const DROPDOWN_MENU_DIVIDER_CLASSES = `stuic-dropdown-menu-divider`;
+
+	export const DROPDOWN_MENU_HEADER_CLASSES = `stuic-dropdown-menu-header`;
+
+	export const DROPDOWN_MENU_BACKDROP_CLASSES = `stuic-dropdown-menu-backdrop`;
 </script>
 
 <script lang="ts">
@@ -261,7 +229,6 @@
 	import { untrack } from "svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
-	import "./index.css";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
 
@@ -659,15 +626,11 @@
 		>
 			<!-- Close button (fallback mode only) -->
 			{#if !isSupported}
-				<div class="sticky top-0 right-0 z-10 flex just pointer-events-none">
+				<div class="sticky top-0 right-0 z-10 flex pointer-events-none">
 					<button
 						type="button"
 						aria-label="Close"
-						class={[
-							"bg-black text-white rounded-md cursor-pointer opacity-60",
-							"absolute right-0 top-0 p-2",
-							"leading-none hover:opacity-100 pointer-events-auto",
-						]}
+						class="stuic-dropdown-menu-close absolute right-0 top-0 pointer-events-auto"
 						onclick={() => {
 							isOpen = false;
 							triggerEl?.focus();
@@ -760,7 +723,7 @@
 						{#if isExpanded}
 							<div
 								class={twMerge(
-									"stuic-dropdown-menu-expandable-content pl-4",
+									"stuic-dropdown-menu-expandable-content",
 									classExpandableContent
 								)}
 								transition:slide={{ duration: transitionDuration }}