@spaethtech/svelte-ui 0.14.0 → 0.15.0

package/dist/components/Rating.svelte

@@ -1,47 +1,168 @@
+<!--
+/**
+ * Rating — star rating in two modes:
+ *   • Display (default): a read-only average. `average` is a 0–10 score (TMDB-style), shown as 5 stars
+ *     with halves, plus an optional `count`.
+ *   • Interactive (`interactive`): a form control — click / hover / arrow-key a `bind:value` (0..max
+ *     stars), optional half-steps. `role="slider"` (same a11y pattern as our Slider).
+ * See usage docs.
+ */
+-->
 <script lang="ts">
   import { variantToken, type Variant } from "../types/variants.js";
   import type { Size } from "../types/sizes.js";
 
   export type RatingProps = {
-    average: number;
-    count: number;
+    /** Display mode: a 0–10 average score (TMDB-style), rendered as 5 stars (average / 2). */
+    average?: number;
+    /** Display mode: number of ratings, shown in parentheses. */
+    count?: number;
+    /** Interactive mode: the selected rating in stars (0..max), bindable. */
+    value?: number;
+    /** Enable selection (click / hover / keyboard). Off = read-only display. */
+    interactive?: boolean;
+    /** Interactive but not editable (shows `value`, no input). */
+    readonly?: boolean;
+    disabled?: boolean;
+    /** Number of stars in interactive mode (default 5). */
+    max?: number;
+    /** Allow half-star selection/display (interactive). */
+    allowHalf?: boolean;
+    /** Show the numeric value beside the stars (default: true in display mode, false interactive). */
+    showValue?: boolean;
+    /** Fired on change (interactive). */
+    onchange?: (value: number) => void;
     /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
     variant?: Variant;
-    /** Star size (sm/md/lg). */
     size?: Size;
+    /** Accessible label for the interactive slider. */
+    label?: string;
   };
 
-  let { average, count, variant, size = "md" }: RatingProps = $props();
+  let {
+    average,
+    count,
+    value = $bindable(0),
+    interactive = false,
+    readonly = false,
+    disabled = false,
+    max = 5,
+    allowHalf = false,
+    showValue,
+    onchange,
+    variant,
+    size = "md",
+    label = "Rating",
+  }: RatingProps = $props();
 
   const starColor = $derived(variant ? `var(${variantToken[variant]})` : "#ffd700");
   const starSize: Record<Size, string> = { sm: "1rem", md: "1.2rem", lg: "1.5rem" };
 
-  // Validate and sanitize the average rating
-  const validAverage = isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
+  const active = $derived(interactive && !readonly && !disabled);
+  const step = $derived(allowHalf ? 0.5 : 1);
 
-  // Convert TMDB 10-point scale to 5-star scale
-  const fiveStarRating = validAverage / 2;
+  // Display mode: sanitize the 0–10 average and convert to a 5-point scale.
+  const displayFive = $derived.by(() => {
+    const a = isNaN(average ?? NaN) || (average ?? 0) < 0 ? 0 : Math.min(average ?? 0, 10);
+    return a / 2;
+  });
 
