@juspay/svelte-ui-components 3.1.5 → 3.1.6

package/dist/ChatBubble/ChatBubble.svelte

@@ -392,6 +392,10 @@
     --button-border-radius: var(--chat-bubble-border-radius, 50%);
     --button-color: var(--chat-bubble-background-color, #18181b);
     --button-text-color: var(--chat-bubble-color, #ffffff);
+    /* Button spaces its icon from its label with this gap. The launcher renders an
+       icon alone inside a circle, so that gap would push the glyph off-centre --
+       reset to 0 here rather than in Button, whose default is right for a labelled
+       button. docs/ChatBubble.md records this as a pill-launcher caveat. */
     --button-content-gap: 0px;
     --button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));
     --button-hover-color: var(--chat-bubble-hover-background-color, #27272a);

package/dist/Status/Status.svelte

@@ -3,8 +3,31 @@
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
 
+  /**
+   * The documented default, kept as the default so this is not a breaking
+   * change. It is a relative URL resolved against whatever page renders the
+   * component, and the library ships no such file, so it only ever pointed at
+   * something real for an app serving that exact path at its own root -- and
+   * resolved to `<route>/icons/order-success-icon.svg` anywhere deeper.
+   */
+  const LEGACY_DEFAULT_STATUS_ICON = 'icons/order-success-icon.svg';
+
+  /**
+   * Stands in when the legacy default cannot be fetched, so an app that does
+   * host that path keeps getting its own file and every other app stops
+   * rendering a broken image.
+   *
+   * Carries no `role` or `aria-label` of its own. Both are in `Img`'s
+   * allowlist, so a root declaring them would be copied onto the live host and
+   * would outrank the label `Img` derives from `alt` -- pinning every default
+   * icon to "Success", including on a failure screen.
+   */
+  const BUILTIN_STATUS_ICON =
+    "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E";
+
   let {
-    statusIcon = 'icons/order-success-icon.svg',
+    statusIcon = LEGACY_DEFAULT_STATUS_ICON,
+    statusIconAlt = 'status',
     statusText = '',
     statusTextTag = 'div',
     statusDescription = '',
@@ -16,6 +39,12 @@
     children,
     testId
   }: StatusProperties = $props();
+
+  // Scoped to the untouched default on purpose. Applying it to a caller's own
+  // icon would answer a failed failure-icon with a success checkmark.
+  const statusIconFallback = $derived(
+    statusIcon === LEGACY_DEFAULT_STATUS_ICON ? BUILTIN_STATUS_ICON : null
+  );
 </script>
 
 <div
@@ -28,7 +57,7 @@
       {#if icon}
         {@render icon()}
       {:else}
-        <Img inlineSvg src={statusIcon} alt="status" />
+        <Img inlineSvg src={statusIcon} fallback={statusIconFallback} alt={statusIconAlt} />
       {/if}
     </div>
     <svelte:element

package/dist/Status/properties.d.ts

@@ -2,6 +2,13 @@ import type { Snippet } from 'svelte';
 import type { ButtonProperties } from '../Button/properties';
 export type StatusProperties = StatusEventProperties & {
     statusIcon?: string;
+    /**
+     * Accessible name for the `statusIcon` image. Defaults to `'status'`, which
+     * is deliberately generic because the icon is the same shape on a success and
+     * a failure screen. Set it to something the screen actually means, or to `''`
+     * to mark the icon decorative when `statusText` already carries the meaning.
+     */
+    statusIconAlt?: string;
     statusText: string;
     statusDescription: string;
     /**

package/dist-wc/index.js

@@ -10725,126 +10725,138 @@ var root$55 = /* @__PURE__ */ from_html("<div><div class=\"order-status svelte-1
 };
 function Status(e, t) {
 	push(t, !0), append_styles$1(e, $$css$53);
-	let n = prop(t, "statusIcon", 7, "icons/order-success-icon.svg"), i = prop(t, "statusText", 7, ""), a = prop(t, "statusTextTag", 7, "div"), o = prop(t, "statusDescription", 7, ""), s = prop(t, "buttonProperties", 7), c = prop(t, "classes", 7), l = prop(t, "onbuttonClick", 7), u = prop(t, "icon", 7), f = prop(t, "descriptionSnippet", 7), p = prop(t, "children", 7), h = prop(t, "testId", 7);
-	var S = {
+	let n = "icons/order-success-icon.svg", i = "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E", a = prop(t, "statusIcon", 7, n), o = prop(t, "statusIconAlt", 7, "status"), s = prop(t, "statusText", 7, ""), c = prop(t, "statusTextTag", 7, "div"), l = prop(t, "statusDescription", 7, ""), u = prop(t, "buttonProperties", 7), f = prop(t, "classes", 7), p = prop(t, "onbuttonClick", 7), h = prop(t, "icon", 7), S = prop(t, "descriptionSnippet", 7), C = prop(t, "children", 7), k = prop(t, "testId", 7), R = /* @__PURE__ */ user_derived(() => a() === n ? "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E" : null);
+	var G = {
 		get statusIcon() {
-			return n();
+			return a();
 		},
-		set statusIcon(e = "icons/order-success-icon.svg") {
-			n(e), flushSync();
+		set statusIcon(e = n) {
+			a(e), flushSync();
+		},
+		get statusIconAlt() {
+			return o();
+		},
+		set statusIconAlt(e = "status") {
+			o(e), flushSync();
 		},
 		get statusText() {
-			return i();
+			return s();
 		},
 		set statusText(e = "") {
-			i(e), flushSync();
+			s(e), flushSync();
 		},
 		get statusTextTag() {
-			return a();
+			return c();
 		},
 		set statusTextTag(e = "div") {
-			a(e), flushSync();
+			c(e), flushSync();
 		},
 		get statusDescription() {
-			return o();
+			return l();
 		},
 		set statusDescription(e = "") {
-			o(e), flushSync();
+			l(e), flushSync();
 		},
 		get buttonProperties() {
-			return s();
+			return u();
 		},
 		set buttonProperties(e) {
-			s(e), flushSync();
+			u(e), flushSync();
 		},
 		get classes() {
-			return c();
+			return f();
 		},
 		set classes(e) {
-			c(e), flushSync();
+			f(e), flushSync();
 		},
 		get onbuttonClick() {
-			return l();
+			return p();
 		},
 		set onbuttonClick(e) {
-			l(e), flushSync();
+			p(e), flushSync();
 		},
 		get icon() {
-			return u();
+			return h();
 		},
 		set icon(e) {
-			u(e), flushSync();
+			h(e), flushSync();
 		},
 		get descriptionSnippet() {
-			return f();
+			return S();
 		},
 		set descriptionSnippet(e) {
-			f(e), flushSync();
+			S(e), flushSync();
 		},
 		get children() {
-			return p();
+			return C();
 		},
 		set children(e) {
-			p(e), flushSync();
+			C(e), flushSync();
 		},
 		get testId() {
-			return h();
+			return k();
 		},
 		set testId(e) {
-			h(e), flushSync();
+			k(e), flushSync();
 		}
-	}, C = root$55(), k = child(C), R = child(k), G = child(R), te = (e) => {
+	}, te = root$55(), ne = child(te), re = child(ne), be = child(re), Me = (e) => {
 		var t = comment();
-		snippet(first_child(t), u), append(e, t);
-	}, ne = (e) => {
+		snippet(first_child(t), h), append(e, t);
+	}, Re = (e) => {
 		Img(e, {
 			inlineSvg: !0,
 			get src() {
-				return n();
+				return a();
 			},
-			alt: "status"
+			get fallback() {
+				return get(R);
+			},
+			get alt() {
+				return o();
+			}
 		});
 	};
-	if_block(G, (e) => {
-		u() ? e(te) : e(ne, -1);
-	}), reset(R);
-	var re = sibling(R, 2);
-	element(re, a, !1, (e, t) => {
+	if_block(be, (e) => {
+		h() ? e(Me) : e(Re, -1);
+	}), reset(re);
+	var Ue = sibling(re, 2);
+	element(Ue, c, !1, (e, t) => {
 		let n;
-		template_effect(() => n = set_class(e, 0, "status-text svelte-19qpx1s", null, n, { "status-text-default": a() === "div" }));
-		var o = text();
-		template_effect(() => set_text(o, i())), append(t, o);
+		template_effect(() => n = set_class(e, 0, "status-text svelte-19qpx1s", null, n, { "status-text-default": c() === "div" }));
+		var i = text();
+		template_effect(() => set_text(i, s())), append(t, i);
 	});
-	var be = sibling(re, 2), Me = child(be), Re = (e) => {
+	var it = sibling(Ue, 2), at = child(it), ot = (e) => {
 		var t = comment();
-		snippet(first_child(t), f), append(e, t);
-	}, Ue = (e) => {
+		snippet(first_child(t), S), append(e, t);
+	}, ct = (e) => {
 		var t = comment();
-		html(first_child(t), o), append(e, t);
+		html(first_child(t), l), append(e, t);
 	};
-	if_block(Me, (e) => {
-		typeof f() == "function" ? e(Re) : e(Ue, -1);
-	}), reset(be);
-	var it = sibling(be, 2), at = (e) => {
-		Button(e, spread_props(s, { get onclick() {
-			return l();
+	if_block(at, (e) => {
+		typeof S() == "function" ? e(ot) : e(ct, -1);
+	}), reset(it);
+	var lt = sibling(it, 2), ut = (e) => {
+		Button(e, spread_props(u, { get onclick() {
+			return p();
 		} }));
 	};
-	if_block(it, (e) => {
-		typeof s() == "object" && e(at);
+	if_block(lt, (e) => {
+		typeof u() == "object" && e(ut);
 	});
-	var ot = sibling(it, 2), ct = (e) => {
+	var dt = sibling(lt, 2), ft = (e) => {
 		var t = comment();
-		snippet(first_child(t), p), append(e, t);
+		snippet(first_child(t), C), append(e, t);
 	};
-	return if_block(ot, (e) => {
-		typeof p() == "function" && e(ct);
-	}), reset(k), reset(C), template_effect(() => {
-		set_class(C, 1, `background ${c() ?? "" ?? ""}`, "svelte-19qpx1s"), set_attribute(C, "data-pw", typeof h() == "string" ? h() : null), set_attribute(C, "testid", typeof h() == "string" ? h() : null);
-	}), append(e, C), pop(S);
+	return if_block(dt, (e) => {
+		typeof C() == "function" && e(ft);
+	}), reset(ne), reset(te), template_effect(() => {
+		set_class(te, 1, `background ${f() ?? "" ?? ""}`, "svelte-19qpx1s"), set_attribute(te, "data-pw", typeof k() == "string" ? k() : null), set_attribute(te, "testid", typeof k() == "string" ? k() : null);
+	}), append(e, te), pop(G);
 }
 create_custom_element(Status, {
 	statusIcon: {},
+	statusIconAlt: {},
 	statusText: {},
 	statusTextTag: {},
 	statusDescription: {},
@@ -10874,6 +10886,11 @@ customElements.define("sui-status", create_custom_element(Status_wc, {
 		reflect: !0,
 		type: "String"
 	},
+	statusIconAlt: {
+		attribute: "status-icon-alt",
+		reflect: !0,
+		type: "String"
+	},
 	statusText: {
 		attribute: "status-text",
 		reflect: !0,
@@ -35871,7 +35888,7 @@ customElements.define("sui-chat-tool-status", create_custom_element(ChatToolStat
 //#region src/lib/assets/chat.svg?raw
 var chat_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\" />\n</svg>\n", root_1$2 = /* @__PURE__ */ from_html("<div class=\"panel svelte-15b7gm8\" role=\"dialog\" tabindex=\"-1\"><!></div>"), root_2$2 = /* @__PURE__ */ from_html("<div class=\"panel-anchor svelte-15b7gm8\"><!></div>"), root_3$2 = /* @__PURE__ */ from_html("<div><!> <div class=\"launcher svelte-15b7gm8\"><!></div></div>"), $$css$2 = {
 	hash: "svelte-15b7gm8",
-	code: ".chat-bubble.svelte-15b7gm8 {position:fixed;z-index:var(--chat-bubble-z-index, 1000);transition:var(--chat-bubble-snap-transition, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1));}.chat-bubble.dragging.svelte-15b7gm8 {transition:none;}.chat-bubble[data-position='bottom-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='bottom-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.panel-anchor.svelte-15b7gm8 {position:absolute;--resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);--resizable-transition: var(\n      --chat-bubble-expand-transition,\n      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),\n      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)\n    );}.chat-bubble[data-effective-vertical='bottom'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {bottom:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-vertical='top'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {top:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-side='right'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {right:0;}.chat-bubble[data-effective-side='left'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {left:0;}.panel.svelte-15b7gm8 {box-sizing:border-box;width:100%;height:100%;max-width:var(--chat-bubble-panel-max-width, calc(100vw - 32px));max-height:var(--chat-bubble-panel-max-height, calc(100dvh - 120px));border-radius:var(--chat-bubble-panel-border-radius, 16px);overflow:hidden;background:var(--chat-bubble-panel-background, #ffffff);box-shadow:var(--chat-bubble-panel-box-shadow, 0 16px 48px rgba(0, 0, 0, 0.22));outline:none;}.launcher.svelte-15b7gm8 {--button-width: var(--chat-bubble-width, var(--chat-bubble-size, 56px));--button-height: var(--chat-bubble-height, var(--chat-bubble-size, 56px));--button-padding: var(--chat-bubble-padding, 16px);--button-border-radius: var(--chat-bubble-border-radius, 50%);--button-color: var(--chat-bubble-background-color, #18181b);--button-text-color: var(--chat-bubble-color, #ffffff);--button-content-gap: 0px;--button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));--button-hover-color: var(--chat-bubble-hover-background-color, #27272a);}.chat-bubble.is-draggable.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grab;touch-action:none;}.chat-bubble.is-draggable.dragging.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grabbing;}.launcher.svelte-15b7gm8 svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-bubble.svelte-15b7gm8 {transition:none;}\n  }"
+	code: ".chat-bubble.svelte-15b7gm8 {position:fixed;z-index:var(--chat-bubble-z-index, 1000);transition:var(--chat-bubble-snap-transition, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1));}.chat-bubble.dragging.svelte-15b7gm8 {transition:none;}.chat-bubble[data-position='bottom-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='bottom-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.panel-anchor.svelte-15b7gm8 {position:absolute;--resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);--resizable-transition: var(\n      --chat-bubble-expand-transition,\n      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),\n      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)\n    );}.chat-bubble[data-effective-vertical='bottom'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {bottom:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-vertical='top'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {top:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-side='right'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {right:0;}.chat-bubble[data-effective-side='left'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {left:0;}.panel.svelte-15b7gm8 {box-sizing:border-box;width:100%;height:100%;max-width:var(--chat-bubble-panel-max-width, calc(100vw - 32px));max-height:var(--chat-bubble-panel-max-height, calc(100dvh - 120px));border-radius:var(--chat-bubble-panel-border-radius, 16px);overflow:hidden;background:var(--chat-bubble-panel-background, #ffffff);box-shadow:var(--chat-bubble-panel-box-shadow, 0 16px 48px rgba(0, 0, 0, 0.22));outline:none;}.launcher.svelte-15b7gm8 {--button-width: var(--chat-bubble-width, var(--chat-bubble-size, 56px));--button-height: var(--chat-bubble-height, var(--chat-bubble-size, 56px));--button-padding: var(--chat-bubble-padding, 16px);--button-border-radius: var(--chat-bubble-border-radius, 50%);--button-color: var(--chat-bubble-background-color, #18181b);--button-text-color: var(--chat-bubble-color, #ffffff);\n    /* Button spaces its icon from its label with this gap. The launcher renders an\n       icon alone inside a circle, so that gap would push the glyph off-centre --\n       reset to 0 here rather than in Button, whose default is right for a labelled\n       button. docs/ChatBubble.md records this as a pill-launcher caveat. */--button-content-gap: 0px;--button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));--button-hover-color: var(--chat-bubble-hover-background-color, #27272a);}.chat-bubble.is-draggable.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grab;touch-action:none;}.chat-bubble.is-draggable.dragging.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grabbing;}.launcher.svelte-15b7gm8 svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-bubble.svelte-15b7gm8 {transition:none;}\n  }"
 };
 function ChatBubble(e, t) {
 	push(t, !0), append_styles$1(e, $$css$2);

package/package.json

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