@juspay/svelte-ui-components 4.45.0 → 4.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Scroller/Scroller.svelte +18 -0
- package/dist-wc/index.js +1 -1
- package/package.json +1 -1
|
@@ -315,6 +315,24 @@
|
|
|
315
315
|
display: none;
|
|
316
316
|
}
|
|
317
317
|
|
|
318
|
+
/* Scrollbar tokens, only while a scrollbar is shown. Unset, they must change nothing, and
|
|
319
|
+
a plain declaration cannot manage that: one that resolves to nothing still computes as
|
|
320
|
+
unset, which wipes an inherited scrollbar-color and replaces an earlier rule of zero
|
|
321
|
+
specificity such as `* { scrollbar-width: thin }`. So the pair sits in an anonymous
|
|
322
|
+
layer, where any unlayered rule of the app beats it whatever its specificity, and the
|
|
323
|
+
fallback is revert-layer, which hands the property back to whatever the layers before
|
|
324
|
+
this one (an app's own `@layer base`, then the browser) would have given it. The
|
|
325
|
+
keywords initial and inherit, tried first, restore the browser default but still
|
|
326
|
+
displace that earlier layer. The selector is inside :where() so it adds no specificity.
|
|
327
|
+
Chromium stops applying ::-webkit-scrollbar rules once either property is not auto, so
|
|
328
|
+
setting a token replaces an app's webkit scrollbar styling instead of adding to it. */
|
|
329
|
+
@layer {
|
|
330
|
+
:where(.scroll-container:not(.hide-scrollbar)) {
|
|
331
|
+
scrollbar-width: var(--scroller-scrollbar-width, revert-layer);
|
|
332
|
+
scrollbar-color: var(--scroller-scrollbar-color, revert-layer);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
318
336
|
.scroll-container.dragging {
|
|
319
337
|
cursor: grabbing;
|
|
320
338
|
}
|
package/dist-wc/index.js
CHANGED
|
@@ -20906,7 +20906,7 @@ customElements.define("sui-phone", create_custom_element(Phone_wc, {
|
|
|
20906
20906
|
//#region src/lib/Scroller/Scroller.svelte
|
|
20907
20907
|
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 = {
|
|
20908
20908
|
hash: "svelte-1safnmk",
|
|
20909
|
-
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 );}"
|
|
20909
|
+
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 );}"
|
|
20910
20910
|
};
|
|
20911
20911
|
function Scroller(e, t) {
|
|
20912
20912
|
push(t, !0), append_styles$1(e, $$css$97);
|