@marianmeres/stuic 2.65.0 → 3.0.0

package/dist/components/ButtonGroupRadio/index.css

@@ -1,20 +1,158 @@
-/* prettier-ignore */
-@theme inline {
-	--color-button-group-bg: var(--color-button-group-bg, var(--color-white));
-	--color-button-group-bg-dark: var(--color-button-group-bg-dark, var(--color-neutral-600));
+/* ============================================================================
+   BUTTON GROUP RADIO COMPONENT TOKENS
+   Override globally: :root { --stuic-button-group-radius: 0; }
+   Override locally:  <ButtonGroupRadio style="--stuic-button-group-radius: 9999px;">
+   ============================================================================ */
 
-	--color-button-group-text: var(--color-button-group-text, var(--color-black));
-	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-neutral-300));
+:root {
+	/* Structure - reference Tailwind vars where applicable */
+	--stuic-button-group-radius: var(--radius-md);
+	--stuic-button-group-padding: 0.375rem;
+	--stuic-button-group-gap: 0.25rem;
+	--stuic-button-group-border-width: 1px;
+	--stuic-button-group-transition: 150ms;
 
-	--color-button-group-border: var(--color-button-group-border, var(--color-neutral-300));
-	--color-button-group-border-dark: var(--color-button-group-border-dark, var(--color-neutral-800));
+	/* Button sizing - 44px is Apple HIG minimum touch target */
+	--stuic-button-group-button-padding-x: 0.75rem;
+	--stuic-button-group-button-padding-y: 0.5rem;
+	--stuic-button-group-button-min-height: 2.75rem; /* 44px */
 
-    --color-button-group-accent: var(--color-button-group-accent, var(--color-red-600));
-	--color-button-group-accent-dark: var(--color-button-group-accent-dark, var(--color-red-400));
+	/* Focus ring */
+	--stuic-button-group-ring-width: 3px;
+	--stuic-button-group-ring-color: var(--stuic-color-ring);
 
-	--color-button-group-bg-active: var(--color-button-group-bg-active, var(--color-neutral-500));
-	--color-button-group-bg-active-dark: var(--color-button-group-bg-active-dark, var(--color-neutral-500));
+	/* Container colors - theme vars */
+	--stuic-button-group-bg: var(--stuic-color-surface);
+	--stuic-button-group-text: var(--stuic-color-foreground);
+	--stuic-button-group-border: var(--stuic-color-border);
 
-    --color-button-group-text-active: var(--color-button-group-text-active, var(--color-white));
-    --color-button-group-text-active-dark: var(--color-button-group-text-active-dark, var(--color-white));
+	/* Button colors (inactive) */
+	--stuic-button-group-button-bg: transparent;
+	--stuic-button-group-button-text: var(--stuic-color-foreground);
+	--stuic-button-group-button-bg-hover: var(--stuic-color-muted);
+	--stuic-button-group-button-text-hover: var(--stuic-color-foreground);
+
+	/* Button colors (active) */
+	--stuic-button-group-button-bg-active: var(--stuic-color-primary);
+	--stuic-button-group-button-text-active: var(--stuic-color-primary-foreground);
+	--stuic-button-group-button-bg-active-hover: var(--stuic-color-primary-hover);
+	--stuic-button-group-button-text-active-hover: var(--stuic-color-primary-foreground-hover);
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+.stuic-button-group {
+	/* Layout */
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--stuic-button-group-gap);
+	width: 100%;
+
+	/* Box model */
+	padding: var(--stuic-button-group-padding);
+	border-width: var(--stuic-button-group-border-width);
+	border-style: solid;
+	border-radius: var(--stuic-button-group-radius);
+
+	/* Colors */
+	background: var(--stuic-button-group-bg);
+	color: var(--stuic-button-group-text);
+	border-color: var(--stuic-button-group-border);
+}
+
+/* Focus-within state */
+.stuic-button-group:focus-within {
+	outline: var(--stuic-button-group-ring-width) solid var(--stuic-button-group-ring-color);
+	outline-offset: 0;
+}
+
+/* ============================================================================
+   SIZE VARIANTS
+   ============================================================================ */
+
+.stuic-button-group[data-size="sm"] {
+	--stuic-button-group-padding: 0.25rem;
+	--stuic-button-group-gap: 0.125rem;
+	--stuic-button-group-button-padding-x: 0.5rem;
+	--stuic-button-group-button-padding-y: 0.375rem;
+	--stuic-button-group-button-min-height: 2.25rem; /* 36px - still touch-friendly */
+}
+
+.stuic-button-group[data-size="lg"] {
+	--stuic-button-group-padding: 0.5rem;
+	--stuic-button-group-gap: 0.375rem;
+	--stuic-button-group-button-padding-x: 1rem;
+	--stuic-button-group-button-padding-y: 0.625rem;
+	--stuic-button-group-button-min-height: 3rem; /* 48px */
+}
+
+/* ============================================================================
+   BUTTON STYLES
+   ============================================================================ */
+
+.stuic-button-group-button {
+	/* Layout */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+
+	/* Box model - mobile-friendly touch targets */
+	padding: var(--stuic-button-group-button-padding-y) var(--stuic-button-group-button-padding-x);
+	min-height: var(--stuic-button-group-button-min-height);
+	border: none;
+	border-radius: var(--stuic-button-group-radius);
+
+	/* Typography */
+	white-space: nowrap;
+	line-height: 1;
+	text-align: center;
+
+	/* Colors */
+	background: var(--stuic-button-group-button-bg);
+	color: var(--stuic-button-group-button-text);
+
+	/* Interaction - mobile-friendly */
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	touch-action: manipulation;
+
+	/* Transition */
+	transition:
+		background var(--stuic-button-group-transition),
+		color var(--stuic-button-group-transition);
+
+	/* Focus */
+	outline: none;
+}
+
+.stuic-button-group-button:hover:not(:disabled):not([aria-checked="true"]) {
+	background: var(--stuic-button-group-button-bg-hover);
+	color: var(--stuic-button-group-button-text-hover);
+}
+
+.stuic-button-group-button:focus-visible {
+	outline: none; /* Focus handled by container */
+}
+
+/* Active/selected button */
+.stuic-button-group-button[aria-checked="true"] {
+	background: var(--stuic-button-group-button-bg-active);
+	color: var(--stuic-button-group-button-text-active);
+	box-shadow: none;
+}
+
+.stuic-button-group-button[aria-checked="true"]:hover:not(:disabled) {
+	background: var(--stuic-button-group-button-bg-active-hover);
+	color: var(--stuic-button-group-button-text-active-hover);
+}
+
+/* Disabled state */
+.stuic-button-group-button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
 }

