@juspay/svelte-ui-components 4.3.0 → 4.4.0

package/dist/EmptyState/EmptyState.svelte

@@ -9,7 +9,8 @@
     classes,
     testId,
     titleSnippet,
-    descriptionSnippet
+    descriptionSnippet,
+    density
   }: EmptyStateProperties = $props();
 </script>
 
@@ -17,6 +18,7 @@
   class="empty-state {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
+  data-density={typeof density === 'string' ? density : null}
 >
   {#if typeof icon === 'function'}
     <div class="empty-state-icon">
@@ -62,13 +64,28 @@
   .empty-state {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: var(--empty-state-align-items, center);
     padding: var(--empty-state-padding, 32px 16px);
     text-align: var(--empty-state-text-align, center);
     gap: var(--empty-state-gap, 0px);
     color: inherit;
   }
 
+  /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so
+     these only take over when `data-density` is actually set — no attribute,
+     no match, today's defaults above stand untouched. `--empty-state-padding`
+     and `--empty-state-gap` are read first in both cases, so an instance-level
+     override always wins over either density's default. */
+  .empty-state[data-density='page'] {
+    padding: var(--empty-state-padding, 48px 24px);
+    gap: var(--empty-state-gap, 12px);
+  }
+
+  .empty-state[data-density='panel'] {
+    padding: var(--empty-state-padding, 16px 12px);
+    gap: var(--empty-state-gap, 4px);
+  }
+
   .empty-state-icon {
     width: var(--empty-state-icon-size, 48px);
     height: var(--empty-state-icon-size, 48px);

package/dist/EmptyState/properties.d.ts

@@ -16,6 +16,16 @@ export type OptionalEmptyStateProperties = {
     children?: Snippet;
     classes?: string;
     testId?: string;
+    /**
+     * Sets sane padding/gap defaults for the placeholder's context, without
+     * requiring a wrapper class. Omit for today's default sizing (unchanged).
+     * `'page'` is roomier, for a full route/view standing in for its content.
+     * `'panel'` is tighter, for a constrained panel, popover, or rail.
+     * Exposed on the root element as `data-density` so a consumer's own CSS can
+     * target it too. Either default can still be overridden per-instance with
+     * `--empty-state-padding` / `--empty-state-gap`, which always take priority.
+     */
+    density?: 'page' | 'panel';
     /**
      * Optional snippet that replaces the `title` string at render time.
      * When provided, the mandatory `title` prop is still required for backward-compatibility

package/dist-wc/index.js

@@ -13717,12 +13717,12 @@ customElements.define("sui-card", create_custom_element(Card_wc, {
 //#region src/lib/EmptyState/EmptyState.svelte
 var root$44 = /* @__PURE__ */ from_html("<div class=\"empty-state-icon svelte-vmfces\"><!></div>"), root_1$37 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"><!></div>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"> </div>"), root_3$29 = /* @__PURE__ */ from_html("<div class=\"empty-state-actions svelte-vmfces\"><!></div>"), root_4$25 = /* @__PURE__ */ from_html("<div><!> <div class=\"empty-state-title svelte-vmfces\"><!></div> <!> <!></div>"), $$css$43 = {
 	hash: "svelte-vmfces",
-	code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:center;padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
+	code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:var(--empty-state-align-items, center);padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}\n\n  /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so\n     these only take over when `data-density` is actually set — no attribute,\n     no match, today's defaults above stand untouched. `--empty-state-padding`\n     and `--empty-state-gap` are read first in both cases, so an instance-level\n     override always wins over either density's default. */.empty-state[data-density='page'].svelte-vmfces {padding:var(--empty-state-padding, 48px 24px);gap:var(--empty-state-gap, 12px);}.empty-state[data-density='panel'].svelte-vmfces {padding:var(--empty-state-padding, 16px 12px);gap:var(--empty-state-gap, 4px);}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
 };
 function EmptyState(e, t) {
 	push(t, !0), append_styles$1(e, $$css$43);
-	let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7);
-	var f = {
+	let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7), f = prop(t, "density", 7);
+	var p = {
 		get title() {
 			return n();
 		},
@@ -13770,47 +13770,53 @@ function EmptyState(e, t) {
 		},
 		set descriptionSnippet(e) {
 			u(e), flushSync();
+		},
+		get density() {
+			return f();
+		},
+		set density(e) {
+			f(e), flushSync();
 		}
-	}, p = root_4$25(), h = child(p), S = (e) => {
+	}, h = root_4$25(), S = child(h), C = (e) => {
 		var t = root$44();
 		snippet(child(t), a), reset(t), append(e, t);
 	};
-	if_block(h, (e) => {
-		typeof a() == "function" && e(S);
+	if_block(S, (e) => {
+		typeof a() == "function" && e(C);
 	});
-	var C = sibling(h, 2), k = child(C), R = (e) => {
+	var k = sibling(S, 2), R = child(k), te = (e) => {
 		var t = comment();
 		snippet(first_child(t), l), append(e, t);
-	}, te = (e) => {
+	}, ne = (e) => {
 		var t = text();
 		template_effect(() => set_text(t, n())), append(e, t);
 	};
-	if_block(k, (e) => {
-		typeof l() == "function" ? e(R) : e(te, -1);
-	}), reset(C);
-	var ne = sibling(C, 2), re = (e) => {
+	if_block(R, (e) => {
+		typeof l() == "function" ? e(te) : e(ne, -1);
+	}), reset(k);
+	var re = sibling(k, 2), G = (e) => {
 		var t = root_1$37();
 		snippet(child(t), u), reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null);
 		}), append(e, t);
-	}, G = (e) => {
+	}, be = (e) => {
 		var t = root_2$31(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null), set_text(n, i());
 		}), append(e, t);
 	};
