@heyramzi/ui 2.20.0 → 2.21.1

package/src/shadcn/skeleton/index.ts

@@ -1,7 +1,10 @@
 import Root from "./skeleton.svelte";
+import Delay from "./skeleton-delay.svelte";
 
 export {
   Root,
+  Delay,
   //
   Root as Skeleton,
+  Delay as SkeletonDelay,
 };

package/src/shadcn/skeleton/skeleton-delay.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	/** DESIGN.md rule 20: a skeleton waits this long, so a fast answer never shows one. */
+	export const SHOW_DELAY_MS = 150;
+	/** DESIGN.md rule 20: once shown, a skeleton stays this long, so it never blinks. */
+	export const MIN_VISIBLE_MS = 300;
+</script>
+
+<script lang="ts">
+	import { untrack, type Snippet } from "svelte";
+
+	interface Props {
+		/** The data is on its way. */
+		loading: boolean;
+		/** What shows while it loads: one or more `Skeleton`s shaped like the content. */
+		skeleton: Snippet;
+		/** The content, drawn once loading ends and the skeleton has had its minimum time. */
+		children: Snippet;
+		/** Ms to wait before the skeleton shows. */
+		showDelay?: number;
+		/** Ms the skeleton stays once it shows. */
+		minVisible?: number;
+	}
+
+	let {
+		loading,
+		skeleton,
+		children,
+		showDelay = SHOW_DELAY_MS,
+		minVisible = MIN_VISIBLE_MS,
+	}: Props = $props();
+
+	// `wait` draws nothing: the first 150ms of a load, which a fast answer never leaves.
+	let phase = $state<"wait" | "skeleton" | "content">(untrack(() => (loading ? "wait" : "content")));
+	let shownAt = 0;
+
+	$effect(() => {
+		const isLoading = loading;
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		untrack(() => {
+			if (isLoading) {
+				if (phase === "skeleton") return;
+				phase = "wait";
+				timer = setTimeout(() => {
+					phase = "skeleton";
+					shownAt = performance.now();
+				}, showDelay);
+			} else if (phase === "skeleton") {
+				const left = minVisible - (performance.now() - shownAt);
+				if (left > 0) timer = setTimeout(() => (phase = "content"), left);
+				else phase = "content";
+			} else {
+				phase = "content";
+			}
+		});
+		return () => clearTimeout(timer);
+	});
+</script>
+
+{#if phase === "skeleton"}
+	{@render skeleton()}
+{:else if phase === "content"}
+	{@render children()}
+{/if}

package/src/shadcn/skeleton/skeleton-delay.svelte.test.ts

@@ -0,0 +1,57 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import SkeletonDelay from "./skeleton-delay.svelte";
+
+const skeleton = createRawSnippet(() => ({ render: () => "<i>skeleton</i>" }));
+const children = createRawSnippet(() => ({ render: () => "<b>content</b>" }));
+
+function render(loading: boolean) {
+  const props = $state({ loading, skeleton, children });
+  const target = document.createElement("div");
+  const app = mount(SkeletonDelay, { target, props });
+  flushSync();
+  return {
+    shows: () => target.textContent,
+    set: (next: boolean) => {
+      props.loading = next;
+      flushSync();
+    },
+    wait: (ms: number) => {
+      vi.advanceTimersByTime(ms);
+      flushSync();
+    },
+    done: () => void unmount(app),
+  };
+}
+
+describe("SkeletonDelay", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("shows nothing for a fast answer, then the content", () => {
+    const view = render(true);
+    expect(view.shows()).toBe("");
+    view.wait(100);
+    view.set(false);
+    expect(view.shows()).toBe("content");
+    view.done();
+  });
+
+  it("shows the skeleton after 150ms and holds it 300ms", () => {
+    const view = render(true);
+    view.wait(150);
+    expect(view.shows()).toBe("skeleton");
+    view.wait(50);
+    view.set(false);
+    expect(view.shows()).toBe("skeleton");
+    view.wait(250);
+    expect(view.shows()).toBe("content");
+    view.done();
+  });
+
+  it("draws the content at once when nothing is loading", () => {
+    const view = render(false);
+    expect(view.shows()).toBe("content");
+    view.done();
+  });
+});

package/src/shadcn/skeleton/skeleton.svelte

@@ -12,6 +12,10 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn("bg-muted rounded-md animate-pulse", className)}
+	class={cn(
+		// A foreground wash on light, because `bg-muted` (L 0.94) vanished on the 0.945 canvas.
+		"bg-foreground/6 dark:bg-muted rounded-sm animate-pulse motion-reduce:animate-none",
+		className,
+	)}
 	{...restProps}
 ></div>

package/src/shadcn/slider/slider.svelte

