@juspay/svelte-ui-components 4.42.0 → 4.44.0

package/dist/Banner/Banner.svelte

@@ -177,6 +177,21 @@
     flex-shrink: var(--banner-right-flex-shrink, 0);
   }
 
+  /* Zero specificity: an app that already pushes .banner-right to the end with its own
+     margin-left wrote that rule before this existed, and keeps winning whatever the load
+     order. Svelte compiles :where(.x) to :where(.x.svelte-hash), which stays at zero.
+
+     The fallback is revert-layer rather than 0. The slot never had a margin, but 0 is a
+     declaration, and an unlayered declaration beats a margin-left the app wrote inside an
+     @layer, even though that rule won before. revert-layer gives this declaration up when
+     the token is unset, so the cascade lands on whatever it landed on without it. Its one
+     cost: it rolls back the whole unlayered layer, so an earlier unlayered rule of zero
+     specificity (a bare * or :where()) that sets a non-zero margin-left on .banner-right
+     is rolled back with it. Zero-specificity ties go to the later rule, which is this one. */
+  :where(.banner-right) {
+    margin-left: var(--banner-right-margin-left, revert-layer);
+  }
+
   .banner-dismiss {
     --button-color: transparent;
     --button-border: none;

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -16,6 +16,7 @@
     scrollPolicy = 'near-bottom',
     pinHold = false,
     jump = true,
+    hideScrollbar = false,
     message,
     messageBody,
     messageAttachments,
@@ -296,6 +297,7 @@
   aria-live="polite"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
+  class:hide-scrollbar={hideScrollbar}
   bind:this={listEl}
   onscroll={handleScroll}
   use:pinToBottom={scrollKey}
@@ -361,6 +363,33 @@
     scroll-behavior: var(--chat-message-list-scroll-behavior, smooth);
   }
 
