@dryui/ui 1.3.0 → 1.4.0

package/dist/combobox/combobox-input.svelte

@@ -19,13 +19,14 @@
 
 	const ctx = getComboboxCtx();
 
-	let el = $state<HTMLInputElement>();
-
-	$effect(() => {
-		if (el) {
-			ctx.inputEl = el;
-		}
-	});
+	function attachInput(node: HTMLInputElement) {
+		ctx.inputEl = node;
+		return () => {
+			if (ctx.inputEl === node) {
+				ctx.inputEl = null;
+			}
+		};
+	}
 
 	function getOptionItems(contentEl: HTMLElement | null): HTMLElement[] {
 		if (!contentEl) return [];
@@ -91,6 +92,18 @@
 				ctx.close();
 				break;
 			}
+			case 'Home': {
+				if (!ctx.open || items.length === 0) break;
+				e.preventDefault();
+				ctx.setActiveIndex(0);
+				break;
+			}
+			case 'End': {
+				if (!ctx.open || items.length === 0) break;
+				e.preventDefault();
+				ctx.setActiveIndex(items.length - 1);
+				break;
+			}
 			case 'Tab': {
 				if (ctx.open) {
 					if (ctx.activeIndex >= 0 && items[ctx.activeIndex]) {
@@ -109,7 +122,7 @@
 </script>
 
 <input
-	bind:this={el}
+	{@attach attachInput}
 	id={ctx.inputId}
 	type="text"
 	role="combobox"

package/dist/country-select/country-select-button-input.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import Button from '../button/button.svelte';
-
-	interface CountryOption {
-		code: string;
-		name: string;
-		dialCode: string;
-		flag: string;
-		region: string;
-	}
+	import { CountrySelect as PrimitiveCountrySelect } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
 		value?: string;
@@ -33,277 +25,149 @@
 		class: className,
 		...rest
 	}: Props = $props();
+</script>
 
-	const allCountries: CountryOption[] = [
-		{
-			code: 'AF',
-			name: 'Afghanistan',
-			dialCode: '+93',
-			flag: '\u{1F1E6}\u{1F1EB}',
-			region: 'Asia'
-		},
-		{
-			code: 'AR',
-			name: 'Argentina',
-			dialCode: '+54',
-			flag: '\u{1F1E6}\u{1F1F7}',
-			region: 'Americas'
-		},
-		{
-			code: 'AU',
-			name: 'Australia',
-			dialCode: '+61',
-			flag: '\u{1F1E6}\u{1F1FA}',
-			region: 'Oceania'
-		},
-		{ code: 'AT', name: 'Austria', dialCode: '+43', flag: '\u{1F1E6}\u{1F1F9}', region: 'Europe' },
-		{ code: 'BE', name: 'Belgium', dialCode: '+32', flag: '\u{1F1E7}\u{1F1EA}', region: 'Europe' },
-		{ code: 'BR', name: 'Brazil', dialCode: '+55', flag: '\u{1F1E7}\u{1F1F7}', region: 'Americas' },
-		{ code: 'CA', name: 'Canada', dialCode: '+1', flag: '\u{1F1E8}\u{1F1E6}', region: 'Americas' },
-		{ code: 'CL', name: 'Chile', dialCode: '+56', flag: '\u{1F1E8}\u{1F1F1}', region: 'Americas' },
-		{ code: 'CN', name: 'China', dialCode: '+86', flag: '\u{1F1E8}\u{1F1F3}', region: 'Asia' },
-		{
-			code: 'CO',
-			name: 'Colombia',
-			dialCode: '+57',
-			flag: '\u{1F1E8}\u{1F1F4}',
-			region: 'Americas'
-		},
-		{
-			code: 'CZ',
-			name: 'Czech Republic',
-			dialCode: '+420',
-			flag: '\u{1F1E8}\u{1F1FF}',
-			region: 'Europe'
-		},
-		{ code: 'DK', name: 'Denmark', dialCode: '+45', flag: '\u{1F1E9}\u{1F1F0}', region: 'Europe' },
-		{ code: 'EG', name: 'Egypt', dialCode: '+20', flag: '\u{1F1EA}\u{1F1EC}', region: 'Africa' },
-		{ code: 'FI', name: 'Finland', dialCode: '+358', flag: '\u{1F1EB}\u{1F1EE}', region: 'Europe' },
-		{ code: 'FR', name: 'France', dialCode: '+33', flag: '\u{1F1EB}\u{1F1F7}', region: 'Europe' },
-		{ code: 'DE', name: 'Germany', dialCode: '+49', flag: '\u{1F1E9}\u{1F1EA}', region: 'Europe' },
-		{ code: 'GR', name: 'Greece', dialCode: '+30', flag: '\u{1F1EC}\u{1F1F7}', region: 'Europe' },
-		{ code: 'HK', name: 'Hong Kong', dialCode: '+852', flag: '\u{1F1ED}\u{1F1F0}', region: 'Asia' },
-		{ code: 'IN', name: 'India', dialCode: '+91', flag: '\u{1F1EE}\u{1F1F3}', region: 'Asia' },
-		{ code: 'ID', name: 'Indonesia', dialCode: '+62', flag: '\u{1F1EE}\u{1F1E9}', region: 'Asia' },
-		{ code: 'IE', name: 'Ireland', dialCode: '+353', flag: '\u{1F1EE}\u{1F1EA}', region: 'Europe' },
-		{ code: 'IL', name: 'Israel', dialCode: '+972', flag: '\u{1F1EE}\u{1F1F1}', region: 'Asia' },
-		{ code: 'IT', name: 'Italy', dialCode: '+39', flag: '\u{1F1EE}\u{1F1F9}', region: 'Europe' },
-		{ code: 'JP', name: 'Japan', dialCode: '+81', flag: '\u{1F1EF}\u{1F1F5}', region: 'Asia' },
-		{ code: 'KE', name: 'Kenya', dialCode: '+254', flag: '\u{1F1F0}\u{1F1EA}', region: 'Africa' },
-		{
-			code: 'KR',
-			name: 'South Korea',
-			dialCode: '+82',
-			flag: '\u{1F1F0}\u{1F1F7}',
-			region: 'Asia'
-		},
-		{ code: 'MY', name: 'Malaysia', dialCode: '+60', flag: '\u{1F1F2}\u{1F1FE}', region: 'Asia' },
-		{ code: 'MX', name: 'Mexico', dialCode: '+52', flag: '\u{1F1F2}\u{1F1FD}', region: 'Americas' },
-		{
-			code: 'NL',
-			name: 'Netherlands',
-			dialCode: '+31',
-			flag: '\u{1F1F3}\u{1F1F1}',
-			region: 'Europe'
-		},
-		{
-			code: 'NZ',
-			name: 'New Zealand',
-			dialCode: '+64',
-			flag: '\u{1F1F3}\u{1F1FF}',
-			region: 'Oceania'
-		},
-		{ code: 'NG', name: 'Nigeria', dialCode: '+234', flag: '\u{1F1F3}\u{1F1EC}', region: 'Africa' },
-		{ code: 'NO', name: 'Norway', dialCode: '+47', flag: '\u{1F1F3}\u{1F1F4}', region: 'Europe' },
-		{ code: 'PK', name: 'Pakistan', dialCode: '+92', flag: '\u{1F1F5}\u{1F1F0}', region: 'Asia' },
-		{ code: 'PE', name: 'Peru', dialCode: '+51', flag: '\u{1F1F5}\u{1F1EA}', region: 'Americas' },
-		{
-			code: 'PH',
-			name: 'Philippines',
-			dialCode: '+63',
-			flag: '\u{1F1F5}\u{1F1ED}',
-			region: 'Asia'
-		},
-		{ code: 'PL', name: 'Poland', dialCode: '+48', flag: '\u{1F1F5}\u{1F1F1}', region: 'Europe' },
-		{
-			code: 'PT',
-			name: 'Portugal',
-			dialCode: '+351',
-			flag: '\u{1F1F5}\u{1F1F9}',
-			region: 'Europe'
-		},
-		{ code: 'RO', name: 'Romania', dialCode: '+40', flag: '\u{1F1F7}\u{1F1F4}', region: 'Europe' },
-		{ code: 'RU', name: 'Russia', dialCode: '+7', flag: '\u{1F1F7}\u{1F1FA}', region: 'Europe' },
-		{
-			code: 'SA',
-			name: 'Saudi Arabia',
-			dialCode: '+966',
-			flag: '\u{1F1F8}\u{1F1E6}',
-			region: 'Asia'
-		},
-		{ code: 'SG', name: 'Singapore', dialCode: '+65', flag: '\u{1F1F8}\u{1F1EC}', region: 'Asia' },
-		{
-			code: 'ZA',
-			name: 'South Africa',
-			dialCode: '+27',
-			flag: '\u{1F1FF}\u{1F1E6}',
-			region: 'Africa'
-		},
-		{ code: 'ES', name: 'Spain', dialCode: '+34', flag: '\u{1F1EA}\u{1F1F8}', region: 'Europe' },
-		{ code: 'SE', name: 'Sweden', dialCode: '+46', flag: '\u{1F1F8}\u{1F1EA}', region: 'Europe' },
-		{
-			code: 'CH',
-			name: 'Switzerland',
-			dialCode: '+41',
-			flag: '\u{1F1E8}\u{1F1ED}',
-			region: 'Europe'
-		},
-		{ code: 'TW', name: 'Taiwan', dialCode: '+886', flag: '\u{1F1F9}\u{1F1FC}', region: 'Asia' },
-		{ code: 'TH', name: 'Thailand', dialCode: '+66', flag: '\u{1F1F9}\u{1F1ED}', region: 'Asia' },
-		{ code: 'TR', name: 'Turkey', dialCode: '+90', flag: '\u{1F1F9}\u{1F1F7}', region: 'Europe' },
-		{
-			code: 'AE',
-			name: 'United Arab Emirates',
-			dialCode: '+971',
-			flag: '\u{1F1E6}\u{1F1EA}',
-			region: 'Asia'
-		},
-		{
-			code: 'GB',
-			name: 'United Kingdom',
-			dialCode: '+44',
-			flag: '\u{1F1EC}\u{1F1E7}',
-			region: 'Europe'
-		},
-		{
-			code: 'US',
-			name: 'United States',
-			dialCode: '+1',
-			flag: '\u{1F1FA}\u{1F1F8}',
-			region: 'Americas'
-		},
-		{ code: 'VN', name: 'Vietnam', dialCode: '+84', flag: '\u{1F1FB}\u{1F1F3}', region: 'Asia' }
-	];
+<span data-country-select-wrapper class={className}>
+	<PrimitiveCountrySelect
+		bind:value
+		{regions}
+		{showDialCode}
+		{disabled}
+		{placeholder}
+		name={formName}
+		{onchange}
+		{...rest}
+	/>
+</span>
 
-	const filteredCountries = $derived(
-		regions ? allCountries.filter((c) => regions.includes(c.region)) : allCountries
-	);
+<style>
+	[data-country-select-wrapper] {
+		display: contents;
+	}
 
-	let searchQuery = $state('');
-	let open = $state(false);
+	[data-country-select-wrapper] [data-part='country-select'] {
+		display: inline-grid;
+		grid-template-columns: minmax(14rem, max-content);
+	}
 
-	const searchResults = $derived(
-		searchQuery
-			? filteredCountries.filter(
-					(c) =>
-						c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-						c.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
-						c.dialCode.includes(searchQuery)
-				)
-			: filteredCountries
-	);
+	[data-country-select-wrapper] [data-part='control'] {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		align-items: center;
+		gap: var(--dry-space-2, 0.5rem);
+		min-height: 2.75rem;
+		padding-inline: var(--dry-space-3, 0.75rem);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-md);
+		background: var(--dry-color-bg-raised);
+		box-shadow: var(--dry-shadow-xs);
+		transition:
+			border-color 140ms ease,
+			box-shadow 140ms ease,
+			background-color 140ms ease;
+	}
 
-	const selectedCountry = $derived(filteredCountries.find((c) => c.code === value));
+	[data-country-select-wrapper] [data-part='control'][data-state='open'] {
+		border-color: color-mix(
+			in srgb,
+			var(--dry-color-brand-primary) 52%,
+			var(--dry-color-stroke-weak)
+		);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--dry-color-brand-primary) 18%, transparent);
+	}
 
