@spaethtech/svelte-ui 0.14.1-dev.65.3b37f4b → 0.15.1-dev.67.fbf3875

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/ScrollArea/ScrollArea.svelte

@@ -0,0 +1,71 @@
+<!--
+/**
+ * ScrollArea — a scroll container with themed, thin scrollbars (from `--ui-*` tokens) that look
+ * consistent across browsers. Wraps arbitrary content. See ScrollArea.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+
+  let {
+    orientation = "vertical",
+    maxHeight,
+    height,
+    variant,
+    class: cls = "",
+    children,
+  }: {
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Cap the height (any CSS length) — content beyond scrolls. */
+    maxHeight?: string;
+    height?: string;
+    /** Thumb colour accent; omit for a neutral text-tint thumb. */
+    variant?: Variant;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  const overflow = $derived(
+    orientation === "horizontal"
+      ? "overflow-x-auto overflow-y-hidden"
+      : orientation === "both"
+        ? "overflow-auto"
+        : "overflow-y-auto overflow-x-hidden",
+  );
+
+  const base = $derived(variant ? `var(${variantToken[variant]})` : "var(--ui-color-text)");
+  const style = $derived(
+    `--sa-thumb: color-mix(in srgb, ${base} 28%, transparent); --sa-thumb-hover: color-mix(in srgb, ${base} 45%, transparent);` +
+      (height ? ` height: ${height};` : "") +
+      (maxHeight ? ` max-height: ${maxHeight};` : ""),
+  );
+</script>
+
+<div class="ui-scroll {overflow} {cls}" {style}>
+  {@render children()}
+</div>
+
+<style>
+  .ui-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sa-thumb) transparent;
+  }
+  .ui-scroll::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .ui-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .ui-scroll::-webkit-scrollbar-thumb {
+    background-color: var(--sa-thumb);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  .ui-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: var(--sa-thumb-hover);
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+type $$ComponentProps = {
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Cap the height (any CSS length) — content beyond scrolls. */
+    maxHeight?: string;
+    height?: string;
+    /** Thumb colour accent; omit for a neutral text-tint thumb. */
+    variant?: Variant;
+    class?: string;
+    children: Snippet;
+};
+declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

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

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

package/dist/components/ScrollArea/index.js

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

package/dist/components/Splitter/Splitter.svelte

@@ -0,0 +1,127 @@
+<!--
+/**
+ * Splitter — two resizable panes (`start`/`end`) divided by a draggable handle. Drag or arrow-key the
+ * handle to resize; `bind:size` is the first pane's percentage. Horizontal or vertical. `role=separator`
+ * with aria-value*. See Splitter.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+
+  let {
+    start,
+    end,
+    orientation = "horizontal",
+    size = $bindable(50),
+    min = 10,
+    max = 90,
+    step = 2,
+    variant = "primary",
+    disabled = false,
+    class: cls = "",
+  }: {
+    start: Snippet;
+    end: Snippet;
+    orientation?: "horizontal" | "vertical";
+    /** First pane size, in percent (bindable). */
+    size?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+  } = $props();
+
+  const isH = $derived(orientation === "horizontal");
+  const token = $derived(variantToken[variant]);
+
+  let containerEl = $state<HTMLDivElement>();
+  let dragging = $state(false);
+  const clamp = (n: number) => Math.min(max, Math.max(min, n));
+
+  function fromPointer(e: PointerEvent) {
+    if (!containerEl) return;
+    const r = containerEl.getBoundingClientRect();
+    const pct = isH ? ((e.clientX - r.left) / r.width) * 100 : ((e.clientY - r.top) / r.height) * 100;
+    size = clamp(pct);
+  }
+  function onPointerDown(e: PointerEvent) {
+    if (disabled) return;
+    dragging = true;
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    e.preventDefault();
+  }
+  function onPointerMove(e: PointerEvent) {
+    if (dragging) fromPointer(e);
+  }
+  function onPointerUp(e: PointerEvent) {
+    dragging = false;
+    (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    const dec = isH ? "ArrowLeft" : "ArrowUp";
+    const inc = isH ? "ArrowRight" : "ArrowDown";
+    if (e.key === dec) {
+      e.preventDefault();
+      size = clamp(size - step);
+    } else if (e.key === inc) {
+      e.preventDefault();
+      size = clamp(size + step);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      size = min;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      size = max;
+    }
+  }
+</script>
+
+<div
+  bind:this={containerEl}
+  class="flex {isH ? 'flex-row' : 'flex-col'} {cls}"
+  style={dragging ? "user-select: none;" : ""}
+>
+  <div class="min-w-0 min-h-0 overflow-hidden" style="flex-basis: {size}%;">
+    {@render start()}
+  </div>
+
+  <!-- The WAI-ARIA window-splitter pattern: a focusable `separator` with aria-valuenow. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
+  <div
+    role="separator"
+    aria-orientation={isH ? "vertical" : "horizontal"}
+    aria-valuenow={Math.round(size)}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    tabindex={disabled ? -1 : 0}
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onkeydown={onKeydown}
+    class="group relative shrink-0 {isH ? 'w-px cursor-col-resize' : 'h-px cursor-row-resize'} {disabled
+      ? 'pointer-events-none'
+      : ''} [background-color:var(--ui-border-color)] focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]"
+  >
+    <!-- Larger invisible hit-area + a handle bar that accents on hover/drag. -->
+    <span
+      class="absolute {isH
+        ? 'inset-y-0 -inset-x-1.5 cursor-col-resize'
+        : 'inset-x-0 -inset-y-1.5 cursor-row-resize'}"
+    ></span>
+    <span
+      class="absolute rounded-full transition-colors {isH
+        ? 'inset-y-0 -inset-x-px'
+        : 'inset-x-0 -inset-y-px'}"
+      style="background-color: {dragging ? `var(${token})` : 'transparent'};"
+    ></span>
+  </div>
+
+  <div class="min-w-0 min-h-0 flex-1 overflow-hidden">
+    {@render end()}
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+type $$ComponentProps = {
+    start: Snippet;
+    end: Snippet;
+    orientation?: "horizontal" | "vertical";
+    /** First pane size, in percent (bindable). */
+    size?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+};
+declare const Splitter: import("svelte").Component<$$ComponentProps, {}, "size">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

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

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

