@juspay/svelte-ui-components 4.45.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/Scroller/Scroller.svelte

@@ -315,6 +315,24 @@
     display: none;
   }
 
+  /* Scrollbar tokens, only while a scrollbar is shown. Unset, they must change nothing, and
+     a plain declaration cannot manage that: one that resolves to nothing still computes as
+     unset, which wipes an inherited scrollbar-color and replaces an earlier rule of zero
+     specificity such as `* { scrollbar-width: thin }`. So the pair sits in an anonymous
+     layer, where any unlayered rule of the app beats it whatever its specificity, and the
+     fallback is revert-layer, which hands the property back to whatever the layers before
+     this one (an app's own `@layer base`, then the browser) would have given it. The
+     keywords initial and inherit, tried first, restore the browser default but still
+     displace that earlier layer. The selector is inside :where() so it adds no specificity.
+     Chromium stops applying ::-webkit-scrollbar rules once either property is not auto, so
+     setting a token replaces an app's webkit scrollbar styling instead of adding to it. */
+  @layer {
+    :where(.scroll-container:not(.hide-scrollbar)) {
+      scrollbar-width: var(--scroller-scrollbar-width, revert-layer);
+      scrollbar-color: var(--scroller-scrollbar-color, revert-layer);
+    }
+  }
+
   .scroll-container.dragging {
     cursor: grabbing;
   }

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);
@@ -20906,7 +20906,7 @@ customElements.define("sui-phone", create_custom_element(Phone_wc, {
 //#region src/lib/Scroller/Scroller.svelte
 var root$50 = /* @__PURE__ */ from_html("<span class=\"arrow-icon svelte-1safnmk\"></span>"), root_1$46 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-prev svelte-1safnmk\"><!></div>"), root_2$36 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-start svelte-1safnmk\"></div>"), root_3$34 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-end svelte-1safnmk\"></div>"), root_4$30 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-next svelte-1safnmk\"><!></div>"), root_5$27 = /* @__PURE__ */ from_html("<div><!> <!> <div role=\"region\" tabindex=\"-1\"><!></div> <!> <!></div>"), $$css$97 = {
 	hash: "svelte-1safnmk",
-	code: ".scroller.svelte-1safnmk {position:relative;display:flex;width:var(--scroller-width, 100%);height:var(--scroller-height, fit-content);}.scroller.horizontal.svelte-1safnmk {flex-direction:row;align-items:center;}.scroller.vertical.svelte-1safnmk {flex-direction:column;align-items:stretch;}.scroll-container.svelte-1safnmk {flex:1;display:flex;overflow:auto;gap:var(--scroller-gap, 0px);padding:var(--scroller-padding, 0px);}.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}\n\n  /* The stylesheet half, for scrolls this component does not initiate -- a wheel,\n     a dragged scrollbar, an anchor jump. The script half above covers the three it\n     does initiate, and cannot be replaced by this: an inline style write and a\n     ScrollToOptions value both outrank or bypass every rule here. */\n  @media (prefers-reduced-motion: reduce) {.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk),\n    .scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {scroll-behavior:auto;}\n  }.scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}.scroll-container.snap.svelte-1safnmk {scroll-snap-type:var(--scroller-snap-type, x mandatory);}.scroller.vertical.svelte-1safnmk .scroll-container.snap:where(.svelte-1safnmk) {scroll-snap-type:var(--scroller-snap-type, y mandatory);}.scroll-container.hide-scrollbar.svelte-1safnmk {-ms-overflow-style:none;scrollbar-width:none;}.scroll-container.hide-scrollbar.svelte-1safnmk::-webkit-scrollbar {display:none;}.scroll-container.dragging.svelte-1safnmk {cursor:grabbing;}.arrow.svelte-1safnmk {display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;margin:var(--scroller-arrow-margin, 0px);--button-width: var(--scroller-arrow-size, 32px);--button-height: var(--scroller-arrow-size, 32px);--button-border-radius: var(--scroller-arrow-border-radius, 50%);--button-color: var(--scroller-arrow-background, #ffffff);--button-border: var(--scroller-arrow-border, 1px solid #e0e0e0);--button-text-color: var(--scroller-arrow-color, #333333);--button-padding: var(--scroller-arrow-padding, 4px);--button-box-shadow: var(--scroller-arrow-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));--button-hover-color: var(--scroller-arrow-hover-background, #f5f5f5);--button-hover-text-color: var(\n      --scroller-arrow-hover-color,\n      var(--scroller-arrow-color, #333333)\n    );}.arrow-icon.svelte-1safnmk {display:flex;align-items:center;justify-content:center;line-height:0;}.arrow-icon.svelte-1safnmk svg {width:var(--scroller-arrow-icon-size, 16px);height:var(--scroller-arrow-icon-size, 16px);}.gradient.svelte-1safnmk {position:absolute;z-index:1;pointer-events:none;}.scroller.horizontal.svelte-1safnmk .gradient:where(.svelte-1safnmk) {top:0;bottom:0;width:var(--scroller-gradient-size, 80px);}.scroller.horizontal.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {left:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.horizontal.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {right:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient:where(.svelte-1safnmk) {left:0;right:0;height:var(--scroller-gradient-size, 80px);}.scroller.vertical.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {top:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {bottom:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to top,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}"
+	code: ".scroller.svelte-1safnmk {position:relative;display:flex;width:var(--scroller-width, 100%);height:var(--scroller-height, fit-content);}.scroller.horizontal.svelte-1safnmk {flex-direction:row;align-items:center;}.scroller.vertical.svelte-1safnmk {flex-direction:column;align-items:stretch;}.scroll-container.svelte-1safnmk {flex:1;display:flex;overflow:auto;gap:var(--scroller-gap, 0px);padding:var(--scroller-padding, 0px);}.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}\n\n  /* The stylesheet half, for scrolls this component does not initiate -- a wheel,\n     a dragged scrollbar, an anchor jump. The script half above covers the three it\n     does initiate, and cannot be replaced by this: an inline style write and a\n     ScrollToOptions value both outrank or bypass every rule here. */\n  @media (prefers-reduced-motion: reduce) {.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk),\n    .scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {scroll-behavior:auto;}\n  }.scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}.scroll-container.snap.svelte-1safnmk {scroll-snap-type:var(--scroller-snap-type, x mandatory);}.scroller.vertical.svelte-1safnmk .scroll-container.snap:where(.svelte-1safnmk) {scroll-snap-type:var(--scroller-snap-type, y mandatory);}.scroll-container.hide-scrollbar.svelte-1safnmk {-ms-overflow-style:none;scrollbar-width:none;}.scroll-container.hide-scrollbar.svelte-1safnmk::-webkit-scrollbar {display:none;}\n\n  /* Scrollbar tokens, only while a scrollbar is shown. Unset, they must change nothing, and\n     a plain declaration cannot manage that: one that resolves to nothing still computes as\n     unset, which wipes an inherited scrollbar-color and replaces an earlier rule of zero\n     specificity such as `* { scrollbar-width: thin }`. So the pair sits in an anonymous\n     layer, where any unlayered rule of the app beats it whatever its specificity, and the\n     fallback is revert-layer, which hands the property back to whatever the layers before\n     this one (an app's own `@layer base`, then the browser) would have given it. The\n     keywords initial and inherit, tried first, restore the browser default but still\n     displace that earlier layer. The selector is inside :where() so it adds no specificity.\n     Chromium stops applying ::-webkit-scrollbar rules once either property is not auto, so\n     setting a token replaces an app's webkit scrollbar styling instead of adding to it. */\n  @layer {:where(.scroll-container.svelte-1safnmk:not(.hide-scrollbar)) {scrollbar-width:var(--scroller-scrollbar-width, revert-layer);scrollbar-color:var(--scroller-scrollbar-color, revert-layer);}\n  }.scroll-container.dragging.svelte-1safnmk {cursor:grabbing;}.arrow.svelte-1safnmk {display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;margin:var(--scroller-arrow-margin, 0px);--button-width: var(--scroller-arrow-size, 32px);--button-height: var(--scroller-arrow-size, 32px);--button-border-radius: var(--scroller-arrow-border-radius, 50%);--button-color: var(--scroller-arrow-background, #ffffff);--button-border: var(--scroller-arrow-border, 1px solid #e0e0e0);--button-text-color: var(--scroller-arrow-color, #333333);--button-padding: var(--scroller-arrow-padding, 4px);--button-box-shadow: var(--scroller-arrow-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));--button-hover-color: var(--scroller-arrow-hover-background, #f5f5f5);--button-hover-text-color: var(\n      --scroller-arrow-hover-color,\n      var(--scroller-arrow-color, #333333)\n    );}.arrow-icon.svelte-1safnmk {display:flex;align-items:center;justify-content:center;line-height:0;}.arrow-icon.svelte-1safnmk svg {width:var(--scroller-arrow-icon-size, 16px);height:var(--scroller-arrow-icon-size, 16px);}.gradient.svelte-1safnmk {position:absolute;z-index:1;pointer-events:none;}.scroller.horizontal.svelte-1safnmk .gradient:where(.svelte-1safnmk) {top:0;bottom:0;width:var(--scroller-gradient-size, 80px);}.scroller.horizontal.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {left:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.horizontal.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {right:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient:where(.svelte-1safnmk) {left:0;right:0;height:var(--scroller-gradient-size, 80px);}.scroller.vertical.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {top:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {bottom:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to top,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}"
 };
 function Scroller(e, t) {
 	push(t, !0), append_styles$1(e, $$css$97);

package/package.json

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