-  // Calculate how many stars should be filled (ensure they're valid numbers)
-  const filledStars = Math.max(0, Math.min(5, Math.floor(fiveStarRating)));
-  const hasHalfStar = fiveStarRating % 1 >= 0.5;
-  const emptyStars = Math.max(0, 5 - filledStars - (hasHalfStar ? 1 : 0));
+  // Hover preview (interactive) overrides `value` while pointing.
+  let hover = $state<number | null>(null);
+
+  const starCount = $derived(interactive ? max : 5);
+  // The numeric value the stars are painted from.
+  const paint = $derived(interactive ? (hover ?? value) : displayFive);
+  const readout = $derived(interactive ? value : displayFive);
+  const wantValue = $derived(showValue ?? !interactive);
+
+  // Fill state for the i-th star (1-based).
+  function fillOf(i: number): "full" | "half" | "empty" {
+    if (paint >= i) return "full";
+    if (paint >= i - 0.5) return "half";
+    return "empty";
+  }
+  // Half-step from the pointer's position within a star (left half = i-0.5).
+  function valueAt(i: number, e: MouseEvent): number {
+    if (!allowHalf) return i;
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    return e.clientX - r.left < r.width / 2 ? i - 0.5 : i;
+  }
+  function pick(i: number, e: MouseEvent) {
+    if (!active) return;
+    value = valueAt(i, e);
+    onchange?.(value);
+  }
+  function preview(i: number, e: MouseEvent) {
+    if (!active) return;
+    hover = valueAt(i, e);
+  }
+  function onkeydown(e: KeyboardEvent) {
+    if (!active) return;
+    let v = value;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        v = Math.min(max, value + step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        v = Math.max(0, value - step);
+        break;
+      case "Home":
+        v = 0;
+        break;
+      case "End":
+        v = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    value = v;
+    onchange?.(v);
+  }
 </script>
 
-<div class="rating select-none" style="--star-color: {starColor}; --star-size: {starSize[size]}">
-  <div class="stars">
-    {#each Array(filledStars) as _, i}
-      <span class="star filled">★</span>
-    {/each}
-    {#if hasHalfStar}
-      <span class="star half-filled">☆</span>
-    {/if}
-    {#each Array(emptyStars) as _, i}
-      <span class="star empty">☆</span>
+<div
+  class="rating select-none"
+  class:disabled
+  style="--star-color: {starColor}; --star-size: {starSize[size]}"
+>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="stars"
+    role={active ? "slider" : undefined}
+    tabindex={active ? 0 : undefined}
+    aria-label={active ? label : undefined}
+    aria-valuemin={active ? 0 : undefined}
+    aria-valuemax={active ? max : undefined}
+    aria-valuenow={active ? value : undefined}
+    aria-valuetext={active ? `${value} of ${max} stars` : undefined}
+    aria-readonly={interactive && readonly ? true : undefined}
+    aria-disabled={disabled || undefined}
+    onkeydown={active ? onkeydown : undefined}
+    onpointerleave={active ? () => (hover = null) : undefined}
+  >
+    {#each Array(starCount) as _, idx (idx)}
+      {@const i = idx + 1}
+      {@const f = fillOf(i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <span
+        class="star {f} {active ? 'cursor-pointer' : ''}"
+        onpointermove={active ? (e) => preview(i, e) : undefined}
+        onclick={active ? (e) => pick(i, e) : undefined}
+      >
+        {f === "empty" ? "☆" : "★"}
+      </span>
     {/each}
   </div>
-  <span class="rating-value">{fiveStarRating.toFixed(1)}</span>
-  <span class="rating-count">({count})</span>
+  {#if wantValue}
+    <span class="rating-value">{readout.toFixed(1)}</span>
+  {/if}
+  {#if !interactive && count != null}
+    <span class="rating-count">({count})</span>
+  {/if}
 </div>
 
 <style>
@@ -50,30 +171,48 @@
     align-items: center;
     gap: 0.5rem;
   }
+  .rating.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
   .stars {
     display: flex;
     gap: 0.1rem;
   }
+  .stars[role="slider"] {
+    border-radius: 4px;
+  }
+  .stars[role="slider"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-color-text) 70%, transparent);
+    outline-offset: 2px;
+  }
 
   .star {
     font-size: var(--star-size, 1.2rem);
     line-height: 1;
   }
 
-  .star.filled {
-    color: var(--star-color, #ffd700);
-  }
-
-  .star.half-filled {
+  .star.full {
     color: var(--star-color, #ffd700);
-    opacity: 0.6;
   }
 
   .star.empty {
     color: var(--ui-color-secondary);
   }
 
+  /* Half star: a full ★ glyph clipped to a left-gold / right-muted gradient. */
+  .star.half {
+    background: linear-gradient(
+      90deg,
+      var(--star-color, #ffd700) 50%,
+      var(--ui-color-secondary) 50%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
   .rating-value {
     font-weight: 600;
     color: var(--ui-color-text);

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

@@ -1,13 +1,31 @@
 import { type Variant } from "../types/variants.js";
 import type { Size } from "../types/sizes.js";
 export type RatingProps = {
-    average: number;
-    count: number;
+    /** Display mode: a 0–10 average score (TMDB-style), rendered as 5 stars (average / 2). */
+    average?: number;
+    /** Display mode: number of ratings, shown in parentheses. */
+    count?: number;
+    /** Interactive mode: the selected rating in stars (0..max), bindable. */
+    value?: number;
+    /** Enable selection (click / hover / keyboard). Off = read-only display. */
+    interactive?: boolean;
+    /** Interactive but not editable (shows `value`, no input). */
+    readonly?: boolean;
+    disabled?: boolean;
+    /** Number of stars in interactive mode (default 5). */
+    max?: number;
+    /** Allow half-star selection/display (interactive). */
+    allowHalf?: boolean;
+    /** Show the numeric value beside the stars (default: true in display mode, false interactive). */
+    showValue?: boolean;
+    /** Fired on change (interactive). */
+    onchange?: (value: number) => void;
     /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
     variant?: Variant;
-    /** Star size (sm/md/lg). */
     size?: Size;
+    /** Accessible label for the interactive slider. */
+    label?: string;
 };
-declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+declare const Rating: import("svelte").Component<RatingProps, {}, "value">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

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

@@ -166,14 +166,16 @@
 
 <FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
   {#snippet control({ describedBy })}
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 select-none">
       <!-- The track is the click-to-position surface; the thumbs below carry role="slider". -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- Disabled keeps pointer events (so the not-allowed cursor shows) but every handler no-ops on
+           `disabled`, so it can't be dragged/keyed. -->
       <div
         bind:this={trackEl}
         onpointerdown={onTrackPointerDown}
         class="relative flex-1 select-none rounded-full {disabled
-          ? 'opacity-50 pointer-events-none'
+          ? 'opacity-50 cursor-not-allowed'
           : 'cursor-pointer'} {responsiveClasses(size, trackH)}"
         style="background-color: color-mix(in srgb, var({token}) 16%, transparent);"
       >
@@ -198,7 +200,7 @@
             aria-describedby={describedBy}
             onkeydown={(e) => onThumbKeydown(e, i)}
             class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow {disabled
-              ? ''
+              ? 'cursor-not-allowed'
               : 'cursor-grab active:cursor-grabbing'} focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:2px] {responsiveClasses(
               size,
               thumbSz,

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";