@spaethtech/svelte-ui 0.21.1-dev.114.c081271 → 0.21.1-dev.116.7683168

package/dist/components/DataTable.svelte

@@ -347,7 +347,10 @@
     style="border-color: {bodyBg}; border-left-color: {bodyBorder}; border-right-color: {bodyBorder}; background-color: {bodyBg}"
   >
     {#if rows.length === 0}
-      <div class="flex items-center {cellGap} {cellPad}" style="min-height: {heightVar}">
+      <!-- Marked role="row" (like data rows) so any consumer per-row styling — e.g. a
+           `[role=row]` top/bottom divider border — lands on the empty-state row too, keeping it the
+           same height as a data row by construction (svelte-ui draws no row border itself). -->
+      <div role="row" class="flex items-center {cellGap} {cellPad}" style="min-height: {heightVar}">
         {#if hasLead}
           <div class="invisible flex shrink-0 items-center gap-1" aria-hidden="true">
             {#if selectable}<Checkbox {size} tabindex={-1} />{/if}
@@ -374,7 +377,7 @@
         </div>
         {#if hasTail}<div
             class="invisible flex shrink-0 items-center"
-            style="width: {heightVar}"
+            style="width: {heightVar}; height: {heightVar}"
             aria-hidden="true"
           ></div>{/if}
       </div>

package/docs/components.md

@@ -437,8 +437,13 @@ Config-driven, responsive 12-column data table over a `DataGrid`.
   standard-height row reflecting the fetch result — a **spinner + "Loading…"** while `result.loading`,
   **"No results"** once settled and empty, or the **error** (styled `--ui-color-error`) when
   `result.error` is set (a string as-is, an `Error`'s `.message`, else the localized `loadFailed`). An
-  errored result never spins, and the row keeps its height across all three states — so you don't need
-  a separate page banner that contradicts a "No results" table. With `localFetch`, drive this by
+  errored result never spins, and the row is **exactly one data row tall** in every state (its
+  invisible lead/tail spacers carry the control height), so the table never jumps between Loading,
+  rows, No results and error — and you don't need a separate page banner that contradicts a "No
+  results" table. (A long error wraps and grows the row; one line is the minimum, not a fixed height.)
+  The empty-state row is marked **`role="row"`** like data rows, so if you add your own per-row styling
+  (e.g. a `[role="row"]` divider border), it lands on the empty-state row too and heights stay matched
+  — svelte-ui itself draws no per-row border. With `localFetch`, drive this by
   passing `loading`/`error` getters (below); a remote `query()` that exposes `.error` gets it for free.
   (`DataGrid.error` is the query-*parse* error surfaced by `<Query>` — a bad filter — which is distinct
   from this fetch/load error.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.114.c081271",
+  "version": "0.21.1-dev.116.7683168",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"