@x33025/sveltely 0.1.0 → 0.1.2

package/dist/components/Library/Button/Button.demo.svelte

@@ -1,17 +1,19 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with optional icon support.'
+		description: 'Token-aware button primitive with optional icon support.',
+		columnSpan: 2
 	};
 </script>
 
 <script lang="ts">
 	import { SaveIcon } from '@lucide/svelte';
 	import Button from './Button.svelte';
+	import HStack from '../HStack';
 </script>
 
-<div class="hstack items-center gap-3">
+<HStack align="center" gap={0.75}>
 	<Button label="Default" />
 	<Button label="Solid" variant="solid" />
 	<Button icon={SaveIcon} label="With icon" />
-</div>
+</HStack>

package/dist/components/Library/Button/Button.demo.svelte.d.ts

@@ -1,6 +1,7 @@
 export declare const demo: {
     name: string;
     description: string;
+    columnSpan: number;
 };
 import Button from './Button.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/components/Library/Calendar/Calendar.demo.svelte

@@ -3,7 +3,7 @@
 		name: 'Calendar',
 		description: 'Compact month calendar with token-driven spacing and radius.',
 		columnSpan: 2,
-		rowSpan: 2
+		rowSpan: 3
 	};
 </script>
 
@@ -15,16 +15,4 @@
 	let weekStart = $state<'monday' | 'sunday'>('monday');
 </script>
 
-<div class="vstack gap-2">
-	<div class="hstack gap-2">
-		<button type="button" onclick={() => (weekStart = 'monday')}>Monday start</button>
-		<button type="button" onclick={() => (weekStart = 'sunday')}>Sunday start</button>
-	</div>
-	<Calendar bind:value bind:month {weekStart} />
-	<p class="text-xs text-zinc-500">
-		Selected: {value ? value.toLocaleDateString() : 'none'} | Month: {month.toLocaleDateString(undefined, {
-			month: 'long',
-			year: 'numeric'
-		})} | Week starts: {weekStart}
-	</p>
-</div>
+<Calendar bind:value bind:month {weekStart} />

package/dist/components/Library/Calendar/Calendar.svelte

@@ -5,8 +5,7 @@
 	const startOfDay = (value: Date) =>
 		new Date(value.getFullYear(), value.getMonth(), value.getDate());
 
-	const startOfMonth = (value: Date) =>
-		new Date(value.getFullYear(), value.getMonth(), 1);
+	const startOfMonth = (value: Date) => new Date(value.getFullYear(), value.getMonth(), 1);
 
 	type CalendarCell = {
 		key: string;
@@ -23,7 +22,8 @@
 		month?: Date;
 		weekdayLabels?: string[];
 		weekStart?: 'monday' | 'sunday';
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	const defaultWeekdayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 	const today = new Date();
@@ -42,14 +42,10 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'calendar'));
 
 	const orderedWeekdayLabels = $derived(
-		weekStart === 'sunday'
-			? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)]
-			: weekdayLabels
+		weekStart === 'sunday' ? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)] : weekdayLabels
 	);
 
-	const weekendColumnIndexes = $derived(
-		weekStart === 'sunday' ? [0, 6] : [5, 6]
-	);
+	const weekendColumnIndexes = $derived(weekStart === 'sunday' ? [0, 6] : [5, 6]);
 
 	function shiftMonth(offset: number) {
 		month = new Date(month.getFullYear(), month.getMonth() + offset, 1);
@@ -59,6 +55,17 @@
 		value = startOfDay(nextValue);
 	}
 
+	function activateCell(cell: CalendarCell) {
+		if (!cell.value) return;
+
+		if (cell.isCurrentMonth) {
+			selectDate(cell.value);
+			return;
+		}
+
+		month = startOfMonth(cell.value);
+	}
+
 	const displayYear = $derived(month.getFullYear());
 	const displayMonth = $derived(month.getMonth());
 	const todayYear = today.getFullYear();