@@ -45,7 +45,7 @@
 				data-slot="slider-thumb"
 				aria-label={thumbLabel}
 				aria-valuetext={valueText}
-				class="bg-background focus-visible:ring-ring/50 block size-5 cursor-grab rounded-full border-2 border-current shadow-[var(--elev-btn)] transition-[transform,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none hover:scale-110 focus-visible:ring-3 active:cursor-grabbing data-active:scale-110 data-active:shadow-[var(--elev-raised)] pointer-coarse:size-6 after:absolute after:top-1/2 after:left-1/2 after:size-8 after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:size-11"
+				class="bg-card block size-5 cursor-grab rounded-full border-2 border-current shadow-[var(--elev-btn)] transition-[transform,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none hover:scale-110 focus-visible:shadow-(--ring-focus) active:cursor-grabbing data-active:scale-110 data-active:shadow-[var(--elev-raised)] pointer-coarse:size-6 after:absolute after:top-1/2 after:left-1/2 after:size-8 after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:size-11"
 			/>
 		{/each}
 	{/snippet}

package/src/shadcn/switch/switch.svelte

@@ -19,13 +19,13 @@
 	data-slot="switch"
 	data-size={size}
 	class={cn(
-		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-[background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none after:absolute after:-inset-x-3 after:top-1/2 after:h-[max(100%,2rem)] after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent aria-invalid:ring-3 data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-[background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none after:absolute after:-inset-x-3 after:top-1/2 after:h-[max(100%,2rem)] after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className,
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform duration-[var(--duration-medium)] ease-[var(--ease-smooth-out)] rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+		class="bg-card dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform duration-[var(--duration-medium)] ease-[var(--ease-smooth-out)] rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>

package/src/shadcn/table/table-row.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		"data-[state=selected]:bg-muted transition-[background-color,transform,box-shadow] duration-[var(--duration-quick)] ease-out hover:bg-muted/20 hover:-translate-y-px hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)] motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-none",
+		"data-[state=selected]:bg-muted transition-[background-color] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] hover:bg-muted/20",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/tabs/tabs-list.svelte

@@ -29,7 +29,7 @@
 	     shows the trigger's own active background and never an empty pill. -->
 	<span
 		aria-hidden="true"
-		class="bg-background dark:border-input dark:bg-input/30 pointer-events-none absolute inset-y-[3px] left-0 z-0 w-0 rounded-md border border-transparent opacity-0 shadow-sm transition-[transform,width,opacity] duration-[var(--duration-fast,250ms)] ease-[var(--ease-smooth-out,cubic-bezier(0.22,1,0.36,1))] will-change-[transform,width] motion-reduce:transition-opacity"
+		class="bg-card dark:bg-input/30 pointer-events-none absolute inset-y-[3px] left-0 z-0 w-0 rounded-[calc(var(--radius-lg)-3px)] border border-transparent opacity-0 shadow-btn transition-[transform,width,opacity] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] will-change-transform motion-reduce:transition-opacity"
 		{@attach slidingPill}
 	></span>
 	{@render children?.()}

package/src/shadcn/tabs/tabs-trigger.svelte

@@ -13,7 +13,8 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground group-data-[pill=on]/tabs-list:data-[state=active]:border-transparent group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent group-data-[pill=on]/tabs-list:data-[state=active]:shadow-none dark:group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent relative z-[1] inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		// Muted at rest, foreground on hover and when active, so each state reads stronger than rest.
+		"data-[state=active]:bg-card data-[state=active]:text-foreground hover:text-foreground focus-visible:shadow-(--ring-focus) focus-visible:data-[state=active]:shadow-(--ring-focus) dark:data-[state=active]:bg-input/30 text-muted-foreground group-data-[pill=on]/tabs-list:data-[state=active]:border-transparent group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent group-data-[pill=on]/tabs-list:data-[state=active]:shadow-none dark:group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent relative z-[1] inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-[calc(var(--radius-lg)-3px)] border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-btn [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-transparent px-2.5 py-2 text-base shadow-field transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-transparent px-2.5 py-2 text-base shadow-field transition-[color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
 		className,
 	)}
 	bind:value

package/src/shadcn/toggle/index.ts

@@ -4,7 +4,7 @@ export {
   type ToggleSize,
   type ToggleVariant,
   type ToggleVariants,
-} from "./toggle.svelte";
+} from "./toggle-variants.js";
 
 export {
   Root,

package/src/shadcn/toggle/toggle-variants.ts

@@ -0,0 +1,26 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export const toggleVariants = tv({
+  base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-btn",
+    },
+    size: {
+      // Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
+      default: "h-8 min-w-8 px-2",
+      sm: "h-7 min-w-7 px-1.5",
+      lg: "h-9 min-w-9 px-2.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/src/shadcn/toggle/toggle.svelte

@@ -1,30 +1,12 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import {
+		toggleVariants,
+		type ToggleSize,
+		type ToggleVariant,
+		type ToggleVariants,
+	} from "./toggle-variants.js";
 
-	export const toggleVariants = tv({
-		base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
-			},
-			size: {
-				// Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
-				default: "h-8 min-w-8 px-2",
-				sm: "h-7 min-w-7 px-1.5",
-				lg: "h-9 min-w-9 px-2.5",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
-	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
-	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+	export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants };
 </script>
 
 <script lang="ts">

package/src/shadcn/toggle-group/toggle-group.svelte

@@ -59,7 +59,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+		"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-btn",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/tooltip/tooltip-content.svelte

@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"t-dropdown z-50 w-fit max-w-xs rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-raised select-none outline-none",
+			"t-dropdown z-50 w-fit max-w-xs rounded-lg bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-edge-raised select-none outline-none",
 			"has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
 			className,
 		)}

package/src/shadcn/trace/trace-collapsible-trigger.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="trace-collapsible-trigger"
 	class={cn(
-		"gap-1 rounded-md focus-visible:ring-3 focus-visible:ring-ring/50 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
+		"gap-1 rounded-md focus-visible:shadow-(--ring-focus) group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
 		className
 	)}
 	{...restProps}

package/src/shadcn/trace/trace.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="trace"
 	class={cn(
-		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
+		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:shadow-(--ring-focus) flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
 		className
 	)}
 	{...restProps}

package/src/status/README.md

@@ -15,4 +15,4 @@ Status badge, dot and icon from one map. `defineStatuses` builds the map, and th
 <StatusBadge {statuses} status="sent" />
 ```
 
-Exports: `StatusBadge`, `StatusDot`, `StatusIcon`, `defineStatuses` and the types `StatusDef`, `StatusDotVariant`, `StatusId`, `StatusMap`, `Statuses`. The old subpaths `tasks/status`, `tasks/status-dot` and `tasks/statuses` resolve to the same files.
+Exports: `StatusBadge`, `StatusPill` (the tinted pill StatusBadge draws, for an organism that has its own icon and label), `StatusDot`, `StatusIcon`, `defineStatuses` and the types `StatusDef`, `StatusDotVariant`, `StatusId`, `StatusMap`, `Statuses`. The old subpaths `tasks/status`, `tasks/status-dot` and `tasks/statuses` resolve to the same files.

package/src/status/index.ts

@@ -9,3 +9,5 @@ export type {
   StatusMap,
   Statuses,
 } from "./status-types.js";
+export { default as StatusPill } from "./status-pill.svelte";
+export { PILL_TINT } from "./pill-tint.js";

package/src/status/pill-tint.ts

@@ -0,0 +1,16 @@
+import type { Tone } from "../lib/tone.js";
+
+// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
+// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+// the canvas and vanishes there (tokens board, "what fights the new scale").
+// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
+// can import it: tsc's `*.svelte` shim only knows a default export.
+export const PILL_TINT: Record<Tone, string> = {
+  neutral: "bg-foreground/6 text-muted-foreground",
+  accent:
+    "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "bg-info/12 text-info-800 dark:text-info-400",
+  success: "bg-success/12 text-success-800 dark:text-success-400",
+  warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+  destructive: "bg-destructive/10 text-destructive-ink",
+};

package/src/status/status-badge.svelte

@@ -2,7 +2,8 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../lib/utils.js";
-	import { Badge } from "../shadcn/badge/index.js";
+	import StatusPill from "./status-pill.svelte";
+	import StatusIcon from "./status-icon.svelte";
 	import { Spinner } from "../shadcn/spinner/index.js";
 	import { TONE_COLOR, type Tone } from "../lib/tone.js";
 	import type { Statuses } from "./status-types.js";
@@ -44,22 +45,35 @@
 	let resolvedLabel = $derived(
 		label ?? (statuses && status ? statuses.label(status) : (status ?? "")),
 	);
+	// Every registry status: StatusIcon draws the variant's shape when the map has none (DESIGN.md, Patterns).
+	let hasIcon = $derived(Boolean(statuses && status && statuses.has(status)));
 </script>
 
-<Badge tone={resolvedTone} class={cn(capitalize && "capitalize", className)} {...restProps}>
-	{#if dot}
+<!-- The pill draws the tint; this picks what goes before the label. A registry icon wins,
+     so the state reads without its colour. -->
+{#snippet lead()}
+	{#if busy}
+		<Spinner class="size-3" aria-hidden="true" />
+	{:else if hasIcon && statuses && status}
+		<StatusIcon {statuses} {status} size={12} animate={false} />
+	{:else if dot}
 		<span
 			class="size-1.5 shrink-0 rounded-full"
 			style:background-color={TONE_COLOR[resolvedTone]}
 			aria-hidden="true"
 		></span>
 	{/if}
-	{#if busy}
-		<Spinner class="size-3" aria-hidden="true" />
-	{/if}
+{/snippet}
+
+<StatusPill
+	tone={resolvedTone}
+	icon={busy || hasIcon || dot ? lead : undefined}
+	class={cn(capitalize && "capitalize", className)}
+	{...restProps}
+>
 	{#if children}
 		{@render children()}
 	{:else}
 		{resolvedLabel}
 	{/if}
-</Badge>
+</StatusPill>

package/src/status/status-dot.svelte

@@ -151,7 +151,7 @@
 
 	.sd-fill {
 		transform-origin: 7px 7px;
-		animation: sd-fill-in var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
 	}
 
 	@keyframes sd-fill-in {
@@ -167,7 +167,7 @@
 
 	.sd-pop {
 		transform-origin: 7px 7px;
-		animation: sd-pop-in var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
 	}
 
 	@keyframes sd-pop-in {
@@ -175,10 +175,6 @@
 			transform: scale(0.4);
 			opacity: 0;
 		}
-		60% {
-			transform: scale(1.08);
-			opacity: 1;
-		}
 		to {
 			transform: scale(1);
 			opacity: 1;
@@ -188,19 +184,18 @@
 	.sd-check {
 		stroke-dasharray: 12;
 		stroke-dashoffset: 12;
-		animation: sd-trace var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out)
-			var(--duration-quick, 120ms) forwards;
+		animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick) forwards;
 	}
 
 	.sd-cross {
 		stroke-dasharray: 6;
 		stroke-dashoffset: 6;
-		animation: sd-trace calc(var(--duration-fast, 160ms) / 2) var(--ease-smooth-out, ease-out)
-			var(--duration-quick, 120ms) forwards;
+		animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out) var(--duration-quick)
+			forwards;
 	}
 
 	.sd-cross-second {
-		animation-delay: calc(var(--duration-quick, 120ms) + var(--duration-fast, 160ms) / 2);
+		animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
 	}
 
 	@keyframes sd-trace {

package/src/status/status-pill.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import type { Tone } from "../lib/tone.js";
+	import { PILL_TINT } from "./pill-tint.js";
+
+	export { PILL_TINT };
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../lib/utils.js";
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		tone?: Tone;
+		/** What sits before the label: a Phosphor icon, a `StatusIcon`, a dot or a spinner. */
+		icon?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { tone = "neutral", icon, children, class: className, ...restProps }: Props = $props();
+</script>
+
+<!-- A pill means status or a count (DESIGN.md rule 15), so this is the one rounded-full chip. -->
+<span
+	data-slot="status-pill"
+	data-tone={tone}
+	class={cn(
+		"inline-flex h-5 max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-full px-2 text-xs font-medium whitespace-nowrap",
+		"transition-[background-color,color] duration-quick ease-smooth-out motion-reduce:transition-none",
+		"[&>svg]:size-3 [&>svg]:shrink-0",
+		icon && "pl-1.5",
+		PILL_TINT[tone],
+		className,
+	)}
+	{...restProps}
+>
+	{@render icon?.()}
+	<span class="min-w-0 truncate">{@render children?.()}</span>
+</span>

package/src/svelte-reexports.test.ts

@@ -0,0 +1,43 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vite-plus/test";
+
+// A plain tsc consumer (upsys app-cli) reads this package's src through a `*.svelte` shim that
+// only knows a default export. A .ts file that re-exports a named value from a .svelte module
+// fails there, as PILL_TINT did in 2.21.0. Named values live in a .ts module the component imports.
+const root = import.meta.dirname;
+
+function tsFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return tsFiles(path);
+    return entry.name.endsWith(".ts") && !entry.name.endsWith(".d.ts") ? [path] : [];
+  });
+}
+
+const reexport =
+  /export\s+(type\s+)?(\*|\{[^}]*\})\s*(?:as\s+\w+\s*)?from\s*["']([^"']+\.svelte)["']/g;
+
+describe("re-exports from .svelte modules", () => {
+  it("carry only the default export or types", () => {
+    const offenders: string[] = [];
+    for (const file of tsFiles(root)) {
+      for (const [, typeOnly, list, from] of readFileSync(file, "utf8").matchAll(reexport)) {
+        if (typeOnly) continue;
+        const names =
+          list === "*"
+            ? ["*"]
+            : list
+                .slice(1, -1)
+                .split(",")
+                .map((n) => n.trim());
+        const values = names.filter(
+          (n) => n && n !== "default" && !/^(type\s|default\s+as\s)/.test(n),
+        );
+        if (values.length)
+          offenders.push(`${relative(root, file)}: ${values.join(", ")} from ${from}`);
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+});