@heyramzi/ui 2.24.0 → 3.1.0

package/src/shadcn/tooltip/tooltip-portal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/tooltip/tooltip-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-collapsible-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<Omit<CollapsiblePrimitive.ContentProps, "child">, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -17,13 +17,13 @@
 	bind:ref
 	data-slot="trace-collapsible-trigger"
 	class={cn(
-		"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",
+		"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-ink",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
 	<TraceIcon class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
-		<CaretRight />
+		<CaretRight aria-hidden="true" />
 	</TraceIcon>
 </Collapsible.Trigger>

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

@@ -0,0 +1,4 @@
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<Omit<CollapsiblePrimitive.TriggerProps, "child">, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-collapsible.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-description.svelte

@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="trace-description"
-	class={cn("shrink-0 text-muted-foreground/70 tabular-nums", className)}
+	class={cn("shrink-0 text-muted-foreground tabular-nums", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/shadcn/trace/trace-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-icon.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-line.svelte

@@ -22,7 +22,7 @@
 	data-slot="trace-line"
 	data-status={status}
 	class={cn(
-		"gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+		"gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive-ink data-[status=error]:in-[a:hover,button:hover]:text-destructive-ink data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
 		className
 	)}
 	{...restProps}

package/src/shadcn/trace/trace-line.svelte.d.ts

@@ -0,0 +1,9 @@
+export type TraceLineStatus = "running" | "error" | "pending";
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    status?: TraceLineStatus;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/trace/trace.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Controls.svelte

@@ -4,11 +4,11 @@
 	interface Props {
 		deck: DeckController;
 		/** Shown only when the deck has somewhere to open the presenter view. */
-		onpresenter?: () => void;
-		onfullscreen: () => void;
+		onPresenter?: () => void;
+		onFullscreen: () => void;
 	}
 
-	let { deck, onpresenter, onfullscreen }: Props = $props();
+	let { deck, onPresenter, onFullscreen }: Props = $props();
 
 	const icons = {
 		prev: "M15 5 8 12l7 7",
@@ -59,106 +59,110 @@
 		false,
 		deck.overview,
 	)}
-	{#if onpresenter}
-		{@render button("presenter", deck.labels.presenter, onpresenter)}
+	{#if onPresenter}
+		{@render button("presenter", deck.labels.presenter, onPresenter)}
 	{/if}
-	{@render button("fullscreen", deck.labels.fullscreen, onfullscreen)}
+	{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
 </div>
 
 <style>
-	.deck__controls {
-		position: absolute;
-		right: 12px;
-		bottom: 14px;
-		z-index: 5;
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		padding: 4px;
-		color: var(--deck-fg);
-		background: color-mix(in srgb, var(--deck-bg) 72%, transparent);
-		border: 1px solid var(--deck-line);
-		border-radius: 12px;
-		backdrop-filter: blur(var(--blur-large, 8px));
-		opacity: 0.55;
-		transition: opacity var(--deck-t-quick) var(--deck-ease);
-	}
-	.deck__controls:focus-within {
-		opacity: 1;
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.deck__controls:hover {
-			opacity: 1;
-		}
-	}
-	.deck__button {
-		display: grid;
-		place-items: center;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-		color: inherit;
-		background: transparent;
-		border: 0;
-		border-radius: 8px;
-		cursor: pointer;
-		transition:
-			background-color var(--deck-t-quick) var(--deck-ease),
-			transform var(--deck-t-quick) var(--deck-ease);
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.deck__button:hover:not(:disabled) {
-			background: var(--deck-line);
-		}
-	}
-	.deck__button:active:not(:disabled) {
-		transform: scale(var(--scale-medium, 0.97));
-	}
-	.deck__button[aria-pressed="true"] {
-		color: var(--deck-on-accent);
-		background: var(--deck-accent);
-	}
-	.deck__button:disabled {
-		opacity: 0.3;
-		cursor: default;
-	}
-	.deck__button:focus-visible {
-		outline: 2px solid var(--deck-accent);
-		outline-offset: 1px;
-	}
-	.deck__counter {
-		min-width: 52px;
-		font: 500 12px/1 var(--deck-font);
-		font-variant-numeric: tabular-nums;
-		text-align: center;
-		color: var(--deck-muted);
-	}
-	.deck__divider {
-		width: 1px;
-		height: 16px;
-		margin: 0 4px;
-		background: var(--deck-line);
-	}
+	@layer theme, base, components, utilities;
 
-	@media (hover: none) {
+	@layer components {
 		.deck__controls {
-			opacity: 0.9;
+			position: absolute;
+			right: 12px;
+			bottom: 14px;
+			z-index: 5;
+			display: flex;
+			align-items: center;
+			gap: 2px;
+			padding: 4px;
+			color: var(--deck-fg);
+			background: color-mix(in srgb, var(--deck-bg) 72%, transparent);
+			border: 1px solid var(--deck-line);
+			border-radius: 12px;
+			backdrop-filter: blur(var(--blur-large, 8px));
+			/* At rest the counter still reads 4.5:1 on a light or dark deck; 0.55 was 3.1:1. */
+			opacity: 0.7;
+			transition: opacity var(--deck-t-quick) var(--deck-ease);
 		}
-	}
-	/* On a small deck the controls shrink and drop the extras, so they don't cover the slide. */
-	@container (max-width: 520px) {
-		.deck__controls {
-			right: 6px;
-			bottom: 10px;
-			padding: 2px;
+		.deck__controls:focus-within {
+			opacity: 1;
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.deck__controls:hover {
+				opacity: 1;
+			}
 		}
 		.deck__button {
-			width: 28px;
-			height: 28px;
+			display: grid;
+			place-items: center;
+			width: 32px;
+			height: 32px;
+			padding: 0;
+			color: inherit;
+			background: transparent;
+			border: 0;
+			border-radius: 8px;
+			cursor: pointer;
+			transition:
+				background-color var(--deck-t-quick) var(--deck-ease),
+				transform var(--deck-t-quick) var(--deck-ease);
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.deck__button:hover:not(:disabled) {
+				background: var(--deck-line);
+			}
+		}
+		.deck__button:active:not(:disabled) {
+			transform: scale(var(--scale-medium, 0.97));
+		}
+		.deck__button[aria-pressed="true"] {
+			color: var(--deck-on-accent);
+			background: var(--deck-accent);
+		}
+		.deck__button:disabled {
+			opacity: 0.3;
+			cursor: default;
+		}
+		.deck__button:focus-visible {
+			outline: 2px solid var(--deck-accent);
+			outline-offset: 1px;
+		}
+		.deck__counter {
+			min-width: 52px;
+			font: 500 12px/1 var(--deck-font);
+			font-variant-numeric: tabular-nums;
+			text-align: center;
 		}
-		.deck__counter,
 		.deck__divider {
-			display: none;
+			width: 1px;
+			height: 16px;
+			margin: 0 4px;
+			background: var(--deck-line);
+		}
+
+		@media (hover: none) {
+			.deck__controls {
+				opacity: 0.9;
+			}
+		}
+		/* On a small deck the controls shrink and drop the extras, so they don't cover the slide. */
+		@container (max-width: 520px) {
+			.deck__controls {
+				right: 6px;
+				bottom: 10px;
+				padding: 2px;
+			}
+			.deck__button {
+				width: 28px;
+				height: 28px;
+			}
+			.deck__counter,
+			.deck__divider {
+				display: none;
+			}
 		}
 	}
 </style>

package/src/slides/Controls.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DeckController } from "./deck-controller.svelte.js";
+interface Props {
+    deck: DeckController;
+    /** Shown only when the deck has somewhere to open the presenter view. */
+    onPresenter?: () => void;
+    onFullscreen: () => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Deck.svelte

@@ -32,7 +32,7 @@
 		labels,
 		class: className,
 		style,
-		onchange,
+		onIndexChange,
 		children,
 	}: DeckProps = $props();
 
@@ -72,6 +72,7 @@
 			return labels;
 		},
 		transition: viewTransition,
+		zoomMs,
 	});
 	controller = deck;
 	setContext(DECK_KEY, deck);
@@ -88,9 +89,17 @@
 		run.finished.finally(() => delete document.documentElement.dataset.deckVt);
 	}
 
+	/* The overview zoom's length, read from the CSS so it follows the token. 0 under reduced motion. */
+	function zoomMs() {
+		if (!root || matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+		const value = getComputedStyle(root).getPropertyValue("--deck-t-zoom").trim();
+		const ms = Number.parseFloat(value) * (value.endsWith("ms") ? 1 : 1000);
+		return Number.isFinite(ms) ? ms : 0;
+	}
+
 	onMount(() => deck.mount());
 
-	$effect(() => deck.listen((position) => onchange?.(position.index, position.step)));
+	$effect(() => deck.listen((position) => onIndexChange?.(position.index, position.step)));
 	$effect(() => {
 		const options = urlSync;
 		if (options) return untrack(() => attachUrlSync(deck, options === true ? {} : options));
@@ -131,6 +140,9 @@
 	);
 
 	function onkeydown(event: KeyboardEvent) {
+		// WHY on the window: fullscreen can leave focus on body, and the deck still owns the keys then.
+		const inside = event.target instanceof Node && root?.contains(event.target);
+		if (!inside && document.fullscreenElement !== root) return;
 		const action = deck.handleKey(event);
 		if (action === "fullscreen") void toggleFullscreen();
 		else if (action === "presenter") openPresenter?.();
@@ -138,7 +150,6 @@
 
 	let swipe: { x: number; y: number } | null = null;
 	function onpointerdown(event: PointerEvent) {
-		deck.activate();
 		swipe = event.pointerType === "mouse" ? null : { x: event.clientX, y: event.clientY };
 	}
 	function onpointerup(event: PointerEvent) {
@@ -173,9 +184,7 @@
 	data-deck={id}
 	data-view={deck.view}
 	data-transition={transition}
-	data-morphing={deck.morphing || undefined}
-	onfocusin={() => deck.activate()}
-	onpointerenter={() => deck.activate()}
+	data-zoom={deck.zoom ? (deck.zoom.running ? "run" : "hold") : undefined}
 	{onpointerdown}
 	{onpointerup}
 >
@@ -185,7 +194,8 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-		{#if deck.overview}
+		<!-- The tiles mount once the camera starts pulling back, and fade in as it lands. -->
+		{#if deck.overview && !deck.zoom?.framed}
 			<Overview {deck} returnFocus={root} />
 		{/if}
 	</div>
@@ -209,68 +219,75 @@
 	{/if}
 
 	{#if controls}
-		<Controls {deck} onpresenter={openPresenter} onfullscreen={toggleFullscreen} />
+		<Controls {deck} onPresenter={openPresenter} onFullscreen={toggleFullscreen} />
 	{/if}
 </div>
 
 <style>
-	.deck {
-		position: relative;
-		display: block;
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-		overflow: hidden;
-		container-type: inline-size;
-		background: var(--deck-letterbox);
-		color: var(--deck-fg);
-		font-family: var(--deck-font);
-		outline: none;
-		touch-action: pan-y;
-		-webkit-tap-highlight-color: transparent;
-	}
-	.deck:focus-visible {
-		outline: 2px solid var(--deck-accent);
-		outline-offset: -2px;
-	}
-	.deck:fullscreen {
-		background: var(--deck-bg);
-	}
+	@layer theme, base, components, utilities;
 
-	.deck__stage {
-		position: absolute;
-		inset: 0;
-		overflow: hidden;
-	}
+	@layer components {
+		.deck {
+			position: relative;
+			display: block;
+			width: 100%;
+			height: 100%;
+			min-height: 0;
+			overflow: hidden;
+			container-type: inline-size;
+			background: var(--deck-letterbox);
+			color: var(--deck-fg);
+			font-family: var(--deck-font);
+			outline: none;
+			touch-action: pan-y;
+			-webkit-tap-highlight-color: transparent;
+		}
 
-	.deck__progress {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 5;
-		height: 3px;
-		background: var(--deck-line);
-	}
-	.deck__progress-fill {
-		height: 100%;
-		background: var(--deck-accent);
-		transform-origin: 0 50%;
-		transition: transform var(--deck-t-morph) var(--deck-ease);
-	}
+		.deck:focus-visible {
+			outline: 2px solid var(--deck-accent);
+			outline-offset: -2px;
+		}
 
-	.deck__sr {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-	}
+		.deck:fullscreen {
+			background: var(--deck-bg);
+		}
+
+		.deck__stage {
+			position: absolute;
+			inset: 0;
+			overflow: hidden;
+		}
+
+		.deck__progress {
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 5;
+			height: 3px;
+			background: var(--deck-line);
+		}
 
-	@media (prefers-reduced-motion: reduce) {
 		.deck__progress-fill {
-			transition: none;
+			height: 100%;
+			background: var(--deck-accent);
+			transform-origin: 0 50%;
+			transition: transform var(--deck-t-morph) var(--deck-ease);
+		}
+
+		.deck__sr {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.deck__progress-fill {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/slides/Deck.svelte.d.ts

@@ -0,0 +1,5 @@
+import "./theme.css";
+import { type DeckProps } from "./types.js";
+declare const $$Component: import("svelte").Component<DeckProps, {}, "step" | "index" | "controller">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Fragment.svelte

@@ -50,29 +50,33 @@
 </svelte:element>
 
 <style>
-	.deck-fragment {
-		opacity: 0;
-		transition:
-			opacity var(--deck-t-slide) var(--deck-ease),
-			transform var(--deck-t-slide) var(--deck-ease);
-	}
-	.deck-fragment[data-reveal="rise"] {
-		transform: translateY(var(--deck-shift));
-	}
-	.deck-fragment[data-reveal="scale"] {
-		transform: scale(var(--scale-large, 0.96));
-	}
-	.deck-fragment[data-visible="true"] {
-		opacity: 1;
-		transform: none;
-		transition-delay: calc(var(--frag-i) * var(--deck-stagger));
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.deck-fragment {
-			transform: none !important;
-			transition: opacity var(--deck-t-quick) linear;
-			transition-delay: 0s !important;
+			opacity: 0;
+			transition:
+				opacity var(--deck-t-slide) var(--deck-ease),
+				transform var(--deck-t-slide) var(--deck-ease);
+		}
+		.deck-fragment[data-reveal="rise"] {
+			transform: translateY(var(--deck-shift));
+		}
+		.deck-fragment[data-reveal="scale"] {
+			transform: scale(var(--scale-large, 0.96));
+		}
+		.deck-fragment[data-visible="true"] {
+			opacity: 1;
+			transform: none;
+			transition-delay: calc(var(--frag-i) * var(--deck-stagger));
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.deck-fragment {
+				transform: none !important;
+				transition: opacity var(--deck-t-quick) linear;
+				transition-delay: 0s !important;
+			}
 		}
 	}
 </style>

package/src/slides/Fragment.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from "svelte";
+interface Props {
+    /** Reveal at this step. `1` is the first press of the arrow key. */
+    step?: number;
+    /** How it arrives: `rise` (default), `fade` or `scale`. */
+    reveal?: "rise" | "fade" | "scale";
+    /** The element to render, so a fragment can be an `li` inside a `ul`. */
+    as?: string;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;