@spaethtech/svelte-ui 0.14.0 → 0.15.0

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,58 @@
+<!--
+/**
+ * ContextMenu — a right-click menu. Wraps its `children` and, on contextmenu, opens the shared `Menu`
+ * anchored to a 0-size element positioned at the pointer. Composes `Menu` + `MenuItem[]`.
+ * See ContextMenu.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Menu from "../Menu.svelte";
+  import type { MenuItem } from "../../data/table/types.js";
+  import type { Variant } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import type { Responsive } from "../../types/responsive.js";
+
+  let {
+    items,
+    size = "md",
+    variant,
+    disabled = false,
+    class: cls = "",
+    children,
+  }: {
+    items: MenuItem[];
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  let open = $state(false);
+  let anchorEl = $state<HTMLElement>();
+  let x = $state(0);
+  let y = $state(0);
+
+  function onContextMenu(e: MouseEvent) {
+    if (disabled) return;
+    e.preventDefault();
+    x = e.clientX;
+    y = e.clientY;
+    open = true;
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="contents {cls}" oncontextmenu={onContextMenu}>
+  {@render children()}
+</div>
+
+<!-- Virtual anchor: a 0-size fixed point at the pointer that `Menu` positions against. -->
+<span
+  bind:this={anchorEl}
+  aria-hidden="true"
+  style="position: fixed; left: {x}px; top: {y}px; width: 0; height: 0; pointer-events: none;"
+></span>
+
+<Menu anchor={anchorEl} bind:open {items} {size} {variant} side="bottom" align="start" />

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { MenuItem } from "../../data/table/types.js";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import type { Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    items: MenuItem[];
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const ContextMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { default as ContextMenu } from "./ContextMenu.svelte";

package/dist/components/ContextMenu/index.js

@@ -0,0 +1 @@
+export { default as ContextMenu } from "./ContextMenu.svelte";

package/dist/components/EmptyState/EmptyState.svelte

@@ -0,0 +1,68 @@
+<!--
+/**
+ * EmptyState — a zero-data / empty placeholder: a centered icon + title + description + optional
+ * action slot. Shared `size`/`variant` axes, `--ui-*` tokens. See EmptyState.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import IconInbox from "~icons/mdi/inbox-outline";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    title,
+    description,
+    icon,
+    action,
+    variant = "secondary",
+    size = "md",
+    class: cls = "",
+    children,
+  }: {
+    title?: string;
+    description?: string;
+    /** Large centered icon; defaults to an inbox glyph. */
+    icon?: Snippet;
+    /** Action slot (CTA buttons) below the text. */
+    action?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const token = $derived(variantToken[variant]);
+  const iconBox: Record<Size, string> = {
+    sm: "w-10 h-10 [&_svg]:w-6 [&_svg]:h-6",
+    md: "w-14 h-14 [&_svg]:w-8 [&_svg]:h-8",
+    lg: "w-20 h-20 [&_svg]:w-12 [&_svg]:h-12",
+  };
+  const titleSize: Record<Size, string> = { sm: "text-base", md: "text-lg", lg: "text-2xl" };
+  const padSize: Record<Size, string> = { sm: "py-6 gap-2", md: "py-10 gap-3", lg: "py-16 gap-4" };
+</script>
+
+<div class="flex flex-col items-center text-center {responsiveClasses(size, padSize)} {cls}">
+  <div
+    class="inline-flex items-center justify-center rounded-full {responsiveClasses(size, iconBox)}"
+    style="background-color: color-mix(in srgb, var({token}) 14%, transparent); color: color-mix(in srgb, var({token}) var(--ui-tint-strong), var(--ui-color-text));"
+    aria-hidden="true"
+  >
+    {#if icon}{@render icon()}{:else}<IconInbox />{/if}
+  </div>
+
+  {#if title}
+    <h3 class="font-semibold [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
+      {title}
+    </h3>
+  {/if}
+  {#if description}
+    <p class="max-w-sm text-sm [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
+      {description}
+    </p>
+  {/if}
+  {#if children}{@render children()}{/if}
+  {#if action}<div class="mt-1 flex flex-wrap items-center justify-center gap-2">{@render action()}</div>{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    /** Large centered icon; defaults to an inbox glyph. */
+    icon?: Snippet;
+    /** Action slot (CTA buttons) below the text. */
+    action?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+};
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from "./EmptyState.svelte";

package/dist/components/EmptyState/index.js

@@ -0,0 +1 @@
+export { default as EmptyState } from "./EmptyState.svelte";

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,53 @@
+<!--
+/**
+ * Kbd — a keyboard-key display. Render a single key (`text`/children) or a combo (`keys` → joined with
+ * "+"). Styled as a keycap from `--ui-*` tokens; shared `size` axis. See Kbd.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    keys,
+    text,
+    size = "md",
+    class: cls = "",
+    children,
+  }: {
+    /** A combo — each string is rendered as its own keycap, joined with "+". */
+    keys?: string[];
+    /** A single key label (alternative to `keys`/children). */
+    text?: string;
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const list = $derived(keys ?? null);
+
+  const capSize: Record<Size, string> = {
+    sm: "text-[0.6875rem] min-w-5 h-5 px-1",
+    md: "text-xs min-w-6 h-6 px-1.5",
+    lg: "text-sm min-w-7 h-7 px-2",
+  };
+  // Keycap: subtle surface fill, tinted border with a slightly darker bottom edge (a shallow 3D key).
+  const cap =
+    "inline-flex items-center justify-center rounded border font-medium [font-family:ui-monospace,SFMono-Regular,Menlo,monospace] [background-color:var(--ui-color-surface)] [border-color:var(--ui-border-color)] [box-shadow:inset_0_-1px_0_var(--ui-border-color)] [color:var(--ui-color-text)] select-none";
+</script>
+
+{#if list}
+  <span class="inline-flex items-center gap-1 {cls}">
+    {#each list as k, i (i)}
+      {#if i > 0}<span class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]"
+          >+</span
+        >{/if}
+      <kbd class="{cap} {responsiveClasses(size, capSize)}">{k}</kbd>
+    {/each}
+  </span>
+{:else}
+  <kbd class="{cap} {responsiveClasses(size, capSize)} {cls}"
+    >{#if children}{@render children()}{:else}{text}{/if}</kbd
+  >
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    /** A combo — each string is rendered as its own keycap, joined with "+". */
+    keys?: string[];
+    /** A single key label (alternative to `keys`/children). */
+    text?: string;
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+};
+declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/Kbd/index.d.ts

@@ -0,0 +1 @@
+export { default as Kbd } from "./Kbd.svelte";

package/dist/components/Kbd/index.js

@@ -0,0 +1 @@
+export { default as Kbd } from "./Kbd.svelte";

package/dist/components/Pagination/Pagination.svelte

@@ -1,14 +1,18 @@
 <!--
 /**
- * Pagination — a standalone page navigator (numbered buttons + ellipsis, prev/next, optional
- * first/last, optional rows-per-page Select + total). The reusable extraction of DataTable's footer
- * pager; built only from `Button` (ghost, active = filled variant) and `Select`. See Pagination.spec.md.
+ * Pagination — a standalone page navigator laid out like DataTable's footer: a tinted, bordered band
+ * with an optional per-page `Select` on the left and a compact `First · Prev · [page]/N · Next · Last`
+ * stepper on the right. The page indicator is an editable `NumberInput` for quick-jump. `variant` tints
+ * the band surface + button hover (via the shared `.ui-accent` override) — it does NOT fill buttons.
+ * Built only from `Button`, `Select`, and `NumberInput`. See Pagination.spec.md.
  */
 -->
 <script lang="ts">
   import Button from "../Button.svelte";
   import Select from "../Select.svelte";
+  import NumberInput from "../NumberInput.svelte";
   import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
   import IconFirst from "~icons/mdi/page-first";
@@ -21,25 +25,29 @@
     total,
     perPage = $bindable(10),
     perPageOptions,
-    siblingCount = 1,
-    boundaryCount = 1,
-    showEdges = false,
-    showTotal = false,
-    variant = "primary",
+    showEdges = true,
+    showTotal = true,
+    variant,
     size = "md",
+    borderless = false,
     disabled = false,
     class: cls = "",
   }: {
     page?: number;
     total: number;
     perPage?: number;
+    /** When set, renders the per-page `Select` on the left. */
     perPageOptions?: number[];
-    siblingCount?: number;
-    boundaryCount?: number;
+    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
     showEdges?: boolean;
+    /** Show the "start–end of total" range text (default true). */
     showTotal?: boolean;
+    /** Color axis — tints the band surface + button hover (like DataTable), NOT the buttons. Omit for
+     *  a neutral surface band; `ghost` makes the band transparent. */
     variant?: Variant;
     size?: Responsive<Size>;
+    /** Drop the band border/surface, leaving just the controls. */
+    borderless?: boolean;
     disabled?: boolean;
     class?: string;
   } = $props();
@@ -51,23 +59,10 @@
     if (clamped !== page) page = clamped;
   });
 
-  // Page-number list with ellipsis gaps: boundaryCount at each end + siblingCount around the current.
-  const items = $derived.by<(number | "ellipsis")[]>(() => {
-    const set = new Set<number>();
-    for (let i = 1; i <= boundaryCount; i++) {
-      set.add(i);
-      set.add(pageCount - i + 1);
-    }
-    for (let i = page - siblingCount; i <= page + siblingCount; i++) set.add(i);
-    const sorted = [...set].filter((n) => n >= 1 && n <= pageCount).sort((a, b) => a - b);
-    const out: (number | "ellipsis")[] = [];
-    let prev = 0;
-    for (const n of sorted) {
-      if (n - prev > 1) out.push("ellipsis");
-      out.push(n);
-      prev = n;
-    }
-    return out;
+  // The quick-jump field mirrors `page`; committed on change (Enter/blur), not on every keystroke.
+  let pageInput = $state(page);
+  $effect(() => {
+    pageInput = page;
   });
 
   const rangeText = $derived(
@@ -78,18 +73,38 @@
   const subtle = $derived(
     `${responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" })} [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]`,
   );
+  const bandPad = $derived(responsiveClasses(size, { sm: "px-2 py-1.5", md: "px-3 py-2", lg: "px-3.5 py-2.5" }));
+
+  // Band surface + border: variant re-points --ui-accent so --ui-color-surface/hover re-mix from it
+  // (the shared .ui-accent mechanism DataTable's footer uses). `ghost` ⇒ transparent band.
+  const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
+  const sectionBorder = "color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)";
+  const bandBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-surface)");
+  const bandBorder = $derived(borderless ? "transparent" : sectionBorder);
 
   const go = (to: number) => {
     if (disabled) return;
     page = Math.min(Math.max(to, 1), pageCount);
+    pageInput = page;
   };
   const setPerPage = (n: number) => {
     perPage = n;
     page = 1;
   };
+  const commitJump = () => {
+    if (pageInput == null) {
+      pageInput = page;
+      return;
+    }
+    go(pageInput);
+  };
 </script>
 
-<nav aria-label="Pagination" class="flex flex-wrap items-center justify-between gap-3 {cls}">
+<nav
+  aria-label="Pagination"
+  class="ui-accent flex flex-wrap items-center justify-between gap-3 border rounded-[var(--ui-border-radius)] {bandPad} {cls}"
+  style="border-color: {bandBorder}; background-color: {bandBg}; {accentVar}"
+>
   {#if perPageOptions?.length}
     <div class="flex items-center gap-2">
       <Select
@@ -104,7 +119,7 @@
     </div>
   {/if}
 
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-3 {perPageOptions?.length ? '' : 'ml-auto'}">
     {#if showTotal}<span class={subtle}>{rangeText}</span>{/if}
     <div class="inline-flex items-center gap-0.5">
       {#snippet navBtn(Icon: typeof IconFirst, to: number, off: boolean, aria: string)}
@@ -123,22 +138,22 @@
       {#if showEdges}{@render navBtn(IconFirst, 1, page <= 1, "First page")}{/if}
       {@render navBtn(IconPrev, page - 1, page <= 1, "Previous page")}
 
-      {#each items as it, i (i)}
-        {#if it === "ellipsis"}
-          <span aria-hidden="true" class="px-1.5 {subtle}">…</span>
-        {:else}
-          <Button
-            variant={it === page ? variant : "ghost"}
+      <div class="flex items-center gap-1.5 px-1 {subtle}">
+        <span class="inline-block {responsiveClasses(size, { sm: 'w-11', md: 'w-12', lg: 'w-14' })}">
+          <NumberInput
+            bind:value={pageInput}
+            min={1}
+            max={pageCount}
+            clamp
             {size}
             {disabled}
-            aria-label={`Page ${it}`}
-            aria-current={it === page ? "page" : undefined}
-            onclick={() => go(it)}
-          >
-            {it}
-          </Button>
-        {/if}
-      {/each}
+            inputClass="text-center px-1"
+            aria-label="Page number"
+            onchange={commitJump}
+          />
+        </span>
+        <span aria-hidden="true">/&nbsp;{pageCount}</span>
+      </div>
 
       {@render navBtn(IconNext, page + 1, page >= pageCount, "Next page")}
       {#if showEdges}{@render navBtn(IconLast, pageCount, page >= pageCount, "Last page")}{/if}

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

@@ -5,13 +5,18 @@ type $$ComponentProps = {
     page?: number;
     total: number;
     perPage?: number;
+    /** When set, renders the per-page `Select` on the left. */
     perPageOptions?: number[];
-    siblingCount?: number;
-    boundaryCount?: number;
+    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
     showEdges?: boolean;
+    /** Show the "start–end of total" range text (default true). */
     showTotal?: boolean;
+    /** Color axis — tints the band surface + button hover (like DataTable), NOT the buttons. Omit for
+     *  a neutral surface band; `ghost` makes the band transparent. */
     variant?: Variant;
     size?: Responsive<Size>;
+    /** Drop the band border/surface, leaving just the controls. */
+    borderless?: boolean;
     disabled?: boolean;
     class?: string;
 };