package/dist/components/Collapsible/Collapsible.svelte

@@ -23,8 +23,8 @@
 		classContent?: string;
 		/** Toggle button class */
 		classToggle?: string;
-		/** Opacity class for toggle button (default: "opacity-70") */
-		toggleOpacity?: string;
+		/** Inline styles (for CSS variable overrides) */
+		style?: string;
 		/** Bind reference to container element */
 		el?: HTMLDivElement;
 		/** Optional translate function */
@@ -39,8 +39,8 @@
 		i18nSpanWrap: boolean = true
 	) {
 		const m: Record<string, string> = {
-			more: "Show more...",
-			less: "Show less...",
+			more: "More...",
+			less: "Less...",
 		};
 		let out = m[k] ?? fallback ?? k;
 
@@ -58,7 +58,7 @@
 		class: classProp,
 		classContent,
 		classToggle,
-		toggleOpacity = "opacity-75",
+		style,
 		el = $bindable(),
 		t = t_default,
 	}: Props = $props();
@@ -86,6 +86,7 @@
 	bind:this={el}
 	bind:clientWidth={containerWidth}
 	class={twMerge("stuic-collapsible", classProp)}
+	{style}
 >
 	<div class="flex items-end">
 		<div
@@ -98,8 +99,7 @@
 			<button
 				type="button"
 				class={twMerge(
-					toggleOpacity,
-					"hover:opacity-100 cursor-pointer px-2 py-1 -my-1 -mr-2",
+					"stuic-collapsible-toggle cursor-pointer -my-1 -mr-2",
 					classToggle
 				)}
 				onclick={() => (expanded = !expanded)}

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

