@spaethtech/svelte-ui 0.21.1 → 0.21.2-dev.139.462a2ec

package/dist/components/DataTable.svelte

@@ -347,28 +347,53 @@
 
     <div class="grid grow grid-cols-12 items-center {cellGap}">
       {#each columns as col (col.id)}
+        {@const key = sortKeyOf(col)}
+        {@const activeDir = col.sortable && grid.sort && grid.sort.col === key ? grid.sort.dir : null}
+        <!-- The WHOLE header cell is the sort control — no nested Button (so the header text keeps the
+             row's semibold/uppercase and there's no button hover-fill). Sortable cells get a pointer +
+             keyboard (role="columnheader" + aria-sort), and hover/focus tints the text + sort icon to
+             --ui-accent (the variant colour; the neutral default IS the text colour, so a neutral table
+             stays monochrome). The inactive sort glyph also brightens on hover as a universal cue. The
+             inner inline-flex keeps text + icon on one line (the cell goes `block` at breakpoints via
+             cellClasses, which would otherwise wrap the icon). -->
         <div
           role="columnheader"
-          class="{cellClasses(col)} flex min-w-0 items-center {alignClass(col)} {truncate
+          aria-sort={col.sortable
+            ? activeDir
+              ? activeDir === "asc"
+                ? "ascending"
+                : "descending"
+              : "none"
+            : undefined}
+          tabindex={col.sortable ? 0 : undefined}
+          onclick={col.sortable ? () => grid.toggleSort(key) : undefined}
+          onkeydown={col.sortable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  grid.toggleSort(key);
+                }
+              }
+            : undefined}
+          class="group/sort {cellClasses(col)} flex min-w-0 items-center {alignClass(col)} {truncate
             ? 'truncate'
