@juspay/svelte-ui-components 4.46.0 → 4.47.0

package/dist/Img/Img.svelte

@@ -368,4 +368,28 @@
     background: var(--image-hover-background, var(--image-background));
     border: var(--image-hover-border, var(--image-border));
   }
+
+  /* The ceilings sit in a cascade layer and read through :where(), for one reason:
+     an Img that sets neither token must compute exactly what it computed before
+     they existed, beside whatever max-width rule the app already has.
+
+     A layer loses to every rule outside a layer, whatever its selector and
+     whichever stylesheet loads first, so an app's `img { max-width: 100% }`, its
+     `* { max-width: 100% }` and a zero-specificity `:where(img)` reset all keep
+     winning. A zero-specificity rule outside a layer would not do that: it ties
+     with the app's `*` and `:where()` rules, and the later stylesheet takes it.
+     :where() keeps the rule at zero specificity should it ever leave the layer;
+     Svelte compiles :where(img) to :where(img.svelte-hash).
+
+     The fallback is `revert-layer`, not `none`. `none` is the initial value, but
+     as a declaration it would outrank a reset an app keeps in an earlier layer
+     (Tailwind 4's preflight does). `revert-layer` hands the property back to the
+     layers below this one, and to `none` when there are none, so an unset token
+     declares nothing. */
+  @layer svelte-ui-img {
+    :where(img, svg) {
+      max-width: var(--image-max-width, revert-layer);
+      max-height: var(--image-max-height, revert-layer);
+    }
+  }
 </style>

package/dist-wc/index.js

@@ -3863,7 +3863,7 @@ customElements.define("sui-animated-number", create_custom_element(AnimatedNumbe
 //#region src/lib/Img/Img.svelte
 var root_1$100 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$78 = /* @__PURE__ */ from_html("<img/>"), $$css$204 = {
 	hash: "svelte-13ogpty",
-	code: "img.svelte-13ogpty,\n  svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n  svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}"
+	code: "img.svelte-13ogpty,\n  svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n  svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}\n\n  /* The ceilings sit in a cascade layer and read through :where(), for one reason:\n     an Img that sets neither token must compute exactly what it computed before\n     they existed, beside whatever max-width rule the app already has.\n\n     A layer loses to every rule outside a layer, whatever its selector and\n     whichever stylesheet loads first, so an app's `img { max-width: 100% }`, its\n     `* { max-width: 100% }` and a zero-specificity `:where(img)` reset all keep\n     winning. A zero-specificity rule outside a layer would not do that: it ties\n     with the app's `*` and `:where()` rules, and the later stylesheet takes it.\n     :where() keeps the rule at zero specificity should it ever leave the layer;\n     Svelte compiles :where(img) to :where(img.svelte-hash).\n\n     The fallback is `revert-layer`, not `none`. `none` is the initial value, but\n     as a declaration it would outrank a reset an app keeps in an earlier layer\n     (Tailwind 4's preflight does). `revert-layer` hands the property back to the\n     layers below this one, and to `none` when there are none, so an unset token\n     declares nothing. */\n  @layer svelte-ui-img {:where(img.svelte-13ogpty, svg.svelte-13ogpty) {max-width:var(--image-max-width, revert-layer);max-height:var(--image-max-height, revert-layer);}\n  }"
 };
 function Img(e, t) {
 	push(t, !0), append_styles$1(e, $$css$204);

package/package.json

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