sheer-ui 0.0.0

package/src/lib/blocks/Appearance.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import * as Field from '../components/field';
+	import * as Item from '../components/item';
+	import { Separator } from '../components/separator';
+	import * as RadioGroup from '../components/radio-group';
+	import { getTheme, type Mode } from '../components/theme-toggle/index.js';
+	import type { Snippet } from 'svelte';
+
+	type ThemeColors = { bg: string; border: string; card: string; muted: string; fg: string; accent: string };
+
+	let { description = 'Select a theme or sync with your system.' }: { description?: string } = $props();
+
+	const LIGHT: ThemeColors = { bg: '#FAFAFA', border: '#E5E5E5', card: '#FFFFFF', muted: '#A3A3A3', fg: '#171717', accent: '#525252' };
+	const DARK: ThemeColors = { bg: '#171717', border: '#2E2E2E', card: '#262626', muted: '#737373', fg: '#FAFAFA', accent: '#A3A3A3' };
+
+	const theme = getTheme();
+</script>
+
+{#snippet themeElements(c: ThemeColors, id: string)}
+	<rect x="0.742" width="161.5" height="88" rx="6" fill={c.bg} />
+	<mask id="sidebar-{id}" fill="white"
+		><path d="M0.742 6C0.742 2.686 3.428 0 6.742 0H13.742V88H6.742C3.428 88 0.742 85.314 0.742 82V6Z" /></mask>
+	<path d="M0.742 6C0.742 2.686 3.428 0 6.742 0H13.742V88H6.742C3.428 88 0.742 85.314 0.742 82V6Z" fill={c.bg} />
+	<path d="M14.742 0V88H12.742V0H14.742Z" fill={c.border} mask="url(#sidebar-{id})" />
+	<mask id="header-{id}" fill="white"><path d="M156.242 0C159.556 0 162.242 2.686 162.242 6V13H13.742V0H156.242Z" /></mask>
+	<path d="M156.242 0C159.556 0 162.242 2.686 162.242 6V13H13.742V0H156.242Z" fill={c.bg} />
+	<path d="M162.242 14H13.742V12H162.242V14Z" fill={c.border} mask="url(#header-{id})" />
+	<rect x="44.755" y="21.5" width="86.474" height="23.5" rx="2.5" fill={c.card} stroke={c.border} />
+	<rect x="52.941" y="28" width="19.232" height="1.5" rx="0.75" fill={c.muted} />
+	<rect x="78.376" y="28" width="19.232" height="1.5" rx="0.75" fill={c.fg} />
+	<rect x="78.376" y="33.25" width="44.047" height="1.5" rx="0.75" fill={c.fg} />
+	<rect x="44.755" y="51.5" width="86.474" height="23.5" rx="2.5" fill={c.card} stroke={c.border} />
+	<rect x="52.941" y="58" width="19.232" height="1.5" rx="0.75" fill={c.muted} />
+	<rect x="78.376" y="58" width="19.232" height="1.5" rx="0.75" fill={c.fg} />
+	<rect x="78.376" y="63.25" width="44.047" height="1.5" rx="0.75" fill={c.fg} />
+	<rect x="18.492" y="4.625" width="20.5" height="3.75" rx="1.875" fill={c.accent} />
+	<rect x="44.255" y="4.625" width="20.5" height="3.75" rx="1.875" fill={c.muted} />
+	<rect x="69.505" y="4.625" width="20.5" height="3.75" rx="1.875" fill={c.muted} />
+	<rect x="5.367" y="4.625" width="3.75" height="3.75" rx="1" fill={c.muted} />
+	<rect x="5.367" y="13.375" width="3.75" height="3.75" rx="1" fill={c.muted} />
+	<rect x="5.367" y="20.875" width="3.75" height="3.75" rx="1" fill={c.muted} />
+	<rect x="5.367" y="28.375" width="3.75" height="3.75" rx="1" fill={c.muted} />
+	<rect x="5.367" y="35.875" width="3.75" height="3.75" rx="1" fill={c.muted} />
+	<rect x="5.367" y="78.875" width="3.75" height="3.75" rx="1" fill={c.muted} />
+{/snippet}
+
+{#snippet tile(value: string, label: string, border: string, interior: Snippet)}
+	<!-- The label wraps the whole card, so the native radio nested inside drives the
+	     selected outline + tint via :has(:checked) — no JS selection state. -->
+	<Field.Label
+		for={value}
+		class="cursor-pointer rounded-xl border-2 border-transparent p-2 transition-colors hover:bg-accent/20 has-checked:border-ring has-checked:bg-accent/30">
+		<Field.Field class="space-y-2">
+			<svg viewBox="0 0 163 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<g clip-path="url(#clip-{value})">
+					{@render interior()}
+				</g>
+				<rect x="1.242" y="0.5" width="160.5" height="87" rx="5.5" stroke={border} />
+				<defs><clipPath id="clip-{value}"><rect x="0.742" width="161.5" height="88" rx="6" fill="white" /></clipPath></defs>
+			</svg>
+			<div class="flex gap-2 items-center">
+				<RadioGroup.Item {value} id={value} />
+				<span class="text-sm font-medium">{label}</span>
+			</div>
+		</Field.Field>
+	</Field.Label>
+{/snippet}
+
+
+{#snippet lightInterior()}
+	{@render themeElements(LIGHT, 'light')}
+{/snippet}
+
+{#snippet darkInterior()}
+	{@render themeElements(DARK, 'dark')}
+{/snippet}
+
+{#snippet systemInterior()}
+	{@render themeElements(DARK, 'system')}
+	<mask id="mask-system" maskUnits="userSpaceOnUse" x="32" y="0" width="131" height="88" style="mask-type: alpha">
+		<path d="M130.534 0L32.451 88H162.131V0H130.534Z" fill="black" />
+	</mask>
+	<g mask="url(#mask-system)">
+		{@render themeElements(LIGHT, 'system-overlay')}
+	</g>
+{/snippet}
+
+<Item.Group>
+	<Item.Root variant="outline">
+		<Item.Title>Appearance</Item.Title>
+		<Separator class="my-0" />
+		<Field.Field>
+			<Field.Label for="theme-mode">Theme</Field.Label>
+			<Field.Description>{description}</Field.Description>
+			<RadioGroup.Root
+				bind:value={() => theme.pref ?? 'system', (v) => (theme.pref = v === 'system' ? null : (v as Mode))}
+				class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+				{@render tile('light', 'Light', LIGHT.border, lightInterior)}
+				{@render tile('dark', 'Dark', DARK.border, darkInterior)}
+				{@render tile('system', 'System', DARK.border, systemInterior)}
+			</RadioGroup.Root>
+		</Field.Field>
+	</Item.Root>
+</Item.Group>

package/src/lib/blocks/BoundaryFailed.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import AlertCircle from '@lucide/svelte/icons/alert-circle';
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { Button } from '../components/button';
+	import * as Empty from '../components/empty';
+
+	let {
+		error,
+		reset,
+		class: className,
+	}: {
+		error: unknown;
+		reset: () => void;
+		class?: ClassValue;
+	} = $props();
+</script>
+
+<Empty.Root class={join('py-12', className)}>
+	<Empty.Header>
+		<Empty.Media variant="icon">
+			<AlertCircle />
+		</Empty.Media>
+		<Empty.Title>Something went wrong</Empty.Title>
+		<Empty.Description>
+			{Error.isError(error) ? error.message : 'An unexpected error occurred'}
+		</Empty.Description>
+	</Empty.Header>
+	<Empty.Content>
+		<Button variant="outline" onclick={() => history.back()}>Go Back</Button>
+		<Button onclick={reset}>Try Again</Button>
+	</Empty.Content>
+</Empty.Root>

package/src/lib/blocks/ErrorPage.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import * as Empty from "../components/empty";
+	import { Button } from "../components/button";
+	import AlertCircle from '@lucide/svelte/icons/alert-circle';
+	import Search from '@lucide/svelte/icons/search';
+	import Lock from '@lucide/svelte/icons/lock';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Info from '@lucide/svelte/icons/info';
+
+	const ERROR_CONFIG = {
+		NOT_FOUND: { title: 'Not Found', message: "The page or resource you're looking for doesn't exist.", icon: Search, codes: [404, 410] },
+		AUTH: { title: 'Access Denied', message: "You don't have permission to access this page.", icon: Lock, codes: [403] },
+		SIGN_IN: { title: 'Sign In Required', message: "You don't have permission to access this page.", icon: Lock, codes: [401] },
+		TIMEOUT: { title: 'Request Timeout', message: 'The request took too long. Please wait a moment and try again.', icon: Clock, codes: [408, 429, 504] },
+		SERVER: { title: 'Something Went Wrong', message: "We're having trouble right now. Please try again later.", icon: AlertCircle, codes: [500, 502, 503] },
+		CLIENT: { title: 'Bad Request', message: 'Something went wrong with your request. Please try again.', icon: AlertCircle, codes: [400, 409, 422] },
+	};
+
+	const getErrorConfig = (status: number) => {
+		const match = Object.values(ERROR_CONFIG).find((c) => c.codes.includes(status));
+		return match ?? { title: `Error ${status}`, message: 'An unexpected error occurred.', icon: Info };
+	};
+
+	let {
+		status,
+		message,
+		class: className,
+		homeHref = '/',
+		homeLabel = 'Go Home',
+		showBack = true,
+		showRetry = true,
+		showHome = true,
+	}: {
+		status: number;
+		message?: string | null;
+		class?: ClassValue;
+		homeHref?: string;
+		homeLabel?: string;
+		showBack?: boolean;
+		showRetry?: boolean;
+		showHome?: boolean;
+	} = $props();
+
+	const errorInfo = $derived(getErrorConfig(status));
+</script>
+
+<Empty.Root class={className}>
+	<Empty.Header>
+		<Empty.Media variant="icon">
+			<errorInfo.icon />
+		</Empty.Media>
+		<Empty.Title>{errorInfo.title}</Empty.Title>
+		<Empty.Description>{message || errorInfo.message}</Empty.Description>
+	</Empty.Header>
+	<Empty.Content class="flex-row gap-6 justify-center">
+		{#if showBack}
+			<Button variant="outline" onclick={() => history.back()}>Go Back</Button>
+		{/if}
+		{#if showHome}
+			<Button href={homeHref}>{homeLabel}</Button>
+		{/if}
+	</Empty.Content>
+</Empty.Root>

package/src/lib/blocks/Footer.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Separator } from '../components/separator';
+	import { ThemeToggle } from "../components/theme-toggle";
+	import type { Component } from 'svelte';
+
+	type NavLink = { href: string; label: string };
+	type SocialLink = { href: string; label: string; icon: Component<{ class?: string }> };
+
+	type Props = {
+		brandHref?: string;
+		copyright?: string;
+		navLinks?: NavLink[];
+		legalLinks?: NavLink[];
+		socialLinks?: SocialLink[];
+	};
+
+	let {
+		brandHref = '/',
+		copyright = `© ${new Date().getFullYear()} POLUMEYV LLC`,
+		navLinks = [],
+		legalLinks = [],
+		socialLinks = [],
+	}: Props = $props();
+</script>
+
+<Separator />
+
+<footer class="px-8 py-10 max-w-7xl mx-auto w-full mb-10">
+	<div class="flex flex-col gap-5">
+		<div class="flex flex-col gap-15 lg:flex-row w-full justify-between lg:items-end">
+			<div class="flex flex-col gap-2 justify-end">
+				<a class="text-sm text-muted-foreground font-bold tracking-wide transition-colors duration-300 hover:text-foreground" href={brandHref}>BY POLUMEYV</a>
+				<p class="text-xs text-muted-foreground font-thin tracking-wide">{copyright}</p>
+			</div>
+			{#if navLinks.length > 0 || legalLinks.length > 0}
+				<div
+					class="flex flex-col md:flex-row md:items-center md:mb-0 mb-8 md:h-6 gap-5 text-sm text-muted-foreground [&:has(a:hover)_a:not(:hover)]:text-muted-foreground/40">
+					{#if navLinks.length > 0}
+						<div class="flex flex-wrap gap-5">
+							{#each navLinks as link (link.href)}
+								<a href={link.href} class="transition-colors duration-300 hover:text-foreground!">{link.label}</a>
+							{/each}
+						</div>
+					{/if}
+					{#if navLinks.length > 0 && legalLinks.length > 0}
+						<Separator orientation="vertical" class="hidden md:block" />
+					{/if}
+					{#if legalLinks.length > 0}
+						<div class="flex flex-wrap gap-5">
+							{#each legalLinks as link (link.href)}
+								<a href={link.href} class="transition-colors duration-300 hover:text-foreground!">{link.label}</a>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		<Separator />
+		<div class="flex w-full justify-between">
+			<div class="flex gap-6 text-sm text-muted-foreground [&_a]:hover:text-foreground">
+				{#each socialLinks as link (link.href)}
+					{const Icon = link.icon}
+					<a href={link.href} target="_blank" rel="noopener noreferrer" aria-label={link.label}>
+						<Icon class="size-5" />
+					</a>
+				{/each}
+			</div>
+			<ThemeToggle variant="outline" />
+		</div>
+	</div>
+</footer>

package/src/lib/blocks/Header.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Button } from "../components/button";
+	import { OpenCell } from '../internal/open-cell.svelte.js';
+	import MobileNav from './MobileNav.svelte';
+
+	type NavLink = { href: string; label: string };
+	type ActionButton = {
+		href: string;
+		label: string;
+		variant?: 'default' | 'outline' | 'ghost' | 'card' | 'secondary';
+	};
+
+	interface Props {
+		brand: string;
+		brandHref?: string;
+		navLinks?: NavLink[];
+		actions?: ActionButton[];
+		mobileActions?: ActionButton[];
+		showBorder?: boolean;
+		mobileId?: string;
+	}
+
+	let {
+		brand,
+		brandHref = '/',
+		navLinks = [],
+		actions = [],
+		mobileActions,
+		showBorder = false,
+		mobileId = 'mobile-nav',
+	}: Props = $props();
+
+	const mobileNav = new OpenCell();
+</script>
+
+<div
+	class="py-4 sticky top-0 justify-center items-center flex z-50 transition-colors duration-500 ease-in-out {showBorder
+		? 'border-b'
+		: ''} {mobileNav.open ? 'bg-sidebar' : 'bg-background'}">
+	<div class="flex w-full relative">
+		<div class="flex w-full justify-between relative z-50 max-w-7xl mx-auto px-8">
+			<a href={brandHref} onclick={() => (mobileNav.open = false)} class="text-xl flex items-center relative z-50">{brand}</a>
+			<nav>
+				<div class="flex justify-end justify-self-end gap-2">
+					<ul class="hidden md:flex grow list-none mx-5 gap-2">
+						{#each navLinks as link (link.href)}
+							<li class="self-center">
+								<a href={link.href} class="p-3 font-medium text-sm">
+									{link.label}
+								</a>
+							</li>
+						{/each}
+						{#each actions as action (action.href)}
+							<li>
+								<Button variant={action.variant ?? 'default'} class="hidden md:inline-flex" href={action.href}>
+									{action.label}
+								</Button>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</nav>
+
+			<MobileNav {navLinks} actions={mobileActions ?? actions} state={mobileNav} id={mobileId} />
+		</div>
+	</div>
+</div>

package/src/lib/blocks/Heading.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" generics="T extends string">
+	import type { Component } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { join } from 'overrule';
+
+	type Tab<T extends string> = {
+		id: T;
+		label: string;
+		href?: string;
+		icon?: Component<{ class?: string }>;
+	};
+
+	let {
+		title,
+		tabs,
+		activeTab,
+		class: className,
+	}: {
+		title?: string;
+		tabs?: readonly Tab<T>[];
+		activeTab?: T;
+		class?: ClassValue;
+	} = $props();
+
+	let tabEls = $state<Partial<Record<T, HTMLElement>>>({});
+
+	const indicator = $derived.by(() => {
+		const el = activeTab ? tabEls[activeTab] : undefined;
+		if (!el) return { x: 0, width: 0 };
+		return { x: el.offsetLeft, width: el.offsetWidth };
+	});
+</script>
+
+<div
+	data-slot="heading"
+	class={join(
+		'w-full has-data-[slot=heading-nav]:mb-6',
+		'[&:not(:has([data-slot=heading-nav]))]:mb-2 [&:not(:has([data-slot=heading-nav]))]:md:mb-4 [&:not(:has([data-slot=heading-nav]))]:lg:mb-6',
+		className,
+	)}>
+	{#if title !== undefined}
+		<div
+			data-slot="heading-title"
+			class={join(
+				'flex flex-wrap items-center justify-between gap-4',
+				'has-[~[data-slot=heading-nav]]:pb-6',
+				'[&:not(:has(~[data-slot=heading-nav]))]:pb-4 [&:not(:has(~[data-slot=heading-nav]))]:border-b [&:not(:has(~[data-slot=heading-nav]))]:border-border',
+			)}>
+			<h1 class="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
+		</div>
+	{/if}
+	{#if tabs && tabs.length > 0}
+		<nav data-slot="heading-nav" class="w-full border-b mb-2 md:mb-4 lg:mb-6 min-h-9 inline-flex">
+			<div role="tablist" aria-orientation="horizontal" class="relative flex">
+				{#each tabs as tab (tab.id)}
+					{const isActive = $derived(activeTab === tab.id)}
+					{const Icon = tab.icon}
+
+					<svelte:element
+						this={tab.href ? 'a' : 'button'}
+						bind:this={tabEls[tab.id]}
+						href={tab.href}
+						type={!tab.href ? 'button' : undefined}
+						role="tab"
+						aria-selected={isActive}
+						aria-current={tab.href && isActive ? 'page' : undefined}
+						tabindex={isActive ? 0 : -1}
+						class={join(
+							'relative z-10 flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap',
+							isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
+						)}>
+						{#if Icon}<Icon class="size-4" />{/if}
+						{tab.label}
+					</svelte:element>
+				{/each}
+
+				<div
+					role="presentation"
+					class="absolute bottom-0 left-0 h-0.5 bg-primary transition-[transform,width] duration-200 ease-out motion-reduce:transition-none"
+					style:transform="translateX({indicator.x}px)"
+					style:width="{indicator.width}px">
+				</div>
+			</div>
+		</nav>
+	{/if}
+</div>

package/src/lib/blocks/MobileNav.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { OpenCell } from '../internal/open-cell.svelte.js';
+	import type { ClassValue } from 'svelte/elements';
+	import { Button } from '../components/button';
+	import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Plus from '@lucide/svelte/icons/plus';
+
+	interface Props {
+		navLinks: { href: string; label: string; children?: { href: string; label: string }[] }[];
+		/** Action buttons rendered at the bottom of the panel (e.g. login / book). */
+		actions?: {
+			href: string;
+			label: string;
+			variant?: 'default' | 'outline' | 'ghost' | 'card' | 'secondary';
+			size?: 'default' | 'sm' | 'lg' | 'icon';
+		}[];
+		/** Derivation source for the menu's open state. Not bindable. */
+		open?: boolean;
+		/** A caller-constructed cell used instead of building one from `open`. */
+		state?: OpenCell;
+		/** Unique id for the popover. Override if mounting multiple instances. */
+		id?: string;
+		/** Optional extra classes on the trigger button. */
+		class?: ClassValue;
+	}
+
+	let { navLinks, actions = [], open = false, state: givenCell, id = 'mobile-nav', class: className }: Props = $props();
+
+	// svelte-ignore state_referenced_locally
+	const cell = givenCell ?? new OpenCell(() => open);
+
+	let panel: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!panel) return;
+		if (cell.open && !panel.matches(':popover-open')) {
+			panel.showPopover();
+		} else if (!cell.open && panel.matches(':popover-open')) {
+			panel.hidePopover();
+		}
+	});
+
+	function closePopover() {
+		panel?.hidePopover();
+	}
+</script>
+
+<button
+	type="button"
+	popovertarget={id}
+	aria-expanded={cell.open}
+	aria-label={cell.open ? 'Close menu' : 'Open menu'}
+	class={join(
+		'group/hamburger md:hidden inline-grid size-10 place-items-center relative z-50 bg-transparent border-0 cursor-pointer text-current',
+		className,
+	)}>
+	<span class="bar top-[calc(50%-6px)] group-aria-expanded/hamburger:top-1/2 group-aria-expanded/hamburger:rotate-45"></span>
+	<span class="bar top-1/2 group-aria-expanded/hamburger:opacity-0"></span>
+	<span class="bar top-[calc(50%+6px)] group-aria-expanded/hamburger:top-1/2 group-aria-expanded/hamburger:-rotate-45"></span>
+</button>
+
+<div
+	{id}
+	bind:this={panel}
+	popover="auto"
+	ontoggle={(e) => (cell.open = (e as ToggleEvent).newState === 'open')}
+	class="mobile-nav-popover bg-sidebar text-foreground md:hidden">
+	<nav class="flex-1 overflow-y-auto px-8 pt-2">
+		<ul class="list-none p-0 m-0">
+			{#each navLinks as link (link.href)}
+				<li class="border-b border-border">
+					{#if link.children && link.children.length > 0}
+						<details class="group/nav-item">
+							<summary
+								class="flex cursor-pointer list-none marker:hidden items-center justify-between py-6 text-3xl pr-5 font-medium tracking-tight transition-colors hover:text-muted-foreground">
+								<span>{link.label}</span>
+								<Plus class="size-6 transition-transform duration-300 group-open/nav-item:rotate-45" />
+							</summary>
+							<ul class="list-none p-0 m-0 pb-2">
+								{#each link.children as child (child.href)}
+									<li>
+										<a
+											href={child.href}
+											onclick={closePopover}
+											class="flex items-center justify-between py-3 pl-4 text-xl text-muted-foreground transition-colors hover:text-foreground">
+											<span>{child.label}</span>
+											<ChevronRight class="size-5 opacity-60" />
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</details>
+					{:else}
+						<a
+							href={link.href}
+							onclick={closePopover}
+							class="flex items-center justify-between py-6 text-3xl pr-5 font-medium tracking-tight transition-colors hover:text-muted-foreground">
+							<span>{link.label}</span>
+							<ArrowUpRight class="size-6 opacity-60" />
+						</a>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</nav>
+
+	{#if actions.length > 0}
+		<div class="px-6 py-6 flex flex-col gap-3">
+			{#each actions as action (action.href)}
+				<Button href={action.href} variant={action.variant ?? 'default'} size={action.size ?? 'lg'} onclick={closePopover}>
+					{action.label}
+				</Button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Split durations (300ms rotate/top, 200ms opacity) have no utility spelling; the bar's
+	   positions and open-state rotation are utilities on the spans. */
+	.bar {
+		position: absolute;
+		left: 50%;
+		width: 1.25rem;
+		height: 2px;
+		background-color: currentColor;
+		border-radius: 2px;
+		transition:
+			rotate 300ms cubic-bezier(0.19, 1, 0.22, 1),
+			top 300ms cubic-bezier(0.19, 1, 0.22, 1),
+			opacity 200ms ease;
+		margin-left: -0.625rem;
+	}
+
+	.mobile-nav-popover {
+		position: fixed;
+		inset: 5rem 0 0 0;
+		width: 100%;
+		height: calc(100dvh - 5rem);
+		max-width: none;
+		max-height: none;
+		margin: 0;
+		padding: 0;
+		border: none;
+		overflow: hidden;
+		/* Rendered even while closed (overriding the UA popover display:none): WebKit lacks `overlay` and
+		   yanks a closing popover to display:none instantly, so the exit animation must not involve display.
+		   visibility (delayed to the transition's end) does the hiding instead. */
+		display: flex;
+		flex-direction: column;
+		visibility: hidden;
+		clip-path: inset(0 0 100% 0);
+		transition:
+			clip-path 500ms ease-in-out,
+			visibility 0s 500ms;
+	}
+
+	.mobile-nav-popover:popover-open {
+		visibility: visible;
+		clip-path: inset(0 0 0 0);
+		transition: clip-path 500ms ease-in-out;
+	}
+
+	:global(html:has(.mobile-nav-popover:popover-open)) {
+		overflow: hidden;
+	}
+</style>

package/src/lib/blocks/PhoneInput.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import * as Select from '../components/select';
+	import { Input } from '../components/input';
+
+	const COUNTRIES = { US: 1, CA: 1, MX: 52 } as const;
+	type CountryCode = keyof typeof COUNTRIES;
+
+	let {
+		id,
+		name,
+		value = $bindable(''),
+		error,
+		placeholder = 'Phone Number',
+		disabled = false,
+	}: {
+		id?: string;
+		name?: string;
+		value?: string;
+		error?: string;
+		placeholder?: string;
+		disabled?: boolean;
+	} = $props();
+
+	let raw = $state('');
+	let country: CountryCode = $state('US');
+
+	const clean = (v: string) => v.replace(/\D/g, '').slice(0, 10);
+	const toE164 = () => (raw ? `+${COUNTRIES[country]}${clean(raw)}` : '');
+</script>
+
+<div class="flex w-full gap-2">
+	<Select.Root
+		value={country}
+		widthClass="w-26 bg-border/30"
+		onchange={(e) => {
+			country = e.currentTarget.value as CountryCode;
+			value = toE164();
+		}}
+		{disabled}>
+		{#each Object.keys(COUNTRIES) as code (code)}
+			<Select.Option value={code}>{code}</Select.Option>
+		{/each}
+	</Select.Root>
+	<div data-slot="input-group" class="wrap-input-identity group/input-group">
+		<div class="select-none text-muted-foreground h-auto pl-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50">
+			+{COUNTRIES[country]}
+		</div>
+		<Input
+			{id}
+			type="tel"
+			{placeholder}
+			autocomplete="tel-national"
+			inputmode="numeric"
+			variant="invisible"
+			class="w-full"
+			aria-invalid={!!error || undefined}
+			value={clean(raw)}
+			{disabled}
+			onbeforeinput={(e) => e.data && /\D/.test(e.data) && e.preventDefault()}
+			oninput={(e: Event) => {
+				raw = clean((e.target as HTMLInputElement).value);
+				value = toE164();
+			}} />
+	</div>
+	{#if name}
+		<input type="hidden" {name} value={toE164()} />
+	{/if}
+</div>