+  /* Both properties sit inside :where() so they carry no specificity. A host that
+     already sets overflow-x or overscroll-behavior on the list wrote that rule
+     before these tokens existed, and Svelte's scope class would otherwise make
+     this tie it or beat it.
+     An unset token falls back to revert-layer, not to a value: this rule is
+     unlayered, and an unlayered declaration beats any rule inside a cascade
+     @layer whatever its specificity, so a fixed fallback would override a layered
+     rule of the host's that used to win. revert-layer hands the property back to
+     what the cascade held below this rule, which is that layered rule if there is
+     one and the property's initial value if not: overflow-x `visible` (computing
+     to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list
+     as it was before the tokens. An engine without revert-layer drops the
+     declaration to that same initial value. */
+  :where(.chat-message-list) {
+    overflow-x: var(--chat-message-list-overflow-x, revert-layer);
+    overscroll-behavior: var(--chat-message-list-overscroll-behavior, revert-layer);
+  }
+
+  .chat-message-list.hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .chat-message-list.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   /* The inner wrapper is what the pin-sender-turn policy reserves height on; it
      carries the column layout so the reservation becomes scrollable headroom. */
   .inner {

package/dist/ChatMessageList/properties.d.ts

@@ -24,6 +24,12 @@ export type OptionalChatMessageListProperties = {
     pinHold?: boolean;
     /** Render the built-in jump-to-latest button (default true). Hosts with their own affordance pass false. */
     jump?: boolean;
+    /**
+     * Hide the list's own scrollbar while it stays scrollable (default false). Mirrors
+     * Scroller's `hideScrollbar`, which defaults to true; here the default keeps the
+     * scrollbar the list has always shown.
+     */
+    hideScrollbar?: boolean;
     message?: Snippet<[ChatMessageData]>;
     /**
      * Renders inside each message's bubble in place of its text/html, keeping the

package/dist-wc/index.js

@@ -16319,7 +16319,7 @@ function slide(e, { delay: t = 0, duration: n = 400, easing: i = cubic_out, axis
 //#region src/lib/Banner/Banner.svelte
 var root$67 = /* @__PURE__ */ from_html("<div class=\"banner-icon svelte-w23dzo\"><!></div>"), root_1$60 = /* @__PURE__ */ from_html("<div class=\"banner-title svelte-w23dzo\"><!></div>"), root_2$49 = /* @__PURE__ */ from_html("<span class=\"banner-link-text svelte-w23dzo\"> </span>"), root_3$45 = /* @__PURE__ */ from_html("<div class=\"banner-text svelte-w23dzo\"> <!></div>"), root_4$40 = /* @__PURE__ */ from_html("<div class=\"banner-right svelte-w23dzo\"><!></div>"), root_5$34 = /* @__PURE__ */ from_html("<div class=\"banner-dismiss svelte-w23dzo\"><!></div>"), root_6$30 = /* @__PURE__ */ from_html("<div><!> <div class=\"banner-body svelte-w23dzo\"><!> <!></div> <!> <!></div>"), $$css$124 = {
 	hash: "svelte-w23dzo",
-	code: ".banner.svelte-w23dzo {display:flex;align-items:center;width:var(--banner-width, 100%);height:var(--banner-height);padding:var(--banner-padding, 10px 12px);gap:var(--banner-gap, 8px);justify-content:var(--banner-justify-content, center);background-color:var(--banner-background, #f0f4f8);color:var(--banner-color, #4d6174);font-family:var(--banner-font-family, inherit);font-size:var(--banner-font-size, 14px);font-weight:var(--banner-font-weight, 500);line-height:var(--banner-line-height, 1.3);border-bottom:var(--banner-border-bottom, none);border:var(--banner-border);border-radius:var(--banner-border-radius, var(--radius, 4px));cursor:var(--banner-cursor, pointer);position:var(--banner-position, sticky);top:var(--banner-top, 0);z-index:var(--banner-z-index, 100);box-sizing:border-box;}.banner-icon.svelte-w23dzo {display:flex;align-items:center;flex-shrink:0;color:var(--banner-icon-color, currentColor);}.banner-icon.svelte-w23dzo svg {width:var(--banner-icon-size, 18px);height:var(--banner-icon-size, 18px);}.banner-body.svelte-w23dzo {display:flex;flex-direction:column;overflow:hidden;gap:var(--banner-body-gap, 0);}.banner-title.svelte-w23dzo {font-weight:var(--banner-title-font-weight, inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.banner-text.svelte-w23dzo {overflow:var(--banner-text-overflow, hidden);text-overflow:var(--banner-text-ellipsis, ellipsis);white-space:var(--banner-white-space, nowrap);}.banner-link-text.svelte-w23dzo {color:var(--banner-link-color, #1d4ed8);margin-left:var(--banner-link-gap, 4px);}.banner-right.svelte-w23dzo {display:flex;align-items:center;flex-shrink:var(--banner-right-flex-shrink, 0);}.banner-dismiss.svelte-w23dzo {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-border-radius: var(--banner-dismiss-border-radius, var(--radius, 4px));--button-text-color: var(--banner-dismiss-color, currentColor);--button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));--cursor: inherit;display:flex;align-items:center;flex-shrink:0;}.banner-dismiss.svelte-w23dzo svg {width:var(--banner-dismiss-size, 14px);height:var(--banner-dismiss-size, 14px);}"
+	code: ".banner.svelte-w23dzo {display:flex;align-items:center;width:var(--banner-width, 100%);height:var(--banner-height);padding:var(--banner-padding, 10px 12px);gap:var(--banner-gap, 8px);justify-content:var(--banner-justify-content, center);background-color:var(--banner-background, #f0f4f8);color:var(--banner-color, #4d6174);font-family:var(--banner-font-family, inherit);font-size:var(--banner-font-size, 14px);font-weight:var(--banner-font-weight, 500);line-height:var(--banner-line-height, 1.3);border-bottom:var(--banner-border-bottom, none);border:var(--banner-border);border-radius:var(--banner-border-radius, var(--radius, 4px));cursor:var(--banner-cursor, pointer);position:var(--banner-position, sticky);top:var(--banner-top, 0);z-index:var(--banner-z-index, 100);box-sizing:border-box;}.banner-icon.svelte-w23dzo {display:flex;align-items:center;flex-shrink:0;color:var(--banner-icon-color, currentColor);}.banner-icon.svelte-w23dzo svg {width:var(--banner-icon-size, 18px);height:var(--banner-icon-size, 18px);}.banner-body.svelte-w23dzo {display:flex;flex-direction:column;overflow:hidden;gap:var(--banner-body-gap, 0);}.banner-title.svelte-w23dzo {font-weight:var(--banner-title-font-weight, inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.banner-text.svelte-w23dzo {overflow:var(--banner-text-overflow, hidden);text-overflow:var(--banner-text-ellipsis, ellipsis);white-space:var(--banner-white-space, nowrap);}.banner-link-text.svelte-w23dzo {color:var(--banner-link-color, #1d4ed8);margin-left:var(--banner-link-gap, 4px);}.banner-right.svelte-w23dzo {display:flex;align-items:center;flex-shrink:var(--banner-right-flex-shrink, 0);}\n\n  /* Zero specificity: an app that already pushes .banner-right to the end with its own\n     margin-left wrote that rule before this existed, and keeps winning whatever the load\n     order. Svelte compiles :where(.x) to :where(.x.svelte-hash), which stays at zero.\n\n     The fallback is revert-layer rather than 0. The slot never had a margin, but 0 is a\n     declaration, and an unlayered declaration beats a margin-left the app wrote inside an\n     @layer, even though that rule won before. revert-layer gives this declaration up when\n     the token is unset, so the cascade lands on whatever it landed on without it. Its one\n     cost: it rolls back the whole unlayered layer, so an earlier unlayered rule of zero\n     specificity (a bare * or :where()) that sets a non-zero margin-left on .banner-right\n     is rolled back with it. Zero-specificity ties go to the later rule, which is this one. */:where(.banner-right.svelte-w23dzo) {margin-left:var(--banner-right-margin-left, revert-layer);}.banner-dismiss.svelte-w23dzo {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-border-radius: var(--banner-dismiss-border-radius, var(--radius, 4px));--button-text-color: var(--banner-dismiss-color, currentColor);--button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));--cursor: inherit;display:flex;align-items:center;flex-shrink:0;}.banner-dismiss.svelte-w23dzo svg {width:var(--banner-dismiss-size, 14px);height:var(--banner-dismiss-size, 14px);}"
 };
 function Banner(e, t) {
 	push(t, !0), append_styles$1(e, $$css$124);
@@ -52105,123 +52105,123 @@ create_custom_element(ChatMessage, {
 //#region src/lib/ChatMessageList/ChatMessageList.svelte
 var root$14 = /* @__PURE__ */ from_html("<div class=\"jump svelte-qpm4dm\"><!></div>"), root_1$13 = /* @__PURE__ */ from_html("<div role=\"log\" aria-live=\"polite\"><div class=\"inner svelte-qpm4dm\"><!> <!> <!></div></div>"), $$css$34 = {
 	hash: "svelte-qpm4dm",
-	code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n  /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n     carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n  }"
+	code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n  /* Both properties sit inside :where() so they carry no specificity. A host that\n     already sets overflow-x or overscroll-behavior on the list wrote that rule\n     before these tokens existed, and Svelte's scope class would otherwise make\n     this tie it or beat it.\n     An unset token falls back to revert-layer, not to a value: this rule is\n     unlayered, and an unlayered declaration beats any rule inside a cascade\n     @layer whatever its specificity, so a fixed fallback would override a layered\n     rule of the host's that used to win. revert-layer hands the property back to\n     what the cascade held below this rule, which is that layered rule if there is\n     one and the property's initial value if not: overflow-x `visible` (computing\n     to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list\n     as it was before the tokens. An engine without revert-layer drops the\n     declaration to that same initial value. */:where(.chat-message-list.svelte-qpm4dm) {overflow-x:var(--chat-message-list-overflow-x, revert-layer);overscroll-behavior:var(--chat-message-list-overscroll-behavior, revert-layer);}.chat-message-list.hide-scrollbar.svelte-qpm4dm {-ms-overflow-style:none;scrollbar-width:none;}.chat-message-list.hide-scrollbar.svelte-qpm4dm::-webkit-scrollbar {display:none;}\n\n  /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n     carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n  }"
 };
 function ChatMessageList(e, t) {
 	push(t, !0), append_styles$1(e, $$css$34);
-	let n = 80, i = prop(t, "messages", 7), a = prop(t, "autoscroll", 7, !0), o = prop(t, "scrollPolicy", 7, "near-bottom"), s = prop(t, "pinHold", 7, !1), c = prop(t, "jump", 7, !0), l = prop(t, "message", 7), u = prop(t, "messageBody", 7), f = prop(t, "messageAttachments", 7), p = prop(t, "empty", 7), h = prop(t, "jumpLabel", 7, "Jump to latest"), S = prop(t, "jumpIcon", 7), C = prop(t, "allowCopy", 7, !1), k = prop(t, "onscrollstate", 7), R = prop(t, "onretry", 7), te = prop(t, "onfeedback", 7), ne = prop(t, "testId", 7), G = prop(t, "classes", 7), re = /* @__PURE__ */ state(null), be = /* @__PURE__ */ state(null), Me = /* @__PURE__ */ state(!0), Re = /* @__PURE__ */ state(!1), Ue = !1, it = !1, at = 0, ot = /* @__PURE__ */ user_derived(() => `${i().length}:${i().at(-1)?.content.length ?? 0}`), ct = /* @__PURE__ */ user_derived(() => !get(Me) && i().length > 0), lt = /* @__PURE__ */ user_derived(() => {
+	let n = 80, i = prop(t, "messages", 7), a = prop(t, "autoscroll", 7, !0), o = prop(t, "scrollPolicy", 7, "near-bottom"), s = prop(t, "pinHold", 7, !1), c = prop(t, "jump", 7, !0), l = prop(t, "hideScrollbar", 7, !1), u = prop(t, "message", 7), f = prop(t, "messageBody", 7), p = prop(t, "messageAttachments", 7), h = prop(t, "empty", 7), S = prop(t, "jumpLabel", 7, "Jump to latest"), C = prop(t, "jumpIcon", 7), k = prop(t, "allowCopy", 7, !1), R = prop(t, "onscrollstate", 7), te = prop(t, "onretry", 7), ne = prop(t, "onfeedback", 7), G = prop(t, "testId", 7), re = prop(t, "classes", 7), be = /* @__PURE__ */ state(null), Me = /* @__PURE__ */ state(null), Re = /* @__PURE__ */ state(!0), Ue = /* @__PURE__ */ state(!1), it = !1, at = !1, ot = 0, ct = /* @__PURE__ */ user_derived(() => `${i().length}:${i().at(-1)?.content.length ?? 0}`), lt = /* @__PURE__ */ user_derived(() => !get(Re) && i().length > 0), ut = /* @__PURE__ */ user_derived(() => {
 		for (let e = i().length - 1; e >= 0; --e) {
 			let t = i().at(e);
 			if (t && partyOf(t.role) === "responder") return t.id;
 		}
 		return null;
 	});
-	function ut(e) {
-		return typeof R() == "function" && partyOf(e.role) === "responder" && e.id === get(lt) ? R() : null;
-	}
 	function dt(e) {
-		return typeof te() == "function" && partyOf(e.role) === "responder" ? (t) => te()?.(t, e) : null;
+		return typeof te() == "function" && partyOf(e.role) === "responder" && e.id === get(ut) ? te() : null;
 	}
 	function ft(e) {
-		return e.scrollHeight - e.scrollTop - e.clientHeight < 80;
+		return typeof ne() == "function" && partyOf(e.role) === "responder" ? (t) => ne()?.(t, e) : null;
 	}
 	function pt(e) {
-		set(Me, ft(e), !0), set(Re, e.scrollHeight - e.clientHeight > 80), k()?.({
-			atBottom: get(Me),
-			scrollable: get(Re)
-		});
+		return e.scrollHeight - e.scrollTop - e.clientHeight < 80;
 	}
 	function mt(e) {
-		pt(e.currentTarget);
+		set(Re, pt(e), !0), set(Ue, e.scrollHeight - e.clientHeight > 80), R()?.({
+			atBottom: get(Re),
+			scrollable: get(Ue)
+		});
 	}
 	function ht(e) {
-		if (get(re) !== null) {
+		mt(e.currentTarget);
+	}
+	function gt(e) {
+		if (get(be) !== null) {
 			let t = typeof e == "string";
 			if (t) {
 				let t = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-				get(re).style.scrollBehavior = e === "smooth" && !t ? "smooth" : "auto";
+				get(be).style.scrollBehavior = e === "smooth" && !t ? "smooth" : "auto";
 			}
-			if (get(re).scrollTop = get(re).scrollHeight, pt(get(re)), t) {
-				let e = get(re);
+			if (get(be).scrollTop = get(be).scrollHeight, mt(get(be)), t) {
+				let e = get(be);
 				requestAnimationFrame(() => {
 					e.style.scrollBehavior = "";
 				});
 			}
 		}
 	}
-	function gt() {
+	function _t() {
 		for (let e = i().length - 1; e >= 0; --e) if (partyOf(i()[e].role) === "sender") return i()[e].id;
 		return null;
 	}
-	function _t() {
-		if (get(re) === null || get(be) === null) return;
+	function vt() {
+		if (get(be) === null || get(Me) === null) return;
 		let e = -1;
 		for (let t = i().length - 1; t >= 0; --t) if (partyOf(i()[t].role) === "sender") {
 			e = t;
 			break;
 		}
 		if (e === -1) return;
-		let t = Array.from(get(be).children).filter((e) => !e.classList.contains("jump")), n = t.length === i().length ? t[e] : t[t.length - 1];
+		let t = Array.from(get(Me).children).filter((e) => !e.classList.contains("jump")), n = t.length === i().length ? t[e] : t[t.length - 1];
 		if (!(n instanceof HTMLElement)) return;
-		let a = get(be).getBoundingClientRect(), o = n.getBoundingClientRect(), s = o.top - a.top;
-		get(be).style.minHeight = `${Math.ceil(s + get(re).clientHeight)}px`, Ue = !0;
-		let c = get(re).getBoundingClientRect(), l = Number.parseFloat(getComputedStyle(get(re)).paddingTop) || 0;
-		at = get(re).scrollTop + (o.top - c.top - l), get(re).scrollTo({
-			top: at,
+		let a = get(Me).getBoundingClientRect(), o = n.getBoundingClientRect(), s = o.top - a.top;
+		get(Me).style.minHeight = `${Math.ceil(s + get(be).clientHeight)}px`, it = !0;
+		let c = get(be).getBoundingClientRect(), l = Number.parseFloat(getComputedStyle(get(be)).paddingTop) || 0;
+		ot = get(be).scrollTop + (o.top - c.top - l), get(be).scrollTo({
+			top: ot,
 			behavior: "instant"
-		}), pt(get(re));
-	}
-	function vt() {
-		get(be) !== null && (get(be).style.minHeight = ""), Ue = !1, it = !1, get(re) !== null && pt(get(re));
+		}), mt(get(be));
 	}
 	function yt() {
-		if (!it || get(re) === null || get(be) === null) return;
-		let e = get(be).style.minHeight;
-		if (get(be).style.minHeight = "", get(re).scrollHeight - get(re).clientHeight >= at) {
-			get(re).scrollTo({
-				top: at,
+		get(Me) !== null && (get(Me).style.minHeight = ""), it = !1, at = !1, get(be) !== null && mt(get(be));
+	}
+	function bt() {
+		if (!at || get(be) === null || get(Me) === null) return;
+		let e = get(Me).style.minHeight;
+		if (get(Me).style.minHeight = "", get(be).scrollHeight - get(be).clientHeight >= ot) {
+			get(be).scrollTo({
+				top: ot,
 				behavior: "instant"
-			}), Ue = !1, it = !1, pt(get(re));
+			}), it = !1, at = !1, mt(get(be));
 			return;
 		}
-		get(be).style.minHeight = e, get(re).scrollTo({
-			top: at,
+		get(Me).style.minHeight = e, get(be).scrollTo({
+			top: ot,
 			behavior: "instant"
 		});
 	}
-	let bt = (e) => {
-		let t = i().length, n = gt();
+	let xt = (e) => {
+		let t = i().length, n = _t();
 		function c() {
 			let c = i().length > t;
 			if (t = i().length, o() === "pin-sender-turn") {
-				let e = gt();
+				let e = _t();
 				c && e !== null && e !== n && queueMicrotask(() => {
-					_t(), s() || (it = !0, yt());
+					vt(), s() || (at = !0, bt());
 				}), n = e;
 				return;
 			}
-			a() && (get(Me) || c) && queueMicrotask(() => {
+			a() && (get(Re) || c) && queueMicrotask(() => {
 				e.scrollTop = e.scrollHeight;
 			});
 		}
 		return c(), { update: c };
-	}, xt = (e) => {
+	}, St = (e) => {
 		if (typeof ResizeObserver > "u") return;
 		let t = new ResizeObserver(() => {
-			get(re) !== null && (o() === "near-bottom" && a() && get(Me) && (get(re).scrollTop = get(re).scrollHeight), yt(), pt(get(re)));
+			get(be) !== null && (o() === "near-bottom" && a() && get(Re) && (get(be).scrollTop = get(be).scrollHeight), bt(), mt(get(be)));
 		});
 		return t.observe(e), { destroy() {
 			t.disconnect();
 		} };
-	}, St = () => {
+	}, Ct = () => {
 		let e = s();
 		function t() {
-			e && !s() && Ue && vt(), e = s();
+			e && !s() && it && yt(), e = s();
 		}
 		return t(), { update: t };
 	};
-	var Ct = {
-		scrollToBottom: ht,
+	var wt = {
+		scrollToBottom: gt,
 		get messages() {
 			return i();
 		},
@@ -52252,100 +52252,108 @@ function ChatMessageList(e, t) {
 		set jump(e = !0) {
 			c(e), flushSync();
 		},
-		get message() {
+		get hideScrollbar() {
 			return l();
 		},
-		set message(e) {
+		set hideScrollbar(e = !1) {
 			l(e), flushSync();
 		},
-		get messageBody() {
+		get message() {
 			return u();
 		},
-		set messageBody(e) {
+		set message(e) {
 			u(e), flushSync();
 		},
-		get messageAttachments() {
+		get messageBody() {
 			return f();
 		},
-		set messageAttachments(e) {
+		set messageBody(e) {
 			f(e), flushSync();
 		},
-		get empty() {
+		get messageAttachments() {
 			return p();
 		},
-		set empty(e) {
+		set messageAttachments(e) {
 			p(e), flushSync();
 		},
-		get jumpLabel() {
+		get empty() {
 			return h();
 		},
-		set jumpLabel(e = "Jump to latest") {
+		set empty(e) {
 			h(e), flushSync();
 		},
-		get jumpIcon() {
+		get jumpLabel() {
 			return S();
 		},
-		set jumpIcon(e) {
+		set jumpLabel(e = "Jump to latest") {
 			S(e), flushSync();
 		},
-		get allowCopy() {
+		get jumpIcon() {
 			return C();
 		},
-		set allowCopy(e = !1) {
+		set jumpIcon(e) {
 			C(e), flushSync();
 		},
-		get onscrollstate() {
+		get allowCopy() {
 			return k();
 		},
-		set onscrollstate(e) {
+		set allowCopy(e = !1) {
 			k(e), flushSync();
 		},
-		get onretry() {
+		get onscrollstate() {
 			return R();
 		},
-		set onretry(e) {
+		set onscrollstate(e) {
 			R(e), flushSync();
 		},
-		get onfeedback() {
+		get onretry() {
 			return te();
 		},
-		set onfeedback(e) {
+		set onretry(e) {
 			te(e), flushSync();
 		},
-		get testId() {
+		get onfeedback() {
 			return ne();
 		},
-		set testId(e) {
+		set onfeedback(e) {
 			ne(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return G();
 		},
-		set classes(e) {
+		set testId(e) {
 			G(e), flushSync();
+		},
+		get classes() {
+			return re();
+		},
+		set classes(e) {
+			re(e), flushSync();
 		}
-	}, wt = root_1$13(), Tt = child(wt), Et = child(Tt), Dt = (e) => {
+	}, Tt = root_1$13();
+	let Et;
+	var Dt = child(Tt), Ot = child(Dt), kt = (e) => {
 		var t = comment();
-		snippet(first_child(t), p), append(e, t);
+		snippet(first_child(t), h), append(e, t);
 	};
-	if_block(Et, (e) => {
-		i().length === 0 && typeof p() == "function" && e(Dt);
+	if_block(Ot, (e) => {
+		i().length === 0 && typeof h() == "function" && e(kt);
 	});
-	var Ot = sibling(Et, 2);
-	each(Ot, 17, i, (e) => e.id, (e, t) => {
+	var At = sibling(Ot, 2);
+	each(At, 17, i, (e) => e.id, (e, t) => {
 		var n = comment(), i = first_child(n), a = (e) => {
 			var n = comment();
-			snippet(first_child(n), l, () => get(t)), append(e, n);
+			snippet(first_child(n), u, () => get(t)), append(e, n);
 		}, o = (e) => {
 			let n = (e) => {
 				var n = comment();
-				snippet(first_child(n), () => f() ?? noop, () => get(t)), append(e, n);
+				snippet(first_child(n), () => p() ?? noop, () => get(t)), append(e, n);
 			}, i = (e) => {
 				var n = comment();
-				snippet(first_child(n), () => u() ?? noop, () => get(t)), append(e, n);
+				snippet(first_child(n), () => f() ?? noop, () => get(t)), append(e, n);
 			};
 			{
-				let a = /* @__PURE__ */ user_derived(() => typeof u() == "function" ? i : null), o = /* @__PURE__ */ user_derived(() => C() && partyOf(get(t).role) === "responder"), s = /* @__PURE__ */ user_derived(() => typeof f() == "function" ? n : null), c = /* @__PURE__ */ user_derived(() => ut(get(t))), l = /* @__PURE__ */ user_derived(() => dt(get(t)));
+				let a = /* @__PURE__ */ user_derived(() => typeof f() == "function" ? i : null), o = /* @__PURE__ */ user_derived(() => k() && partyOf(get(t).role) === "responder"), s = /* @__PURE__ */ user_derived(() => typeof p() == "function" ? n : null), c = /* @__PURE__ */ user_derived(() => dt(get(t))), l = /* @__PURE__ */ user_derived(() => ft(get(t)));
 				ChatMessage(e, {
 					get role() {
 						return get(t).role;
@@ -52390,36 +52398,36 @@ function ChatMessageList(e, t) {
 			}
 		};
 		if_block(i, (e) => {
-			typeof l() == "function" ? e(a) : e(o, -1);
+			typeof u() == "function" ? e(a) : e(o, -1);
 		}), append(e, n);
 	});
-	var kt = sibling(Ot, 2), At = (e) => {
+	var jt = sibling(At, 2), Mt = (e) => {
 		var t = root$14();
 		Button(child(t), {
-			onclick: () => ht(),
+			onclick: () => gt(),
 			get ariaLabel() {
-				return h();
+				return S();
 			},
 			children: (e, t) => {
 				var n = comment(), i = first_child(n), a = (e) => {
 					var t = comment();
-					snippet(first_child(t), S), append(e, t);
+					snippet(first_child(t), C), append(e, t);
 				}, o = (e) => {
 					var t = comment();
 					html(first_child(t), () => chevron_down_default), append(e, t);
 				};
 				if_block(i, (e) => {
-					typeof S() == "function" ? e(a) : e(o, -1);
+					typeof C() == "function" ? e(a) : e(o, -1);
 				}), append(e, n);
 			},
 			$$slots: { default: !0 }
 		}), reset(t), append(e, t);
 	};
-	return if_block(kt, (e) => {
-		get(ct) && c() && e(At);
-	}), reset(Tt), bind_this(Tt, (e) => set(be, e), () => get(be)), action(Tt, (e) => xt?.(e)), reset(wt), bind_this(wt, (e) => set(re, e), () => get(re)), action(wt, (e, t) => bt?.(e, t), () => get(ot)), action(wt, (e, t) => St?.(e, t), s), template_effect(() => {
-		set_class(wt, 1, `chat-message-list ${G() ?? "" ?? ""}`, "svelte-qpm4dm"), set_attribute(wt, "data-pw", typeof ne() == "string" ? ne() : null), set_attribute(wt, "testid", typeof ne() == "string" ? ne() : null);
-	}), event("scroll", wt, mt), append(e, wt), pop(Ct);
+	return if_block(jt, (e) => {
+		get(lt) && c() && e(Mt);
+	}), reset(Dt), bind_this(Dt, (e) => set(Me, e), () => get(Me)), action(Dt, (e) => St?.(e)), reset(Tt), bind_this(Tt, (e) => set(be, e), () => get(be)), action(Tt, (e, t) => xt?.(e, t), () => get(ct)), action(Tt, (e, t) => Ct?.(e, t), s), template_effect(() => {
+		Et = set_class(Tt, 1, `chat-message-list ${re() ?? "" ?? ""}`, "svelte-qpm4dm", Et, { "hide-scrollbar": l() }), set_attribute(Tt, "data-pw", typeof G() == "string" ? G() : null), set_attribute(Tt, "testid", typeof G() == "string" ? G() : null);
+	}), event("scroll", Tt, ht), append(e, Tt), pop(wt);
 }
 create_custom_element(ChatMessageList, {
 	messages: {},
@@ -52427,6 +52435,7 @@ create_custom_element(ChatMessageList, {
 	scrollPolicy: {},
 	pinHold: {},
 	jump: {},
+	hideScrollbar: {},
 	message: {},
 	messageBody: {},
 	messageAttachments: {},
@@ -55704,6 +55713,10 @@ customElements.define("sui-chat-message-list", create_custom_element(ChatMessage
 		type: "Boolean"
 	},
 	jump: { type: "Boolean" },
+	hideScrollbar: {
+		attribute: "hide-scrollbar",
+		type: "Boolean"
+	},
 	onscrollstate: { type: "Object" },
 	messageAttachments: { type: "Object" },
 	empty: { type: "Object" },

package/package.json

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