@marianmeres/stuic 3.177.0 → 3.179.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -94,7 +94,9 @@
 	<ModalDialog
 		bind:this={modal}
 		preEscapeClose={() => {
-			return isPending ? false : acp?.current.onEscape?.();
+			// `escape()` runs the current dialog's `onEscape` (defaults to `shift`); the
+			// handler owns the close. Refused while the OK handler is still pending.
+			return isPending ? false : acp?.escape();
 		}}
 		preClose={() => !acp.length}
 		noClickOutsideClose

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -78,6 +78,21 @@
 
 	let current = $derived(acp?.current!);
 
+	// The prompt field is bound to the dialog object itself (`current.value`). Svelte's
+	// `bind:value` on the underlying <input> registers an ASYNC "input" listener that
+	// re-reads the binding getter after `await tick()` (to respect validation in
+	// accessors), and `createOnClick` below dispatches a synthetic "input" event on OK.
+	// If the `onOk` worker shifts the stack within that microtask window (e.g.
+	// `Promise.resolve().then(() => acp.shift())`), the deferred read finds `current`
+	// already undefined and a plain `bind:value={current.value}` throws
+	// "Cannot read properties of undefined (reading 'value')" as an unhandled
+	// rejection. So the field binds through these null-safe accessors instead: after
+	// the dialog is gone the read yields undefined and the write is dropped.
+	const getValue = () => current?.value;
+	const setValue = (v: any) => {
+		if (current) current.value = v;
+	};
+
 	// Button config is layered: the dialog object's own value (most specific) wins over
 	// the component level prop - same as CmpButtonOk/Cancel/Custom below.
 
