@juspay/svelte-ui-components 4.37.1 → 4.38.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.
|
@@ -314,7 +314,7 @@
|
|
|
314
314
|
|
|
315
315
|
.top-section {
|
|
316
316
|
display: flex;
|
|
317
|
-
flex-direction: row;
|
|
317
|
+
flex-direction: var(--list-item-top-section-flex-direction, row);
|
|
318
318
|
align-items: var(--list-item-top-section-align-items);
|
|
319
319
|
gap: var(--list-item-top-section-gap);
|
|
320
320
|
margin-bottom: 0;
|
|
@@ -360,12 +360,13 @@
|
|
|
360
360
|
.center-content {
|
|
361
361
|
display: flex;
|
|
362
362
|
flex: 1;
|
|
363
|
-
min-width: 0;
|
|
363
|
+
min-width: var(--list-item-center-content-min-width, 0);
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
.right-content {
|
|
367
367
|
display: var(--list-item-right-content-display, flex);
|
|
368
368
|
flex: var(--list-item-right-content-flex);
|
|
369
|
+
min-width: var(--list-item-right-content-min-width, auto);
|
|
369
370
|
}
|
|
370
371
|
|
|
371
372
|
.right-content-loader {
|
package/dist-wc/index.js
CHANGED
|
@@ -18924,7 +18924,7 @@ function resolveLabelHtml(e, t) {
|
|
|
18924
18924
|
//#region src/lib/ListItem/ListItem.svelte
|
|
18925
18925
|
var root$55 = /* @__PURE__ */ from_html("<div class=\"item-loader svelte-d2pqbq\"></div>"), root_1$51 = /* @__PURE__ */ from_html("<div><!></div>"), root_2$41 = /* @__PURE__ */ from_html("<div></div>"), root_3$38 = /* @__PURE__ */ from_html("<div><div class=\"right-img-wrapper svelte-d2pqbq\"><!></div></div>"), root_4$34 = /* @__PURE__ */ from_html("<div class=\"right-content-loader svelte-d2pqbq\"><!></div>"), root_5$30 = /* @__PURE__ */ from_html("<span class=\"right-content-text svelte-d2pqbq\"> </span>"), root_6$27 = /* @__PURE__ */ from_html("<div><!> <div><div><div class=\"left-content svelte-d2pqbq\"><!> <!></div> <div class=\"center-content svelte-d2pqbq\"><!> <!></div> <div class=\"right-content svelte-d2pqbq\"><!> <!> <!> <!></div></div> <div class=\"bottom-section svelte-d2pqbq\"><!></div></div></div>"), $$css$105 = {
|
|
18926
18926
|
hash: "svelte-d2pqbq",
|
|
18927
|
-
code: ".item-container.svelte-d2pqbq {position:relative;--loader-foreground: var(--list-item-loader-foreground, #86898d);--loader-background: var(--list-item-loader-background, #ffffff);--loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);}.item-loader.svelte-d2pqbq {position:absolute;height:100%;width:100%;background:var(--list-item-loader-background-color, #00000030);z-index:20;\n animation: svelte-d2pqbq-fill-loader ease-in-out var(--list-item-loader-duration, 8s);}\n\n @keyframes svelte-d2pqbq-fill-loader {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n }\n\n /* Same hazard as Button's progress-bar loader (see its comment for the full\n reasoning): this bar's width is a real elapsed-time signal over\n `--list-item-loader-duration`, not decoration, so a bare `animation: none`\n would freeze it at the base rule's `width: 100%` and read as \"finished\"\n for the entire duration instead of \"still loading\". Discrete steps keep\n the width an honest (if coarser) lower bound on elapsed time -- it can\n only under-report, never claim to be further along than it is -- while\n dropping the continuous slide prefers-reduced-motion targets. Lives in\n the component's own <style> because that is the only stylesheet that\n reaches inside the shadow root a custom-element consumer gets. */\n @media (prefers-reduced-motion: reduce) {.item-loader.svelte-d2pqbq {\n /* A LITERAL step count, deliberately not a token. `steps()` is invalid\n below 1, and an invalid value does not degrade to a safer stepped\n default: the whole declaration is dropped and the property falls back to\n the base rule's easing, restoring the continuous slide this block exists\n to remove. A consumer passing 0 to \"just freeze it\" would silently\n switch the guard off for every user who asked for reduced motion, and a\n guard that fails OPEN without saying so is worse than no guard. */animation-timing-function:steps(5, jump-end);}\n }.item.svelte-d2pqbq {display:flex;flex-direction:column;background-color:var(--list-item-background-color, transparent);-webkit-tap-highlight-color:transparent;cursor:var(--list-item-cursor, pointer);-moz-box-shadow:var(--list-item-box-shadow, none);-webkit-box-shadow:var(--list-item-box-shadow, none);box-shadow:var(--list-item-box-shadow, none);width:var(--list-item-box-width);border-radius:var(--list-item-border-radius, 0px);margin:var(--list-item-margin);padding:var(--list-item-padding);border:var(--list-item-border);transition:var(--list-item-transition);}.item.svelte-d2pqbq:hover {background-color:var(--list-item-hover-background-color, var(--list-item-background-color));border:var(--list-item-hover-border, var(--list-item-border));}.top-section.svelte-d2pqbq {display:flex;flex-direction:row;align-items:var(--list-item-top-section-align-items);gap:var(--list-item-top-section-gap);margin-bottom:0;}.left-content.svelte-d2pqbq {display:var(--list-item-left-content-display, flex);--image-height: var(--list-item-left-image-height, 24px);--image-width: var(--list-item-left-image-width, 24px);--image-padding: var(--list-item-left-image-padding, 0px);--image-border-radius: var(--list-item-left-image-border-radius, 0px);--image-margin: var(--list-item-left-image-margin, 0px);--image-filter: var(--list-item-left-image-filter, none);--image-background: var(--list-item-left-image-background);--image-border: var(--list-item-left-image-border);--image-transition: var(--list-item-transition);--image-object-fit: var(--list-item-left-image-object-fit);--image-hover-background: var(\n --list-item-left-image-hover-background,\n var(--list-item-left-image-background)\n );--image-hover-border: var(\n --list-item-left-image-hover-border,\n var(--list-item-left-image-border)\n );}.center-text.svelte-d2pqbq {display:flex;flex-direction:column;justify-content:var(--list-item-center-text-justify-content, flex-start);padding:var(--list-item-center-text-padding, 0px 20px);color:var(--list-item-center-text-color, #2f3841);font-size:var(--list-item-center-text-font-size, 12px);font-weight:var(--list-item-center-text-font-weight, 300);align-items:var(--list-item-center-text-vertical-align);margin:var(--list-item-center-text-margin);border:var(--list-item-center-text-border);cursor:var(--list-item-center-text-cursor, pointer);font-family:var(--list-item-center-text-font-family, inherit);}.center-content.svelte-d2pqbq {display:flex;flex:1;min-width:0;}.right-content.svelte-d2pqbq {display:var(--list-item-right-content-display, flex);flex:var(--list-item-right-content-flex);}.right-content-loader.svelte-d2pqbq {margin:var(--list-item-right-content-loader-margin);}.bottom-section.svelte-d2pqbq {flex-direction:row;margin-top:0;}.right-img-wrapper.svelte-d2pqbq {--image-height: var(--list-item-right-image-height, 18px);--image-width: var(--list-item-right-image-width, 18px);--image-padding: var(--list-item-right-image-padding, 0px);--image-border-radius: var(--list-item-right-image-border-radius, 0px);--image-margin: var(--list-item-right-image-margin, 0px);--image-filter: var(--list-item-right-image-filter);--image-background: var(--list-item-right-image-background);--image-border: var(--list-item-right-image-border);--image-transition: var(--list-item-transition);--image-hover-background: var(\n --list-item-right-image-hover-background,\n var(--list-item-right-image-background)\n );--image-hover-border: var(\n --list-item-right-image-hover-border,\n var(--list-item-right-image-border)\n );}.right-content-text.svelte-d2pqbq {color:var(--list-item-right-content-text-color, #2f3841);font-size:var(--list-item-right-content-text-font-size, 12px);font-weight:var(--list-item-right-content-text-font-weight, 300);display:var(--list-item-right-content-display, flex);align-items:var(--list-item-right-content-text-vertical-align);padding:var(--list-item-right-content-text-padding, 0px);margin:var(--list-item-right-content-text-margin, 0px);border:var(--list-item-right-content-text-border);cursor:var(--list-item-right-content-text-cursor, pointer);font-family:var(--list-item-right-content-text-font-family, inherit);justify-content:var(--list-item-right-content-text-justify-content);}.prevent-focus.svelte-d2pqbq:focus {outline:none;}\n\n /* preventFocus does not touch tabindex (see the root's tabindex expression\n above -- itemRole/suppressRoleAndTabindex govern that, unconditional on\n this prop), so every element carrying .prevent-focus stays a real,\n keyboard-Tab-reachable stop by default. docs/ListItem.md documents the\n prop as removing the outline \"for non-keyboard navigation contexts\" --\n :focus-visible is that exact distinction already built into the\n platform: it does not match a mouse/touch-triggered focus (the case the\n prop exists for) but does match a real keyboard Tab, so this restores\n WCAG 2.4.7 visibility for the one case preventFocus was never meant to\n hide it from. */.prevent-focus.svelte-d2pqbq:focus-visible {outline:var(--list-item-focus-outline, 2px solid #2563eb);outline-offset:var(--list-item-focus-outline-offset, -2px);}\n /* The loader is not the only motion in this file, and this block sits at the\n END on purpose: `.item` is declared after the guard above, so an override\n placed there would lose the same-specificity tie on source order -- the\n cascade trap BrandLoader's own guard had to account for.\n `--image-transition` is not a transition on this element at all; it is a\n custom property handed DOWN to the Img child, and a custom property is the\n only thing that crosses that boundary. Setting `transition: none` here would\n never reach the image, so the property itself is neutralised. */\n @media (prefers-reduced-motion: reduce) {.item.svelte-d2pqbq {transition:none;}.left-content.svelte-d2pqbq,\n .right-img-wrapper.svelte-d2pqbq {--image-transition: none;}\n }"
|
|
18927
|
+
code: ".item-container.svelte-d2pqbq {position:relative;--loader-foreground: var(--list-item-loader-foreground, #86898d);--loader-background: var(--list-item-loader-background, #ffffff);--loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);}.item-loader.svelte-d2pqbq {position:absolute;height:100%;width:100%;background:var(--list-item-loader-background-color, #00000030);z-index:20;\n animation: svelte-d2pqbq-fill-loader ease-in-out var(--list-item-loader-duration, 8s);}\n\n @keyframes svelte-d2pqbq-fill-loader {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n }\n\n /* Same hazard as Button's progress-bar loader (see its comment for the full\n reasoning): this bar's width is a real elapsed-time signal over\n `--list-item-loader-duration`, not decoration, so a bare `animation: none`\n would freeze it at the base rule's `width: 100%` and read as \"finished\"\n for the entire duration instead of \"still loading\". Discrete steps keep\n the width an honest (if coarser) lower bound on elapsed time -- it can\n only under-report, never claim to be further along than it is -- while\n dropping the continuous slide prefers-reduced-motion targets. Lives in\n the component's own <style> because that is the only stylesheet that\n reaches inside the shadow root a custom-element consumer gets. */\n @media (prefers-reduced-motion: reduce) {.item-loader.svelte-d2pqbq {\n /* A LITERAL step count, deliberately not a token. `steps()` is invalid\n below 1, and an invalid value does not degrade to a safer stepped\n default: the whole declaration is dropped and the property falls back to\n the base rule's easing, restoring the continuous slide this block exists\n to remove. A consumer passing 0 to \"just freeze it\" would silently\n switch the guard off for every user who asked for reduced motion, and a\n guard that fails OPEN without saying so is worse than no guard. */animation-timing-function:steps(5, jump-end);}\n }.item.svelte-d2pqbq {display:flex;flex-direction:column;background-color:var(--list-item-background-color, transparent);-webkit-tap-highlight-color:transparent;cursor:var(--list-item-cursor, pointer);-moz-box-shadow:var(--list-item-box-shadow, none);-webkit-box-shadow:var(--list-item-box-shadow, none);box-shadow:var(--list-item-box-shadow, none);width:var(--list-item-box-width);border-radius:var(--list-item-border-radius, 0px);margin:var(--list-item-margin);padding:var(--list-item-padding);border:var(--list-item-border);transition:var(--list-item-transition);}.item.svelte-d2pqbq:hover {background-color:var(--list-item-hover-background-color, var(--list-item-background-color));border:var(--list-item-hover-border, var(--list-item-border));}.top-section.svelte-d2pqbq {display:flex;flex-direction:var(--list-item-top-section-flex-direction, row);align-items:var(--list-item-top-section-align-items);gap:var(--list-item-top-section-gap);margin-bottom:0;}.left-content.svelte-d2pqbq {display:var(--list-item-left-content-display, flex);--image-height: var(--list-item-left-image-height, 24px);--image-width: var(--list-item-left-image-width, 24px);--image-padding: var(--list-item-left-image-padding, 0px);--image-border-radius: var(--list-item-left-image-border-radius, 0px);--image-margin: var(--list-item-left-image-margin, 0px);--image-filter: var(--list-item-left-image-filter, none);--image-background: var(--list-item-left-image-background);--image-border: var(--list-item-left-image-border);--image-transition: var(--list-item-transition);--image-object-fit: var(--list-item-left-image-object-fit);--image-hover-background: var(\n --list-item-left-image-hover-background,\n var(--list-item-left-image-background)\n );--image-hover-border: var(\n --list-item-left-image-hover-border,\n var(--list-item-left-image-border)\n );}.center-text.svelte-d2pqbq {display:flex;flex-direction:column;justify-content:var(--list-item-center-text-justify-content, flex-start);padding:var(--list-item-center-text-padding, 0px 20px);color:var(--list-item-center-text-color, #2f3841);font-size:var(--list-item-center-text-font-size, 12px);font-weight:var(--list-item-center-text-font-weight, 300);align-items:var(--list-item-center-text-vertical-align);margin:var(--list-item-center-text-margin);border:var(--list-item-center-text-border);cursor:var(--list-item-center-text-cursor, pointer);font-family:var(--list-item-center-text-font-family, inherit);}.center-content.svelte-d2pqbq {display:flex;flex:1;min-width:var(--list-item-center-content-min-width, 0);}.right-content.svelte-d2pqbq {display:var(--list-item-right-content-display, flex);flex:var(--list-item-right-content-flex);min-width:var(--list-item-right-content-min-width, auto);}.right-content-loader.svelte-d2pqbq {margin:var(--list-item-right-content-loader-margin);}.bottom-section.svelte-d2pqbq {flex-direction:row;margin-top:0;}.right-img-wrapper.svelte-d2pqbq {--image-height: var(--list-item-right-image-height, 18px);--image-width: var(--list-item-right-image-width, 18px);--image-padding: var(--list-item-right-image-padding, 0px);--image-border-radius: var(--list-item-right-image-border-radius, 0px);--image-margin: var(--list-item-right-image-margin, 0px);--image-filter: var(--list-item-right-image-filter);--image-background: var(--list-item-right-image-background);--image-border: var(--list-item-right-image-border);--image-transition: var(--list-item-transition);--image-hover-background: var(\n --list-item-right-image-hover-background,\n var(--list-item-right-image-background)\n );--image-hover-border: var(\n --list-item-right-image-hover-border,\n var(--list-item-right-image-border)\n );}.right-content-text.svelte-d2pqbq {color:var(--list-item-right-content-text-color, #2f3841);font-size:var(--list-item-right-content-text-font-size, 12px);font-weight:var(--list-item-right-content-text-font-weight, 300);display:var(--list-item-right-content-display, flex);align-items:var(--list-item-right-content-text-vertical-align);padding:var(--list-item-right-content-text-padding, 0px);margin:var(--list-item-right-content-text-margin, 0px);border:var(--list-item-right-content-text-border);cursor:var(--list-item-right-content-text-cursor, pointer);font-family:var(--list-item-right-content-text-font-family, inherit);justify-content:var(--list-item-right-content-text-justify-content);}.prevent-focus.svelte-d2pqbq:focus {outline:none;}\n\n /* preventFocus does not touch tabindex (see the root's tabindex expression\n above -- itemRole/suppressRoleAndTabindex govern that, unconditional on\n this prop), so every element carrying .prevent-focus stays a real,\n keyboard-Tab-reachable stop by default. docs/ListItem.md documents the\n prop as removing the outline \"for non-keyboard navigation contexts\" --\n :focus-visible is that exact distinction already built into the\n platform: it does not match a mouse/touch-triggered focus (the case the\n prop exists for) but does match a real keyboard Tab, so this restores\n WCAG 2.4.7 visibility for the one case preventFocus was never meant to\n hide it from. */.prevent-focus.svelte-d2pqbq:focus-visible {outline:var(--list-item-focus-outline, 2px solid #2563eb);outline-offset:var(--list-item-focus-outline-offset, -2px);}\n /* The loader is not the only motion in this file, and this block sits at the\n END on purpose: `.item` is declared after the guard above, so an override\n placed there would lose the same-specificity tie on source order -- the\n cascade trap BrandLoader's own guard had to account for.\n `--image-transition` is not a transition on this element at all; it is a\n custom property handed DOWN to the Img child, and a custom property is the\n only thing that crosses that boundary. Setting `transition: none` here would\n never reach the image, so the property itself is neutralised. */\n @media (prefers-reduced-motion: reduce) {.item.svelte-d2pqbq {transition:none;}.left-content.svelte-d2pqbq,\n .right-img-wrapper.svelte-d2pqbq {--image-transition: none;}\n }"
|
|
18928
18928
|
};
|
|
18929
18929
|
function ListItem(e, t) {
|
|
18930
18930
|
push(t, !0), append_styles$1(e, $$css$105);
|