@juspay/svelte-ui-components 4.53.1 → 4.54.1

package/dist/ChatComposer/ChatComposer.svelte

@@ -134,15 +134,27 @@
   let slashSelected = $state(0);
   let slashList: HTMLUListElement | null = $state(null);
 
+  // A command opens on the first character of its name: "/model" on "/",
+  // "@support" on "@". Letters, digits and whitespace never trigger, so a
+  // plain word typed into the composer never opens the menu. Read as a whole
+  // code point, so an emoji trigger is never split into half a surrogate pair.
+  function slashTrigger(text: string): string | null {
+    const [first = ''] = text;
+    return /^[^\p{L}\p{N}\s]$/u.test(first) ? first : null;
+  }
+
   const slashMatches = $derived.by((): ChatComposerSlashCommand[] => {
-    if (slashCommands === null || slashDismissed || !/^\/\S*$/.test(value)) {
+    const trigger = slashTrigger(value);
+    if (slashCommands === null || slashDismissed || trigger === null || /\s/.test(value)) {
       return [];
     }
     const query = value.toLowerCase();
     return slashCommands.filter(
       (command) =>
-        command.name.toLowerCase().startsWith(query) ||
-        (query.length > 1 && (command.description ?? '').toLowerCase().includes(query.slice(1)))
+        slashTrigger(command.name) === trigger &&
+        (command.name.toLowerCase().startsWith(query) ||
+          (query.length > trigger.length &&
+            (command.description ?? '').toLowerCase().includes(query.slice(trigger.length))))
     );
   });
   const slashArg = $derived.by(
@@ -150,8 +162,8 @@
       if (slashCommands === null || slashDismissed) {
         return null;
       }
-      const parsed = /^(\/\S+)\s(\S*)$/.exec(value);
-      if (parsed === null) {
+      const parsed = /^(\S+)\s(\S*)$/.exec(value);
+      if (parsed === null || slashTrigger(parsed[1] ?? '') === null) {
         return null;
       }
       const name = (parsed[1] ?? '').toLowerCase();

package/dist/ChatComposer/properties.d.ts

@@ -100,9 +100,11 @@ export type OptionalChatComposerProperties = {
     /** Test id on the status region (see `statusText`). */
     statusTestId?: string;
     /**
-     * Opt-in slash-command menu. With commands passed, typing "/" opens a
-     * listbox of the ones that match (name prefix, or the text after "/" found
-     * in a description); arrows move, Tab completes, Enter picks (Enter on a
+     * Opt-in slash-command menu. With commands passed, typing a command's
+     * trigger -- the first character of its name, "/" for "/model" or "@" for
+     * "@support" -- opens a listbox of the commands sharing that trigger that
+     * match (name prefix, or the text after the trigger found in a
+     * description); arrows move, Tab completes, Enter picks (Enter on a
      * complete match submits), Escape dismisses -- through the shared
      * dismissible stack, so an overlay above the composer closes first. A
      * command with `choices` keeps the menu open past the space for a second
@@ -197,7 +199,11 @@ export type ChatComposerSlashCommandChoice = {
 };
 /** One entry of ChatComposer's slash-command menu. */
 export type ChatComposerSlashCommand = {
-    /** Including the slash, e.g. "/model". */
+    /**
+     * Including its trigger character, e.g. "/model" or "@support". The first
+     * character opens the menu, so it must be punctuation or a symbol: a name
+     * starting with a letter, digit or space is never offered.
+     */
     name: string;
     description?: string;
     /** Shown after the name, e.g. "[model]". */

package/dist/DiffViewer/DiffViewer.svelte

@@ -134,6 +134,14 @@
     transform: rotate(90deg);
   }
 
+  /* The rotate still happens. Only the 120ms slide is removed, so a reduced-motion
+     user gets the open or closed chevron immediately instead of watching it turn. */
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition: none;
+    }
+  }
+
   .counts {
     display: flex;
     gap: var(--diff-small-gap, 8px);

package/dist/utils.js

@@ -444,7 +444,15 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
 export function resolveScrollContainer(node, container) {
     const resolved = typeof container === 'function' ? container() : container;
     if (typeof resolved === 'object') {
-        return resolved !== null && resolved.nodeType === 1 && typeof resolved.style === 'object'
+        // A custom-element Object property can be a JSON lookalike with nodeType 1
+        // and a plain style object. acquireScrollLock calls style.setProperty, so
+        // that lookalike must resolve to null instead of throwing.
+        return resolved !== null &&
+            resolved.nodeType === 1 &&
+            typeof resolved.getRootNode === 'function' &&
+            typeof resolved.style === 'object' &&
+            resolved.style !== null &&
+            typeof resolved.style.setProperty === 'function'
             ? resolved
             : null;
     }

package/dist-wc/index.js

@@ -7114,7 +7114,7 @@ function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
 }
 function resolveScrollContainer(e, t) {
 	let n = typeof t == "function" ? t() : t;
-	return typeof n == "object" ? n !== null && n.nodeType === 1 && typeof n.style == "object" ? n : null : t === void 0 ? e?.ownerDocument.body ?? (typeof document > "u" ? null : document.body) : null;
+	return typeof n == "object" ? n !== null && n.nodeType === 1 && typeof n.getRootNode == "function" && typeof n.style == "object" && n.style !== null && typeof n.style.setProperty == "function" ? n : null : t === void 0 ? e?.ownerDocument.body ?? (typeof document > "u" ? null : document.body) : null;
 }
 function lockBodyScroll() {
 	typeof document < "u" && bodyScrollReleases.push(acquireScrollLock(document.body));
@@ -12468,129 +12468,152 @@ var rest_excludes$80 = new Set([
 };
 function Input_wc(e, t) {
 	push(t, !0), append_styles$1(e, $$css$160);
-	let n = prop(t, "inputAriaLabel", 7), i = prop(t, "inputId", 7), a = prop(t, "inputAutofocus", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$80), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o)), l = (e) => {
+	let n = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.labelSuffix), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "label-suffix", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.labelSuffix ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, i = prop(t, "inputAriaLabel", 7), a = prop(t, "inputId", 7), o = prop(t, "inputAutofocus", 7), s = /* @__PURE__ */ rest_props(t, rest_excludes$80), c = t.$$host, l = /* @__PURE__ */ user_derived(() => dispatchEvents(c, s)), u = (e) => {
 		if (e == null) return null;
 		if (typeof e == "boolean") return e;
 		let t = String(e).trim().toLowerCase();
 		return t === "false" ? !1 : t === "" || t === "true" || t === "spellcheck" ? !0 : null;
-	}, u = t.$$host.querySelector("[slot=\"left-icon\"]") !== null, f = t.$$host.querySelector("[slot=\"right-icon\"]") !== null;
-	var p = {
+	}, f = t.$$host.querySelector("[slot=\"left-icon\"]") !== null, p = t.$$host.querySelector("[slot=\"right-icon\"]") !== null, h = t.$$host.querySelector("[slot=\"label-suffix\"]") !== null;
+	var S = {
 		get inputAriaLabel() {
-			return n();
+			return i();
 		},
 		set inputAriaLabel(e) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get inputId() {
-			return i();
+			return a();
 		},
 		set inputId(e) {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get inputAutofocus() {
-			return a();
+			return o();
 		},
 		set inputAutofocus(e) {
-			a(e), flushSync();
+			o(e), flushSync();
 		}
-	}, h = comment(), S = first_child(h), C = (e) => {
+	}, C = comment(), k = first_child(C), R = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "left-icon", {}, null), append(e, n);
-			}, u = (e) => {
+			}, f = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "right-icon", {}, null), append(e, n);
-			}, f = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, p = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), S = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(f);
+					return get(p);
+				},
+				get labelSuffix() {
+					return get(S);
 				},