@@ -200,7 +215,7 @@
 					<div class={twMerge("input-box", "mt-3 p-1", classInputBox)}>
 						{#if current?.promptFieldProps?.options?.length}
 							<FieldSelect
-								bind:value={current.value}
+								bind:value={getValue, setValue}
 								bind:input={inputEl}
 								class={twMerge("input", "m-0", classInput)}
 								options={current.promptFieldProps.options}
@@ -210,7 +225,7 @@
 							/>
 						{:else}
 							<FieldInput
-								bind:value={current.value}
+								bind:value={getValue, setValue}
 								bind:input={inputEl}
 								class={twMerge("input", "m-0", classInput)}
 								renderSize="sm"

package/dist/components/AlertConfirmPrompt/README.md

@@ -37,8 +37,38 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 - `alert(options)` - Show an alert dialog
 - `confirm(onOk, options)` - Show a confirm dialog with callback
 - `prompt(onOk, options)` - Show a prompt dialog with input field
-- `shift()` - Remove current dialog from queue
+- `shift()` - Remove current dialog from queue (revealing the next one, if any)
+- `escape()` - Run the current dialog's `onEscape` handler (defaults to `shift`); no-op on an empty queue
 - `reset()` - Clear all dialogs
+- `dump()` - Snapshot of the queue (current dialog first)
+- `current` / `length` - The dialog being shown / number of queued dialogs (reactive)
+
+### Closing a dialog: the handler owns the close
+
+A dialog leaves the queue only through `shift()`. Each of `onOk`, `onCancel` and `onEscape`
+defaults to `shift` when you do not supply it (so a plain `alert()` closes itself), but as
+soon as you pass your own handler, closing is your job: call `acp.shift()` from it when
+done. The stack deliberately does not close for you, so an async handler can validate,
+stage a second step, or keep a failed action's message on screen. The classic mistake is an
+`onOk` that does its work and never shifts: the work happens, the dialog stays, and the user
+clicks OK again.
+
+While the promise returned by the handler is pending, the dialog is in a "pending" state
+(buttons disabled, spinner shown, Escape refused). Return the promise rather than `void`-ing
+it to keep that state for the whole of your work:
+
+```ts
+acp.confirm(
+	async () => {
+		await deleteItem(); // dialog stays up and disabled until this settles
+		acp.shift();
+	},
+	{ title: "Delete?", variant: "warn" }
+);
+```
+
+If all you want is a dialog that closes when the user answers, use the Promise-based
+wrappers (`createAlert`, `createConfirm`, `createPrompt`) below; they shift for you.
 
 ### Dialog Options
 
@@ -87,6 +117,8 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ### Confirm
 
+Supplying `onOk` makes you responsible for closing (see above), hence the `acp.shift()`:
+
 ```svelte
 <script lang="ts">
 	acp.confirm(
@@ -105,6 +137,9 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
 
 ### Prompt
 
+Same rule: `onOk` receives the entered value and owns the close. The shift may happen at
+any time, synchronously or after an `await`:
+
 ```svelte
 <script lang="ts">
 	acp.prompt(

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts

@@ -57,6 +57,23 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
  * Manages a FIFO queue of dialogs, allowing one dialog to be displayed at a time.
  * Provides a modern, customizable replacement for native browser dialogs.
  *
+ * **The handler owns the close.** A dialog is removed from the queue only by
+ * `shift()`. Each of `onOk`, `onCancel` and `onEscape` defaults to `shift` when the
+ * caller does not supply it, so an `alert()` with no callbacks closes itself. As soon
+ * as you pass your own handler, closing becomes your job: call `acp.shift()` when you
+ * are done. The stack does not close for you, so that an async handler can validate,
+ * stage a second step, or keep a failed action's message on screen. (An `onOk` that
+ * runs its work but never shifts is the classic mistake: the work happens, the dialog
+ * stays, and the user clicks OK again.)
+ *
+ * While a handler's returned promise is pending, the rendered dialog is in a "pending"
+ * state (buttons disabled, spinner shown, Escape refused). Return the promise - do not
+ * `void` it - to get that for the duration of your work.
+ *
+ * If all you want is "a dialog that closes when the user answers", use the
+ * Promise-based wrappers {@link createAlert}, {@link createConfirm} and
+ * {@link createPrompt} instead; they shift for you.
+ *
  * @example
  * ```ts
  * const acp = new AlertConfirmPromptStack({
@@ -64,18 +81,24 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
  *   labelCancel: 'Dismiss'
  * });
  *
- * // Simple alert
+ * // Simple alert (no handler given, so OK/Escape default to `shift`)
  * acp.alert({ title: 'Notice', content: 'Operation complete' });
  *
- * // Confirm with callback
+ * // Confirm with callback. Supplying `onOk` makes YOU responsible for closing.
  * acp.confirm(
- *   () => console.log('Confirmed!'),
+ *   async () => {
+ *     await deleteItem(); // dialog is pending (OK disabled) until this settles
+ *     acp.shift();
+ *   },
  *   { title: 'Delete?', content: 'This cannot be undone', variant: 'warn' }
  * );
  *
- * // Prompt for input
+ * // Prompt for input. Same rule: shift when done.
  * acp.prompt(
- *   (value) => console.log('User entered:', value),
+ *   (value) => {
+ *     console.log('User entered:', value);
+ *     acp.shift();
+ *   },
  *   { title: 'Name', content: 'Enter your name', value: 'Default' }
  * );
  * ```
@@ -86,20 +109,38 @@ export declare class AlertConfirmPromptStack {
     constructor(defaults?: Partial<AlertConfirmPromptObj>);
     get length(): number;
     get current(): AlertConfirmPromptObj;
+    /** Removes the current dialog from the queue, revealing the next one (if any). */
     shift: () => AlertConfirmPromptObj | undefined;
+    /** Clears the whole queue. */
     reset: () => void;
+    /**
+     * Runs the current dialog's `onEscape` handler (which defaults to `shift`). Does
+     * nothing on an empty stack. The handler owns the close, exactly as with `onOk`
+     * and `onCancel`, so this does NOT shift on its own: a custom `onEscape` that
+     * does not shift keeps the dialog open, and one that does shift pops exactly one
+     * entry (not the one queued behind it as well).
+     */
     escape: () => void;
+    /** Snapshot of the queue (current dialog first). */
     dump: () => AlertConfirmPromptObj[];
     /**
-     * Main api.
+     * Queues an alert dialog (OK button only). With no `onOk`/`onEscape` given, both
+     * default to `shift`, so a plain alert closes itself. If you supply either, call
+     * `shift()` from it yourself.
      */
     alert: (o?: Partial<AlertConfirmPromptObj> | string) => void;
     /**
-     * Main api.
+     * Queues a confirm dialog (Cancel + OK). `onOk` owns the close: call `acp.shift()`
+     * from it when done (a returned promise keeps the dialog pending until it settles).
+     * `onCancel`/`onEscape` default to `shift`. For a self-closing, Promise-based
+     * confirm use {@link createConfirm}.
      */
     confirm: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
     /**
-     * Main api.
+     * Queues a prompt dialog (input + Cancel + OK). `onOk` receives the entered value
+     * and owns the close: call `acp.shift()` from it when done (a returned promise
+     * keeps the dialog pending until it settles). `onCancel`/`onEscape` default to
+     * `shift`. For a self-closing, Promise-based prompt use {@link createPrompt}.
      */
     prompt: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
 }

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.js

@@ -16,6 +16,23 @@ const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
  * Manages a FIFO queue of dialogs, allowing one dialog to be displayed at a time.
  * Provides a modern, customizable replacement for native browser dialogs.
  *
+ * **The handler owns the close.** A dialog is removed from the queue only by
+ * `shift()`. Each of `onOk`, `onCancel` and `onEscape` defaults to `shift` when the
+ * caller does not supply it, so an `alert()` with no callbacks closes itself. As soon
+ * as you pass your own handler, closing becomes your job: call `acp.shift()` when you
+ * are done. The stack does not close for you, so that an async handler can validate,
+ * stage a second step, or keep a failed action's message on screen. (An `onOk` that
+ * runs its work but never shifts is the classic mistake: the work happens, the dialog
+ * stays, and the user clicks OK again.)
+ *
+ * While a handler's returned promise is pending, the rendered dialog is in a "pending"
+ * state (buttons disabled, spinner shown, Escape refused). Return the promise - do not
+ * `void` it - to get that for the duration of your work.
+ *
+ * If all you want is "a dialog that closes when the user answers", use the
+ * Promise-based wrappers {@link createAlert}, {@link createConfirm} and
+ * {@link createPrompt} instead; they shift for you.
+ *
  * @example
  * ```ts
  * const acp = new AlertConfirmPromptStack({
@@ -23,18 +40,24 @@ const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
  *   labelCancel: 'Dismiss'
  * });
  *
- * // Simple alert
+ * // Simple alert (no handler given, so OK/Escape default to `shift`)
  * acp.alert({ title: 'Notice', content: 'Operation complete' });
  *
- * // Confirm with callback
+ * // Confirm with callback. Supplying `onOk` makes YOU responsible for closing.
  * acp.confirm(
- *   () => console.log('Confirmed!'),
+ *   async () => {
+ *     await deleteItem(); // dialog is pending (OK disabled) until this settles
+ *     acp.shift();
+ *   },
  *   { title: 'Delete?', content: 'This cannot be undone', variant: 'warn' }
  * );
  *
- * // Prompt for input
+ * // Prompt for input. Same rule: shift when done.
  * acp.prompt(
- *   (value) => console.log('User entered:', value),
+ *   (value) => {
+ *     console.log('User entered:', value);
+ *     acp.shift();
+ *   },
  *   { title: 'Name', content: 'Enter your name', value: 'Default' }
  * );
  * ```
