@marianmeres/stuic 3.175.0 → 3.177.0

package/dist/components/DataTable/DataTable.svelte

@@ -237,7 +237,7 @@
 	import Button from "../Button/Button.svelte";
 	import EmptyState from "../EmptyState/EmptyState.svelte";
 	import Pagination from "../Pagination/Pagination.svelte";
-	import Thc, { isTHCNotEmpty, getTHCStringContent } from "../Thc/Thc.svelte";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
 
 	let {
 		columns,
@@ -746,7 +746,7 @@
 							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
 								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
 									{#if isTHCNotEmpty(col.label)}
-										{getTHCStringContent(col.label) || col.key}
+										<Thc thc={col.label!} />
 									{:else}
 										{col.key}
 									{/if}

package/dist/components/DescriptionList/DescriptionList.svelte

@@ -159,14 +159,6 @@
 		...rest
 	}: Props = $props();
 
-	// `isTHCNotEmpty` only knows string/text/html/component — a snippet (bare or
-	// `{ snippet }`) is renderable content it reports as empty, which would silently
-	// drop a snippet description. Widen the test here.
-	const _hasContent = (thc: THC | undefined | null): boolean =>
-		typeof thc === "function" ||
-		!!(thc && typeof thc === "object" && "snippet" in thc) ||
-		isTHCNotEmpty(thc);
-
 	/** Emptiness of a VALUE is deliberately not `isTHCNotEmpty`: `0` is a value, not empty. */
 	const _isEmptyValue = (v: THC | number | undefined | null): boolean =>
 		v === undefined || v === null || v === "";
@@ -257,7 +249,7 @@
 								<Thc thc={_value(item)} />
 							{/if}
 						</dd>
-						{#if _hasContent(item.description)}
+						{#if isTHCNotEmpty(item.description)}
 							<dd class={_classDescription(item)}>
 								<Thc thc={item.description!} />
 							</dd>

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -7,13 +7,21 @@
 		class?: string;
 		classContent?: string;
 		classIcon?: string;
+		/**
+		 * Message content. Any THC form — a string, `{ text }`, `{ html }`, `{ component }`,
+		 * `{ snippet }` or a bare snippet — is handed to `Thc` as-is; an `Error` is rendered
+		 * as `String(error)`. Empty/nullish renders nothing.
+		 */
 		message: THC | Error | undefined | null;
 		intent?: MessageIntent;
+		/** Render a string or `{ text }` message via `{@html}` (snippets/components ignore it). */
 		forceAsHtml?: boolean;
 		duration?: number;
 		onDismiss?: (() => void) | null | false;
 		withIcon?: boolean;
 		iconFn?: (() => string) | false;
+		/** Accessible name (`aria-label` + `title`) of the built-in dismiss button. */
+		dismissLabel?: string;
 	}
 </script>
 
@@ -21,7 +29,7 @@
 	import { untrack } from "svelte";
 	import { slide } from "svelte/transition";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import Thc, { getTHCStringContent, isTHCNotEmpty } from "../Thc/Thc.svelte";
 	import Button from "../Button/Button.svelte";
 	import {
 		iconAlertWarning,
@@ -48,22 +56,36 @@
 		onDismiss,
 		withIcon,
 		iconFn,
+		dismissLabel = "Dismiss",
 	}: Props = $props();
 
+	// Only the non-THC member of the union needs coercing. Every THC form is passed to
+	// `Thc` intact — `String()`-ing the whole union used to flatten the object forms to
+	// "[object Object]" and a snippet to its source text.
+	let _message: THC = $derived(
+		message instanceof Error ? String(message) : (message ?? "")
+	);
+
 	// Track dismissal in local state instead of mutating the (non-bindable) `message`
 	// prop. Mutating a destructured prop var creates a local shadow that Svelte 5
 	// won't always overwrite when the parent re-passes the same value — so a user
 	// who dismissed an error would never see the SAME error message again, even
 	// after the parent re-set it. Keeping `_dismissed` separate sidesteps that and
 	// makes the dismiss state reset cleanly whenever the message changes.
-	let _message = $derived(message ? String(message) : "");
 	let _dismissed = $state(false);
 	let _show = $derived(isTHCNotEmpty(_message) && !_dismissed);
 
 	// Reset the dismissed flag whenever the message changes — a new (or re-set)
 	// message from the parent should re-show, even if the user previously dismissed.
+	//
+	// Keyed on the string content where there is one (string, Error, `{ text }`,
+	// `{ html }`), so an inline object literal — a new object on every parent render —
+	// does not re-show a dismissed message on unrelated state changes. Component and
+	// snippet forms have no string content and fall back to identity: a re-created
+	// snippet is a message rebuilt from new data and re-shows.
+	let _resetKey = $derived(getTHCStringContent(_message) || _message);
 	$effect(() => {
-		void _message;
+		void _resetKey;
 		untrack(() => {
 			if (_dismissed) _dismissed = false;
 		});
@@ -110,6 +132,8 @@
 					roundedFull
 					size="sm"
 					type="button"
+					title={dismissLabel}
+					aria-label={dismissLabel}
 					onclick={() => _onDismiss()}
 				/>
 			</div>

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

@@ -4,13 +4,21 @@ export interface Props {
     class?: string;
     classContent?: string;
     classIcon?: string;
+    /**
+     * Message content. Any THC form — a string, `{ text }`, `{ html }`, `{ component }`,
+     * `{ snippet }` or a bare snippet — is handed to `Thc` as-is; an `Error` is rendered
+     * as `String(error)`. Empty/nullish renders nothing.
+     */
     message: THC | Error | undefined | null;
     intent?: MessageIntent;
+    /** Render a string or `{ text }` message via `{@html}` (snippets/components ignore it). */
     forceAsHtml?: boolean;
     duration?: number;
     onDismiss?: (() => void) | null | false;
     withIcon?: boolean;
     iconFn?: (() => string) | false;
+    /** Accessible name (`aria-label` + `title`) of the built-in dismiss button. */
+    dismissLabel?: string;
 }
 declare const DismissibleMessage: import("svelte").Component<Props, {}, "">;
 type DismissibleMessage = ReturnType<typeof DismissibleMessage>;

package/dist/components/DismissibleMessage/README.md

@@ -4,15 +4,29 @@ 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)    |
-| `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                               |
+| Prop           | Type                                                | Default     | Description                                                                                                                                                           |
+| -------------- | --------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `message`      | `THC \| Error \| null \| undefined`                 | -           | Message content: any [THC](../Thc/README.md) form (string, `{ text }`, `{ html }`, `{ component }`, `{ snippet }`, bare snippet) or an `Error`. Empty renders nothing |
+| `intent`       | `"destructive" \| "warning" \| "success" \| "info"` | -           | Semantic color intent                                                                                                                                                 |
+| `forceAsHtml`  | `boolean`                                           | `true`      | Render a string or `{ text }` message via `{@html}`; snippets and components are unaffected                                                                           |
+| `duration`     | `number`                                            | `150`       | Slide transition duration (ms)                                                                                                                                        |
+| `onDismiss`    | `(() => void) \| null \| false`                     | -           | Dismiss callback (set to `false` to hide X button)                                                                                                                    |
+| `dismissLabel` | `string`                                            | `"Dismiss"` | Accessible name (`aria-label` + `title`) of the built-in dismiss button                                                                                               |
+| `withIcon`     | `boolean`                                           | -           | Show the default icon for the current `intent`                                                                                                                        |
+| `iconFn`       | `(() => string) \| false`                           | -           | Custom icon (returns an SVG string); `false` hides the icon                                                                                                           |
+| `class`        | `string`                                            | -           | CSS for container                                                                                                                                                     |
+| `classContent` | `string`                                            | -           | CSS for content area                                                                                                                                                  |
+| `classIcon`    | `string`                                            | -           | CSS for icon area                                                                                                                                                     |
+
+`message` is a THC, so anything `Thc` renders works: a string, `{ text }`, `{ html }`,
+`{ component, props }`, `{ snippet }` or a bare snippet. An `Error` is rendered as
+`String(error)` (i.e. `Error: <message>`).
+
+Dismissing hides the message locally; the dismissed state resets when the message changes.
+For string, `{ text }`, `{ html }` and `Error` messages "changes" means different text — an
+inline `{ text: t("saved") }` literal re-created on every parent render does **not** re-show a
+dismissed message. Snippet and component messages have no text to compare, so they are keyed
+on identity: a re-created snippet re-shows.
 
 ## Usage
 
@@ -51,6 +65,58 @@ A dismissible alert/message component with semantic intents and slide transition
 <DismissibleMessage message="New features are available" intent="info" />
 ```
 
+### Snippet Content (with an action button)
+
+Any THC form works as the message, so a banner that needs an action inside the alert is a
+snippet — no need to re-implement the alert markup:
+
+```svelte
+<script lang="ts">
+	import { Button, DismissibleMessage } from "@marianmeres/stuic";
+
+	let sending = $state(false);
+
+	async function resend() {
+		sending = true;
+		try {
+			await api.resendVerificationEmail();
+		} finally {
+			sending = false;
+		}
+	}
+</script>
+
+{#snippet body()}
+	<span class="flex-1">Your email address is not verified.</span>
+	<Button size="sm" variant="outline" disabled={sending} onclick={resend}>Resend</Button>
+{/snippet}
+
+<DismissibleMessage
+	message={body}
+	intent="warning"
+	withIcon
+	classContent="flex flex-wrap items-center gap-x-4 gap-y-2"
+	dismissLabel="Dismiss"
+/>
+```
+
+### Other THC Forms
+
+```svelte
+<!-- explicit text (rendered via {@html} under the default forceAsHtml — pass
+     forceAsHtml={false} to escape it) -->
+<DismissibleMessage message={{ text: "Operation completed" }} intent="success" />
+
+<!-- html -->
+<DismissibleMessage message={{ html: "<b>Saved.</b> You can close this tab." }} />
+
+<!-- component -->
+<DismissibleMessage
+	message={{ component: QuotaWarning, props: { used: 95 } }}
+	intent="warning"
+/>
+```
+
 ### Non-Dismissible
 
 ```svelte

package/dist/components/Input/FieldAssets.svelte

@@ -387,7 +387,7 @@
 	// aria-live announcement text for reorder actions
 	let liveAnnouncement = $state("");
 	let parentHiddenInputEl: HTMLInputElement | undefined = $state();
-	let hasLabel = $derived(isTHCNotEmpty(label) || typeof label === "function");
+	let hasLabel = $derived(isTHCNotEmpty(label));
 	let inputEl = $state<HTMLInputElement>()!;
 	// Outer wrapper for scrollIntoView and focus targeting.
 	let wrapEl: HTMLDivElement | undefined = $state();

package/dist/components/Input/FieldCheckbox.svelte

@@ -151,10 +151,11 @@
 					classLabel
 				)}
 			>
-				{#if isTHCNotEmpty(label)}
-					<Thc thc={label as THC} forceAsHtml />
-				{:else}
+				<!-- a snippet label first: it takes `{ id }`, which `Thc` cannot pass -->
+				{#if typeof label === "function"}
 					{@render (label as SnippetWithId)({ id })}
+				{:else if isTHCNotEmpty(label)}
+					<Thc thc={label as THC} forceAsHtml />
 				{/if}
 			</div>
 		{/if}

package/dist/components/Input/_internal/FieldRadioInternal.svelte

@@ -147,10 +147,11 @@
 					classLabel
 				)}
 			>
-				{#if isTHCNotEmpty(label)}
-					<Thc thc={label as THC} forceAsHtml />
-				{:else}
+				<!-- a snippet label first: it takes `{ id }`, which `Thc` cannot pass -->
+				{#if typeof label === "function"}
 					{@render (label as SnippetWithId)({ id })}
+				{:else if isTHCNotEmpty(label)}
+					<Thc thc={label as THC} forceAsHtml />
 				{/if}
 			</div>
 		{/if}

package/dist/components/Input/_internal/InputWrap.svelte

@@ -82,7 +82,7 @@
 		}
 	});
 
-	let hasLabel = $derived(isTHCNotEmpty(label) || typeof label === "function");
+	let hasLabel = $derived(isTHCNotEmpty(label));
 </script>
 
 {#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}

package/dist/components/Thc/README.md

@@ -26,15 +26,21 @@ type THC =
 
 ### `isTHCNotEmpty(value)`
 
-Checks if a THC value has renderable content.
+Checks if a THC value has renderable content — every form `Thc` itself can render.
 
 ```ts
 isTHCNotEmpty("Hello"); // true
 isTHCNotEmpty({ text: "Hi" }); // true
+isTHCNotEmpty(mySnippet); // true
+isTHCNotEmpty({ snippet }); // true
 isTHCNotEmpty(""); // false
 isTHCNotEmpty(null); // false
 ```
 
+> **Note:** a snippet label that needs an argument (e.g. the `{ id }` the `Field*`
+> components pass) must be rendered directly, not through `Thc` — `Thc` renders a bare
+> snippet with no arguments. Test `typeof value === "function"` first in that case.
+
 ### `getTHCStringContent(value)`
 
 Extracts string content from a THC value.
@@ -108,5 +114,5 @@ Many stuic components accept THC for labels and content:
 	description={{ html: "Enter your <strong>unique</strong> username" }}
 />
 
-<DismissibleMessage message={{ text: "Operation completed" }} theme="green" />
+<DismissibleMessage message={{ text: "Operation completed" }} intent="success" />
 ```

package/dist/components/Thc/Thc.svelte

@@ -70,13 +70,18 @@
 	/**
 	 * Checks if a THC value has renderable content.
 	 *
+	 * Covers every form `Thc` itself can render: non-empty text/html, a component,
+	 * a `{ snippet }`, and a bare snippet function.
+	 *
 	 * @param m - The THC value to check
-	 * @returns `true` if the value contains non-empty text, html, or a component
+	 * @returns `true` if the value contains renderable content
 	 *
 	 * @example
 	 * ```ts
 	 * isTHCNotEmpty("Hello");           // true
 	 * isTHCNotEmpty({ text: "Hi" });    // true
+	 * isTHCNotEmpty(mySnippet);         // true
+	 * isTHCNotEmpty({ snippet });       // true
 	 * isTHCNotEmpty("");                // false
 	 * isTHCNotEmpty(null);              // false
 	 * ```
@@ -87,7 +92,10 @@
 			_is(m) ||
 			_is((m as WithText)?.text) ||
 			_is((m as WithHtml)?.html) ||
-			!!(m as WithComponent)?.component
+			!!(m as WithComponent)?.component ||
+			// a bare snippet is a function; `{ snippet }` is the object form
+			typeof m === "function" ||
+			!!(m as WithSnippet)?.snippet
 		);
 	}
 

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

@@ -58,13 +58,18 @@ export interface Props extends Record<string, any> {
 /**
  * Checks if a THC value has renderable content.
  *
+ * Covers every form `Thc` itself can render: non-empty text/html, a component,
+ * a `{ snippet }`, and a bare snippet function.
+ *
  * @param m - The THC value to check
- * @returns `true` if the value contains non-empty text, html, or a component
+ * @returns `true` if the value contains renderable content
  *
  * @example
  * ```ts
  * isTHCNotEmpty("Hello");           // true
  * isTHCNotEmpty({ text: "Hi" });    // true
+ * isTHCNotEmpty(mySnippet);         // true
+ * isTHCNotEmpty({ snippet });       // true
  * isTHCNotEmpty("");                // false
  * isTHCNotEmpty(null);              // false
  * ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.175.0",
+	"version": "3.177.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -141,8 +141,8 @@
 		"@codemirror/lang-markdown": "^6.5.2",
 		"@codemirror/language": "^6.12.4",
 		"@codemirror/language-data": "^6.5.2",
-		"@codemirror/state": "^6.7.2",
-		"@codemirror/view": "^6.43.10",
+		"@codemirror/state": "^6.7.4",
+		"@codemirror/view": "^6.43.11",
 		"@eslint/js": "^9.39.5",
 		"@marianmeres/random-human-readable": "^1.10.2",
 		"@marianmeres/trend-chart": "^0.5.0",
@@ -168,7 +168,7 @@
 		"dotenv": "^16.6.1",
 		"eslint": "^9.39.5",
 		"globals": "^16.5.0",
-		"playwright": "^1.62.1",
+		"playwright": "^1.63.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.24",
@@ -187,7 +187,7 @@
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/countries": "^1.1.0",
 		"@marianmeres/cron-parser": "^1.0.1",
-		"@marianmeres/design-tokens": "^1.18.0",
+		"@marianmeres/design-tokens": "^1.20.0",
 		"@marianmeres/icons-fns": "^6.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",