@svgrid/grid 2.2.33 → 2.2.34

package/dist/GridFooter.svelte

@@ -4,7 +4,6 @@
       type TableFeatures,
     } from "./index";
   import "./sv-grid-scrollbar";
-  import SvGridDropdown from "./SvGridDropdown.svelte";
   import {
       fmtStat,
     } from "./SvGrid.helpers";
@@ -28,6 +27,26 @@
     pageSizeOptions?: number[];
   } = $props();
 
+  // SvGridDropdown is ~22 KB and exists here only to pick one of four numbers.
+  // Importing it statically also dragged it into the base bundle and silently
+  // defeated the lazy `import()` in SvGrid.svelte, which loads the same
+  // component as a cell editor. So the closed trigger below is plain markup
+  // reusing the dropdown's own classes (identical appearance), and the real
+  // component is fetched on first open. Keep this lazy: a static import here
+  // re-breaks the cell-editor split too, not just the footer.
+  let PageSizeDropdown = $state<typeof import("./SvGridDropdown.svelte").default | null>(null);
+  let loadingPageSize = $state(false);
+
+  async function openPageSize() {
+    if (PageSizeDropdown || loadingPageSize) return;
+    loadingPageSize = true;
+    try {
+      PageSizeDropdown = (await import("./SvGridDropdown.svelte")).default;
+    } finally {
+      loadingPageSize = false;
+    }
+  }
+
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
   const paginationEnabled = $derived(ctrl.paginationEnabled);
@@ -88,12 +107,32 @@
         <div class="sv-grid-pagination-pagesize">
           <span>{messages.pageSize}</span>
           <div class="sv-grid-pagination-pagesize-dd">
-            <SvGridDropdown
-              options={sizes.map((n) => ({ value: n, label: String(n) }))}
-              value={pageSize}
-              autoOpen={false}
-              onChange={(v) => setPageSize(Number(v))}
-            />
+            {#if PageSizeDropdown}
+              <!-- autoOpen so the click that triggered the load also opens the
+                   panel, rather than making the user click a second time. -->
+              <PageSizeDropdown
+                options={sizes.map((n) => ({ value: n, label: String(n) }))}
+                value={pageSize}
+                autoOpen={true}
+                onChange={(v) => setPageSize(Number(v))}
+              />
+            {:else}
+              <!-- Mirrors SvGridDropdown's closed trigger exactly (same classes,
+                   same ARIA) so there is no visual change and no layout shift
+                   when the real component swaps in. -->
+              <div class="sv-grid-dropdown">
+                <button
+                  type="button"
+                  class="sv-grid-dropdown-trigger"
+                  aria-haspopup="listbox"
+                  aria-expanded="false"
+                  onclick={openPageSize}
+                >
+                  <span class="sv-grid-dropdown-label">{pageSize}</span>
+                  <span class="sv-grid-dropdown-caret" aria-hidden="true">▾</span>
+                </button>
+              </div>
+            {/if}
           </div>
         </div>
         <span class="sv-grid-pagination-range">

package/dist/SvGrid.css

@@ -1012,6 +1012,11 @@
   width: 16px;
   height: 16px;
   margin: 0 auto;
+  /* The UA stylesheet gives <button> "padding: 1px 6px" on top of
+     "box-sizing: border-box", which leaves 2px of content width inside the
+     16px box. The glyphs below then shrink to a sliver, and the tick renders
+     as a bare slanted line. Guarded by tests/e2e/selection-checkbox.spec.ts. */
+  padding: 0;
   border: 1px solid var(--sg-input-border, #8794a8);
   border-radius: 4px;
   background: var(--sg-input-bg, #fff);
@@ -1089,6 +1094,7 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="true"]::after {
   content: "";
+  flex: none;
   width: 5px;
   height: 9px;
   border-right: 2px solid currentColor;
@@ -1098,6 +1104,7 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="mixed"]::after {
   content: "";
+  flex: none;
   width: 8px;
   height: 2px;
   border-radius: 1px;
@@ -2391,6 +2398,9 @@ select.sv-grid-fr-editor {
 .sv-grid-find-step, .sv-grid-find-close {
   display: inline-flex; align-items: center; justify-content: center;
   width: 22px; height: 22px;
+  /* Same fixed-box + UA <button> padding trap as .sv-grid-checkbox: without
+     this reset the 6px side padding squeezes the icon inside the 22px box. */
+  padding: 0;
   background: transparent;
   border: 0;
   color: var(--sg-muted, #64748b);