-	if_block(ne, (e) => {
-		typeof u() == "function" ? e(re) : typeof i() == "string" && i().length > 0 && e(G, 1);
+	if_block(re, (e) => {
+		typeof u() == "function" ? e(G) : typeof i() == "string" && i().length > 0 && e(be, 1);
 	});
-	var be = sibling(ne, 2), Me = (e) => {
+	var Me = sibling(re, 2), Re = (e) => {
 		var t = root_3$29();
 		snippet(child(t), o), reset(t), append(e, t);
 	};
-	return if_block(be, (e) => {
-		typeof o() == "function" && e(Me);
-	}), reset(p), template_effect(() => {
-		set_class(p, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(p, "data-pw", typeof c() == "string" ? c() : null), set_attribute(p, "testid", typeof c() == "string" ? c() : null), set_attribute(C, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(C, "testid", typeof c() == "string" ? `${c()}-title` : null);
-	}), append(e, p), pop(f);
+	return if_block(Me, (e) => {
+		typeof o() == "function" && e(Re);
+	}), reset(h), template_effect(() => {
+		set_class(h, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(h, "data-pw", typeof c() == "string" ? c() : null), set_attribute(h, "testid", typeof c() == "string" ? c() : null), set_attribute(h, "data-density", typeof f() == "string" ? f() : null), set_attribute(k, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(k, "testid", typeof c() == "string" ? `${c()}-title` : null);
+	}), append(e, h), pop(p);
 }
 create_custom_element(EmptyState, {
 	title: {},
@@ -13820,7 +13826,8 @@ create_custom_element(EmptyState, {
 	classes: {},
 	testId: {},
 	titleSnippet: {},
-	descriptionSnippet: {}
+	descriptionSnippet: {},
+	density: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/EmptyState.wc.svelte
@@ -13884,6 +13891,7 @@ customElements.define("sui-empty-state", create_custom_element(EmptyState_wc, {
 		attribute: "test-id",
 		type: "String"
 	},
+	density: { type: "String" },
 	icon: { type: "Object" },
 	titleSnippet: { type: "Object" },
 	descriptionSnippet: { type: "Object" }

package/package.json

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