@heyramzi/ui 2.23.0 → 3.0.0

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();
 
@@ -90,7 +90,7 @@
 
 	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 +131,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 +141,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) {
@@ -174,8 +176,6 @@
 	data-view={deck.view}
 	data-transition={transition}
 	data-morphing={deck.morphing || undefined}
-	onfocusin={() => deck.activate()}
-	onpointerenter={() => deck.activate()}
 	{onpointerdown}
 	{onpointerup}
 >
@@ -209,68 +209,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;

package/src/slides/Overview.svelte

@@ -49,70 +49,75 @@
 </ol>
 
 <style>
-	.deck__tiles {
-		position: absolute;
-		inset: 0;
-		z-index: 4;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		/* The ring and number appear once the thumbnails have landed. */
-		animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.deck__tiles {
+			position: absolute;
+			inset: 0;
+			z-index: 4;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			/* The ring and number appear once the thumbnails have landed. */
+			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+		}
+		@media (prefers-reduced-motion: reduce) {
+			.deck__tiles {
+				animation: none;
+			}
+		}
+		.deck__tile-cell {
+			position: absolute;
+		}
+		.deck__tile {
+			position: absolute;
+			inset: 0;
+			padding: 0;
+			color: var(--deck-fg);
+			background: transparent;
+			border: 0;
+			border-radius: 10px;
+			cursor: pointer;
+			outline: 2px solid transparent;
+			outline-offset: 3px;
+			transition: outline-color var(--deck-t-quick) var(--deck-ease);
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.deck__tile:hover {
+				outline-color: color-mix(in srgb, var(--deck-accent) 55%, transparent);
+			}
+		}
+		.deck__tile[aria-current="step"] {
+			outline-color: var(--deck-accent);
+		}
+		.deck__tile:focus-visible {
+			outline-color: var(--deck-fg);
+		}
+		.deck__tile-n {
+			position: absolute;
+			bottom: -12px;
+			left: 50%;
+			min-width: 22px;
+			transform: translateX(-50%);
+			padding: 3px 6px;
+			font: 600 11px/1 var(--deck-font);
+			font-variant-numeric: tabular-nums;
+			text-align: center;
+			color: var(--deck-fg);
+			background: var(--deck-bg);
+			box-shadow: 0 0 0 1px var(--deck-line);
+			border-radius: 6px;
+		}
+		.deck__tile[aria-current="step"] .deck__tile-n {
+			color: var(--deck-on-accent);
+			background: var(--deck-accent);
+		}
 	}
+
 	@keyframes tiles-in {
 		from {
 			opacity: 0;
 		}
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.deck__tiles {
-			animation: none;
-		}
-	}
-	.deck__tile-cell {
-		position: absolute;
-	}
-	.deck__tile {
-		position: absolute;
-		inset: 0;
-		padding: 0;
-		color: var(--deck-fg);
-		background: transparent;
-		border: 0;
-		border-radius: 10px;
-		cursor: pointer;
-		outline: 2px solid transparent;
-		outline-offset: 3px;
-		transition: outline-color var(--deck-t-quick) var(--deck-ease);
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.deck__tile:hover {
-			outline-color: color-mix(in srgb, var(--deck-accent) 55%, transparent);
-		}
-	}
-	.deck__tile[aria-current="step"] {
-		outline-color: var(--deck-accent);
-	}
-	.deck__tile:focus-visible {
-		outline-color: var(--deck-fg);
-	}
-	.deck__tile-n {
-		position: absolute;
-		bottom: -12px;
-		left: 50%;
-		min-width: 22px;
-		transform: translateX(-50%);
-		padding: 3px 6px;
-		font: 600 11px/1 var(--deck-font);
-		font-variant-numeric: tabular-nums;
-		text-align: center;
-		color: var(--deck-fg);
-		background: var(--deck-bg);
-		box-shadow: 0 0 0 1px var(--deck-line);
-		border-radius: 6px;
-	}
-	.deck__tile[aria-current="step"] .deck__tile-n {
-		color: var(--deck-on-accent);
-		background: var(--deck-accent);
-	}
 </style>

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

@@ -0,0 +1,8 @@
+import type { DeckController } from "./deck-controller.svelte.js";
+interface Props {
+    deck: DeckController;
+    returnFocus?: HTMLElement;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;