@@ -17,8 +17,8 @@ export interface Props {
     classContent?: string;
     /** Toggle button class */
     classToggle?: string;
-    /** Opacity class for toggle button (default: "opacity-70") */
-    toggleOpacity?: string;
+    /** Inline styles (for CSS variable overrides) */
+    style?: string;
     /** Bind reference to container element */
     el?: HTMLDivElement;
     /** Optional translate function */

package/dist/components/Collapsible/README.md

@@ -14,8 +14,9 @@ A component that truncates content to a specified number of lines with an expand
 | `class`              | `string`        | -             | Container element class                          |
 | `classContent`       | `string`        | -             | Content wrapper class                            |
 | `classToggle`        | `string`        | -             | Toggle button class                              |
-| `toggleOpacity`      | `string`        | `"opacity-70"`| Opacity class for toggle button                  |
+| `style`              | `string`        | -             | Inline styles (for CSS variable overrides)       |
 | `el`                 | `HTMLDivElement`| -             | Bind reference to container element              |
+| `t`                  | `TranslateFn`   | -             | Optional translate function                      |
 
 ## Usage
 
@@ -74,8 +75,39 @@ A component that truncates content to a specified number of lines with an expand
   class="bg-gray-100 p-4 rounded"
   classContent="text-sm text-gray-600"
   classToggle="text-blue-500 font-bold"
-  toggleOpacity="opacity-100"
 >
   Styled collapsible content.
 </Collapsible>
 ```
+
+### CSS Variable Overrides
+
+```svelte
+<!-- Local override via inline style -->
+<Collapsible style="--stuic-collapsible-toggle-opacity: 1;">
+  Always fully visible toggle button.
+</Collapsible>
+```
+
+## CSS Variables
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-collapsible-toggle-opacity` | `0.7` | Toggle button opacity |
+| `--stuic-collapsible-toggle-opacity-hover` | `1` | Hover opacity |
+| `--stuic-collapsible-toggle-padding-x` | `calc(var(--spacing) * 2)` | Horizontal padding |
+| `--stuic-collapsible-toggle-padding-y` | `0.25rem` | Vertical padding |
+| `--stuic-collapsible-transition` | `150ms` | Transition duration |
+| `--stuic-collapsible-ring-width` | `2px` | Focus ring width |
+| `--stuic-collapsible-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Global Override
+
+```css
+:root {
+  --stuic-collapsible-toggle-opacity: 0.5;
+  --stuic-collapsible-toggle-opacity-hover: 0.8;
+}
+```

package/dist/components/Collapsible/index.css

@@ -0,0 +1,38 @@
+/* ============================================================================
+   COLLAPSIBLE COMPONENT TOKENS
+   Override globally: :root { --stuic-collapsible-toggle-opacity: 0.5; }
+   Override locally:  <Collapsible style="--stuic-collapsible-toggle-opacity: 1;">
+   ============================================================================ */
+
+:root {
+	/* Toggle button styling */
+	--stuic-collapsible-toggle-opacity: 0.7;
+	--stuic-collapsible-toggle-opacity-hover: 1;
+	--stuic-collapsible-toggle-padding-x: calc(var(--spacing) * 2);
+	--stuic-collapsible-toggle-padding-y: calc(var(--spacing) * 1);
+	--stuic-collapsible-transition: 150ms;
+
+	/* Focus ring (uses theme token) */
+	--stuic-collapsible-ring-width: 2px;
+	--stuic-collapsible-ring-color: var(--stuic-color-ring);
+}
+
+/* ============================================================================
+   TOGGLE BUTTON STYLES
+   ============================================================================ */
+
+.stuic-collapsible-toggle {
+	opacity: var(--stuic-collapsible-toggle-opacity);
+	padding: var(--stuic-collapsible-toggle-padding-y)
+		var(--stuic-collapsible-toggle-padding-x);
+	transition: opacity var(--stuic-collapsible-transition);
+}
+
+.stuic-collapsible-toggle:hover {
+	opacity: var(--stuic-collapsible-toggle-opacity-hover);
+}
+
+.stuic-collapsible-toggle:focus-visible {
+	outline: var(--stuic-collapsible-ring-width) solid var(--stuic-collapsible-ring-color);
+	outline-offset: 2px;
+}

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -62,6 +62,7 @@
 </script>
 
 <script lang="ts">
+	import Button from "../Button/Button.svelte";
 	import "./index.css";
 
 	const clog = createClog("CommandMenu");
@@ -251,8 +252,8 @@
 				placeholder={searchPlaceholder ?? t("search_placeholder")}
 				classInputBoxWrap={twMerge(
 					// always look like focused
-					`border-primary border-input-accent dark:border-input-accent-dark`,
-					`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
+					`border-primary border-(--stuic-input-accent)`,
+					`ring-(--stuic-input-accent)/20 ring-4`
 				)}
 				onkeydown={(e) => {
 					if (e.key === "Enter") {
@@ -262,25 +263,22 @@
 				}}
 			>
 				{#snippet inputBefore()}
-					<div class="flex flex-col items-center justify-center pl-3 opacity-75">
+					<div class="flex flex-col items-center justify-center pl-3 stuic-command-menu-muted">
 						{@html iconSearch({ size: 19, strokeWidth: 3 })}
 					</div>
 				{/snippet}
 				{#snippet inputAfter()}
-					<div class="flex pl-2 items-center justify-center opacity-50">
+					<div class="flex pl-2 items-center justify-center stuic-command-menu-placeholder">
 						{#if isFetching}
 							<Spinner class="w-4" />
 						{/if}
 					</div>
 					<div class="flex items-center justify-center">
-						<button
+						<Button
+							x
+							variant="ghost"
+							roundedFull
 							type="button"
-							class={twMerge(
-								"rounded m-1 opacity-75",
-								"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
-								"focus-visible:opacity-100 focus-visible:outline-0",
-								"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
-							)}
 							onclick={(e) => {
 								e.preventDefault();
 								if (!`${q || ""}`.trim()) {
@@ -289,9 +287,7 @@
 								q = "";
 								input?.focus();
 							}}
-						>
-							<X class="m-2 size-6" />
-						</button>
+						/>
 					</div>
 				{/snippet}
 				{#snippet inputBelow()}
@@ -304,10 +300,9 @@
 						<div
 							class={twMerge(
 								"stuic-command-menu-options",
-								"options block space-y-1 p-1",
+								"block space-y-1 p-1",
 								"overflow-y-auto overflow-x-hidden mb-1",
-								"border-t border-black/20",
-								"max-h-60"
+								"border-t"
 							)}
 							bind:this={optionsBox}
 							tabindex="-1"
@@ -320,10 +315,7 @@
 								<div class="p-1">
 									{#if _optgroup}
 										<div
-											class={[
-												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
-												"text-neutral-500 dark:text-neutral-400",
-											]}
+											class="stuic-command-menu-group-header mb-1 p-1 font-semibold uppercase tracking-wide"
 										>
 											{_optgroup}
 										</div>
@@ -369,9 +361,6 @@
 </ModalDialog>
 
 <style>
-	.options {
-		scrollbar-width: thin;
-	}
 	.sr-only {
 		position: absolute;
 		width: 1px;

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,46 @@
-/* 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);
+}
+
+/* =============================================================================
+   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,95 @@
 <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,15 +1,16 @@
-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, {}, "">;