package/dist/components/Splitter/index.js

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

package/dist/components/Stat/Stat.svelte

@@ -0,0 +1,95 @@
+<!--
+/**
+ * Stat — a metric/KPI card: label, big value, optional delta (up/down, coloured) + icon. Built on
+ * `Card`; shared `size`/`variant` axes, `--ui-*` tokens. See Stat.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Card from "../Card.svelte";
+  import IconUp from "~icons/mdi/trending-up";
+  import IconDown from "~icons/mdi/trending-down";
+  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 {
+    label,
+    value,
+    delta,
+    deltaLabel,
+    invertDelta = false,
+    icon,
+    variant = "secondary",
+    size = "md",
+    class: cls = "",
+  }: {
+    label: string;
+    value: string | number;
+    /** Change vs a baseline (number → arrow + %/value; string → shown as-is). */
+    delta?: number | string;
+    /** Context after the delta, e.g. "vs last month". */
+    deltaLabel?: string;
+    /** When true, a NEGATIVE delta is "good" (green) and positive is "bad" (e.g. error rate). */
+    invertDelta?: boolean;
+    icon?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+  } = $props();
+
+  const token = $derived(variantToken[variant]);
+  const deltaNum = $derived(typeof delta === "number" ? delta : null);
+  const up = $derived(deltaNum != null && deltaNum > 0);
+  const down = $derived(deltaNum != null && deltaNum < 0);
+  // Colour: rising = success unless inverted; falling = danger unless inverted; flat = muted.
+  const deltaColor = $derived(
+    deltaNum == null || deltaNum === 0
+      ? "color-mix(in srgb, var(--ui-color-text) 55%, transparent)"
+      : (up ? !invertDelta : invertDelta)
+        ? "var(--ui-color-success)"
+        : "var(--ui-color-error)",
+  );
+
+  const valueSize: Record<Size, string> = { sm: "text-2xl", md: "text-3xl", lg: "text-4xl" };
+  const iconBox: Record<Size, string> = {
+    sm: "w-8 h-8 [&_svg]:w-4 [&_svg]:h-4",
+    md: "w-10 h-10 [&_svg]:w-5 [&_svg]:h-5",
+    lg: "w-12 h-12 [&_svg]:w-6 [&_svg]:h-6",
+  };
+</script>
+
+<Card class="p-4 {cls}">
+  <div class="flex items-start justify-between gap-3">
+    <div class="min-w-0">
+      <div class="truncate text-sm [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
+        {label}
+      </div>
+      <div class="mt-1 font-semibold [color:var(--ui-color-text)] {responsiveClasses(size, valueSize)}">
+        {value}
+      </div>
+      {#if delta != null}
+        <div class="mt-1 flex items-center gap-1 text-sm" style="color: {deltaColor};">
+          {#if up}<IconUp class="w-4 h-4" />{:else if down}<IconDown class="w-4 h-4" />{/if}
+          <span class="font-medium tabular-nums">{delta}</span>
+          {#if deltaLabel}<span class="[color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]"
+              >{deltaLabel}</span
+            >{/if}
+        </div>
+      {/if}
+    </div>
+    {#if icon}
+      <span
+        class="inline-flex shrink-0 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"
+      >
+        {@render icon()}
+      </span>
+    {/if}
+  </div>
+</Card>

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

@@ -0,0 +1,21 @@
+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 = {
+    label: string;
+    value: string | number;
+    /** Change vs a baseline (number → arrow + %/value; string → shown as-is). */
+    delta?: number | string;
+    /** Context after the delta, e.g. "vs last month". */
+    deltaLabel?: string;
+    /** When true, a NEGATIVE delta is "good" (green) and positive is "bad" (e.g. error rate). */
+    invertDelta?: boolean;
+    icon?: Snippet;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+};
+declare const Stat: import("svelte").Component<$$ComponentProps, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

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

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

package/dist/components/Stat/index.js

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

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,98 @@
+<!--
+/**
+ * Timeline — a vertical sequence of events: a marker (dot or icon) on a connecting line, with a
+ * title / time / description per item. Per-item `variant` colours its marker. `--ui-*` tokens.
+ * See Timeline.spec.md.
+ */
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Variant } from "../../types/variants.js";
+  export type TimelineItem = {
+    title: string;
+    time?: string;
+    description?: string;
+    icon?: Snippet;
+    variant?: Variant;
+    content?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    items,
+    variant = "primary",
+    size = "md",
+    class: cls = "",
+  }: {
+    items: TimelineItem[];
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+  } = $props();
+
+  const dotSize: Record<Size, string> = { sm: "w-2.5 h-2.5", md: "w-3 h-3", lg: "w-3.5 h-3.5" };
+  const iconBox: Record<Size, string> = {
+    sm: "w-6 h-6 [&_svg]:w-3.5 [&_svg]:h-3.5",
+    md: "w-8 h-8 [&_svg]:w-4 [&_svg]:h-4",
+    lg: "w-9 h-9 [&_svg]:w-5 [&_svg]:h-5",
+  };
+  const titleSize: Record<Size, string> = { sm: "text-sm", md: "text-base", lg: "text-lg" };
+  const tokenFor = (item: TimelineItem) => variantToken[item.variant ?? variant];
+</script>
+
+<ol class="flex flex-col {cls}">
+  {#each items as item, i (i)}
+    {@const last = i === items.length - 1}
+    <li class="flex gap-3">
+      <!-- Marker + connecting line. -->
+      <div class="flex flex-col items-center">
+        {#if item.icon}
+          <span
+            class="inline-flex shrink-0 items-center justify-center rounded-full {responsiveClasses(
+              size,
+              iconBox,
+            )}"
+            style="background-color: color-mix(in srgb, var({tokenFor(item)}) 16%, transparent); color: color-mix(in srgb, var({tokenFor(item)}) var(--ui-tint-strong), var(--ui-color-text));"
+            aria-hidden="true"
+          >
+            {@render item.icon()}
+          </span>
+        {:else}
+          <span
+            class="mt-1.5 shrink-0 rounded-full {responsiveClasses(size, dotSize)}"
+            style="background-color: var({tokenFor(item)});"
+            aria-hidden="true"
+          ></span>
+        {/if}
+        {#if !last}
+          <span class="my-1 w-px flex-1 [background-color:var(--ui-border-color)]" aria-hidden="true"></span>
+        {/if}
+      </div>
+
+      <!-- Content. -->
+      <div class="min-w-0 flex-1 pb-6">
+        <div class="flex flex-wrap items-baseline gap-x-2">
+          <span class="font-medium [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
+            {item.title}
+          </span>
+          {#if item.time}
+            <span class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]">
+              {item.time}
+            </span>
+          {/if}
+        </div>
+        {#if item.description}
+          <p class="mt-0.5 text-sm [color:color-mix(in_srgb,var(--ui-color-text)_65%,transparent)]">
+            {item.description}
+          </p>
+        {/if}
+        {#if item.content}<div class="mt-2">{@render item.content()}</div>{/if}
+      </div>
+    </li>
+  {/each}
+</ol>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+export type TimelineItem = {
+    title: string;
+    time?: string;
+    description?: string;
+    icon?: Snippet;
+    variant?: Variant;
+    content?: Snippet;
+};
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    items: TimelineItem[];
+    variant?: Variant;
+    size?: Responsive<Size>;
+    class?: string;
+};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

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

@@ -0,0 +1,2 @@
+export { default as Timeline } from "./Timeline.svelte";
+export type { TimelineItem } from "./Timeline.svelte";

package/dist/components/Timeline/index.js

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