-				leftIcon: s,
-				rightIcon: u,
+				leftIcon: c,
+				rightIcon: f,
 				$$slots: {
 					leftIcon: !0,
 					rightIcon: !0
 				}
 			}));
 		}
-	}, k = (e) => {
+	}, G = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "left-icon", {}, null), append(e, n);
-			}, u = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, f = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), p = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(u);
+					return get(f);
+				},
+				get labelSuffix() {
+					return get(p);
 				},
-				leftIcon: s,
+				leftIcon: c,
 				$$slots: { leftIcon: !0 }
 			}));
 		}
-	}, R = (e) => {
+	}, te = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "right-icon", {}, null), append(e, n);
-			}, u = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, f = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), p = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(u);
+					return get(f);
 				},
-				rightIcon: s,
+				get labelSuffix() {
+					return get(p);
+				},
+				rightIcon: c,
 				$$slots: { rightIcon: !0 }
 			}));
 		}
-	}, G = (e) => {
+	}, ne = (e) => {
 		{
-			let s = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			let c = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), f = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(s);
+					return get(c);
+				},
+				get labelSuffix() {
+					return get(f);
 				}
 			}));
 		}
 	};
-	return if_block(S, (e) => {
-		u && f ? e(C) : u ? e(k, 1) : f ? e(R, 2) : e(G, -1);
-	}), append(e, h), pop(p);
+	return if_block(k, (e) => {
+		f && p ? e(R) : f ? e(G, 1) : p ? e(te, 2) : e(ne, -1);
+	}), append(e, C), pop(S);
 }
 customElements.define("sui-input", create_custom_element(Input_wc, {
 	value: {
@@ -12765,7 +12788,11 @@ customElements.define("sui-input", create_custom_element(Input_wc, {
 		attribute: "input-autofocus",
 		type: "Boolean"
 	}
-}, ["left-icon", "right-icon"], [], { mode: "open" }, formAssociated({ disabled: "disable" })));
+}, [
+	"label-suffix",
+	"left-icon",
+	"right-icon"
+], [], { mode: "open" }, formAssociated({ disabled: "disable" })));
 //#endregion
 //#region src/lib/KeyboardInput/KeyboardInput.svelte
 var root$82 = /* @__PURE__ */ from_html("<span class=\"separator svelte-14lwsom\"> </span>"), root_1$76 = /* @__PURE__ */ from_html("<!> <kbd class=\"key svelte-14lwsom\"> </kbd>", 1), root_2$60 = /* @__PURE__ */ from_html("<span></span>"), $$css$159 = {
@@ -13520,9 +13547,70 @@ var rest_excludes$74 = new Set([
 	code: "\n  /* A custom element defaults to `display: inline`, which has no definite\n     width for a percentage to resolve against -- so a component sizing itself\n     with `width: 100%` resolved against the wrong ancestor, and layout depended\n     on the consumer's surrounding markup rather than on the component. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-progress-display, block);}"
 };
 function Progress_wc(e, t) {
-	append_styles$1(e, $$css$150);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$74);
-	Progress(e, spread_props(() => n));
+	push(t, !0), append_styles$1(e, $$css$150);
+	let n = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.leadingLabel), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "leading-label", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.leadingLabel ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, i = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.headerStart), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "header-start", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.headerStart ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, a = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.headerEnd), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "header-end", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.headerEnd ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, o = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.note), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "note", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.note ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, s = /* @__PURE__ */ rest_props(t, rest_excludes$74), c = t.$$host.querySelector("[slot=\"leading-label\"]") !== null, l = t.$$host.querySelector("[slot=\"header-start\"]") !== null, u = t.$$host.querySelector("[slot=\"header-end\"]") !== null, f = t.$$host.querySelector("[slot=\"note\"]") !== null;
+	{
+		let p = /* @__PURE__ */ user_derived(() => c ? n : t.leadingLabel), h = /* @__PURE__ */ user_derived(() => l ? i : t.headerStart), S = /* @__PURE__ */ user_derived(() => u ? a : t.headerEnd), C = /* @__PURE__ */ user_derived(() => f ? o : t.note);
+		Progress(e, spread_props(() => s, {
+			get leadingLabel() {
+				return get(p);
+			},
+			get headerStart() {
+				return get(h);
+			},
+			get headerEnd() {
+				return get(S);
+			},
+			get note() {
+				return get(C);
+			}
+		}));
+	}
+	pop();
 }
 customElements.define("sui-progress", create_custom_element(Progress_wc, {
 	value: {
@@ -13552,7 +13640,12 @@ customElements.define("sui-progress", create_custom_element(Progress_wc, {
 	headerStart: { type: "Object" },
 	headerEnd: { type: "Object" },
 	note: { type: "Object" }
-}, [], [], { mode: "open" }));
+}, [
+	"leading-label",
+	"header-start",
+	"header-end",
+	"note"
+], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Radio/Radio.svelte
 var root$78 = /* @__PURE__ */ from_html("<span> </span>"), root_1$72 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-14bh706\"> </div>"), root_2$57 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-14bh706\"> </div>"), root_3$51 = /* @__PURE__ */ from_html("<label><input type=\"radio\" class=\"radio-input svelte-14bh706\"/> <span><span></span></span> <!></label> <!> <!>", 1), $$css$149 = {
@@ -54780,7 +54873,7 @@ function ChatComposer(e, t) {
 			var i = sibling(n, 2);
 			bind_this(i, (e) => set(mn, e), () => get(mn)), reset(t), template_effect(() => {
 				set_attribute(i, "accept", mt()), i.multiple = ht();
-			}), delegated("change", i, Un), append(e, t);
+			}), delegated("change", i, Wn), append(e, t);
 		};
 		if_block(n, (e) => {
 			get(vn) && e(i);
@@ -54794,9 +54887,9 @@ function ChatComposer(e, t) {
 		}), append(e, t);
 	}, a = (e) => {
 		var t = root_3$6();
-		remove_textarea_child(t), bind_this(t, (e) => set(hn, e), () => get(hn)), effect(() => bind_value(t, s)), action(t, (e, t) => Gn?.(e, t), s), template_effect(() => {
-			set_attribute(t, "data-pw", an() ?? null), set_attribute(t, "placeholder", u()), t.disabled = get(bn), set_attribute(t, "aria-label", on() ?? (u().length > 0 ? u() : "Message")), set_attribute(t, "role", jt() === null ? null : "combobox"), set_attribute(t, "aria-expanded", jt() === null ? null : get(jn)), set_attribute(t, "aria-controls", get(jn) ? Nn : null), set_attribute(t, "aria-autocomplete", jt() === null ? null : "list"), set_attribute(t, "aria-activedescendant", get(Pn)), set_attribute(t, "maxlength", k() > 0 ? k() : null);
-		}), delegated("input", t, Hn), event("focus", t, (e) => Ht()?.(e)), delegated("keydown", t, Vn), event("paste", t, (e) => qt()?.(e)), append(e, t);
+		remove_textarea_child(t), bind_this(t, (e) => set(hn, e), () => get(hn)), effect(() => bind_value(t, s)), action(t, (e, t) => Kn?.(e, t), s), template_effect(() => {
+			set_attribute(t, "data-pw", an() ?? null), set_attribute(t, "placeholder", u()), t.disabled = get(bn), set_attribute(t, "aria-label", on() ?? (u().length > 0 ? u() : "Message")), set_attribute(t, "role", jt() === null ? null : "combobox"), set_attribute(t, "aria-expanded", jt() === null ? null : get(Mn)), set_attribute(t, "aria-controls", get(Mn) ? Pn : null), set_attribute(t, "aria-autocomplete", jt() === null ? null : "list"), set_attribute(t, "aria-activedescendant", get(Fn)), set_attribute(t, "maxlength", k() > 0 ? k() : null);
+		}), delegated("input", t, Un), event("focus", t, (e) => Ht()?.(e)), delegated("keydown", t, Hn), event("paste", t, (e) => qt()?.(e)), append(e, t);
 	}, o = (e) => {
 		var t = root_8$4(), n = first_child(t), i = (e) => {
 			var t = root_4$5();
@@ -54900,7 +54993,7 @@ function ChatComposer(e, t) {
 			{
 				let e = /* @__PURE__ */ user_derived(() => !get(wn));
 				Button(n, {
-					onclick: Bn,
+					onclick: Vn,
 					get disabled() {
 						return get(e);
 					},
@@ -54939,14 +55032,20 @@ function ChatComposer(e, t) {
 		}), append(e, t);
 	}, s = prop(t, "value", 15, ""), c = prop(t, "layout", 7, "row"), l = prop(t, "variant", 7, "default"), u = prop(t, "placeholder", 7, ""), f = prop(t, "disabled", 7, !1), p = prop(t, "textDisabled", 7, null), h = prop(t, "voiceDisabled", 7, null), S = prop(t, "sendDisabled", 7, null), C = prop(t, "submitOnEnter", 7, !0), k = prop(t, "maxLength", 7, 0), R = prop(t, "streaming", 7, !1), G = prop(t, "recording", 7, !1), te = prop(t, "attachments", 31, () => proxy([])), ne = prop(t, "attachmentsPreview", 7), re = prop(t, "richImages", 23, () => []), be = prop(t, "richFiles", 23, () => []), Me = prop(t, "richVideos", 23, () => []), Re = prop(t, "richImageTooltip", 7), Ue = prop(t, "richVideoTooltip", 7), it = prop(t, "richRemoveIcon", 7), at = prop(t, "richFileIcon", 7), ot = prop(t, "onremoverichimage", 7), ct = prop(t, "onremoverichfile", 7), lt = prop(t, "onremoverichvideo", 7), ut = prop(t, "onopenrichimage", 7), dt = prop(t, "onopenrichvideo", 7), ft = prop(t, "onopenrichfile", 7), pt = prop(t, "sendable", 7, null), mt = prop(t, "accept", 7, ""), ht = prop(t, "multiple", 7, !1), gt = prop(t, "sendLabel", 7, "Send message"), _t = prop(t, "stopLabel", 7, "Stop generating"), vt = prop(t, "voiceLabel", 7, "Voice input"), yt = prop(t, "attachLabel", 7, "Attach files"), bt = prop(t, "sendIcon", 7), xt = prop(t, "stopIcon", 7), St = prop(t, "voiceIcon", 7), Ct = prop(t, "attachIcon", 7), wt = prop(t, "actionIcon", 7), Tt = prop(t, "actionLabel", 7, "Voice conversation"), Et = prop(t, "actionText", 7), Dt = prop(t, "leading", 7), Ot = prop(t, "trailing", 7), kt = prop(t, "statusText", 7), At = prop(t, "statusTestId", 7), jt = prop(t, "slashCommands", 7, null), Mt = prop(t, "slashMenuAriaLabel", 7, "slash commands"), Nt = prop(t, "slashMenuHint", 7, "↑↓ move · tab complete · ↵ select · esc dismiss"), Pt = prop(t, "slashMenuClasses", 7), It = prop(t, "slashItemClasses", 7), Lt = prop(t, "slashSelectedItemClasses", 7), Rt = prop(t, "slashItem", 7), zt = prop(t, "onsubmit", 7), Bt = prop(t, "oninput", 7), Ht = prop(t, "oninputfocus", 7), Gt = prop(t, "onkeydown", 7), qt = prop(t, "onpaste", 7), Zt = prop(t, "onstop", 7), Qt = prop(t, "onvoice", 7), $t = prop(t, "oncanceldictation", 7), en = prop(t, "onattach", 7), tn = prop(t, "onattachclick", 7), nn = prop(t, "onaction", 7), rn = prop(t, "testId", 7), an = prop(t, "inputTestId", 7), on = prop(t, "inputAriaLabel", 7), sn = prop(t, "sendTestId", 7), cn = prop(t, "sendSlotTestId", 7), ln = prop(t, "stopTestId", 7), un = prop(t, "voiceTestId", 7), dn = prop(t, "attachTestId", 7), fn = prop(t, "actionTestId", 7), pn = prop(t, "classes", 7), mn = /* @__PURE__ */ state(null), hn = /* @__PURE__ */ state(null), gn = (e) => {
 		get(hn)?.focus(e);
-	}, _n = /* @__PURE__ */ user_derived(() => typeof Qt() == "function"), vn = /* @__PURE__ */ user_derived(() => typeof en() == "function" || typeof tn() == "function"), yn = /* @__PURE__ */ user_derived(() => re().length > 0 || Me().length > 0 || be().length > 0), bn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(p(), f())), xn = /* @__PURE__ */ user_derived(() => normalizeDictationState(G())), Sn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(h(), f()) || get(xn) === "busy"), Cn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(S(), f())), wn = /* @__PURE__ */ user_derived(() => !get(Cn) && (pt() ?? (s().trim().length > 0 || te().length > 0 || get(yn)))), Tn = /* @__PURE__ */ state(!1), En = /* @__PURE__ */ state(0), Dn = /* @__PURE__ */ state(null), On = /* @__PURE__ */ user_derived(() => {
-		if (jt() === null || get(Tn) || !/^\/\S*$/.test(s())) return [];
-		let e = s().toLowerCase();
-		return jt().filter((t) => t.name.toLowerCase().startsWith(e) || e.length > 1 && (t.description ?? "").toLowerCase().includes(e.slice(1)));
-	}), kn = /* @__PURE__ */ user_derived(() => {
+	}, _n = /* @__PURE__ */ user_derived(() => typeof Qt() == "function"), vn = /* @__PURE__ */ user_derived(() => typeof en() == "function" || typeof tn() == "function"), yn = /* @__PURE__ */ user_derived(() => re().length > 0 || Me().length > 0 || be().length > 0), bn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(p(), f())), xn = /* @__PURE__ */ user_derived(() => normalizeDictationState(G())), Sn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(h(), f()) || get(xn) === "busy"), Cn = /* @__PURE__ */ user_derived(() => resolveControlDisabled(S(), f())), wn = /* @__PURE__ */ user_derived(() => !get(Cn) && (pt() ?? (s().trim().length > 0 || te().length > 0 || get(yn)))), Tn = /* @__PURE__ */ state(!1), En = /* @__PURE__ */ state(0), Dn = /* @__PURE__ */ state(null);
+	function On(e) {
+		let [t = ""] = e;
+		return /^[^\p{L}\p{N}\s]$/u.test(t) ? t : null;
+	}
+	let kn = /* @__PURE__ */ user_derived(() => {
+		let e = On(s());
+		if (jt() === null || get(Tn) || e === null || /\s/.test(s())) return [];
+		let t = s().toLowerCase();
+		return jt().filter((n) => On(n.name) === e && (n.name.toLowerCase().startsWith(t) || t.length > e.length && (n.description ?? "").toLowerCase().includes(t.slice(e.length))));
+	}), An = /* @__PURE__ */ user_derived(() => {
 		if (jt() === null || get(Tn)) return null;
-		let e = /^(\/\S+)\s(\S*)$/.exec(s());
-		if (e === null) return null;
+		let e = /^(\S+)\s(\S*)$/.exec(s());
+		if (e === null || On(e[1] ?? "") === null) return null;
 		let t = (e[1] ?? "").toLowerCase(), n = jt().find((e) => e.name.toLowerCase() === t && (e.choices?.length ?? 0) > 0);
 		if (typeof n != "object") return null;
 		let i = (e[2] ?? "").toLowerCase();
@@ -54954,35 +55053,35 @@ function ChatComposer(e, t) {
 			command: n,
 			choices: (n.choices ?? []).filter((e) => e.value.toLowerCase().startsWith(i))
 		};
-	}), An = /* @__PURE__ */ user_derived(() => get(kn) === null ? get(On) : get(kn).choices.map((e) => typeof e.description == "string" ? {
+	}), jn = /* @__PURE__ */ user_derived(() => get(An) === null ? get(kn) : get(An).choices.map((e) => typeof e.description == "string" ? {
 		name: e.value,
 		description: e.description
-	} : { name: e.value })), jn = /* @__PURE__ */ user_derived(() => get(An).length > 0), Mn = /* @__PURE__ */ user_derived(() => Math.min(get(En), Math.max(0, get(An).length - 1))), Nn = `chat-composer-slash-listbox-${n}`, Pn = /* @__PURE__ */ user_derived(() => get(jn) ? `chat-composer-slash-option-${n}-${get(Mn)}` : null);
-	function Fn(e) {
-		if (get(kn) !== null) {
-			let t = get(kn).choices.at(e);
-			return typeof t == "object" ? `${get(kn).command.name} ${t.value}` : null;
+	} : { name: e.value })), Mn = /* @__PURE__ */ user_derived(() => get(jn).length > 0), Nn = /* @__PURE__ */ user_derived(() => Math.min(get(En), Math.max(0, get(jn).length - 1))), Pn = `chat-composer-slash-listbox-${n}`, Fn = /* @__PURE__ */ user_derived(() => get(Mn) ? `chat-composer-slash-option-${n}-${get(Nn)}` : null);
+	function In(e) {
+		if (get(An) !== null) {
+			let t = get(An).choices.at(e);
+			return typeof t == "object" ? `${get(An).command.name} ${t.value}` : null;
 		}
-		return get(An).at(e)?.name ?? null;
+		return get(jn).at(e)?.name ?? null;
 	}