+            : ''} {col.sortable
+            ? 'cursor-pointer select-none transition-colors hover:[color:var(--ui-accent)] focus-visible:[color:var(--ui-accent)] outline-none'
             : ''}"
         >
           {#if col.sortable}
-            <Button
-              variant="ghost"
-              {size}
-              class="!px-0 [font-size:inherit]"
-              onclick={() => grid.toggleSort(sortKeyOf(col))}
-            >
+            <span class="inline-flex items-center gap-1">
               <span>{col.header ?? col.id}</span>
-              {#if grid.sort?.col === sortKeyOf(col)}
-                {#if grid.sort.dir === "asc"}<IconSortAsc
-                    class="w-[1em] h-[1em]"
-                  />{:else}<IconSortDesc class="w-[1em] h-[1em]" />{/if}
+              {#if activeDir}
+                {#if activeDir === "asc"}<IconSortAsc
+                    class="w-[1em] h-[1em] shrink-0"
+                  />{:else}<IconSortDesc class="w-[1em] h-[1em] shrink-0" />{/if}
               {:else}
-                <IconSortNone class="w-[1em] h-[1em] opacity-40" />
+                <IconSortNone
+                  class="w-[1em] h-[1em] shrink-0 opacity-40 transition-opacity group-hover/sort:opacity-100"
+                />
               {/if}
-            </Button>
+            </span>
           {:else}
             <span>{col.header ?? col.id}</span>
           {/if}

package/dist/components/Query.svelte

@@ -17,7 +17,9 @@
   import Input from "./Input.svelte";
   import Button from "./Button.svelte";
   import Popup from "./Popup.svelte";
-  import ConfirmDialog from "./ConfirmDialog.svelte";
+  import Dialog from "./Dialog.svelte";
+  import Card from "./Card.svelte";
+  import CardHeader from "./CardHeader.svelte";
   import type { DataSet } from "../data/dataset.js";
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
@@ -229,8 +231,15 @@
   </ul>
 </Popup>
 
-<ConfirmDialog bind:isOpen={helpOpen} title={i18n.messages.querySyntax} showConfirm={false} showCancel={false}>
-  <div class="max-h-[70vh] space-y-4 overflow-y-auto text-sm [color:var(--ui-color-text)]">
+<!-- Help modal: a fixed 80vw × 80vh box (consistent large panel) with a sticky title and a
+     body that scrolls inside it — Dialog directly (not ConfirmDialog) so the Card can fill the
+     fixed height as a flex column. -->
+<Dialog bind:isOpen={helpOpen} width="80vw" height="80vh" aria-label={i18n.messages.querySyntax}>
+  <Card size="md" class="flex h-full w-full flex-col shadow-xl">
+    <CardHeader size="md">
+      <h3 class="text-lg font-medium [color:var(--ui-color-text)]">{i18n.messages.querySyntax}</h3>
+    </CardHeader>
+    <div class="min-h-0 flex-1 space-y-4 overflow-y-auto text-sm [color:var(--ui-color-text)]">
     <p>
       A filter is one or more conditions, <code class="font-mono">$column operator value</code>.
       Whitespace is insignificant; combine with <code>&&</code>, <code>||</code>, <code>!</code>,
@@ -312,5 +321,6 @@
       Tip: type <kbd class="rounded border px-1 {bc}">$</kbd> for columns; enum columns suggest
       values. Applies on <kbd class="rounded border px-1 {bc}">{i18n.messages.enter}</kbd>.
     </p>
-  </div>
-</ConfirmDialog>
+    </div>
+  </Card>
+</Dialog>

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -834,6 +834,11 @@
   // always border both vertical edges + nudge.
   function popoutBorder(id: ItemId, group: "top" | "bottom", top: boolean, rowsShown: number) {
     const farH = dockRight ? "border-l" : "border-r";
+    // The vertical edge facing the strip/parent (opposite the far edge). A TOP-level popout draws it via
+    // `seam` (in the dock-border colour, overlapping the strip's own border); a NESTED cascade floats
+    // mid-content against its parent popout, so it must draw this edge itself as a normal border —
+    // without it the second-level popout (e.g. Reports > Exports > …) is missing its parent-facing side.
+    const nearV = dockRight ? "border-r" : "border-l";
     const near = group === "bottom" ? "border-b" : "border-t";
     const opp = group === "bottom" ? "border-t" : "border-b";
     const nudge = group === "bottom" ? 1 : -1;
@@ -848,7 +853,10 @@
       : "";
     const placed = top ? placedById[id] : undefined;
     const aside = top ? asideRef?.getBoundingClientRect() : undefined;
-    if (!placed || !aside) return { cls: `${farH} ${near} ${opp}`, seam, nudge };
+    // No placement to flush-test against: a top-level popout gets its strip-facing edge from `seam`;
+    // a nested cascade (never placed-tracked) must draw `nearV` so BOTH vertical edges are bordered.
+    if (!placed || !aside)
+      return { cls: `${farH}${top ? "" : ` ${nearV}`} ${near} ${opp}`, seam, nudge };
     const h = rowsShown * rowPx;
     const topFlush = placed.y <= aside.top + 1;
     const bottomFlush = placed.y + h >= aside.bottom - 1;
@@ -1088,7 +1096,7 @@
       open={isOnPath(id)}
       side={popoutSide}
       align={geom.align}
-      offset={0}
+      offset={top ? 0 : -1}
       margin={top ? 0 : 8}
       snap={rowPx}
       lightDismiss={false}
@@ -1172,7 +1180,11 @@
         {@render item.popout()}
       </div>
     {:else}
-      {#if win.up}{@render arrowRow(id, rows.length, -1)}{/if}
+      {#if win.up}
+        {@render arrowRow(id, rows.length, -1)}
+        <!-- Separate the ▲ scroll-step row from the items it scrolls, matching the inter-item divider. -->
+        <div class="border-t [border-color:var(--ui-border-color)]" role="separator"></div>
+      {/if}
       <ul class="flex flex-col">
         {#each rows.slice(win.start, win.end) as r, i (r.index)}
           <!-- A divider renders only BETWEEN real rows: suppress it at the window's top edge (i===0),
@@ -1185,7 +1197,11 @@
           </li>
         {/each}
       </ul>
-      {#if win.down}{@render arrowRow(id, rows.length, 1)}{/if}
+      {#if win.down}
+        <!-- Separate the items from the ▼ scroll-step row below them. -->
+        <div class="border-t [border-color:var(--ui-border-color)]" role="separator"></div>
+        {@render arrowRow(id, rows.length, 1)}
+      {/if}
     {/if}
   </div>
 {/snippet}

package/dist/positioning/anchored.js

@@ -79,7 +79,12 @@ export function computePlacement(anchor, size, opts = {}) {
     // perpendicular to the chosen side) can `snap` its shift to whole steps; the main axis never snaps.
     const clampSnap = (v, min, max) => {
         const c = Math.min(Math.max(v, min), max);
-        if (snap > 0 && c !== v) {
+        // Only a REAL (>= 1px) clamp snaps to whole steps. A sub-pixel clamp is a rounding artifact — the
+        // boundary comes from the integer `clientWidth/clientHeight`, while the anchor rect is fractional on
+        // a fractional-DPR display or under browser zoom, so a box flush with the boundary edge can overflow
+        // by a fraction of a px. Rounding that UP to a whole step shoves the box a full row/column off (the
+        // bottom-group SideBarMenu popout landing one row too high). Below 1px, just clamp to the edge.
+        if (snap > 0 && Math.abs(c - v) >= 1) {
             // Shoved by (c - v); round the magnitude UP to a whole step, keep direction, re-clamp.
             const shoved = v + Math.sign(c - v) * Math.ceil(Math.abs(c - v) / snap) * snap;
             return Math.min(Math.max(shoved, min), max);

package/package.json

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