@juspay/svelte-ui-components 4.5.0 → 4.6.0

package/dist/KeyboardInput/KeyboardInput.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { KeyboardInputProperties } from './properties';
 
-  let { keys, separator = '+', testId, onclick, classes }: KeyboardInputProperties = $props();
+  let {
+    keys,
+    separator = '+',
+    testId,
+    onclick,
+    classes,
+    literal = false
+  }: KeyboardInputProperties = $props();
 
   const KEY_SYMBOLS: Record<string, string> = {
     cmd: '\u2318',
@@ -28,6 +35,9 @@
   let interactive = $derived(typeof onclick === 'function');
 
   function getSymbol(key: string): string {
+    if (literal) {
+      return key;
+    }
     return KEY_SYMBOLS[key.toLowerCase()] ?? key;
   }
 

package/dist/KeyboardInput/properties.d.ts

@@ -6,6 +6,15 @@ export type OptionalKeyboardInputProperties = {
     separator?: string;
     testId?: string;
     classes?: string;
+    /**
+     * When true, every key renders exactly as given — the built-in KEY_SYMBOLS
+     * table (`space` → ␣, `tab` → ⇥, `cmd` → ⌘, …) is bypassed entirely.
+     * Defaults to false, so existing consumers keep today's glyph substitution
+     * unchanged. Use this when the word itself is the label that must appear
+     * (e.g. a "Hold SPACE" caption or a physical-key caption reading "Tab"),
+     * not the typographic symbol.
+     */
+    literal?: boolean;
 };
 export type KeyboardInputEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist-wc/index.js

@@ -9834,7 +9834,7 @@ var root$64 = /* @__PURE__ */ from_html("<span class=\"separator svelte-14lwsom\
 };
 function KeyboardInput(e, t) {
 	push(t, !0), append_styles$1(e, $$css$63);
-	let n = prop(t, "keys", 7), i = prop(t, "separator", 7, "+"), a = prop(t, "testId", 7), o = prop(t, "onclick", 7), s = prop(t, "classes", 7), c = {
+	let n = prop(t, "keys", 7), i = prop(t, "separator", 7, "+"), a = prop(t, "testId", 7), o = prop(t, "onclick", 7), s = prop(t, "classes", 7), c = prop(t, "literal", 7, !1), l = {
 		cmd: "⌘",
 		command: "⌘",
 		ctrl: "⌃",
@@ -9853,14 +9853,14 @@ function KeyboardInput(e, t) {
 		left: "←",
 		right: "→",
 		space: "␣"
-	}, l = /* @__PURE__ */ user_derived(() => Array.isArray(n()) ? n() : n().split(i()).map((e) => e.trim())), u = /* @__PURE__ */ user_derived(() => typeof o() == "function");
-	function f(e) {
-		return c[e.toLowerCase()] ?? e;
-	}
+	}, u = /* @__PURE__ */ user_derived(() => Array.isArray(n()) ? n() : n().split(i()).map((e) => e.trim())), f = /* @__PURE__ */ user_derived(() => typeof o() == "function");
 	function p(e) {
+		return c() ? e : l[e.toLowerCase()] ?? e;
+	}
+	function h(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), o()?.(new MouseEvent("click")));
 	}
-	var h = {
+	var S = {
 		get keys() {
 			return n();
 		},
@@ -9890,9 +9890,15 @@ function KeyboardInput(e, t) {
 		},
 		set classes(e) {
 			s(e), flushSync();
+		},
+		get literal() {
+			return c();
+		},
+		set literal(e = !1) {
+			c(e), flushSync();
 		}
-	}, S = root_2$41();
-	return each(S, 21, () => get(l), index, (e, t, n) => {
+	}, C = root_2$41();
+	return each(C, 21, () => get(u), index, (e, t, n) => {
 		var a = root_1$53(), o = first_child(a), s = (e) => {
 			var t = root$64(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, i())), append(e, t);
@@ -9901,21 +9907,22 @@ function KeyboardInput(e, t) {
 			n > 0 && e(s);
 		});
 		var c = sibling(o, 2), l = child(c, !0);
-		reset(c), template_effect((e) => set_text(l, e), [() => f(get(t))]), append(e, a);
-	}), reset(S), template_effect(() => {
-		set_class(S, 1, `keyboard-input ${s() ?? "" ?? ""}`, "svelte-14lwsom"), set_attribute(S, "data-pw", typeof a() == "string" ? a() : null), set_attribute(S, "testid", typeof a() == "string" ? a() : null), set_attribute(S, "role", get(u) ? "button" : null), set_attribute(S, "tabindex", get(u) ? 0 : null);
-	}), delegated("click", S, function(...e) {
-		(get(u) ? o() : null)?.apply(this, e);
-	}), delegated("keydown", S, function(...e) {
-		(get(u) ? p : null)?.apply(this, e);
-	}), append(e, S), pop(h);
+		reset(c), template_effect((e) => set_text(l, e), [() => p(get(t))]), append(e, a);
+	}), reset(C), template_effect(() => {
+		set_class(C, 1, `keyboard-input ${s() ?? "" ?? ""}`, "svelte-14lwsom"), set_attribute(C, "data-pw", typeof a() == "string" ? a() : null), set_attribute(C, "testid", typeof a() == "string" ? a() : null), set_attribute(C, "role", get(f) ? "button" : null), set_attribute(C, "tabindex", get(f) ? 0 : null);
+	}), delegated("click", C, function(...e) {
+		(get(f) ? o() : null)?.apply(this, e);
+	}), delegated("keydown", C, function(...e) {
+		(get(f) ? h : null)?.apply(this, e);
+	}), append(e, C), pop(S);
 }
 delegate(["click", "keydown"]), create_custom_element(KeyboardInput, {
 	keys: {},
 	separator: {},
 	testId: {},
 	onclick: {},
-	classes: {}
+	classes: {},
+	literal: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/KeyboardInput.wc.svelte
@@ -9943,6 +9950,10 @@ customElements.define("sui-keyboard-input", create_custom_element(KeyboardInput_
 		type: "String"
 	},
 	classes: { type: "String" },
+	literal: {
+		reflect: !0,
+		type: "Boolean"
+	},
 	onclick: { type: "Object" }
 }, [], [], { mode: "open" }));
 //#endregion

package/package.json

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