@juspay/svelte-ui-components 4.43.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-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);

package/package.json

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