@@ -80,19 +103,30 @@ export class AlertConfirmPromptStack {
         o._id = Math.random().toString(36).slice(2);
         this.#stack.push(o);
     };
+    /** Removes the current dialog from the queue, revealing the next one (if any). */
     shift = () => this.#stack.shift();
+    /** Clears the whole queue. */
     reset = () => {
         this.#stack = [];
     };
+    /**
+     * Runs the current dialog's `onEscape` handler (which defaults to `shift`). Does
+     * nothing on an empty stack. The handler owns the close, exactly as with `onOk`
+     * and `onCancel`, so this does NOT shift on its own: a custom `onEscape` that
+     * does not shift keeps the dialog open, and one that does shift pops exactly one
+     * entry (not the one queued behind it as well).
+     */
     escape = () => {
-        this.#stack?.[0]?.onEscape?.();
-        this.shift();
+        return this.#stack[0]?.onEscape?.();
     };
+    /** Snapshot of the queue (current dialog first). */
     dump = () => {
         return [...this.#stack];
     };
     /**
-     * Main api.
+     * Queues an alert dialog (OK button only). With no `onOk`/`onEscape` given, both
+     * default to `shift`, so a plain alert closes itself. If you supply either, call
+     * `shift()` from it yourself.
      */
     alert = (o) => {
         if (typeof o === "string")
@@ -100,13 +134,19 @@ export class AlertConfirmPromptStack {
         this.#push({ ...(o || {}), type: AlertConfirmPromptType.ALERT });
     };
     /**
-     * Main api.
+     * Queues a confirm dialog (Cancel + OK). `onOk` owns the close: call `acp.shift()`
+     * from it when done (a returned promise keeps the dialog pending until it settles).
+     * `onCancel`/`onEscape` default to `shift`. For a self-closing, Promise-based
+     * confirm use {@link createConfirm}.
      */
     confirm = (onOk, o) => {
         this.#push({ onOk, value: false, ...o, type: AlertConfirmPromptType.CONFIRM });
     };
     /**
-     * Main api.
+     * Queues a prompt dialog (input + Cancel + OK). `onOk` receives the entered value
+     * and owns the close: call `acp.shift()` from it when done (a returned promise
+     * keeps the dialog pending until it settles). `onCancel`/`onEscape` default to
+     * `shift`. For a self-closing, Promise-based prompt use {@link createPrompt}.
      */
     prompt = (onOk, o) => {
         this.#push({ onOk, value: "", ...o, type: AlertConfirmPromptType.PROMPT });

package/dist/components/ContactUsForm/ContactUsForm.svelte

@@ -60,6 +60,29 @@
 		/** Minimum message length. 0 (default) disables the check. */
 		messageMinLength?: number;
 
+		/**
+		 * Names of fields rendered **read-only**: the value is visible and still
+		 * reaches `onSubmit`, but the user cannot change it. The typical case is a
+		 * signed-in visitor whose name/email the server already knows — prefill
+		 * them through `formData` and list them here.
+		 *
+		 * Accepts the built-in names (`"name"`, `"email"`, `"phone"`, `"subject"`,
+		 * `"company"`, `"message"`) and any `extraFields` name. Unknown names are
+		 * ignored. Listing a field does NOT show it — pair with the matching
+		 * `show*` toggle.
+		 *
+		 * Read-only is not the same as `disabled`: the value keeps full contrast
+		 * and stays focusable/selectable/copyable. A read-only Subject rendered
+		 * from `subjectValues` falls back to a read-only text input, because
+		 * `<select>` has no read-only counterpart.
+		 *
+		 * Prefill whatever you lock: a read-only control is barred from *native*
+		 * constraint validation, so an empty required one is a dead end for the
+		 * user. The form still reports it (see `validateContactForm`), it just
+		 * cannot be fixed in the UI.
+		 */
+		readonlyFields?: string[];
+
 		/**
 		 * Declarative extra fields rendered as FieldInput entries.
 		 * Values bind into `formData.extra[name]`.
@@ -153,6 +176,7 @@
 		showCompany = false,
 		requireCompany = false,
 		messageMinLength = 0,
+		readonlyFields,
 		extraFields = [],
 		extraFieldsSlot,
 		useHoneypot = true,
@@ -184,12 +208,24 @@
 	let topFields = $derived(extraFields.filter((f) => f.position === "top"));
 	let bottomFields = $derived(extraFields.filter((f) => f.position !== "top"));
 
+	let readonlySet = $derived(new Set(readonlyFields ?? []));
+	function isReadonly(field: string): boolean {
+		return readonlySet.has(field);
+	}
+
 	// Subject: render a <select> when subjectValues is non-empty (which also shows
 	// the field regardless of showSubject); otherwise a free-text input gated by
 	// showSubject. The select gets a prepended blank "prompt" option so the initial
 	// empty subject isn't silently auto-selected to the first real value.
-	let subjectAsSelect = $derived((subjectValues?.length ?? 0) > 0);
-	let subjectShown = $derived(showSubject || subjectAsSelect);
+	//
+	// A read-only subject downgrades to a read-only text input — <select> has no
+	// readonly counterpart, and `disabled` would grey out the very value we mean
+	// to show. Hence `subjectShown` keys off *having* values rather than off
+	// rendering a select: sharing one flag would have made `subjectValues` +
+	// readonly hide the field outright.
+	let subjectHasValues = $derived((subjectValues?.length ?? 0) > 0);
+	let subjectAsSelect = $derived(subjectHasValues && !isReadonly("subject"));
+	let subjectShown = $derived(showSubject || subjectHasValues);
 	let subjectOptions = $derived([
 		{ label: t("contact_form.subject_select_prompt"), value: "" },
 		...(subjectValues ?? []).map((v) => ({ label: v, value: v })),
@@ -280,6 +316,21 @@
 		},
 	});
 
+	// Single source for `validateContactForm`'s options — the submit path and
+	// `readonlyMissing()` below must agree on which fields are shown/required.
+	let validationOptions = $derived({
+		showName,
+		requireName,
+		showPhone,
+		requirePhone,
+		showSubject: subjectShown,
+		requireSubject,
+		showCompany,
+		requireCompany,
+		messageMinLength,
+		extraFields,
+	});
+
 	// Merge internal + external errors; external takes precedence per field.
 	let allErrors = $derived.by(() => {
 		const map = new Map<string, string>();
@@ -289,7 +340,22 @@
 	});
 
 	function fieldError(field: string): string | undefined {
-		return allErrors.find((e) => e.field === field)?.message;
+		return allErrors.find((e) => e.field === field)?.message ?? readonlyMissing(field);
+	}
+
+	// A read-only control is barred from *native* constraint validation:
+	// `validity.valueMissing` stays false however empty it is (the spec requires
+	// the control to be "mutable"). Without this the field walk behind the
+	// exported `validate()` would green-light an empty read-only required field,
+	// and the consumer would post it. Run the form's own validator for that one
+	// field instead — same rules, same messages, no duplicated logic. The
+	// built-in submit path reaches `validateContactForm` anyway; this only
+	// closes the pre-submit / imperative window, and only for read-only fields.
+	function readonlyMissing(field: string): string | undefined {
+		if (!readonlySet.size || !isReadonly(field)) return;
+		return validateContactForm(formData, t, validationOptions).find(
+			(e) => e.field === field
+		)?.message;
 	}
 
 	function extraValue(cfg: ContactFieldConfig): string {
@@ -321,18 +387,7 @@
 	}
 
 	function handleSubmitValid() {
-		const validationErrors = validateContactForm(formData, t, {
-			showName,
-			requireName,
-			showPhone,
-			requirePhone,
-			showSubject: subjectShown,
-			requireSubject,
-			showCompany,
-			requireCompany,
-			messageMinLength,
-			extraFields,
-		});
+		const validationErrors = validateContactForm(formData, t, validationOptions);
 		internalErrors = validationErrors;
 
 		// Report-only on bot signals: we still submit when field validation passes
@@ -452,6 +507,7 @@
 			placeholder={cfg.placeholder}
 			autocomplete={cfg.autocomplete}
 			required={cfg.required}
+			readonly={isReadonly(cfg.name)}
 			name={`contact-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
 			validate={{
@@ -481,6 +537,7 @@
 			placeholder={t("contact_form.name_placeholder")}
 			autocomplete="name"
 			required={requireName}
+			readonly={isReadonly("name")}
 			name="contact-name"
 			labelLeftBreakpoint={0}
 			validate={{
@@ -501,6 +558,7 @@
 		placeholder={t("contact_form.email_placeholder")}
 		autocomplete="email"
 		required
+		readonly={isReadonly("email")}
 		name="contact-email"
 		labelLeftBreakpoint={0}
 		validate={{
@@ -521,6 +579,7 @@
 			placeholder={t("contact_form.phone_placeholder")}
 			autocomplete="tel"
 			required={requirePhone}
+			readonly={isReadonly("phone")}
 			name="contact-phone"
 			labelLeftBreakpoint={0}
 			validate={{
@@ -542,6 +601,7 @@
 			placeholder={t("contact_form.company_placeholder")}
 			autocomplete="organization"
 			required={requireCompany}
+			readonly={isReadonly("company")}
 			name="contact-company"
 			labelLeftBreakpoint={0}
 			validate={{
@@ -579,6 +639,7 @@
 				type="text"
 				placeholder={t("contact_form.subject_placeholder")}
 				required={requireSubject}
+				readonly={isReadonly("subject")}
 				name="contact-subject"
 				labelLeftBreakpoint={0}
 				validate={{
@@ -598,6 +659,7 @@
 		label={t("contact_form.message_label")}
 		placeholder={t("contact_form.message_placeholder")}
 		required
+		readonly={isReadonly("message")}
 		name="contact-message"
 		labelLeftBreakpoint={0}
 		validate={{
@@ -619,6 +681,7 @@
 			placeholder={cfg.placeholder}
 			autocomplete={cfg.autocomplete}
 			required={cfg.required}
+			readonly={isReadonly(cfg.name)}
 			name={`contact-extra-${cfg.name}`}
 			labelLeftBreakpoint={0}
 			validate={{

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

@@ -47,6 +47,28 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
     requireCompany?: boolean;
     /** Minimum message length. 0 (default) disables the check. */
     messageMinLength?: number;
+    /**
+     * Names of fields rendered **read-only**: the value is visible and still
+     * reaches `onSubmit`, but the user cannot change it. The typical case is a
+     * signed-in visitor whose name/email the server already knows — prefill
+     * them through `formData` and list them here.
+     *
+     * Accepts the built-in names (`"name"`, `"email"`, `"phone"`, `"subject"`,
+     * `"company"`, `"message"`) and any `extraFields` name. Unknown names are
+     * ignored. Listing a field does NOT show it — pair with the matching
+     * `show*` toggle.
+     *
+     * Read-only is not the same as `disabled`: the value keeps full contrast
+     * and stays focusable/selectable/copyable. A read-only Subject rendered
+     * from `subjectValues` falls back to a read-only text input, because
+     * `<select>` has no read-only counterpart.
+     *
+     * Prefill whatever you lock: a read-only control is barred from *native*
+     * constraint validation, so an empty required one is a dead end for the
+     * user. The form still reports it (see `validateContactForm`), it just
+     * cannot be fixed in the UI.
+     */
+    readonlyFields?: string[];
     /**
      * Declarative extra fields rendered as FieldInput entries.
      * Values bind into `formData.extra[name]`.

package/dist/components/ContactUsForm/README.md

@@ -75,6 +75,7 @@ interface ContactFieldConfig {
 | `showCompany`        | `boolean`                                                    | `false`  | Render the Company field.                                                                                           |
 | `requireCompany`     | `boolean`                                                    | `false`  | Require Company (only applies when shown).                                                                          |
 | `messageMinLength`   | `number`                                                     | `0`      | Minimum message length. `0` disables the check.                                                                     |
+| `readonlyFields`     | `string[]`                                                   | -        | Field names rendered read-only — prefilled, visible, submitted, not editable (see below).                           |
 | `extraFields`        | `ContactFieldConfig[]`                                       | `[]`     | Declarative extra fields, positioned top or bottom.                                                                 |
 | `extraFieldsSlot`    | `Snippet<[{ formData, fieldError }]>`                        | -        | Escape hatch for non-FieldInput extras (consent checkbox, captcha widget).                                          |
 | `useHoneypot`        | `boolean`                                                    | `true`   | Render the hidden honeypot trap.                                                                                    |
@@ -182,6 +183,54 @@ automatically; the bound value is still the chosen string in `formData.subject`)
 </ContactUsForm>
 ```
 
+### Prefilled, read-only fields (signed-in visitor)
+
+When the server already knows who is writing, prefill `formData` and list those
+field names in `readonlyFields`. The values stay visible, keep full contrast, are
+selectable/copyable, and still reach `onSubmit` — the user simply cannot change
+them.
+
+```svelte
+<script lang="ts">
+	import { ContactUsForm, createEmptyContactFormData } from "@marianmeres/stuic";
+
+	let { user } = $props();
+
+	let formData = $state({
+		...createEmptyContactFormData(),
+		name: user.name,
+		email: user.email,
+	});
+</script>
+
+<ContactUsForm
+	bind:formData
+	onSubmit={send}
+	showName
+	readonlyFields={["name", "email"]}
+/>
+```
+
+Notes:
+
+- `readonlyFields` does **not** show a field — pair it with the matching `show*` toggle.
+- It accepts the built-in names (`name`, `email`, `phone`, `subject`, `company`,
+  `message`) and any `extraFields` name. Unknown names are ignored.
+- Read-only is **not** `disabled`. `disabled` reads as "unavailable", greys the
+  value out and drops it from the tab order; read-only says "this is your value,
+  it just isn't yours to change here".
+- A read-only Subject falls back to a read-only **text input** even when
+  `subjectValues` is set, because `<select>` has no read-only counterpart and
+  disabling it would grey out the very value you meant to show.
+- **Prefill whatever you lock.** A read-only control is barred from _native_
+  constraint validation, so an empty required one is a dead end for the user.
+  The form still reports it (`validateContactForm` runs on submit, and
+  `validate()` covers the same ground for read-only fields), but nobody can fix
+  it from the UI.
+- Read-only is a **UI** affordance, not a security boundary: anything the browser
+  holds can be edited from devtools. Re-derive the trusted values server-side
+  from the session instead of trusting the posted ones.
+
 ### Declarative extra field
 
 ```svelte

package/dist/components/Input/README.md

@@ -314,6 +314,25 @@ Override globally in `:root` or locally via `style` prop:
 | `--stuic-input-text`         | `--stuic-color-foreground`       | Text color            |
 | `--stuic-input-placeholder`  | `--stuic-color-muted-foreground` | Placeholder color     |
 
+### Readonly Tokens
+
+Any `Field*` control that reaches the DOM with a `readonly` attribute (via the
+`readonly` prop passthrough) gets a muted wrapper — a "shown, but not yours to
+change" treatment. Deliberately **not** the `disabled` treatment: `disabled`
+fades the whole wrap to `opacity: 0.5` and leaves the tab order, while readonly
+keeps full text contrast and stays focusable, selectable and copyable. Applies
+to `<input>` and `<textarea>` only — `<select>` has no readonly counterpart.
+
+| Variable                        | Default                                                                  | Description                      |
+| ------------------------------- | ------------------------------------------------------------------------ | -------------------------------- |
+| `--stuic-input-bg-readonly`     | `--stuic-color-input` mixed 10% toward `--stuic-color-muted-foreground`  | Wrapper background when readonly |
+| `--stuic-input-border-readonly` | `--stuic-input-border` mixed 15% toward `--stuic-color-muted-foreground` | Wrapper border when readonly     |
+
+Both are _mixed off_ the editable values rather than pointing at
+`--stuic-color-muted`: in several themes (stone, for one) `muted` and `input`
+sit ~2% apart, which is no visual cue at all. Mixing toward the muted
+_foreground_ also reverses direction on its own in dark themes.
+
 ### Size Tokens
 
 Each size (sm, md, lg) has corresponding tokens:

package/dist/components/Input/index.css

@@ -24,6 +24,15 @@
 	--stuic-input-text: var(--stuic-color-foreground);
 	--stuic-input-placeholder: color-mix(in oklab, var(--stuic-color-muted-foreground) 75%, transparent);
 
+	/* Readonly: a value shown but not editable. Deliberately NOT the disabled
+	   treatment (opacity 0.5) — the text must stay fully legible. Mixed off the
+	   input bg rather than set to --stuic-color-muted: in several themes (stone,
+	   the demo default) muted and input sit ~2% apart, which is no cue at all.
+	   Mixing toward the muted *foreground* also flips direction on its own in
+	   dark themes, so the field reads as "settled" either way. */
+	--stuic-input-bg-readonly: color-mix(in oklab, var(--stuic-color-muted-foreground) 10%, var(--stuic-color-input));
+	--stuic-input-border-readonly: color-mix(in oklab, var(--stuic-color-muted-foreground) 15%, var(--stuic-input-border));
+
 	/* Size: sm */
 	--stuic-input-padding-x-sm: calc(var(--spacing) * 2.5);
 	--stuic-input-padding-y-sm: calc(var(--spacing) * 2);
@@ -254,6 +263,22 @@
 		cursor: not-allowed;
 	}
 
+	/* Readonly state — "this value is known, you just can't change it".
+	   Scoped to the wrap that directly contains the control (not the whole
+	   .stuic-input) so a nested readonly control can't mute an editable parent.
+	   Unlike disabled it keeps full text contrast and the focus ring: a readonly
+	   control is still focusable, and hiding that would cost keyboard users. */
+	.stuic-input .input-wrap:has(input[readonly]),
+	.stuic-input .input-wrap:has(textarea[readonly]) {
+		background: var(--stuic-input-bg-readonly);
+		border-color: var(--stuic-input-border-readonly);
+	}
+
+	.stuic-input input[readonly],
+	.stuic-input textarea[readonly] {
+		cursor: default;
+	}
+
 	/* Transparent wrapper utility - for components like Switch that don't need wrapper styling */
 	.stuic-input .input-wrap.input-wrap-transparent,
 	.stuic-input.invalid .input-wrap.input-wrap-transparent,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.177.0",
+	"version": "3.179.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -177,7 +177,7 @@
 		"tailwindcss": "^4.3.3",
 		"tsx": "^4.23.13",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.69.0",
+		"typescript-eslint": "^8.70.0",
 		"vite": "^7.3.6",
 		"vitest": "^4.1.11",
 		"vitest-browser-svelte": "^2.2.1"