@juspay/svelte-ui-components 4.37.0 → 4.38.0

package/dist/ListItem/ListItem.svelte

@@ -314,7 +314,7 @@
 
   .top-section {
     display: flex;
-    flex-direction: row;
+    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;
@@ -360,12 +360,13 @@
   .center-content {
     display: flex;
     flex: 1;
-    min-width: 0;
+    min-width: var(--list-item-center-content-min-width, 0);
   }
 
   .right-content {
     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 {

package/dist/Table/Table.svelte

@@ -1228,6 +1228,7 @@
                   value={[String(effectivePageSize)]}
                   disabled={pagination.isLoading ?? false}
                   usePortal
+                  ariaLabel={labels?.rowsPerPage ?? 'Rows per page'}
                   testId={pagination.testId && `${pagination.testId}-page-size`}
                   onchange={(selectedSizes) => {
                     if (selectedSizes.length > 0) {

package/dist/Table/properties.d.ts

@@ -520,8 +520,9 @@ export type TableProperties = OptionalTableProperties & TableEventProperties;
  * Accessible names Table generates for its own controls, for callers who do
  * not ship an English UI.
  *
- * Every member is optional and falls back to the English string Table has
- * always used, so adding this prop changes nothing for existing consumers.
+ * Every member is optional and falls back to an English default. All but
+ * `rowsPerPage` keep the string Table has always used; `rowsPerPage` adds a
+ * name to a control that previously had none.
  *
  * The two that depend on a column, and the one that depends on a row, are
  * functions rather than templates with a placeholder: a translator needs to
@@ -546,6 +547,8 @@ export type TableLabels = {
     clearSearch?: string;
     /** Button that dismisses the search box. Default: `Close search`. */
     closeSearch?: string;
+    /** Page-size selector in the built-in paginator footer. Default: `Rows per page`. */
+    rowsPerPage?: string;
 };
 export type OptionalTableProperties = {
     labels?: TableLabels;

package/dist-wc/index.js

@@ -18924,7 +18924,7 @@ function resolveLabelHtml(e, t) {
 //#region src/lib/ListItem/ListItem.svelte
 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 = {
 	hash: "svelte-d2pqbq",
-	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  }"
+	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  }"
 };
 function ListItem(e, t) {
 	push(t, !0), append_styles$1(e, $$css$105);
@@ -24694,7 +24694,7 @@ function Table(e, t) {
 						let e = /* @__PURE__ */ user_derived(() => get(An).map((e) => ({
 							id: String(e),
 							label: String(e)
-						}))), t = /* @__PURE__ */ user_derived(() => [String(get(Cn))]), i = /* @__PURE__ */ user_derived(() => dt().isLoading ?? !1), a = /* @__PURE__ */ user_derived(() => dt().testId && `${dt().testId}-page-size`);
+						}))), t = /* @__PURE__ */ user_derived(() => [String(get(Cn))]), i = /* @__PURE__ */ user_derived(() => dt().isLoading ?? !1), a = /* @__PURE__ */ user_derived(() => bt()?.rowsPerPage ?? "Rows per page"), o = /* @__PURE__ */ user_derived(() => dt().testId && `${dt().testId}-page-size`);
 						Select(n, {
 							get items() {
 								return get(e);
@@ -24706,9 +24706,12 @@ function Table(e, t) {
 								return get(i);
 							},
 							usePortal: !0,
-							get testId() {
+							get ariaLabel() {
 								return get(a);
 							},
+							get testId() {
+								return get(o);
+							},
 							onchange: (e) => {
 								e.length > 0 && Pn(Number(e[0]));
 							}

package/package.json

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