-	function In(e) {
-		if (get(kn) !== null) {
-			let t = get(kn).choices.at(e);
-			typeof t == "object" && (s(`${get(kn).command.name} ${t.value}`), set(En, 0));
+	function Ln(e) {
+		if (get(An) !== null) {
+			let t = get(An).choices.at(e);
+			typeof t == "object" && (s(`${get(An).command.name} ${t.value}`), set(En, 0));
 			return;
 		}
-		let t = get(On).at(e);
+		let t = get(kn).at(e);
 		typeof t == "object" && (s(`${t.name} `), set(Tn, (t.choices?.length ?? 0) === 0), set(En, 0));
 	}
-	function Ln() {
+	function Rn() {
 		tick().then(() => {
-			(get(Dn)?.children.item(get(Mn)))?.scrollIntoView({ block: "nearest" });
+			(get(Dn)?.children.item(get(Nn)))?.scrollIntoView({ block: "nearest" });
 		});
 	}
-	function Rn(e) {
-		return e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), set(En, e.key === "ArrowDown" ? Math.min(get(Mn) + 1, get(An).length - 1) : Math.max(get(Mn) - 1, 0), !0), Ln(), !0) : e.key === "Tab" && !e.shiftKey ? (e.preventDefault(), In(get(Mn)), !0) : e.key === "Enter" && !e.shiftKey && !e.isComposing ? (e.preventDefault(), s().trim() === Fn(get(Mn)) ? Bn() : In(get(Mn)), !0) : !1;
-	}
 	function zn(e) {
+		return e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), set(En, e.key === "ArrowDown" ? Math.min(get(Nn) + 1, get(jn).length - 1) : Math.max(get(Nn) - 1, 0), !0), Rn(), !0) : e.key === "Tab" && !e.shiftKey ? (e.preventDefault(), Ln(get(Nn)), !0) : e.key === "Enter" && !e.shiftKey && !e.isComposing ? (e.preventDefault(), s().trim() === In(get(Nn)) ? Vn() : Ln(get(Nn)), !0) : !1;
+	}
+	function Bn(e) {
 		return { destroy: registerDismissible({
 			element: () => e,
 			onEscape: () => {
@@ -54990,7 +55089,7 @@ function ChatComposer(e, t) {
 			}
 		}) };
 	}
-	function Bn() {
+	function Vn() {
 		if (!get(wn)) return;
 		set(Tn, !1);
 		let e = {
@@ -55011,26 +55110,26 @@ function ChatComposer(e, t) {
 			attachments: te()
 		}) && (s(""), te([]));
 	}
-	function Vn(e) {
-		!(get(jn) && Rn(e)) && C() && e.key === "Enter" && !e.shiftKey && !e.isComposing && !R() && (e.preventDefault(), Bn()), e.key === "Escape" && get(xn) === "recording" && (e.preventDefault(), $t()?.()), Gt()?.(e);
-	}
 	function Hn(e) {
-		set(Tn, !1), set(En, 0), Bt()?.(e.currentTarget.value, e);
+		!(get(Mn) && zn(e)) && C() && e.key === "Enter" && !e.shiftKey && !e.isComposing && !R() && (e.preventDefault(), Vn()), e.key === "Escape" && get(xn) === "recording" && (e.preventDefault(), $t()?.()), Gt()?.(e);
 	}
 	function Un(e) {
+		set(Tn, !1), set(En, 0), Bt()?.(e.currentTarget.value, e);
+	}
+	function Wn(e) {
 		let t = Array.from(e.currentTarget.files ?? []);
 		t.length > 0 && (te([...te(), ...t]), en()?.(t)), e.currentTarget.value = "";
 	}
-	function Wn(e) {
+	function Gn(e) {
 		te(te().filter((t, n) => n !== e));
 	}
-	let Gn = (e) => {
+	let Kn = (e) => {
 		function t() {
 			e.style.height = "0px", e.style.height = `${e.scrollHeight}px`;
 		}
 		return t(), { update: t };
 	};
-	var Kn = {
+	var qn = {
 		focus: gn,
 		get value() {
 			return s();
@@ -55470,26 +55569,26 @@ function ChatComposer(e, t) {
 		set classes(e) {
 			pn(e), flushSync();
 		}
-	}, qn = root_19$2();
-	let Jn;
-	var Yn = child(qn), Xn = (e) => {
+	}, Jn = root_19$2();
+	let Yn;
+	var Xn = child(Jn), Zn = (e) => {
 		var t = root_14$2(), i = child(t);
-		each(i, 23, () => get(An), (e) => e.name, (e, t, i) => {
+		each(i, 23, () => get(jn), (e) => e.name, (e, t, i) => {
 			var a = root_13$2();
 			let o;
 			var s = child(a);
 			{
-				let e = /* @__PURE__ */ user_derived(() => [It(), get(i) === get(Mn) ? Lt() : ""].filter((e) => typeof e == "string" && e.length > 0).join(" "));
+				let e = /* @__PURE__ */ user_derived(() => [It(), get(i) === get(Nn) ? Lt() : ""].filter((e) => typeof e == "string" && e.length > 0).join(" "));
 				Button(s, {
 					type: "button",
 					get classes() {
 						return get(e);
 					},
-					onclick: () => In(get(i)),
+					onclick: () => Ln(get(i)),
 					children: (e, n) => {
 						var a = comment(), o = first_child(a), s = (e) => {
 							var n = comment();
-							snippet(first_child(n), Rt, () => get(t), () => get(i) === get(Mn)), append(e, n);
+							snippet(first_child(n), Rt, () => get(t), () => get(i) === get(Nn)), append(e, n);
 						}, c = (e) => {
 							var n = root_12$2(), i = first_child(n), a = child(i, !0);
 							reset(i);
@@ -55523,30 +55622,30 @@ function ChatComposer(e, t) {
 				});
 			}
 			reset(a), template_effect(() => {
-				set_attribute(a, "id", `chat-composer-slash-option-${n}-${get(i)}`), set_attribute(a, "aria-selected", get(i) === get(Mn)), o = set_class(a, 1, "svelte-xpd394", null, o, { "slash-item-selected-default": get(i) === get(Mn) && typeof Lt() != "string" });
+				set_attribute(a, "id", `chat-composer-slash-option-${n}-${get(i)}`), set_attribute(a, "aria-selected", get(i) === get(Nn)), o = set_class(a, 1, "svelte-xpd394", null, o, { "slash-item-selected-default": get(i) === get(Nn) && typeof Lt() != "string" });
 			}), event("mouseenter", a, () => set(En, get(i), !0)), append(e, a);
 		}), reset(i), bind_this(i, (e) => set(Dn, e), () => get(Dn));
 		var a = sibling(i, 2), o = child(a, !0);
-		reset(a), reset(t), action(t, (e) => zn?.(e)), template_effect(() => {
-			set_class(t, 1, `slash-menu ${Pt() ?? "" ?? ""}`, "svelte-xpd394"), set_attribute(t, "id", Nn), set_attribute(t, "aria-label", Mt()), set_text(o, Nt());
+		reset(a), reset(t), action(t, (e) => Bn?.(e)), template_effect(() => {
+			set_class(t, 1, `slash-menu ${Pt() ?? "" ?? ""}`, "svelte-xpd394"), set_attribute(t, "id", Pn), set_attribute(t, "aria-label", Mt()), set_text(o, Nt());
 		}), append(e, t);
 	};
-	if_block(Yn, (e) => {
-		get(jn) && e(Xn);
+	if_block(Xn, (e) => {
+		get(Mn) && e(Zn);
 	});
-	var Zn = sibling(Yn, 2), Qn = (e) => {
+	var Qn = sibling(Xn, 2), $n = (e) => {
 		var t = root_15$2(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", At() ?? null), set_text(n, kt());
 		}), append(e, t);
 	};
-	if_block(Zn, (e) => {
-		typeof kt() == "string" && e(Qn);
+	if_block(Qn, (e) => {
+		typeof kt() == "string" && e($n);
 	});
-	var $n = sibling(Zn, 2), er = (e) => {
+	var er = sibling(Qn, 2), tr = (e) => {
 		var t = comment();
 		snippet(first_child(t), ne), append(e, t);
-	}, tr = (e) => {
+	}, nr = (e) => {
 		var t = root_16$2(), n = child(t);
 		{
 			let e = /* @__PURE__ */ user_derived(() => rn() && `${rn()}-rich-attachments`);
@@ -55596,7 +55695,7 @@ function ChatComposer(e, t) {
 			});
 		}
 		reset(t), append(e, t);
-	}, nr = (e) => {
+	}, rr = (e) => {
 		var t = root_17$2();
 		each(t, 23, te, (e, t) => e.name + t, (e, t, n) => {
 			Pill(e, {
@@ -55604,34 +55703,34 @@ function ChatComposer(e, t) {
 					return get(t).name;
 				},
 				dismissible: !0,
-				ondismiss: () => Wn(get(n))
+				ondismiss: () => Gn(get(n))
 			});
 		}), reset(t), append(e, t);
 	};
-	if_block($n, (e) => {
-		typeof ne() == "function" ? e(er) : get(yn) ? e(tr, 1) : te().length > 0 && e(nr, 2);
+	if_block(er, (e) => {
+		typeof ne() == "function" ? e(tr) : get(yn) ? e(nr, 1) : te().length > 0 && e(rr, 2);
 	});
-	var rr = sibling($n, 2);
-	let ir;
-	var ar = child(rr), or = (e) => {
+	var ir = sibling(er, 2);
+	let ar;
+	var or = child(ir), sr = (e) => {
 		var t = root_18$2(), n = first_child(t);
 		a(child(n)), reset(n);
 		var s = sibling(n, 2), c = child(s);
 		i(c), o(sibling(c, 4)), reset(s), append(e, t);
-	}, sr = (e) => {
+	}, cr = (e) => {
 		var t = root_8$4(), n = first_child(t);
 		i(n);
 		var s = sibling(n, 2);
 		a(s), o(sibling(s, 2)), append(e, t);
 	};
-	return if_block(ar, (e) => {
-		c() === "stacked" ? e(or) : e(sr, -1);
-	}), reset(rr), reset(qn), template_effect(() => {
-		Jn = set_class(qn, 1, `chat-composer ${pn() ?? "" ?? ""}`, "svelte-xpd394", Jn, {
+	return if_block(or, (e) => {
+		c() === "stacked" ? e(sr) : e(cr, -1);
+	}), reset(ir), reset(Jn), template_effect(() => {
+		Yn = set_class(Jn, 1, `chat-composer ${pn() ?? "" ?? ""}`, "svelte-xpd394", Yn, {
 			disabled: f(),
 			pill: l() === "pill"
-		}), set_attribute(qn, "data-has-slash", jt() === null ? null : ""), set_attribute(qn, "data-pw", typeof rn() == "string" ? rn() : null), set_attribute(qn, "testid", typeof rn() == "string" ? rn() : null), ir = set_class(rr, 1, "input-row svelte-xpd394", null, ir, { stacked: c() === "stacked" });
-	}), append(e, qn), pop(Kn);
+		}), set_attribute(Jn, "data-has-slash", jt() === null ? null : ""), set_attribute(Jn, "data-pw", typeof rn() == "string" ? rn() : null), set_attribute(Jn, "testid", typeof rn() == "string" ? rn() : null), ar = set_class(ir, 1, "input-row svelte-xpd394", null, ar, { stacked: c() === "stacked" });
+	}), append(e, Jn), pop(qn);
 }
 delegate([
 	"change",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.53.1",
+  "version": "4.54.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",