-	function selectCountry(code: string) {
-		value = code;
-		open = false;
-		searchQuery = '';
-		onchange?.(code);
+	[data-country-select-wrapper] [data-part='control'][data-disabled] {
+		opacity: 0.6;
 	}
-</script>
 
-<span data-country-select-wrapper class={className}>
-	<div data-part="country-select" {...rest}>
-		<Button
-			variant="outline"
-			type="button"
-			data-part="trigger"
-			{disabled}
-			onclick={() => {
-				if (!disabled) open = !open;
-			}}
-			aria-expanded={open}
-			aria-haspopup="listbox"
-		>
-			{#if selectedCountry}
-				<span data-part="flag">{selectedCountry.flag}</span>
-				<span data-part="country-name">{selectedCountry.name}</span>
-				{#if showDialCode}
-					<span data-part="dial-code">{selectedCountry.dialCode}</span>
-				{/if}
-			{:else}
-				<span data-part="placeholder">{placeholder}</span>
-			{/if}
-		</Button>
+	[data-country-select-wrapper] [data-part='flag'] {
+		font-size: 1rem;
+		line-height: 1;
+	}
 
-		{#if open}
-			<div data-part="dropdown" role="listbox" aria-label="Countries">
-				<input
-					type="text"
-					data-part="search"
-					placeholder="Search countries..."
-					bind:value={searchQuery}
-					aria-label="Search countries"
-				/>
-				{#each searchResults as country (country.code)}
-					<Button
-						variant="trigger"
-						type="button"
-						role="option"
-						data-part="option"
-						aria-selected={country.code === value}
-						data-selected={country.code === value ? '' : undefined}
-						onclick={() => selectCountry(country.code)}
-					>
-						<span data-part="flag">{country.flag}</span>
-						<span data-part="country-name">{country.name}</span>
-						{#if showDialCode}
-							<span data-part="dial-code">{country.dialCode}</span>
-						{/if}
-					</Button>
-				{/each}
-			</div>
-		{/if}
+	[data-country-select-wrapper] [data-part='input'] {
+		border: none;
+		outline: none;
+		padding: 0;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-body-size, var(--dry-text-md-size));
+		line-height: var(--dry-type-body-leading, var(--dry-text-md-leading));
+	}
 
-		{#if formName}
-			<input type="hidden" name={formName} {value} />
-		{/if}
-	</div>
-</span>
+	[data-country-select-wrapper] [data-part='input']::placeholder {
+		color: var(--dry-color-text-weak);
+	}
 
-<style>
-	[data-country-select-wrapper] {
-		position: relative;
-		display: inline-grid;
-		grid-template-columns: minmax(12rem, max-content);
+	[data-country-select-wrapper] [data-part='dial-code'] {
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	}
 
 	[data-country-select-wrapper] [data-part='dropdown'] {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		right: 0;
-		z-index: 50;
 		display: grid;
-		margin-top: var(--dry-space-1, 0.25rem);
-		background: var(--dry-color-bg-raised);
+		grid-template-columns: minmax(max(14rem, anchor-size(inline)), max-content);
+		gap: var(--dry-space-1, 0.25rem);
+		max-height: 18rem;
+		padding: var(--dry-space-1, 0.25rem);
 		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-md);
+		border-radius: calc(var(--dry-radius-md) + 0.125rem);
+		background: var(--dry-color-bg-raised);
 		box-shadow: var(--dry-shadow-lg);
-		max-height: 16rem;
-		overflow-y: auto;
+		inset: unset;
+		margin: 0;
 	}
 
-	[data-country-select-wrapper] [data-part='search'] {
-		padding: var(--dry-space-2) var(--dry-space-3);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size);
+	[data-country-select-wrapper] [data-part='option'] {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		align-items: center;
+		gap: var(--dry-space-2, 0.5rem);
+		justify-self: stretch;
+		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
+		border: none;
+		border-radius: calc(var(--dry-radius-sm) + 0.0625rem);
 		background: transparent;
 		color: var(--dry-color-text-strong);
-		border: none;
-		border-bottom: 1px solid var(--dry-color-stroke-weak);
-		outline: none;
-		box-sizing: border-box;
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		text-align: left;
+		cursor: pointer;
+	}
+
+	[data-country-select-wrapper] [data-part='option']::before {
+		content: attr(data-flag);
+		font-size: 1rem;
+		line-height: 1;
+	}
+
+	[data-country-select-wrapper] [data-part='option'][data-dial-code]::after {
+		content: attr(data-dial-code);
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	}
+
+	[data-country-select-wrapper] [data-part='option'][data-highlighted],
+	[data-country-select-wrapper] [data-part='option']:hover {
+		background: color-mix(in srgb, var(--dry-color-brand-primary) 12%, var(--dry-color-bg-raised));
+	}
+
+	[data-country-select-wrapper] [data-part='option'][data-state='selected'] {
+		background: color-mix(in srgb, var(--dry-color-brand-primary) 18%, var(--dry-color-bg-raised));
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-country-select-wrapper] [data-part='country-name'] {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-country-select-wrapper] [data-part='empty'] {
+		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	}
 </style>

package/dist/date-picker/datepicker-content.svelte

@@ -1,23 +1,12 @@
 <script lang="ts">
+	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
 	import { getDatePickerCtx } from './context.svelte.js';
-	import { useAnchorStyles } from '../utils/use-anchor-styles.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
-		placement?:
-			| 'top'
-			| 'top-start'
-			| 'top-end'
-			| 'bottom'
-			| 'bottom-start'
-			| 'bottom-end'
-			| 'left'
-			| 'left-start'
-			| 'left-end'
-			| 'right'
-			| 'right-start'
-			| 'right-end';
+		placement?: Placement;
 		offset?: number;
 		children: Snippet;
 	}
@@ -33,26 +22,30 @@
 
 	const ctx = getDatePickerCtx();
 
-	let el = $state<HTMLDivElement>();
+	let el = $state<HTMLDivElement | null>(null);
 
-	const anchor = useAnchorStyles({
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
+
+	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => el ?? null,
+		open: () => ctx.open,
 		placement: () => placement,
 		offset: () => offset
 	});
-
-	$effect(() => {
-		if (ctx.open && el && !el.matches(':popover-open')) {
-			el.showPopover();
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
-		}
-	});
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="auto"
 	role="dialog"
 	id={ctx.contentId}
@@ -60,7 +53,6 @@
 	data-state={ctx.open ? 'open' : 'closed'}
 	data-dp-content
 	class={className}
-	use:anchor.applyPosition={style}
 	ontoggle={(e) => {
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (newState && !ctx.open) {

package/dist/date-picker/datepicker-content.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    placement?: Placement;
     offset?: number;
     children: Snippet;
 }

package/dist/date-picker/datepicker-input-root.svelte

@@ -34,6 +34,7 @@
 	// View state: which month/year is the calendar showing
 	let viewMonth = $state(value ? value.getMonth() : new Date().getMonth());
 	let viewYear = $state(value ? value.getFullYear() : new Date().getFullYear());
+	let triggerEl = $state<HTMLElement | null>(null);
 
 	// The day that has keyboard focus within the calendar grid
 	let focusedDate = $state<Date>(value ?? new Date());
@@ -81,7 +82,12 @@
 		},
 		triggerId,
 		contentId,
-		triggerEl: null,
+		get triggerEl() {
+			return triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
 		show() {
 			if (!disabled) open = true;
 		},

package/dist/date-range-picker/date-range-picker-content.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
 	import { getDateRangePickerCtx } from './context.svelte.js';
-	import { useAnchorStyles } from '../utils/use-anchor-styles.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
-		placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+		placement?: Placement;
 		offset?: number;
 		children: Snippet;
 	}
@@ -21,26 +22,30 @@
 
 	const ctx = getDateRangePickerCtx();
 
-	let el = $state<HTMLDivElement>();
+	let el = $state<HTMLDivElement | null>(null);
 
-	const anchor = useAnchorStyles({
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
+
+	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => el ?? null,
+		open: () => ctx.open,
 		placement: () => placement,
 		offset: () => offset
 	});
-
-	$effect(() => {
-		if (ctx.open && el && !el.matches(':popover-open')) {
-			el.showPopover();
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
-		}
-	});
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="auto"
 	role="dialog"
 	id={ctx.contentId}
@@ -48,7 +53,6 @@
 	data-state={ctx.open ? 'open' : 'closed'}
 	data-drp-content
 	class={className}
-	use:anchor.applyPosition={style}
 	ontoggle={(e) => {
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (newState && !ctx.open) {

package/dist/date-range-picker/date-range-picker-content.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    placement?: Placement;
     offset?: number;
     children: Snippet;
 }

package/dist/date-range-picker/date-range-picker-root.svelte

@@ -34,6 +34,7 @@
 	// View state: which month/year is the calendar showing
 	let viewMonth = $state(startDate ? startDate.getMonth() : new Date().getMonth());
 	let viewYear = $state(startDate ? startDate.getFullYear() : new Date().getFullYear());
+	let triggerEl = $state<HTMLElement | null>(null);
 
 	// The day that has keyboard focus within the calendar grid
 	let focusedDate = $state<Date>(startDate ?? new Date());
@@ -86,7 +87,12 @@
 		},
 		triggerId,
 		contentId,
-		triggerEl: null,
+		get triggerEl() {
+			return triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
 		show() {
 			if (!disabled) {
 				selecting = 'start';