@@ -74,37 +81,28 @@
 
 	const cells = $derived.by(() => {
 		const firstDay = new Date(displayYear, displayMonth, 1);
-		const daysInMonth = new Date(displayYear, displayMonth + 1, 0).getDate();
 		const leadingEmptyDays =
 			weekStart === 'sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
 
-		return Array.from({ length: leadingEmptyDays + daysInMonth }, (_, index): CalendarCell => {
+		return Array.from({ length: 42 }, (_, index): CalendarCell => {
 			const dayNumber = index - leadingEmptyDays + 1;
-			if (dayNumber < 1) {
-				return {
-					key: `empty-${index}`,
-					label: '',
-					isCurrentMonth: false,
-					isToday: false,
-					isWeekend: false,
-					isSelected: false
-				};
-			}
-
 			const cellDate = new Date(displayYear, displayMonth, dayNumber);
 			const dayOfWeek = cellDate.getDay();
+			const isCurrentMonth = cellDate.getMonth() === displayMonth;
 
 			return {
-				key: `day-${dayNumber}`,
-				label: String(dayNumber),
-				isCurrentMonth: true,
+				key: `day-${cellDate.getFullYear()}-${cellDate.getMonth()}-${cellDate.getDate()}`,
+				label: String(cellDate.getDate()),
+				isCurrentMonth,
 				value: cellDate,
 				isToday:
+					isCurrentMonth &&
 					displayYear === todayYear &&
 					displayMonth === todayMonth &&
-					dayNumber === todayDate,
+					cellDate.getDate() === todayDate,
 				isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
 				isSelected:
+					isCurrentMonth &&
 					value !== null &&
 					cellDate.getFullYear() === value.getFullYear() &&
 					cellDate.getMonth() === value.getMonth() &&
@@ -116,16 +114,26 @@
 
 <div class="calendar vstack" style={rootStyle} {...props}>
 	<div class="calendar-grid">
-		<button class="calendar-nav-button" type="button" aria-label="Previous month" onclick={() => shiftMonth(-1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Previous month"
+			onclick={() => shiftMonth(-1)}
+		>
 			<ChevronLeftIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
 		<div class="calendar-title-cell">
 			<h2 class="calendar-title">{monthLabel}</h2>
 		</div>
-		<button class="calendar-nav-button" type="button" aria-label="Next month" onclick={() => shiftMonth(1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Next month"
+			onclick={() => shiftMonth(1)}
+		>
 			<ChevronRightIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
-		{#each orderedWeekdayLabels as weekday, index}
+		{#each orderedWeekdayLabels as weekday, index (weekday)}
 			<div
 				class="calendar-weekday"
 				class:calendar-weekday-weekend={weekendColumnIndexes.includes(index)}
@@ -135,23 +143,18 @@
 		{/each}
 
 		{#each cells as cell (cell.key)}
-			{#if cell.isCurrentMonth && cell.value}
-				<button
-					type="button"
-					class="calendar-day"
-					class:calendar-day-today={cell.isToday}
-					class:calendar-day-selected={cell.isSelected}
-					class:calendar-day-weekend={cell.isWeekend}
-					aria-pressed={cell.isSelected}
-					onclick={() => selectDate(cell.value!)}
-				>
-					{cell.label}
-				</button>
-			{:else}
-				<div class="calendar-day calendar-day-empty">
-					{cell.label}
-				</div>
-			{/if}
+			<button
+				type="button"
+				class="calendar-day"
+				class:calendar-day-outside={!cell.isCurrentMonth}
+				class:calendar-day-today={cell.isToday}
+				class:calendar-day-selected={cell.isSelected}
+				class:calendar-day-weekend={cell.isWeekend}
+				aria-pressed={cell.isSelected}
+				onclick={() => activateCell(cell)}
+			>
+				{cell.label}
+			</button>
 		{/each}
 	</div>
 </div>
@@ -165,7 +168,9 @@
 		--calendar-weekend-header-color: var(--color-zinc-400);
 		--calendar-weekend-selected-color: white;
 		--calendar-cell-width: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-x) * 2.2));
-		--calendar-cell-height: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2));
+		--calendar-cell-height: calc(
+			var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2)
+		);
 		--calendar-title-size: calc(var(--calendar-font-size) * 1.03);
 		--calendar-weekday-size: calc(var(--calendar-font-size) * 0.75);
 		font-size: var(--calendar-font-size);
@@ -283,11 +288,10 @@
 		background: var(--sveltely-hover-color);
 	}
 
-	.calendar-day-empty {
+	.calendar-day-outside {
 		border-color: transparent;
 		background: transparent;
-		color: transparent;
-		cursor: default;
+		color: var(--color-zinc-400);
 	}
 
 	.calendar-day-today {

package/dist/components/Library/Divider/Divider.svelte

@@ -0,0 +1,10 @@
+<div class="divider" role="separator"></div>
+
+<style>
+	.divider {
+		width: var(--divider-width, 100%);
+		height: var(--divider-height, 1px);
+		align-self: var(--divider-align-self, auto);
+		background: var(--color-gray-200);
+	}
+</style>

package/dist/components/Library/Divider/Divider.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Divider;
+type Divider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Library/Divider/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';

package/dist/components/Library/Divider/index.js

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -7,19 +7,22 @@
 
 <script lang="ts">
 	import Dropdown from './Dropdown.svelte';
+	import type { DropdownEntry } from './types';
 
-	const items = [
+	const allItems: DropdownEntry<string>[] = [
 		{
 			type: 'group' as const,
 			label: 'Publishing',
 			items: [
 				{ label: 'Draft', value: 'draft' },
 				{ label: 'Scheduled', value: 'scheduled' },
+				{ type: 'divider' },
 				{
 					type: 'submenu' as const,
 					label: 'Advanced',
 					items: [
 						{ label: 'Review queue', value: 'review' },
+						{ type: 'divider' },
 						{
 							type: 'action' as const,
 							label: 'Open workflow',
@@ -48,7 +51,39 @@
 		}
 	];
 
+	const filterEntries = (entries: DropdownEntry<string>[], query: string): DropdownEntry<string>[] => {
+		const normalizedQuery = query.trim().toLowerCase();
+		if (!normalizedQuery) return allItems;
+
+		return entries.flatMap<DropdownEntry<string>>((entry) => {
+			if (entry.type === 'divider') {
+				return [];
+			}
+
+			if (entry.type === 'group') {
+				const nextItems = filterEntries(entry.items, normalizedQuery);
+				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
+			}
+
+			if (entry.type === 'submenu') {
+				const nextItems = filterEntries(entry.items, normalizedQuery);
+				const matches = entry.label.toLowerCase().includes(normalizedQuery);
+				if (!matches && nextItems.length === 0) {
+					return [];
+				}
+				return [{ ...entry, items: matches ? entry.items : nextItems }];
+			}
+
+			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
+		});
+	};
+
+	let items = $state(allItems);
 	let value = $state<string | null>('draft');
+
+	const handleSearch = async (query: string) => {
+		items = filterEntries(allItems, query);
+	};
 </script>
 
-<Dropdown {items} bind:value placeholder="Choose status" searchable={true} />
+<Dropdown {items} bind:value placeholder="Choose status" onSearch={handleSearch} />

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -1,11 +1,13 @@
 <script lang="ts" generics="T extends string | number = string">
 	import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from '@lucide/svelte';
+	import Divider from '../Divider';
 	import Floating from '../Floating/Floating.svelte';
 	import SearchInput from '../SearchInput';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { Anchor } from '../../../utils/positioning';
 	import type {
 		DropdownAction,
+		DropdownDivider,
 		DropdownEntry,
 		DropdownGroup,
 		DropdownItem,
@@ -21,9 +23,9 @@
 		disabled?: boolean;
 		closeOnSelect?: boolean;
 		showCheck?: boolean;
-		searchable?: boolean;
 		searchPlaceholder?: string;
 		placement?: Anchor;
+		onSearch?: (query: string) => void | Promise<void>;
 		onSelect?: (item: DropdownItem<T>) => void;
 	} & StyleProps;
 
@@ -31,6 +33,8 @@
 		'type' in entry && entry.type === 'group';
 	const isAction = (entry: DropdownItem<T> | DropdownAction): entry is DropdownAction =>
 		'type' in entry && entry.type === 'action';
+	const isDivider = (entry: DropdownEntry<T>): entry is DropdownDivider =>
+		'type' in entry && entry.type === 'divider';
 	const isSubmenu = (entry: DropdownEntry<T>): entry is DropdownSubmenu<T> =>
 		'type' in entry && entry.type === 'submenu';
 
@@ -43,9 +47,9 @@
 		disabled = false,
 		closeOnSelect = true,
 		showCheck = true,
-		searchable = false,
 		searchPlaceholder = 'Search',
 		placement = 'bottom',
+		onSearch,
 		onSelect,
 		...styleProps
 	}: Props = $props();
@@ -53,12 +57,19 @@
 	const dropdownStyle = $derived.by(() => surfaceStyle(styleProps, 'dropdown'));
 
 	let query = $state('');
+	let lastSearchedQuery = '';
+
+	const searchEnabled = $derived(!!onSearch);
 
 	const flattenItems = (
 		entries: DropdownEntry<T>[],
 		inheritedDisabled = false
 	): DropdownItem<T>[] =>
 		entries.flatMap((entry) => {
+			if (isDivider(entry)) {
+				return [];
+			}
+
 			const nextDisabled = inheritedDisabled || !!entry.disabled;
 			if (isGroup(entry) || isSubmenu(entry)) {
 				return flattenItems(entry.items, nextDisabled);
@@ -69,25 +80,6 @@
 			return [{ ...entry, disabled: nextDisabled || entry.disabled }];
 		});
 
-	const filterEntries = (entries: DropdownEntry<T>[]): DropdownEntry<T>[] =>
-		entries.flatMap((entry) => {
-			if (isGroup(entry)) {
-				const nextItems = filterEntries(entry.items);
-				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
-			}
-
-			if (isSubmenu(entry)) {
-				const nextItems = filterEntries(entry.items);
-				const matches = entry.label.toLowerCase().includes(normalizedQuery);
-				if (!matches && nextItems.length === 0) {
-					return [];
-				}
-				return [{ ...entry, items: matches ? entry.items : nextItems }];
-			}
-
-			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
-		});
-
 	const findFirstRenderableLabel = (entries: DropdownEntry<T>[]): string | null => {
 		for (const entry of entries) {
 			if (isGroup(entry)) {
@@ -95,13 +87,14 @@
 				if (nested) return nested;
 				continue;
 			}
+			if (isDivider(entry)) {
+				continue;
+			}
 			return entry.label;
 		}
 		return null;
 	};
 
-	const normalizedQuery = $derived(query.trim().toLowerCase());
-
 	const flatItems = $derived.by(() => flattenItems(items));
 
 	const selectedItem = $derived.by(
@@ -110,14 +103,12 @@
 
 	const triggerText = $derived(selectedItem?.label ?? placeholder);
 
-	const filteredItems = $derived.by(() =>
-		normalizedQuery ? filterEntries(items) : items
-	);
+	const filteredItems = $derived(items);
 
 	const firstRenderableLabel = $derived.by(() => findFirstRenderableLabel(filteredItems));
 
 	const itemRadiusSourceEnabled = $derived.by(() => {
-		if (searchable) return false;
+		if (searchEnabled) return false;
 		const firstEntry = filteredItems[0];
 		if (!firstEntry) return false;
 		if (isGroup(firstEntry)) {
@@ -143,6 +134,13 @@
 		disabled || inheritedDisabled || !!entry.disabled;
 
 	const isRadiusSource = (label: string) => itemRadiusSourceEnabled && label === firstRenderableLabel;
+
+	$effect(() => {
+		if (!onSearch) return;
+		if (query === lastSearchedQuery) return;
+		lastSearchedQuery = query;
+		void onSearch(query);
+	});
 </script>
 
 <Floating
@@ -167,26 +165,27 @@
 			aria-haspopup="dialog"
 			onclick={floating.toggle}
 		>
-			<span>{triggerText}</span>
+			<span class="dropdown-trigger-label">{triggerText}</span>
 			<ChevronDownIcon class="size-4 text-zinc-500" />
 		</button>
 	{/snippet}
 
 	<div
 		class="dropdown-content vstack"
-		style={`${dropdownStyle} --dropdown-item-radius: ${searchable ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
+		style={`${dropdownStyle} --dropdown-item-radius: ${searchEnabled ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
 	>
-		{#if searchable}
+		{#if searchEnabled}
 			<SearchInput
 				bind:value={query}
 				placeholder={searchPlaceholder}
 				radiusSource={true}
-				class="w-64"
 			/>
 		{/if}
 		{#snippet renderEntries(entries: DropdownEntry<T>[], inheritedDisabled = false)}
-			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${entry.label}`)}
-				{#if isGroup(entry)}
+			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${isDivider(entry) ? 'divider' : entry.label}`)}
+				{#if isDivider(entry)}
+					<Divider />
+				{:else if isGroup(entry)}
 					<div class="dropdown-group vstack">
 						{#if entry.label}
 							<div class="dropdown-group-label">{entry.label}</div>
@@ -287,6 +286,7 @@
 	.dropdown-trigger {
 		display: inline-flex;
 		min-width: 8rem;
+		max-width: 100%;
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
@@ -299,6 +299,18 @@
 		transition: color 150ms, border-color 150ms, background-color 150ms;
 	}
 
+	.dropdown-trigger-label {
+		min-width: 0;
+		flex: 1 1 auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.dropdown-trigger :global(svg) {
+		flex: 0 0 auto;
+	}
+
 	.dropdown-trigger:hover {
 		background: var(--sveltely-hover-color);
 	}
@@ -313,6 +325,8 @@
 	}
 
 	.dropdown-content {
+		--dropdown-item-padding-x: calc(var(--sveltely-padding-x) * 0.67);
+		--dropdown-item-padding-y: calc(var(--sveltely-padding-y) * 0.33);
 		gap: var(--sveltely-inset);
 	}
 
@@ -320,11 +334,18 @@
 		gap: var(--sveltely-inset);
 	}
 
+	.dropdown-content :global(.divider) {
+		--divider-width: auto;
+		margin-inline: var(--dropdown-item-padding-x);
+		margin-block: calc(var(--sveltely-inset) * 0.5);
+		background: var(--sveltely-border-color);
+	}
+
 	.dropdown-item {
 		width: 100%;
 		gap: calc(var(--sveltely-inset) * 2);
 		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
-		padding: calc(var(--sveltely-padding-y) * 0.33) calc(var(--sveltely-padding-x) * 0.67);
+		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
 	}
 
 	.dropdown-item :global(*) {

package/dist/components/Library/Dropdown/Dropdown.svelte.d.ts

@@ -11,9 +11,9 @@ declare function $$render<T extends string | number = string>(): {
         disabled?: boolean;
         closeOnSelect?: boolean;
         showCheck?: boolean;
-        searchable?: boolean;
         searchPlaceholder?: string;
         placement?: Anchor;
+        onSearch?: (query: string) => void | Promise<void>;
         onSelect?: (item: DropdownItem<T>) => void;
     } & StyleProps;
     exports: {};

package/dist/components/Library/Dropdown/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Dropdown.svelte';
-export type { DropdownAction, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';
+export type { DropdownAction, DropdownDivider, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';

package/dist/components/Library/Dropdown/types.d.ts

@@ -11,6 +11,9 @@ export type DropdownAction = {
     disabled?: boolean;
     onSelect: () => void;
 };
+export type DropdownDivider = {
+    type: 'divider';
+};
 export type DropdownSubmenu<TValue extends string | number = string> = {
     type: 'submenu';
     label: string;
@@ -24,4 +27,4 @@ export type DropdownGroup<TValue extends string | number = string> = {
     disabled?: boolean;
     items: DropdownEntry<TValue>[];
 };
-export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownGroup<TValue> | DropdownSubmenu<TValue>;
+export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownDivider | DropdownGroup<TValue> | DropdownSubmenu<TValue>;

package/dist/components/Library/Floating/Floating.svelte

@@ -177,6 +177,39 @@
 		return Number.isFinite(parsed) ? parsed : 0;
 	};
 
+	const resolveCssLength = (element: HTMLElement, value: string) => {
+		const trimmedValue = value.trim();
+		if (!trimmedValue) return 0;
+		if (trimmedValue.endsWith('px')) return parsePx(trimmedValue);
+
+		const probe = document.createElement('div');
+		probe.style.position = 'absolute';
+		probe.style.visibility = 'hidden';
+		probe.style.pointerEvents = 'none';
+		probe.style.width = trimmedValue;
+		element.appendChild(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		return width;
+	};
+
+	const getFloatingInset = () => {
+		if (!panelEl) return 0;
+		const styles = getComputedStyle(panelEl);
+		return resolveCssLength(panelEl, styles.getPropertyValue('--sveltely-floating-inset'));
+	};
+
+	const offsetCoords = (
+		coords: { top: number; left: number },
+		currentAnchor: Anchor,
+		offset: number
+	) => {
+		if (currentAnchor === 'bottom') return { ...coords, top: coords.top + offset };
+		if (currentAnchor === 'top') return { ...coords, top: coords.top - offset };
+		if (currentAnchor === 'right') return { ...coords, left: coords.left + offset };
+		return { ...coords, left: coords.left - offset };
+	};
+
 	const updateRadiusFromSource = () => {
 		if (!matchPanelRadiusToSource || !panelEl || !contentEl) {
 			computedPanelRadius = null;
@@ -222,7 +255,7 @@
 			placement,
 			preferredAlign
 		);
-		panelCoords = { top: result.top, left: result.left };
+		panelCoords = offsetCoords({ top: result.top, left: result.left }, result.anchor, getFloatingInset());
 		panelTransform = result.transform;
 		resolvedAnchor = result.anchor;
 	};
@@ -317,6 +350,7 @@
 
 	const resolvedPanelStyle = $derived.by(() => {
 		const declarations = [
+			'--sveltely-floating-inset: var(--sveltely-inset);',
 			`top: ${panelCoords.top}px;`,
 			`left: ${panelCoords.left}px;`,
 			`transform: ${panelTransform};`