@lyeve-labs/ui-kit 0.20.0 → 0.21.0

package/dist/components/Pagination.svelte

@@ -22,6 +22,18 @@
      * back.
      */
     hasNext?: boolean;
+    /**
+     * How many rows the page on screen actually holds.
+     *
+     * Only an uncounted list needs it, and only for the sentence: without a
+     * total the component knows where the page starts but not where it ends,
+     * because the last page is short and nothing here says how short. Given it,
+     * the summary states a range instead of naming the page.
+     *
+     * It is the row count of what was rendered, not a page size. A caller that
+     * asked for 50 and received 12 passes 12.
+     */
+    count?: number;
     /**
      * What the list holds, in the plural: 'files', 'jobs', 'webhooks'.
      *
@@ -61,6 +73,7 @@
     total = undefined,
     perPage = 20,
     hasNext = false,
+    count = undefined,
     noun = '',
     class: cls = '',
     onchange,
@@ -79,6 +92,15 @@
   let from = $derived(Math.min((safePage - 1) * perPage + 1, safeTotal));
   let to = $derived(Math.min(safePage * perPage, safeTotal));
 
+  /**
+   * The rows on screen, when the caller states them. Zero and a negative are
+   * both "nothing to describe": a page of no rows has no range, and the summary
+   * falls back to naming the page rather than printing an inverted one.
+   */
+  let safeCount = $derived(
+    typeof count === 'number' && isFinite(count) && count > 0 ? Math.floor(count) : undefined,
+  );
+
   let canPrev = $derived(safePage > 1);
   let canNext = $derived(counted ? safePage < totalPages : hasNext);
   let hasControls = $derived(counted ? totalPages > 1 : canPrev || canNext);
@@ -140,6 +162,11 @@
    */
   let summary = $derived.by(() => {
     if (!counted) {
+      if (safeCount !== undefined) {
+        const start = (safePage - 1) * perPage + 1;
+        const span = `${formatCount(start)} to ${formatCount(start + safeCount - 1)}`;
+        return label ? `${label} ${span}` : span;
+      }
       return label ? `${label}, page ${formatCount(safePage)}` : `Page ${formatCount(safePage)}`;
     }
     if (safeTotal === 0) return label ? `No ${label}` : 'No results';

package/dist/components/Pagination.svelte.d.ts

@@ -18,6 +18,18 @@ interface Base {
      * back.
      */
     hasNext?: boolean;
+    /**
+     * How many rows the page on screen actually holds.
+     *
+     * Only an uncounted list needs it, and only for the sentence: without a
+     * total the component knows where the page starts but not where it ends,
+     * because the last page is short and nothing here says how short. Given it,
+     * the summary states a range instead of naming the page.
+     *
+     * It is the row count of what was rendered, not a page size. A caller that
+     * asked for 50 and received 12 passes 12.
+     */
+    count?: number;
     /**
      * What the list holds, in the plural: 'files', 'jobs', 'webhooks'.
      *

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.20.0";
+export declare const VERSION = "0.21.0";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.20.0';
+export const VERSION = '0.21.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",